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.

app/assets/javascripts/feature_flags/components/edit_feature_flag.vue

@@ -15,32 +15,13 @@ export default {
     FeatureFlagForm,
   },
   mixins: [glFeatureFlagMixin()],
-  props: {
-    environmentsEndpoint: {
-      type: String,
-      required: true,
-    },
-    projectId: {
-      type: String,
-      required: true,
-    },
-    featureFlagIssuesEndpoint: {
-      type: String,
-      required: true,
-    },
-    showUserCallout: {
-      type: Boolean,
-      required: true,
-    },
+  inject: {
+    showUserCallout: {},
     userCalloutId: {
       default: '',
-      type: String,
-      required: false,
     },
     userCalloutsPath: {
       default: '',
-      type: String,
-      required: false,
     },
   },
   data() {
@@ -150,13 +131,10 @@ export default {
       <feature-flag-form
         :name="name"
         :description="description"
-        :project-id="projectId"
         :scopes="scopes"
         :strategies="strategies"
         :cancel-path="path"
         :submit-text="__('Save changes')"
-        :environments-endpoint="environmentsEndpoint"
-        :feature-flag-issues-endpoint="featureFlagIssuesEndpoint"
         :active="active"
         :version="version"
         @handleSubmit="data => updateFeatureFlag(data)"

app/assets/javascripts/feature_flags/components/environments_dropdown.vue

@@ -32,10 +32,6 @@ export default {
     GlSearchBoxByType,
   },
   props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
     value: {
       type: String,
       required: false,
@@ -57,6 +53,7 @@ export default {
       required: false,
     },
   },
+  inject: ['environmentsEndpoint'],
   data() {
     return {
       environmentSearch: this.value,
@@ -82,7 +79,7 @@ export default {
       this.isLoading = true;
       this.openSuggestions();
       axios
-        .get(this.endpoint, { params: { query: this.environmentSearch } })
+        .get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
         .then(({ data }) => {
           this.results = data || [];
           this.isLoading = false;

app/assets/javascripts/feature_flags/components/form.vue

@@ -64,10 +64,6 @@ export default {
       required: false,
       default: '',
     },
-    projectId: {
-      type: String,
-      required: true,
-    },
     scopes: {
       type: Array,
       required: false,
@@ -81,15 +77,6 @@ export default {
       type: String,
       required: true,
     },
-    environmentsEndpoint: {
-      type: String,
-      required: true,
-    },
-    featureFlagIssuesEndpoint: {
-      type: String,
-      required: false,
-      default: '',
-    },
     strategies: {
       type: Array,
       required: false,
@@ -101,6 +88,12 @@ export default {
       default: LEGACY_FLAG,
     },
   },
+  inject: {
+    projectId: {},
+    featureFlagIssuesEndpoint: {
+      default: '',
+    },
+  },
   translations: {
     allEnvironmentsText: s__('FeatureFlags|* (All Environments)'),
 
@@ -353,7 +346,6 @@ export default {
             :key="keyFor(strategy)"
             :strategy="strategy"
             :index="index"
-            :endpoint="environmentsEndpoint"
             :user-lists="userLists"
             @change="onFormStrategyChange($event, index)"
             @delete="deleteStrategy(strategy)"
@@ -411,7 +403,6 @@ export default {
                     v-else
                     class="col-12"
                     :value="scope.environmentScope"
-                    :endpoint="environmentsEndpoint"
                     :disabled="!canUpdateScope(scope) || scope.environmentScope !== ''"
                     @selectEnvironment="env => (scope.environmentScope = env)"
                     @createClicked="env => (scope.environmentScope = env)"
@@ -547,7 +538,6 @@ export default {
                 <div class="table-mobile-content js-feature-flag-status">
                   <environments-dropdown
                     class="js-new-scope-name col-12"
-                    :endpoint="environmentsEndpoint"
                     :value="newScope"
                     @selectEnvironment="env => createNewScope({ environmentScope: env })"
                     @createClicked="env => createNewScope({ environmentScope: env })"

app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue

@@ -21,12 +21,7 @@ export default {
     GlIcon,
     GlLoadingIcon,
   },
-  props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['environmentsEndpoint'],
   data() {
     return {
       environmentSearch: '',
@@ -52,7 +47,7 @@ export default {
     fetchEnvironments: debounce(function debouncedFetchEnvironments() {
       this.isLoading = true;
       axios
-        .get(this.endpoint, { params: { query: this.environmentSearch } })
+        .get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
         .then(({ data }) => {
           this.results = data || [];
         })

app/assets/javascripts/feature_flags/components/new_feature_flag.vue

@@ -19,28 +19,13 @@ export default {
     FeatureFlagForm,
   },
   mixins: [featureFlagsMixin()],
-  props: {
-    environmentsEndpoint: {
-      type: String,
-      required: true,
-    },
-    projectId: {
-      type: String,
-      required: true,
-    },
-    showUserCallout: {
-      type: Boolean,
-      required: true,
-    },
+  inject: {
+    showUserCallout: {},
     userCalloutId: {
       default: '',
-      type: String,
-      required: false,
     },
     userCalloutsPath: {
       default: '',
-      type: String,
-      required: false,
     },
   },
   data() {
@@ -105,12 +90,10 @@ export default {
     </div>
 
     <feature-flag-form
-      :project-id="projectId"
       :cancel-path="path"
       :submit-text="s__('FeatureFlags|Create feature flag')"
       :scopes="scopes"
       :strategies="strategies"
-      :environments-endpoint="environmentsEndpoint"
       :version="version"
       @handleSubmit="data => createFeatureFlag(data)"
     />

app/assets/javascripts/feature_flags/components/strategy.vue

@@ -41,11 +41,6 @@ export default {
       type: Number,
       required: true,
     },
-    endpoint: {
-      type: String,
-      required: false,
-      default: '',
-    },
     userLists: {
       type: Array,
       required: false,
@@ -182,7 +177,6 @@ export default {
         >
           <new-environments-dropdown
             :id="environmentsDropdownId"
-            :endpoint="endpoint"
             class="gl-mr-3"
             @add="addEnvironment"
           />

app/assets/javascripts/feature_flags/edit.js

@@ -13,6 +13,12 @@ export default () => {
     strategyTypeDocsPagePath,
     endpoint,
     featureFlagsPath,
+    environmentsEndpoint,
+    projectId,
+    featureFlagIssuesEndpoint,
+    userCalloutsPath,
+    userCalloutId,
+    showUserCallout,
   } = el.dataset;
 
   return new Vue({
@@ -21,18 +27,15 @@ export default () => {
     provide: {
       environmentsScopeDocsPath,
       strategyTypeDocsPagePath,
+      environmentsEndpoint,
+      projectId,
+      featureFlagIssuesEndpoint,
+      userCalloutsPath,
+      userCalloutId,
+      showUserCallout: parseBoolean(showUserCallout),
     },
     render(createElement) {
-      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),
-        },
-      });
+      return createElement(EditFeatureFlag);
     },
   });
 };

app/assets/javascripts/feature_flags/new.js

@@ -13,6 +13,11 @@ export default () => {
     strategyTypeDocsPagePath,
     endpoint,
     featureFlagsPath,
+    environmentsEndpoint,
+    projectId,
+    userCalloutsPath,
+    userCalloutId,
+    showUserCallout,
   } = el.dataset;
 
   return new Vue({
@@ -21,17 +26,14 @@ export default () => {
     provide: {
       environmentsScopeDocsPath,
       strategyTypeDocsPagePath,
+      environmentsEndpoint,
+      projectId,
+      userCalloutsPath,
+      userCalloutId,
+      showUserCallout: parseBoolean(showUserCallout),
     },
     render(createElement) {
-      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),
-        },
-      });
+      return createElement(NewFeatureFlag);
     },
   });
 };

spec/frontend/feature_flags/components/edit_feature_flag_spec.js

@@ -32,21 +32,16 @@ describe('Edit feature flag form', () => {
     }
     wrapper = shallowMount(EditFeatureFlag, {
       localVue,
-      propsData: {
-        environmentsEndpoint: 'environments.json',
-        projectId: '8',
-        featureFlagIssuesEndpoint: `${TEST_HOST}/feature_flags/5/issues`,
+      store,
+      provide: {
         showUserCallout: true,
         userCalloutId,
         userCalloutsPath,
-      },
-      store,
-      provide: {
         glFeatures: {
           featureFlagsNewVersion: true,
         },
+        ...opts,
       },
-      ...opts,
     });
   };
 
@@ -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', () => {
       const toggle = wrapper.find(GlToggle);
       const spy = mockTracking('_category_', toggle.element, jest.spyOn);
@@ -164,7 +153,7 @@ describe('Edit feature flag form', () => {
   });
 
   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', () => {
       expect(findAlert().text()).toBe(NEW_FLAG_ALERT);
@@ -173,7 +162,7 @@ describe('Edit feature flag form', () => {
 
   describe('dismissing new version alert', () => {
     beforeEach(() => {
-      factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } });
+      factory({ glFeatures: { featureFlagsNewVersion: false } });
       mock.onPost(userCalloutsPath, { feature_name: userCalloutId }).reply(200);
       findAlert().vm.$emit('dismiss');
       return wrapper.vm.$nextTick();

spec/frontend/feature_flags/components/environments_dropdown_spec.js

@@ -14,9 +14,11 @@ describe('Feature flags > Environments dropdown ', () => {
   const factory = props => {
     wrapper = shallowMount(EnvironmentsDropdown, {
       propsData: {
-        endpoint: `${TEST_HOST}/environments.json'`,
         ...props,
       },
+      provide: {
+        environmentsEndpoint: `${TEST_HOST}/environments.json'`,
+      },
     });
   };
 

spec/frontend/feature_flags/components/form_spec.js

@@ -24,18 +24,23 @@ describe('feature flag form', () => {
   const requiredProps = {
     cancelPath: 'feature_flags',
     submitText: 'Create',
+  };
+
+  const requiredInjections = {
     environmentsEndpoint: '/environments.json',
     projectId: '1',
+    glFeatures: {
+      featureFlagPermissions: true,
+      featureFlagsNewVersion: true,
+    },
   };
 
-  const factory = (props = {}) => {
+  const factory = (props = {}, provide = {}) => {
     wrapper = shallowMount(Form, {
-      propsData: props,
+      propsData: { ...requiredProps, ...props },
       provide: {
-        glFeatures: {
-          featureFlagPermissions: true,
-          featureFlagsNewVersion: true,
-        },
+        ...requiredInjections,
+        ...provide,
       },
     });
   };
@@ -67,10 +72,13 @@ describe('feature flag form', () => {
   });
 
   it('renders the related issues widget when the featureFlagIssuesEndpoint is provided', () => {
-    factory({
-      ...requiredProps,
-      featureFlagIssuesEndpoint: '/some/endpoint',
-    });
+    factory(
+      {},
+      {
+        ...requiredInjections,
+        featureFlagIssuesEndpoint: '/some/endpoint',
+      },
+    );
 
     expect(wrapper.find(RelatedIssuesRoot).exists()).toBe(true);
   });

spec/frontend/feature_flags/components/new_environments_dropdown_spec.js

@@ -14,7 +14,9 @@ describe('New Environments Dropdown', () => {
 
   beforeEach(() => {
     axiosMock = new MockAdapter(axios);
-    wrapper = shallowMount(NewEnvironmentsDropdown, { propsData: { endpoint: TEST_HOST } });
+    wrapper = shallowMount(NewEnvironmentsDropdown, {
+      provide: { environmentsEndpoint: TEST_HOST },
+    });
   });
 
   afterEach(() => {

spec/frontend/feature_flags/components/new_feature_flag_spec.js

@@ -35,20 +35,18 @@ describe('New feature flag form', () => {
     }
     wrapper = shallowMount(NewFeatureFlag, {
       localVue,
-      propsData: {
-        environmentsEndpoint: 'environments.json',
-        projectId: '8',
+      store,
+      provide: {
         showUserCallout: true,
         userCalloutId,
         userCalloutsPath,
-      },
-      store,
-      provide: {
+        environmentsEndpoint: 'environments.json',
+        projectId: '8',
         glFeatures: {
           featureFlagsNewVersion: true,
         },
+        ...opts,
       },
-      ...opts,
     });
   };
 
@@ -80,10 +78,6 @@ describe('New feature flag form', () => {
     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', () => {
     const defaultScope = {
       id: expect.any(String),
@@ -102,10 +96,6 @@ describe('New feature flag form', () => {
     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', () => {
     const strategies = wrapper.find(Form).props('strategies');
 
@@ -113,7 +103,7 @@ describe('New feature flag form', () => {
   });
 
   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', () => {
       expect(findAlert().text()).toBe(NEW_FLAG_ALERT);
@@ -126,7 +116,7 @@ describe('New feature flag form', () => {
     beforeEach(() => {
       mock = new MockAdapter(axios);
       mock.onPost(userCalloutsPath, { feature_name: userCalloutId }).reply(200);
-      factory({ provide: { glFeatures: { featureFlagsNewVersion: false } } });
+      factory({ glFeatures: { featureFlagsNewVersion: false } });
       findAlert().vm.$emit('dismiss');
       return wrapper.vm.$nextTick();
     });

spec/frontend/feature_flags/components/strategy_spec.js

@@ -18,6 +18,7 @@ import { userList } from '../mock_data';
 const provide = {
   strategyTypeDocsPagePath: 'link-to-strategy-docs',
   environmentsScopeDocsPath: 'link-scope-docs',
+  environmentsEndpoint: '',
 };
 
 describe('Feature flags strategy', () => {
@@ -31,7 +32,6 @@ describe('Feature flags strategy', () => {
       propsData: {
         strategy: {},
         index: 0,
-        endpoint: '',
         userLists: [userList],
       },
       provide,
@@ -52,7 +52,7 @@ describe('Feature flags strategy', () => {
   });
 
   describe('helper links', () => {
-    const propsData = { strategy: {}, index: 0, endpoint: '', userLists: [userList] };
+    const propsData = { strategy: {}, index: 0, userLists: [userList] };
     factory({ propsData, provide });
 
     it('should display 2 helper links', () => {
@@ -76,7 +76,7 @@ describe('Feature flags strategy', () => {
 
     beforeEach(() => {
       strategy = { name, parameters: {}, scopes: [] };
-      propsData = { strategy, index: 0, endpoint: '' };
+      propsData = { strategy, index: 0 };
       factory({ propsData, provide });
       return wrapper.vm.$nextTick();
     });
@@ -102,7 +102,7 @@ describe('Feature flags strategy', () => {
         parameters: { percentage: '50', groupId: 'default' },
         scopes: [{ environmentScope: 'production' }],
       };
-      const propsData = { strategy, index: 0, endpoint: '' };
+      const propsData = { strategy, index: 0 };
       factory({ propsData, provide });
     });
 
@@ -123,7 +123,7 @@ describe('Feature flags strategy', () => {
           parameters: { percentage: '50', groupId: 'default' },
           scopes: [{ environmentScope: 'production' }],
         };
-        const propsData = { strategy, index: 0, endpoint: '' };
+        const propsData = { strategy, index: 0 };
         factory({ propsData, provide });
       });
 
@@ -152,7 +152,7 @@ describe('Feature flags strategy', () => {
           parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
           scopes: [{ environmentScope: '*' }],
         };
-        const propsData = { strategy, index: 0, endpoint: '' };
+        const propsData = { strategy, index: 0 };
         factory({ propsData, provide });
       });
 
@@ -221,7 +221,7 @@ describe('Feature flags strategy', () => {
           parameters: { percentage: '50', groupId: PERCENT_ROLLOUT_GROUP_ID },
           scopes: [],
         };
-        const propsData = { strategy, index: 0, endpoint: '' };
+        const propsData = { strategy, index: 0 };
         factory({ propsData, provide });
       });