Merge branch 'add-feature-flag-toggle--edit' into 'master'

Add Feature Flag Toggle to Edit Page

See merge request gitlab-org/gitlab!20860

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

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { createNamespacedHelpers } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -12,6 +12,7 @@ export default {
   store,
   components: {
     GlLoadingIcon,
+    GlToggle,
     FeatureFlagForm,
   },
   mixins: [glFeatureFlagMixin()],
@@ -30,7 +31,16 @@ export default {
     },
   },
   computed: {
-    ...mapState(['error', 'name', 'description', 'scopes', 'isLoading', 'hasError', 'iid']),
+    ...mapState([
+      'error',
+      'name',
+      'description',
+      'scopes',
+      'isLoading',
+      'hasError',
+      'iid',
+      'active',
+    ]),
     title() {
       return this.hasFeatureFlagsIID
         ? `^${this.iid} ${this.name}`
@@ -39,13 +49,22 @@ export default {
     hasFeatureFlagsIID() {
       return this.glFeatures.featureFlagIID && this.iid;
     },
+    hasFeatureFlagToggle() {
+      return this.glFeatures.featureFlagToggle;
+    },
   },
   created() {
     this.setPath(this.path);
     return this.setEndpoint(this.endpoint).then(() => this.fetchFeatureFlag());
   },
   methods: {
-    ...mapActions(['updateFeatureFlag', 'setEndpoint', 'setPath', 'fetchFeatureFlag']),
+    ...mapActions([
+      'updateFeatureFlag',
+      'setEndpoint',
+      'setPath',
+      'fetchFeatureFlag',
+      'toggleActive',
+    ]),
   },
 };
 </script>
@@ -54,7 +73,15 @@ export default {
     <gl-loading-icon v-if="isLoading" />
 
     <template v-else-if="!isLoading && !hasError">
-      <h3 class="page-title">{{ title }}</h3>
+      <div class="d-flex align-items-center mb-3 mt-3">
+        <gl-toggle
+          v-if="hasFeatureFlagToggle"
+          :value="active"
+          class="m-0 mr-3"
+          @change="toggleActive"
+        />
+        <h3 class="page-title m-0">{{ title }}</h3>
+      </div>
 
       <div v-if="error.length" class="alert alert-danger">
         <p v-for="(message, index) in error" :key="index" class="mb-0">{{ message }}</p>
@@ -67,6 +94,7 @@ export default {
         :cancel-path="path"
         :submit-text="__('Save changes')"
         :environments-endpoint="environmentsEndpoint"
+        :active="active || !hasFeatureFlagToggle"
         @handleSubmit="data => updateFeatureFlag(data)"
       />
     </template>

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

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { GlToggle } from '@gitlab/ui';
 import Form from 'ee/feature_flags/components/form.vue';
 import editModule from 'ee/feature_flags/store/modules/edit';
 import EditFeatureFlag from 'ee/feature_flags/components/edit_feature_flag.vue';
@@ -20,7 +21,7 @@ describe('Edit feature flag form', () => {
     },
   });
 
-  const factory = () => {
+  const factory = (featureFlagToggle = true) => {
     wrapper = shallowMount(localVue.extend(EditFeatureFlag), {
       localVue,
       propsData: {
@@ -30,6 +31,7 @@ describe('Edit feature flag form', () => {
       },
       provide: {
         glFeatures: {
+          featureFlagToggle,
           featureFlagIID: true,
         },
       },
@@ -44,7 +46,7 @@ describe('Edit feature flag form', () => {
     mock.onGet(`${TEST_HOST}/feature_flags.json'`).replyOnce(200, {
       id: 21,
       iid: 5,
-      active: false,
+      active: true,
       created_at: '2019-01-17T17:27:39.778Z',
       updated_at: '2019-01-17T17:27:39.778Z',
       name: 'feature_flag',
@@ -76,6 +78,26 @@ describe('Edit feature flag form', () => {
     expect(wrapper.find('h3').text()).toContain('^5');
   });
 
+  it('should render the toggle', () => {
+    expect(wrapper.find(GlToggle).exists()).toBe(true);
+  });
+
+  it('should set the value of the toggle to whether or not the flag is active', () => {
+    expect(wrapper.find(GlToggle).props('value')).toBe(true);
+  });
+
+  describe('without featureFlagToggle', () => {
+    beforeEach(done => {
+      wrapper.destroy();
+      factory(false);
+      setImmediate(() => done());
+    });
+
+    it('should not render the toggle', () => {
+      expect(wrapper.find(GlToggle).exists()).toBe(false);
+    });
+  });
+
   describe('with error', () => {
     it('should render the error', () => {
       store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });