Use new Feature Flags Plugin to Access in FF Form

No more accessing the global object!

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

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import _ from 'underscore';
 import { GlButton, GlBadge, GlTooltip, GlTooltipDirective } from '@gitlab/ui';
 import { s__, sprintf } 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';
@@ -28,6 +29,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [featureFlagsMixin()],
   props: {
     name: {
       type: String,
@@ -98,7 +100,7 @@ export default {
       return !this.permissionsFlag || (this.formScopes || []).every(scope => scope.canUpdate);
     },
     permissionsFlag() {
-      return gon && gon.features && gon.features.featureFlagPermissions;
+      return this.glFeatures.featureFlagPermissions;
     },
 
     userIds() {
@@ -137,7 +139,7 @@ export default {
      * be used override the default scope options
      */
     createNewScope(overrides) {
-      this.formScopes.push(createNewEnvironmentScope(overrides));
+      this.formScopes.push(createNewEnvironmentScope(overrides, this.permissionsFlag));
       this.newScope = '';
     },
 

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

@@ -4,6 +4,8 @@ import store from '../store/index';
 import FeatureFlagForm from './form.vue';
 import { createNewEnvironmentScope } from '../store/modules/helpers';
 
+import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
 const { mapState, mapActions } = createNamespacedHelpers('new');
 
 export default {
@@ -11,6 +13,7 @@ export default {
   components: {
     FeatureFlagForm,
   },
+  mixins: [featureFlagsMixin()],
   props: {
     endpoint: {
       type: String,
@@ -29,10 +32,13 @@ export default {
     ...mapState(['error']),
     scopes() {
       return [
-        createNewEnvironmentScope({
-          environmentScope: '*',
-          active: true,
-        }),
+        createNewEnvironmentScope(
+          {
+            environmentScope: '*',
+            active: true,
+          },
+          this.glFeatures.featureFlagsPermissions,
+        ),
       ];
     },
   },

ee/app/assets/javascripts/feature_flags/store/modules/helpers.js

@@ -106,7 +106,7 @@ export const mapFromScopesViewModel = params => {
  * property values will be used to override the default values.
  *
  */
-export const createNewEnvironmentScope = (overrides = {}) => {
+export const createNewEnvironmentScope = (overrides = {}, featureFlagPermissions = false) => {
   const defaultScope = {
     environmentScope: '',
     active: false,
@@ -121,7 +121,7 @@ export const createNewEnvironmentScope = (overrides = {}) => {
     ...overrides,
   };
 
-  if (gon && gon.features && gon.features.featureFlagPermissions) {
+  if (featureFlagPermissions) {
     newScope.canUpdate = true;
     newScope.protected = false;
   }

ee/spec/frontend/feature_flags/store/helpers_spec.js

@@ -206,5 +206,14 @@ describe('feature flags helpers spec', () => {
 
       expect(actual).toEqual(expected);
     });
+
+    it('sets canUpdate and protected when called with featureFlagPermissions=true', () => {
+      expect(createNewEnvironmentScope({}, true)).toEqual(
+        expect.objectContaining({
+          canUpdate: true,
+          protected: false,
+        }),
+      );
+    });
   });
 });

ee/spec/javascripts/feature_flags/components/form_spec.js

@@ -25,18 +25,13 @@ describe('feature flag form', () => {
     wrapper = mount(localVue.extend(Form), {
       localVue,
       propsData: props,
+      provide: {
+        glFeatures: { featureFlagPermissions: true },
+      },
       sync: false,
     });
   };
 
-  beforeAll(() => {
-    gon.features = { featureFlagPermissions: true };
-  });
-
-  afterAll(() => {
-    gon.features = null;
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });