diff options
Diffstat (limited to 'app/assets/javascripts/feature_flags/components')
4 files changed, 39 insertions, 8 deletions
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue index f0f42d19ea5..286b214b511 100644 --- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue +++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue @@ -4,6 +4,8 @@ import { __, s__, sprintf } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { labelForStrategy } from '../utils'; +import StrategyLabel from './strategy_label.vue'; + export default { i18n: { deleteLabel: __('Delete'), @@ -15,6 +17,7 @@ export default { GlButton, GlModal, GlToggle, + StrategyLabel, }, directives: { GlTooltip: GlTooltipDirective, @@ -166,14 +169,13 @@ export default { <div class="table-mobile-content d-flex flex-wrap justify-content-end justify-content-md-start js-feature-flag-environments" > - <gl-badge + <strategy-label v-for="strategy in featureFlag.strategies" :key="strategy.id" - data-testid="strategy-badge" - variant="info" - class="gl-mr-3 gl-mt-2 gl-white-space-normal gl-text-left gl-px-5" - >{{ strategyBadgeText(strategy) }}</gl-badge - > + data-testid="strategy-label" + class="w-100 gl-mr-3 gl-mt-2 gl-white-space-normal gl-text-left" + v-bind="strategyBadgeText(strategy)" + /> </div> </div> diff --git a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue index 1a470d74b59..0fde87dd0ba 100644 --- a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue +++ b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue @@ -90,10 +90,10 @@ export default { :id="inputId" :value="percentage" :state="isValid" - class="rollout-percentage gl-text-right gl-w-9" type="number" min="0" max="100" + size="xs" @input="onPercentageChange" /> <span class="ml-1">%</span> diff --git a/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue b/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue index 91e1b85d66e..0acb0d4366c 100644 --- a/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue +++ b/app/assets/javascripts/feature_flags/components/strategies/percent_rollout.vue @@ -56,10 +56,10 @@ export default { :id="inputId" :value="percentage" :state="isValid" - class="rollout-percentage gl-text-right gl-w-9" type="number" min="0" max="100" + size="xs" @input="onPercentageChange" /> <span class="gl-ml-2">%</span> diff --git a/app/assets/javascripts/feature_flags/components/strategy_label.vue b/app/assets/javascripts/feature_flags/components/strategy_label.vue new file mode 100644 index 00000000000..c2d3ec5708f --- /dev/null +++ b/app/assets/javascripts/feature_flags/components/strategy_label.vue @@ -0,0 +1,29 @@ +<script> +export default { + props: { + name: { + type: String, + required: true, + }, + scopes: { + type: String, + required: false, + default: null, + }, + parameters: { + type: String, + required: false, + default: null, + }, + }, +}; +</script> +<template> + <div> + <strong class="gl-fw-bold" + >{{ name }}<span v-if="parameters"> - {{ parameters }}</span + >:</strong + > + <span v-if="scopes">{{ scopes }}</span> + </div> +</template> |