Allow the Feature Flag Form to Check if Active

The Feature Flag form will disable all inputs if the flag is not active,
and vice versa.

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

@@ -41,6 +41,11 @@ export default {
   },
   mixins: [featureFlagsMixin()],
   props: {
+    active: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     name: {
       type: String,
       required: false,
@@ -165,6 +170,7 @@ export default {
         name: this.formName,
         description: this.formDescription,
         scopes: this.formScopes,
+        active: this.active,
       });
     },
 
@@ -304,7 +310,7 @@ export default {
                 <div class="table-mobile-content js-feature-flag-status">
                   <toggle-button
                     :value="scope.active"
-                    :disabled-input="!canUpdateScope(scope)"
+                    :disabled-input="!active || !canUpdateScope(scope)"
                     @change="status => (scope.active = status)"
                   />
                 </div>
@@ -436,7 +442,11 @@ export default {
                   {{ s__('FeatureFlags|Status') }}
                 </div>
                 <div class="table-mobile-content js-feature-flag-status">
-                  <toggle-button :value="false" @change="createNewScope({ active: true })" />
+                  <toggle-button
+                    :disabled-input="!active"
+                    :value="false"
+                    @change="createNewScope({ active: true })"
+                  />
                 </div>
               </div>
 

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

@@ -113,13 +113,16 @@ export const mapFromScopesViewModel = params => {
     };
   });
 
-  return {
+  const model = {
     operations_feature_flag: {
       name: params.name,
       description: params.description,
+      active: params.active,
       scopes_attributes: scopes,
     },
   };
+
+  return model;
 };
 
 /**

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

@@ -37,7 +37,11 @@ describe('feature flag form', () => {
       localVue,
       propsData: props,
       provide: {
-        glFeatures: { featureFlagPermissions: true, featureFlagsUsersPerEnvironment: true },
+        glFeatures: {
+          featureFlagPermissions: true,
+          featureFlagsUsersPerEnvironment: true,
+          featureFlagToggle: true,
+        },
       },
       sync: false,
     });
@@ -93,6 +97,14 @@ describe('feature flag form', () => {
             expect(wrapper.vm.newScope).toEqual('');
           });
         });
+
+        it('should be disabled if the feature flag is not active', done => {
+          wrapper.setProps({ active: false });
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true);
+            done();
+          });
+        });
       });
     });
   });
@@ -103,6 +115,7 @@ describe('feature flag form', () => {
         ...requiredProps,
         name: featureFlag.name,
         description: featureFlag.description,
+        active: true,
         scopes: [
           {
             id: 1,
@@ -156,6 +169,15 @@ describe('feature flag form', () => {
 
             expect(_.first(wrapper.vm.formScopes).active).toBe(false);
           });
+
+          it('should be disabled if the feature flag is not active', done => {
+            wrapper.setProps({ active: false });
+
+            wrapper.vm.$nextTick(() => {
+              expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true);
+              done();
+            });
+          });
         });
       });
 
@@ -262,6 +284,7 @@ describe('feature flag form', () => {
         factory({
           ...requiredProps,
           name: 'feature_flag_1',
+          active: true,
           description: 'this is a feature flag',
           scopes: [
             {
@@ -316,6 +339,7 @@ describe('feature flag form', () => {
 
             expect(data.name).toEqual('feature_flag_2');
             expect(data.description).toEqual('this is a feature flag');
+            expect(data.active).toBe(true);
 
             expect(data.scopes).toEqual([
               {

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

@@ -152,6 +152,7 @@ describe('feature flags helpers spec', () => {
       const input = {
         name: 'name',
         description: 'description',
+        active: true,
         scopes: [
           {
             id: 4,
@@ -171,6 +172,7 @@ describe('feature flags helpers spec', () => {
         operations_feature_flag: {
           name: 'name',
           description: 'description',
+          active: true,
           scopes_attributes: [
             {
               id: 4,

ee/spec/frontend/feature_flags/store/new/actions_spec.js

@@ -59,6 +59,7 @@ describe('Feature flags New Module Actions', () => {
     const actionParams = {
       name: 'name',
       description: 'description',
+      active: true,
       scopes: [
         {
           id: 1,