Skip to content

G
gitlab-ce
Commit e618f5e8 authored by Andrew Fontaine's avatar Andrew Fontaine
Browse files
Options

Integrate New Feature Flag Form with New API 

This allows the creation of new-style feature flags with strategies,
hidden behind the `:feature_flags_new_version`
parent 919fd2dc
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 21 deletions
ee/app/assets/javascripts/feature_flags/components/form.vue
View file @ e618f5e8
<script>
import Vue from 'vue';
import { memoize, isString } from 'lodash';
import { memoize, isString, cloneDeep } from 'lodash';
import {
GlButton,
GlBadge,
......@@ -8,18 +8,22 @@ import {
GlTooltipDirective,
GlFormTextarea,
GlFormCheckbox,
GlSprintf,
} from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { s__ } from '~/locale';
import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import ToggleButton from '~/vue_shared/components/toggle_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
import EnvironmentsDropdown from './environments_dropdown.vue';
import Strategy from './strategy.vue';
import {
ROLLOUT_STRATEGY_ALL_USERS,
ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
ROLLOUT_STRATEGY_USER_ID,
ALL_ENVIRONMENTS_NAME,
INTERNAL_ID_PREFIX,
NEW_VERSION_FLAG,
LEGACY_FLAG,
} from '../constants';
import { createNewEnvironmentScope } from '../store/modules/helpers';
......@@ -30,9 +34,11 @@ export default {
GlFormTextarea,
GlFormCheckbox,
GlTooltip,
GlSprintf,
ToggleButton,
Icon,
EnvironmentsDropdown,
Strategy,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -71,22 +77,29 @@ export default {
type: String,
required: true,
},
strategies: {
type: Array,
required: false,
default: () => [],
},
version: {
type: String,
required: false,
default: LEGACY_FLAG,
},
},
translations: {
allEnvironmentsText: s__('FeatureFlags|* (All Environments)'),
helpText: sprintf(
s__(
helpText: s__(
'FeatureFlags|Feature Flag behavior is built up by creating a set of rules to define the status of target environments. A default wildcard rule %{codeStart}*%{codeEnd} for %{boldStart}All Environments%{boldEnd} is set, and you are able to add as many rules as you need by choosing environment specs below. You can toggle the behavior for each of your rules to set them %{boldStart}Active%{boldEnd} or %{boldStart}Inactive%{boldEnd}.',
),
{
codeStart: '<code>',
codeEnd: '</code>',
boldStart: '<b>',
boldEnd: '</b>',
},
false,
newHelpText: s__(
'FeatureFlags|Enable features for specific users and specific environments by defining feature flag strategies. By default, features are available to all users in all environments.',
),
noStrategiesText: s__('FeatureFlags|Feature Flag has no strategies'),
},
ROLLOUT_STRATEGY_ALL_USERS,
ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
......@@ -102,6 +115,7 @@ export default {
// operate on a clone to avoid mutating props
formScopes: this.scopes.map(s => ({ ...s })),
formStrategies: cloneDeep(this.strategies),
newScope: '',
};
......@@ -110,14 +124,36 @@ export default {
filteredScopes() {
return this.formScopes.filter(scope => !scope.shouldBeDestroyed);
},
filteredStrategies() {
return this.formStrategies.filter(s => !s.shouldBeDestroyed);
},
canUpdateFlag() {
return !this.permissionsFlag || (this.formScopes || []).every(scope => scope.canUpdate);
},
permissionsFlag() {
return this.glFeatures.featureFlagPermissions;
},
supportsStrategies() {
return this.glFeatures.featureFlagsNewVersion && this.version === NEW_VERSION_FLAG;
},
canDeleteStrategy() {
return this.formStrategies.length > 1;
},
},
methods: {
addStrategy() {
this.formStrategies.push({ name: '', parameters: {}, scopes: [] });
},
deleteStrategy(s) {
if (s.id) {
Vue.set(s, 'shouldBeDestroyed', true);
} else {
this.formStrategies = this.formStrategies.filter(strategy => strategy !== s);
}
},
isAllEnvironment(name) {
return name === ALL_ENVIRONMENTS_NAME;
},
......@@ -157,12 +193,20 @@ export default {
* it triggers an event with the form data
*/
handleSubmit() {
this.$emit('handleSubmit', {
const flag = {
name: this.formName,
description: this.formDescription,
scopes: this.formScopes,
active: this.active,
});
version: this.version,
};
if (this.version === LEGACY_FLAG) {
flag.scopes = this.formScopes;
} else {
flag.strategies = this.formStrategies;
}
this.$emit('handleSubmit', flag);
},
canUpdateScope(scope) {
......@@ -208,6 +252,14 @@ export default {
scope.rolloutUserIds.length > 0 &&
scope.rolloutStrategy === ROLLOUT_STRATEGY_PERCENT_ROLLOUT;
},
onFormStrategyChange({ id, name, parameters, scopes }, index) {
Object.assign(this.filteredStrategies[index], {
id,
name,
parameters,
scopes,
});
},
},
};
</script>
......@@ -241,10 +293,46 @@ export default {
</div>
</div>
<template v-if="supportsStrategies">
<div class="row">
<div class="col-md-12">
<h4>{{ s__('FeatureFlags|Strategies') }}</h4>
<div class="flex align-items-baseline justify-content-between">
<p class="mr-3">{{ $options.translations.newHelpText }}</p>
<gl-button variant="success" category="secondary" @click="addStrategy">
{{ s__('FeatureFlags|Add strategy') }}
</gl-button>
</div>
</div>
</div>
<template v-if="filteredStrategies.length > 0">
<strategy
v-for="(strategy, index) in filteredStrategies"
:key="strategy.id"
:strategy="strategy"
:index="index"
:endpoint="environmentsEndpoint"
:can-delete="canDeleteStrategy"
@change="onFormStrategyChange($event, index)"
@delete="deleteStrategy(strategy)"
/>
</template>
<div v-else class="flex justify-content-center border-top py-4 w-100">
<span>{{ $options.translations.noStrategiesText }}</span>
</div>
</template>
<div v-else class="row">
<div class="form-group col-md-12">
<h4>{{ s__('FeatureFlags|Target environments') }}</h4>
<div v-html="$options.helpText"></div>
<gl-sprintf :message="$options.translations.helpText">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
<template #bold="{ content }">
<b>{{ content }}</b>
</template>
</gl-sprintf>
<div class="js-scopes-table prepend-top-default">
<div class="gl-responsive-table-row table-row-header" role="row">
......@@ -274,7 +362,7 @@ export default {
class="table-mobile-content js-feature-flag-status d-flex align-items-center justify-content-start"
>
<p v-if="isAllEnvironment(scope.environmentScope)" class="js-scope-all pl-3">
{{ $options.allEnvironmentsText }}
{{ $options.translations.allEnvironmentsText }}
</p>
<environments-dropdown
......
ee/app/assets/javascripts/feature_flags/components/new_feature_flag.vue
View file @ e618f5e8
......@@ -2,6 +2,7 @@
import { createNamespacedHelpers } from 'vuex';
import store from '../store/index';
import FeatureFlagForm from './form.vue';
import { LEGACY_FLAG, NEW_VERSION_FLAG } from '../constants';
import { createNewEnvironmentScope } from '../store/modules/helpers';
import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -41,6 +42,12 @@ export default {
),
];
},
version() {
return this.glFeatures.featureFlagsNewVersion ? NEW_VERSION_FLAG : LEGACY_FLAG;
},
strategies() {
return [{ name: '', parameters: {}, scopes: [] }];
},
},
created() {
this.setEndpoint(this.endpoint);
......@@ -63,7 +70,9 @@ export default {
:cancel-path="path"
:submit-text="s__('FeatureFlags|Create feature flag')"
:scopes="scopes"
:strategies="strategies"
:environments-endpoint="environmentsEndpoint"
:version="version"
@handleSubmit="data => createFeatureFlag(data)"
/>
</div>
......
ee/app/controllers/projects/feature_flags_controller.rb
View file @ e618f5e8
......@@ -12,6 +12,7 @@ class Projects::FeatureFlagsController < Projects::ApplicationController
before_action do
push_frontend_feature_flag(:feature_flag_permissions)
push_frontend_feature_flag(:feature_flags_new_version, project)
end
def index
......
ee/spec/features/projects/feature_flags/user_creates_feature_flag_spec.rb
View file @ e618f5e8
......@@ -12,6 +12,7 @@ describe 'User creates feature flag', :js do
project.add_developer(user)
stub_licensed_features(feature_flags: true)
stub_feature_flags(feature_flag_permissions: false)
stub_feature_flags(feature_flags_new_version: false)
sign_in(user)
end
......
ee/spec/frontend/feature_flags/components/form_spec.js
View file @ e618f5e8
import _ from 'underscore';
import { shallowMount } from '@vue/test-utils';
import { GlFormTextarea, GlFormCheckbox } from '@gitlab/ui';
import { GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui';
import Form from 'ee/feature_flags/components/form.vue';
import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
import Strategy from 'ee/feature_flags/components/strategy.vue';
import {
ROLLOUT_STRATEGY_ALL_USERS,
ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
INTERNAL_ID_PREFIX,
DEFAULT_PERCENT_ROLLOUT,
LEGACY_FLAG,
NEW_VERSION_FLAG,
} from 'ee/feature_flags/constants';
import ToggleButton from '~/vue_shared/components/toggle_button.vue';
import { featureFlag } from '../mock_data';
......@@ -26,6 +29,7 @@ describe('feature flag form', () => {
provide: {
glFeatures: {
featureFlagPermissions: true,
featureFlagsNewVersion: true,
},
},
});
......@@ -100,6 +104,7 @@ describe('feature flag form', () => {
name: featureFlag.name,
description: featureFlag.description,
active: true,
version: LEGACY_FLAG,
scopes: [
{
id: 1,
......@@ -380,4 +385,60 @@ describe('feature flag form', () => {
});
});
});
describe('with strategies', () => {
beforeEach(() => {
factory({
...requiredProps,
name: featureFlag.name,
description: featureFlag.description,
active: true,
version: NEW_VERSION_FLAG,
strategies: [
{
type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
paramters: { percentage: '30' },
scopes: [],
},
{
type: ROLLOUT_STRATEGY_ALL_USERS,
paramters: {},
scopes: [{ environment_scope: 'review/*' }],
},
],
});
});
it('should show the strategy component', () => {
const strategy = wrapper.find(Strategy);
expect(strategy.exists()).toBe(true);
expect(strategy.props('strategy')).toEqual({
type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
paramters: { percentage: '30' },
scopes: [],
});
});
it('should show one strategy component per strategy', () => {
expect(wrapper.findAll(Strategy)).toHaveLength(2);
});
it('should add a strategy when clicking the Add button', () => {
wrapper.find(GlButton).vm.$emit('click');
return wrapper.vm.$nextTick().then(() => expect(wrapper.findAll(Strategy)).toHaveLength(3));
});
it('should remove a strategy on delete', () => {
const strategy = {
type: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
paramters: { percentage: '30' },
scopes: [],
};
wrapper.find(Strategy).vm.$emit('delete');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(Strategy)).toHaveLength(1);
expect(wrapper.find(Strategy).props('strategy')).not.toEqual(strategy);
});
});
});
});
locale/gitlab.pot
View file @ e618f5e8
......@@ -8675,6 +8675,9 @@ msgstr ""
msgid "FeatureFlags|Active"
msgstr ""
msgid "FeatureFlags|Add strategy"
msgstr ""
msgid "FeatureFlags|All users"
msgstr ""
......@@ -8699,6 +8702,9 @@ msgstr ""
msgid "FeatureFlags|Edit Feature Flag"
msgstr ""
msgid "FeatureFlags|Enable features for specific users and specific environments by defining feature flag strategies. By default, features are available to all users in all environments."
msgstr ""
msgid "FeatureFlags|Environment Spec"
msgstr ""
......@@ -8711,6 +8717,9 @@ msgstr ""
msgid "FeatureFlags|Feature Flag behavior is built up by creating a set of rules to define the status of target environments. A default wildcard rule %{codeStart}*%{codeEnd} for %{boldStart}All Environments%{boldEnd} is set, and you are able to add as many rules as you need by choosing environment specs below. You can toggle the behavior for each of your rules to set them %{boldStart}Active%{boldEnd} or %{boldStart}Inactive%{boldEnd}."
msgstr ""
msgid "FeatureFlags|Feature Flag has no strategies"
msgstr ""
msgid "FeatureFlags|Feature Flags"
msgstr ""
......@@ -8780,6 +8789,9 @@ msgstr ""
msgid "FeatureFlags|Status"
msgstr ""
msgid "FeatureFlags|Strategies"
msgstr ""
msgid "FeatureFlags|Target environments"
msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7