Display the IID of a Feature Flag

This allows the flag to be referenced in other portions of the app
(coming soon), such as issues, MRs and epics.

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

@@ -2,6 +2,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { createNamespacedHelpers } from 'vuex';
 import { sprintf, s__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import store from '../store/index';
 import FeatureFlagForm from './form.vue';
 
@@ -13,6 +14,7 @@ export default {
     GlLoadingIcon,
     FeatureFlagForm,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     endpoint: {
       type: String,
@@ -28,9 +30,14 @@ export default {
     },
   },
   computed: {
-    ...mapState(['error', 'name', 'description', 'scopes', 'isLoading', 'hasError']),
+    ...mapState(['error', 'name', 'description', 'scopes', 'isLoading', 'hasError', 'iid']),
     title() {
-      return sprintf(s__('Edit %{name}'), { name: this.name });
+      return this.hasFeatureFlagsIID
+        ? `^${this.iid} ${this.name}`
+        : sprintf(s__('Edit %{name}'), { name: this.name });
+    },
+    hasFeatureFlagsIID() {
+      return this.glFeatures.featureFlagIID && this.iid;
     },
   },
   created() {

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

@@ -3,6 +3,7 @@ import _ from 'underscore';
 import { GlButton, GlLink, GlTooltipDirective, GlModalDirective, GlModal } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { ROLLOUT_STRATEGY_PERCENT_ROLLOUT } from '../constants';
 
 export default {
@@ -16,6 +17,7 @@ export default {
     GlModalDirective,
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     csrfToken: {
       type: String,
@@ -34,7 +36,10 @@ export default {
   },
   computed: {
     permissions() {
-      return gon && gon.features && gon.features.featureFlagPermissions;
+      return this.glFeatures.featureFlagPermissions;
+    },
+    hasIIDs() {
+      return this.glFeatures.featureFlagIID;
     },
     modalTitle() {
       return sprintf(
@@ -95,19 +100,26 @@ export default {
 <template>
   <div class="table-holder js-feature-flag-table">
     <div class="gl-responsive-table-row table-row-header" role="row">
+      <div v-if="hasIIDs" class="table-section section-10">
+        {{ s__('FeatureFlags|ID') }}
+      </div>
       <div class="table-section section-10" role="columnheader">
         {{ s__('FeatureFlags|Status') }}
       </div>
       <div class="table-section section-20" role="columnheader">
         {{ s__('FeatureFlags|Feature Flag') }}
       </div>
-      <div class="table-section section-50" role="columnheader">
+      <div class="table-section section-40" role="columnheader">
         {{ s__('FeatureFlags|Environment Specs') }}
       </div>
     </div>
 
     <template v-for="featureFlag in featureFlags">
       <div :key="featureFlag.id" class="gl-responsive-table-row" role="row">
+        <div v-if="hasIIDs" class="table-section section-10" role="gridcell">
+          <div class="table-mobile-header" role="rowheader">{{ s__('FeatureFlags|ID') }}</div>
+          <div class="table-mobile-content js-feature-flag-id">^{{ featureFlag.iid }}</div>
+        </div>
         <div class="table-section section-10" role="gridcell">
           <div class="table-mobile-header" role="rowheader">{{ s__('FeatureFlags|Status') }}</div>
           <div class="table-mobile-content js-feature-flag-status">
@@ -130,7 +142,7 @@ export default {
           </div>
         </div>
 
-        <div class="table-section section-50" role="gridcell">
+        <div class="table-section section-40" role="gridcell">
           <div class="table-mobile-header" role="rowheader">
             {{ s__('FeatureFlags|Environment Specs') }}
           </div>

ee/app/assets/javascripts/feature_flags/store/modules/edit/mutations.js

@@ -17,6 +17,7 @@ export default {
 
     state.name = response.name;
     state.description = response.description;
+    state.iid = response.iid;
     state.scopes = mapToScopesViewModel(response.scopes);
   },
   [types.RECEIVE_FEATURE_FLAG_ERROR](state) {

ee/app/assets/javascripts/feature_flags/store/modules/edit/state.js

@@ -9,4 +9,5 @@ export default () => ({
   scopes: [],
   isLoading: false,
   hasError: false,
+  iid: null,
 });

ee/spec/frontend/feature_flags/store/edit/mutations_spec.js

@@ -44,6 +44,7 @@ describe('Feature flags Edit Module Mutations', () => {
       name: '*',
       description: 'All environments',
       scopes: [{ id: 1 }],
+      iid: 5,
     };
 
     beforeEach(() => {
@@ -69,6 +70,10 @@ describe('Feature flags Edit Module Mutations', () => {
     it('should set scope with the provided one', () => {
       expect(stateCopy.scope).toEqual(data.scope);
     });
+
+    it('should set the iid to the provided one', () => {
+      expect(stateCopy.iid).toEqual(data.iid);
+    });
   });
 
   describe('RECEIVE_FEATURE_FLAG_ERROR', () => {

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

@@ -28,6 +28,11 @@ describe('Edit feature flag form', () => {
         path: '/feature_flags',
         environmentsEndpoint: 'environments.json',
       },
+      provide: {
+        glFeatures: {
+          featureFlagIID: true,
+        },
+      },
       store,
       sync: false,
     });
@@ -38,6 +43,7 @@ describe('Edit feature flag form', () => {
 
     mock.onGet(`${TEST_HOST}/feature_flags.json'`).replyOnce(200, {
       id: 21,
+      iid: 5,
       active: false,
       created_at: '2019-01-17T17:27:39.778Z',
       updated_at: '2019-01-17T17:27:39.778Z',
@@ -64,6 +70,14 @@ describe('Edit feature flag form', () => {
     mock.restore();
   });
 
+  it('should display the iid', done => {
+    setTimeout(() => {
+      expect(wrapper.find('h3').text()).toContain('^5');
+
+      done();
+    });
+  });
+
   describe('with error', () => {
     it('should render the error', done => {
       setTimeout(() => {
@@ -81,7 +95,7 @@ describe('Edit feature flag form', () => {
   describe('without error', () => {
     it('renders form title', done => {
       setTimeout(() => {
-        expect(wrapper.text()).toContain('Edit feature_flag');
+        expect(wrapper.text()).toContain('^5 feature_flag');
         done();
       }, 0);
     });

locale/gitlab.pot

@@ -7080,6 +7080,9 @@ msgstr ""
 msgid "FeatureFlags|Get started with feature flags"
 msgstr ""
 
+msgid "FeatureFlags|ID"
+msgstr ""
+
 msgid "FeatureFlags|Inactive"
 msgstr ""