Display feature flag internal ids

Return feature flag internal id from backend
Remove featureFlagIid feature flag

changelogs/unreleased/display-ops-ff-iid.yml

+---
+title: Display operations feature flag internal ids
+merge_request: 23914
+author:
+type: added

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

@@ -42,13 +42,10 @@ export default {
       'active',
     ]),
     title() {
-      return this.hasFeatureFlagsIID
+      return this.iid
         ? `^${this.iid} ${this.name}`
         : sprintf(s__('Edit %{name}'), { name: this.name });
     },
-    hasFeatureFlagsIID() {
-      return this.glFeatures.featureFlagIID && this.iid;
-    },
   },
   created() {
     this.setPath(this.path);

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

@@ -37,9 +37,6 @@ export default {
     permissions() {
       return this.glFeatures.featureFlagPermissions;
     },
-    hasIIDs() {
-      return this.glFeatures.featureFlagIID;
-    },
     modalTitle() {
       return sprintf(
         s__('FeatureFlags|Delete %{name}?'),
@@ -83,6 +80,9 @@ export default {
 
       return `${displayName}${displayPercentage}`;
     },
+    featureFlagIidText(featureFlag) {
+      return featureFlag.iid ? `^${featureFlag.iid}` : '';
+    },
     canDeleteFlag(flag) {
       return !this.permissions || (flag.scopes || []).every(scope => scope.can_update);
     },
@@ -107,7 +107,7 @@ 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">
+      <div class="table-section section-10">
         {{ s__('FeatureFlags|ID') }}
       </div>
       <div class="table-section section-10" role="columnheader">
@@ -123,9 +123,11 @@ export default {
 
     <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-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 class="table-mobile-content js-feature-flag-id">
+            {{ featureFlagIidText(featureFlag) }}
+          </div>
         </div>
         <div class="table-section section-10" role="gridcell">
           <div class="table-mobile-header" role="rowheader">{{ s__('FeatureFlags|Status') }}</div>

ee/app/serializers/feature_flag_entity.rb

@@ -4,6 +4,7 @@ class FeatureFlagEntity < Grape::Entity
   include RequestAwareEntity
 
   expose :id
+  expose :iid
   expose :active
   expose :created_at
   expose :updated_at

ee/spec/controllers/projects/feature_flags_controller_spec.rb

@@ -121,6 +121,14 @@ describe Projects::FeatureFlagsController do
       expect(feature_flag_json['active']).to eq(false)
     end
 
+    it 'returns the feature flag iid' do
+      subject
+
+      feature_flag_json = json_response['feature_flags'].first
+
+      expect(feature_flag_json['iid']).to eq(feature_flag_active.iid)
+    end
+
     context 'when scope is specified' do
       let(:view_params) do
         { namespace_id: project.namespace, project_id: project, scope: scope }

ee/spec/features/projects/feature_flags/user_sees_feature_flag_list_spec.rb

@@ -29,6 +29,7 @@ describe 'User sees feature flag list', :js do
 
     it 'user sees the first flag' do
       within_feature_flag_row(1) do
+        expect(page.find('.js-feature-flag-id')).to have_content('^1')
         expect(page.find('.feature-flag-name')).to have_content('ci_live_trace')
         expect(page).to have_css('.js-feature-flag-status button:not(.is-checked)')
 
@@ -43,6 +44,7 @@ describe 'User sees feature flag list', :js do
 
     it 'user sees the second flag' do
       within_feature_flag_row(2) do
+        expect(page.find('.js-feature-flag-id')).to have_content('^2')
         expect(page.find('.feature-flag-name')).to have_content('drop_legacy_artifacts')
         expect(page).to have_css('.js-feature-flag-status button:not(.is-checked)')
 
@@ -55,6 +57,7 @@ describe 'User sees feature flag list', :js do
 
     it 'user sees the third flag' do
       within_feature_flag_row(3) do
+        expect(page.find('.js-feature-flag-id')).to have_content('^3')
         expect(page.find('.feature-flag-name')).to have_content('mr_train')
         expect(page).to have_css('.js-feature-flag-status button.is-checked')
 

ee/spec/fixtures/api/schemas/feature_flag.json

@@ -6,6 +6,7 @@
   ],
   "properties" : {
     "id": { "type": "integer" },
+    "iid": { "type": ["integer", "null"] },
     "created_at": { "type": "date" },
     "updated_at": { "type": "date" },
     "name": { "type": "string" },

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

@@ -29,11 +29,6 @@ describe('Edit feature flag form', () => {
         path: '/feature_flags',
         environmentsEndpoint: 'environments.json',
       },
-      provide: {
-        glFeatures: {
-          featureFlagIID: true,
-        },
-      },
       store,
     });
   };

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

@@ -12,6 +12,7 @@ const getDefaultProps = () => ({
   featureFlags: [
     {
       id: 1,
+      iid: 1,
       active: true,
       name: 'flag name',
       description: 'flag description',
@@ -56,10 +57,7 @@ describe('Feature flag table', () => {
 
   describe('with an active scope and a standard rollout strategy', () => {
     beforeEach(() => {
-      props.featureFlags[0].iid = 1;
-      createWrapper(props, {
-        provide: { glFeatures: { featureFlagIID: true } },
-      });
+      createWrapper(props);
     });
 
     it('Should render a table', () => {
@@ -160,4 +158,12 @@ describe('Feature flag table', () => {
       expect(trimText(envColumn.find('.badge-inactive').text())).toBe('scope');
     });
   });
+
+  it('renders a feature flag without an iid', () => {
+    delete props.featureFlags[0].iid;
+    createWrapper(props);
+
+    expect(wrapper.find('.js-feature-flag-id').exists()).toBe(true);
+    expect(trimText(wrapper.find('.js-feature-flag-id').text())).toBe('');
+  });
 });