Commit 6c073347 authored by Andrew Fontaine's avatar Andrew Fontaine Committed by Natalia Tepluhina

Migrate Feature Flags Props to Provides

New and edit need to be done at the same time due to their re-use of the
form component.

We can provide pretty much all props, as they are static and many are
needed much deeper in the component tree.
parent 4a437546
...@@ -15,32 +15,13 @@ export default { ...@@ -15,32 +15,13 @@ export default {
FeatureFlagForm, FeatureFlagForm,
}, },
mixins: [glFeatureFlagMixin()], mixins: [glFeatureFlagMixin()],
props: { inject: {
environmentsEndpoint: { showUserCallout: {},
type: String,
required: true,
},
projectId: {
type: String,
required: true,
},
featureFlagIssuesEndpoint: {
type: String,
required: true,
},
showUserCallout: {
type: Boolean,
required: true,
},
userCalloutId: { userCalloutId: {
default: '', default: '',
type: String,
required: false,
}, },
userCalloutsPath: { userCalloutsPath: {
default: '', default: '',
type: String,
required: false,
}, },
}, },
data() { data() {
...@@ -150,13 +131,10 @@ export default { ...@@ -150,13 +131,10 @@ export default {
<feature-flag-form <feature-flag-form
:name="name" :name="name"
:description="description" :description="description"
:project-id="projectId"
:scopes="scopes" :scopes="scopes"
:strategies="strategies" :strategies="strategies"
:cancel-path="path" :cancel-path="path"
:submit-text="__('Save changes')" :submit-text="__('Save changes')"
:environments-endpoint="environmentsEndpoint"
:feature-flag-issues-endpoint="featureFlagIssuesEndpoint"
:active="active" :active="active"
:version="version" :version="version"
@handleSubmit="data => updateFeatureFlag(data)" @handleSubmit="data => updateFeatureFlag(data)"
......
...@@ -32,10 +32,6 @@ export default { ...@@ -32,10 +32,6 @@ export default {
GlSearchBoxByType, GlSearchBoxByType,
}, },
props: { props: {
endpoint: {
type: String,
required: true,
},
value: { value: {
type: String, type: String,
required: false, required: false,
...@@ -57,6 +53,7 @@ export default { ...@@ -57,6 +53,7 @@ export default {
required: false, required: false,
}, },
}, },
inject: ['environmentsEndpoint'],
data() { data() {
return { return {
environmentSearch: this.value, environmentSearch: this.value,
...@@ -82,7 +79,7 @@ export default { ...@@ -82,7 +79,7 @@ export default {
this.isLoading = true; this.isLoading = true;
this.openSuggestions(); this.openSuggestions();
axios axios
.get(this.endpoint, { params: { query: this.environmentSearch } }) .get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
.then(({ data }) => { .then(({ data }) => {
this.results = data || []; this.results = data || [];
this.isLoading = false; this.isLoading = false;
......
...@@ -64,10 +64,6 @@ export default { ...@@ -64,10 +64,6 @@ export default {
required: false, required: false,
default: '', default: '',
}, },
projectId: {
type: String,
required: true,
},
scopes: { scopes: {
type: Array, type: Array,
required: false, required: false,
...@@ -81,15 +77,6 @@ export default { ...@@ -81,15 +77,6 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
environmentsEndpoint: {
type: String,
required: true,
},
featureFlagIssuesEndpoint: {
type: String,
required: false,
default: '',
},
strategies: { strategies: {
type: Array, type: Array,
required: false, required: false,
...@@ -101,6 +88,12 @@ export default { ...@@ -101,6 +88,12 @@ export default {
default: LEGACY_FLAG, default: LEGACY_FLAG,
}, },
}, },
inject: {
projectId: {},
featureFlagIssuesEndpoint: {
default: '',
},
},
translations: { translations: {
allEnvironmentsText: s__('FeatureFlags|* (All Environments)'), allEnvironmentsText: s__('FeatureFlags|* (All Environments)'),
...@@ -353,7 +346,6 @@ export default { ...@@ -353,7 +346,6 @@ export default {
:key="keyFor(strategy)" :key="keyFor(strategy)"
:strategy="strategy" :strategy="strategy"
:index="index" :index="index"
:endpoint="environmentsEndpoint"
:user-lists="userLists" :user-lists="userLists"
@change="onFormStrategyChange($event, index)" @change="onFormStrategyChange($event, index)"
@delete="deleteStrategy(strategy)" @delete="deleteStrategy(strategy)"
...@@ -411,7 +403,6 @@ export default { ...@@ -411,7 +403,6 @@ export default {
v-else v-else
class="col-12" class="col-12"
:value="scope.environmentScope" :value="scope.environmentScope"
:endpoint="environmentsEndpoint"
:disabled="!canUpdateScope(scope) || scope.environmentScope !== ''" :disabled="!canUpdateScope(scope) || scope.environmentScope !== ''"
@selectEnvironment="env => (scope.environmentScope = env)" @selectEnvironment="env => (scope.environmentScope = env)"
@createClicked="env => (scope.environmentScope = env)" @createClicked="env => (scope.environmentScope = env)"
...@@ -547,7 +538,6 @@ export default { ...@@ -547,7 +538,6 @@ export default {
<div class="table-mobile-content js-feature-flag-status"> <div class="table-mobile-content js-feature-flag-status">
<environments-dropdown <environments-dropdown
class="js-new-scope-name col-12" class="js-new-scope-name col-12"
:endpoint="environmentsEndpoint"
:value="newScope" :value="newScope"
@selectEnvironment="env => createNewScope({ environmentScope: env })" @selectEnvironment="env => createNewScope({ environmentScope: env })"
@createClicked="env => createNewScope({ environmentScope: env })" @createClicked="env => createNewScope({ environmentScope: env })"
......
...@@ -21,12 +21,7 @@ export default { ...@@ -21,12 +21,7 @@ export default {
GlIcon, GlIcon,
GlLoadingIcon, GlLoadingIcon,
}, },
props: { inject: ['environmentsEndpoint'],
endpoint: {
type: String,
required: true,
},
},
data() { data() {
return { return {
environmentSearch: '', environmentSearch: '',
...@@ -52,7 +47,7 @@ export default { ...@@ -52,7 +47,7 @@ export default {
fetchEnvironments: debounce(function debouncedFetchEnvironments() { fetchEnvironments: debounce(function debouncedFetchEnvironments() {
this.isLoading = true; this.isLoading = true;
axios axios
.get(this.endpoint, { params: { query: this.environmentSearch } }) .get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
.then(({ data }) => { .then(({ data }) => {
this.results = data || []; this.results = data || [];
}) })
......
...@@ -19,28 +19,13 @@ export default { ...@@ -19,28 +19,13 @@ export default {
FeatureFlagForm, FeatureFlagForm,
}, },
mixins: [featureFlagsMixin()], mixins: [featureFlagsMixin()],
props: { inject: {
environmentsEndpoint: { showUserCallout: {},
type: String,
required: true,
},
projectId: {
type: String,
required: true,
},
showUserCallout: {
type: Boolean,
required: true,
},
userCalloutId: { userCalloutId: {
default: '', default: '',
type: String,
required: false,
}, },
userCalloutsPath: { userCalloutsPath: {
default: '', default: '',
type: String,
required: false,
}, },
}, },
data() { data() {
...@@ -105,12 +90,10 @@ export default { ...@@ -105,12 +90,10 @@ export default {
</div> </div>
<feature-flag-form <feature-flag-form
:project-id="projectId"
:cancel-path="path" :cancel-path="path"
:submit-text="s__('FeatureFlags|Create feature flag')" :submit-text="s__('FeatureFlags|Create feature flag')"
:scopes="scopes" :scopes="scopes"
:strategies="strategies" :strategies="strategies"
:environments-endpoint="environmentsEndpoint"
:version="version" :version="version"
@handleSubmit="data => createFeatureFlag(data)" @handleSubmit="data => createFeatureFlag(data)"
/> />
......
...@@ -41,11 +41,6 @@ export default { ...@@ -41,11 +41,6 @@ export default {
type: Number, type: Number,
required: true, required: true,
}, },
endpoint: {
type: String,
required: false,
default: '',
},
userLists: { userLists: {
type: Array, type: Array,
required: false, required: false,
...@@ -182,7 +177,6 @@ export default { ...@@ -182,7 +177,6 @@ export default {
> >
<new-environments-dropdown <new-environments-dropdown
:id="environmentsDropdownId" :id="environmentsDropdownId"
:endpoint="endpoint"
class="gl-mr-3" class="gl-mr-3"
@add="addEnvironment" @add="addEnvironment"
/> />
......
...@@ -13,6 +13,12 @@ export default () => { ...@@ -13,6 +13,12 @@ export default () => {
strategyTypeDocsPagePath, strategyTypeDocsPagePath,
endpoint, endpoint,
featureFlagsPath, featureFlagsPath,
environmentsEndpoint,
projectId,
featureFlagIssuesEndpoint,
userCalloutsPath,
userCalloutId,
showUserCallout,
} = el.dataset; } = el.dataset;
return new Vue({ return new Vue({
...@@ -21,18 +27,15 @@ export default () => { ...@@ -21,18 +27,15 @@ export default () => {
provide: { provide: {
environmentsScopeDocsPath, environmentsScopeDocsPath,
strategyTypeDocsPagePath, strategyTypeDocsPagePath,
environmentsEndpoint,
projectId,
featureFlagIssuesEndpoint,
userCalloutsPath,
userCalloutId,
showUserCallout: parseBoolean(showUserCallout),
}, },
render(createElement) { render(createElement) {
return createElement(EditFeatureFlag, { return createElement(EditFeatureFlag);
props: {
environmentsEndpoint: el.dataset.environmentsEndpoint,
projectId: el.dataset.projectId,
featureFlagIssuesEndpoint: el.dataset.featureFlagIssuesEndpoint,
userCalloutsPath: el.dataset.userCalloutsPath,
userCalloutId: el.dataset.userCalloutId,
showUserCallout: parseBoolean(el.dataset.showUserCallout),
},
});
}, },
}); });
}; };
...@@ -13,6 +13,11 @@ export default () => { ...@@ -13,6 +13,11 @@ export default () => {
strategyTypeDocsPagePath, strategyTypeDocsPagePath,
endpoint, endpoint,
featureFlagsPath, featureFlagsPath,
environmentsEndpoint,
projectId,
userCalloutsPath,
userCalloutId,
showUserCallout,
} = el.dataset; } = el.dataset;
return new Vue({ return new Vue({
...@@ -21,17 +26,14 @@ export default () => { ...@@ -21,17 +26,14 @@ export default () => {
provide: { provide: {
environmentsScopeDocsPath, environmentsScopeDocsPath,
strategyTypeDocsPagePath, strategyTypeDocsPagePath,
environmentsEndpoint,
projectId,
userCalloutsPath,
userCalloutId,
showUserCallout: parseBoolean(showUserCallout),
}, },
render(createElement) { render(createElement) {
return createElement(NewFeatureFlag, { return createElement(NewFeatureFlag);
props: {
environmentsEndpoint: el.dataset.environmentsEndpoint,
projectId: el.dataset.projectId,
userCalloutsPath: el.dataset.userCalloutsPath,
userCalloutId: el.dataset.userCalloutId,
showUserCallout: parseBoolean(el.dataset.showUserCallout),
},
});
}, },
}); });
}; };
...@@ -32,21 +32,16 @@ describe('Edit feature flag form', () => { ...@@ -32,21 +32,16 @@ describe('Edit feature flag form', () => {
} }
wrapper = shallowMount(EditFeatureFlag, { wrapper = shallowMount(EditFeatureFlag, {
localVue, localVue,
propsData: { store,
environmentsEndpoint: 'environments.json', provide: {
projectId: '8',
featureFlagIssuesEndpoint: `${TEST_HOST}/feature_flags/5/issues`,
showUserCallout: true, showUserCallout: true,
userCalloutId, userCalloutId,
userCalloutsPath, userCalloutsPath,
},
store,
provide: {
glFeatures: { glFeatures: {
featureFlagsNewVersion: true, featureFlagsNewVersion: true,
}, },
...opts,
}, },
...opts,
}); });
}; };
...@@ -145,12 +140,6 @@ describe('Edit feature flag form', () => { ...@@ -145,12 +140,6 @@ describe('Edit feature flag form', () => {
}); });
}); });
it('renders the related issues widget', () => {
const expected = `${TEST_HOST}/feature_flags/5/issues`;
expect(wrapper.find(Form).props('featureFlagIssuesEndpoint')).toBe(expected);
});
it('should track when the toggle is clicked', () => { it('should track when the toggle is clicked', () => {
const toggle = wrapper.find(GlToggle); const toggle = wrapper.find(GlToggle);
const spy = mockTracking('_category_', toggle.element, jest.spyOn); const spy = mockTracking('_category_', toggle.element, jest.spyOn);
...@@ -164,7 +153,7 @@ describe('Edit feature flag form', () => { ...@@ -164,7 +153,7 @@ describe('Edit feature flag form', () => {
}); });
describe('without new version flags', () => { describe('without new version flags', () => {
beforeEach(() => factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } })); beforeEach(() => factory({ glFeatures: { featureFlagsNewVersion: false } }));
it('should alert users that feature flags are changing soon', () => { it('should alert users that feature flags are changing soon', () => {
expect(findAlert().text()).toBe(NEW_FLAG_ALERT); expect(findAlert().text()).toBe(NEW_FLAG_ALERT);
...@@ -173,7 +162,7 @@ describe('Edit feature flag form', () => { ...@@ -173,7 +162,7 @@ describe('Edit feature flag form', () => {
describe('dismissing new version alert', () => { describe('dismissing new version alert', () => {
beforeEach(() => { beforeEach(() => {
factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } }); factory({ glFeatures: { featureFlagsNewVersion: false } });
mock.onPost(userCalloutsPath, { feature_name: userCalloutId }).reply(200); mock.onPost(userCalloutsPath, { feature_name: userCalloutId }).reply(200);
findAlert().vm.$emit('dismiss'); findAlert().vm.$emit('dismiss');
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
......
...@@ -14,9 +14,11 @@ describe('Feature flags > Environments dropdown ', () => { ...@@ -14,9 +14,11 @@ describe('Feature flags > Environments dropdown ', () => {
const factory = props => { const factory = props => {
wrapper = shallowMount(EnvironmentsDropdown, { wrapper = shallowMount(EnvironmentsDropdown, {
propsData: { propsData: {
endpoint: `${TEST_HOST}/environments.json'`,
...props, ...props,
}, },
provide: {
environmentsEndpoint: `${TEST_HOST}/environments.json'`,
},
}); });
}; };
......
...@@ -24,18 +24,23 @@ describe('feature flag form', () => { ...@@ -24,18 +24,23 @@ describe('feature flag form', () => {
const requiredProps = { const requiredProps = {
cancelPath: 'feature_flags', cancelPath: 'feature_flags',
submitText: 'Create', submitText: 'Create',
};
const requiredInjections = {
environmentsEndpoint: '/environments.json', environmentsEndpoint: '/environments.json',
projectId: '1', projectId: '1',
glFeatures: {
featureFlagPermissions: true,
featureFlagsNewVersion: true,
},
}; };
const factory = (props = {}) => { const factory = (props = {}, provide = {}) => {
wrapper = shallowMount(Form, { wrapper = shallowMount(Form, {
propsData: props, propsData: { ...requiredProps, ...props },
provide: { provide: {
glFeatures: { ...requiredInjections,
featureFlagPermissions: true, ...provide,
featureFlagsNewVersion: true,
},
}, },
}); });
}; };
...@@ -67,10 +72,13 @@ describe('feature flag form', () => { ...@@ -67,10 +72,13 @@ describe('feature flag form', () => {
}); });
it('renders the related issues widget when the featureFlagIssuesEndpoint is provided', () => { it('renders the related issues widget when the featureFlagIssuesEndpoint is provided', () => {
factory({ factory(
...requiredProps, {},
featureFlagIssuesEndpoint: '/some/endpoint', {
}); ...requiredInjections,
featureFlagIssuesEndpoint: '/some/endpoint',
},
);
expect(wrapper.find(RelatedIssuesRoot).exists()).toBe(true); expect(wrapper.find(RelatedIssuesRoot).exists()).toBe(true);
}); });
......
...@@ -14,7 +14,9 @@ describe('New Environments Dropdown', () => { ...@@ -14,7 +14,9 @@ describe('New Environments Dropdown', () => {
beforeEach(() => { beforeEach(() => {
axiosMock = new MockAdapter(axios); axiosMock = new MockAdapter(axios);
wrapper = shallowMount(NewEnvironmentsDropdown, { propsData: { endpoint: TEST_HOST } }); wrapper = shallowMount(NewEnvironmentsDropdown, {
provide: { environmentsEndpoint: TEST_HOST },
});
}); });
afterEach(() => { afterEach(() => {
......
...@@ -35,20 +35,18 @@ describe('New feature flag form', () => { ...@@ -35,20 +35,18 @@ describe('New feature flag form', () => {
} }
wrapper = shallowMount(NewFeatureFlag, { wrapper = shallowMount(NewFeatureFlag, {
localVue, localVue,
propsData: { store,
environmentsEndpoint: 'environments.json', provide: {
projectId: '8',
showUserCallout: true, showUserCallout: true,
userCalloutId, userCalloutId,
userCalloutsPath, userCalloutsPath,
}, environmentsEndpoint: 'environments.json',
store, projectId: '8',
provide: {
glFeatures: { glFeatures: {
featureFlagsNewVersion: true, featureFlagsNewVersion: true,
}, },
...opts,
}, },
...opts,
}); });
}; };
...@@ -80,10 +78,6 @@ describe('New feature flag form', () => { ...@@ -80,10 +78,6 @@ describe('New feature flag form', () => {
expect(wrapper.find(Form).exists()).toEqual(true); expect(wrapper.find(Form).exists()).toEqual(true);
}); });
it('does not render the related issues widget', () => {
expect(wrapper.find(Form).props('featureFlagIssuesEndpoint')).toBe('');
});
it('should render default * row', () => { it('should render default * row', () => {
const defaultScope = { const defaultScope = {
id: expect.any(String), id: expect.any(String),
...@@ -102,10 +96,6 @@ describe('New feature flag form', () => { ...@@ -102,10 +96,6 @@ describe('New feature flag form', () => {
expect(wrapper.find(GlAlert).exists()).toBe(false); expect(wrapper.find(GlAlert).exists()).toBe(false);
}); });
it('should pass in the project ID', () => {
expect(wrapper.find(Form).props('projectId')).toBe('8');
});
it('has an all users strategy by default', () => { it('has an all users strategy by default', () => {
const strategies = wrapper.find(Form).props('strategies'); const strategies = wrapper.find(Form).props('strategies');
...@@ -113,7 +103,7 @@ describe('New feature flag form', () => { ...@@ -113,7 +103,7 @@ describe('New feature flag form', () => {
}); });
describe('without new version flags', () => { describe('without new version flags', () => {
beforeEach(() => factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } })); beforeEach(() => factory({ glFeatures: { featureFlagsNewVersion: false } }));
it('should alert users that feature flags are changing soon', () => { it('should alert users that feature flags are changing soon', () => {
expect(findAlert().text()).toBe(NEW_FLAG_ALERT); expect(findAlert().text()).toBe(NEW_FLAG_ALERT);
...@@ -126,7 +116,7 @@ describe('New feature flag form', () => { ...@@ -126,7 +116,7 @@ describe('New feature flag form', () => {
beforeEach(() => { beforeEach(() => {
mock = new MockAdapter(axios); mock = new MockAdapter(axios);
mock.onPost(userCalloutsPath, { feature_name: userCalloutId }).reply(200); mock.onPost(userCalloutsPath, { feature_name: userCalloutId }).reply(200);
factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } }); factory({ glFeatures: { featureFlagsNewVersion: false } });
findAlert().vm.$emit('dismiss'); findAlert().vm.$emit('dismiss');
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
}); });
......
...@@ -18,6 +18,7 @@ import { userList } from '../mock_data'; ...@@ -18,6 +18,7 @@ import { userList } from '../mock_data';
const provide = { const provide = {
strategyTypeDocsPagePath: 'link-to-strategy-docs', strategyTypeDocsPagePath: 'link-to-strategy-docs',
environmentsScopeDocsPath: 'link-scope-docs', environmentsScopeDocsPath: 'link-scope-docs',
environmentsEndpoint: '',
}; };
describe('Feature flags strategy', () => { describe('Feature flags strategy', () => {
...@@ -31,7 +32,6 @@ describe('Feature flags strategy', () => { ...@@ -31,7 +32,6 @@ describe('Feature flags strategy', () => {
propsData: { propsData: {
strategy: {}, strategy: {},
index: 0, index: 0,
endpoint: '',
userLists: [userList], userLists: [userList],
}, },
provide, provide,
...@@ -52,7 +52,7 @@ describe('Feature flags strategy', () => { ...@@ -52,7 +52,7 @@ describe('Feature flags strategy', () => {
}); });
describe('helper links', () => { describe('helper links', () => {
const propsData = { strategy: {}, index: 0, endpoint: '', userLists: [userList] }; const propsData = { strategy: {}, index: 0, userLists: [userList] };
factory({ propsData, provide }); factory({ propsData, provide });
it('should display 2 helper links', () => { it('should display 2 helper links', () => {
...@@ -76,7 +76,7 @@ describe('Feature flags strategy', () => { ...@@ -76,7 +76,7 @@ describe('Feature flags strategy', () => {
beforeEach(() => { beforeEach(() => {
strategy = { name, parameters: {}, scopes: [] }; strategy = { name, parameters: {}, scopes: [] };
propsData = { strategy, index: 0, endpoint: '' }; propsData = { strategy, index: 0 };
factory({ propsData, provide }); factory({ propsData, provide });
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
}); });
...@@ -102,7 +102,7 @@ describe('Feature flags strategy', () => { ...@@ -102,7 +102,7 @@ describe('Feature flags strategy', () => {
parameters: { percentage: '50', groupId: 'default' }, parameters: { percentage: '50', groupId: 'default' },
scopes: [{ environmentScope: 'production' }], scopes: [{ environmentScope: 'production' }],
}; };
const propsData = { strategy, index: 0, endpoint: '' }; const propsData = { strategy, index: 0 };
factory({ propsData, provide }); factory({ propsData, provide });
}); });
...@@ -123,7 +123,7 @@ describe('Feature flags strategy', () => { ...@@ -123,7 +123,7 @@ describe('Feature flags strategy', () => {
parameters: { percentage: '50', groupId: 'default' }, parameters: { percentage: '50', groupId: 'default' },
scopes: [{ environmentScope: 'production' }], scopes: [{ environmentScope: 'production' }],
}; };
const propsData = { strategy, index: 0, endpoint: '' }; const propsData = { strategy, index: 0 };
factory({ propsData, provide }); factory({ propsData, provide });
}); });
...@@ -152,7 +152,7 @@ describe('Feature flags strategy', () => { ...@@ -152,7 +152,7 @@ describe('Feature flags strategy', () => {
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID }, parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
scopes: [{ environmentScope: '*' }], scopes: [{ environmentScope: '*' }],
}; };
const propsData = { strategy, index: 0, endpoint: '' }; const propsData = { strategy, index: 0 };
factory({ propsData, provide }); factory({ propsData, provide });
}); });
...@@ -221,7 +221,7 @@ describe('Feature flags strategy', () => { ...@@ -221,7 +221,7 @@ describe('Feature flags strategy', () => {
parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID }, parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
scopes: [], scopes: [],
}; };
const propsData = { strategy, index: 0, endpoint: '' }; const propsData = { strategy, index: 0 };
factory({ propsData, provide }); factory({ propsData, provide });
}); });
......
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