Adds environment column to the feature flags page

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

 <script>
 import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
 import DeleteFeatureFlag from './delete_feature_flag.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -23,6 +24,13 @@ export default {
       required: true,
     },
   },
+  methods: {
+    scopeTooltipText(scope) {
+      return !scope.active
+        ? sprintf(s__('Inactive flag for %{scope}'), { scope: scope.environment_scope })
+        : '';
+    },
+  },
 };
 </script>
 <template>
@@ -31,8 +39,11 @@ export default {
       <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">
-        {{ s__('FeatureFlags|Feature flag') }}
+        {{ s__('FeatureFlags|Environment Specs') }}
       </div>
     </div>
 
@@ -41,16 +52,14 @@ export default {
         <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">
-            <template v-if="featureFlag.active">
-              <span class="badge badge-success">{{ s__('FeatureFlags|Active') }}</span>
-            </template>
-            <template v-else>
-              <span class="badge badge-danger">{{ s__('FeatureFlags|Inactive') }}</span>
-            </template>
+            <span v-if="featureFlag.active" class="badge badge-success">{{
+              s__('FeatureFlags|Active')
+            }}</span>
+            <span v-else class="badge badge-danger">{{ s__('FeatureFlags|Inactive') }}</span>
           </div>
         </div>
 
-        <div class="table-section section-50" role="gridcell">
+        <div class="table-section section-20" role="gridcell">
           <div class="table-mobile-header" role="rowheader">
             {{ s__('FeatureFlags|Feature Flag') }}
           </div>
@@ -62,7 +71,25 @@ export default {
           </div>
         </div>
 
-        <div class="table-section section-40 table-button-footer" role="gridcell">
+        <div class="table-section section-50" role="gridcell">
+          <div class="table-mobile-header" role="rowheader">
+            {{ s__('FeatureFlags|Environment Specs') }}
+          </div>
+          <div
+            class="table-mobile-content d-flex flex-wrap justify-content-end js-feature-flag-environments"
+          >
+            <span
+              v-for="scope in featureFlag.scopes"
+              :key="scope.id"
+              v-gl-tooltip.hover="scopeTooltipText(scope)"
+              class="badge append-right-8 prepend-top-2"
+              :class="{ 'badge-active': scope.active, 'badge-inactive': !scope.active }"
+              >{{ scope.environment_scope }}</span
+            >
+          </div>
+        </div>
+
+        <div class="table-section section-20 table-button-footer" role="gridcell">
           <div class="table-action-buttons btn-group">
             <template v-if="featureFlag.edit_path">
               <gl-button

ee/app/assets/stylesheets/pages/feature_flags.scss

+$label-blue: #428bca;
+
+.badge-active {
+  color: $white-light;
+  background-color: $label-blue;
+}
+
+.badge-inactive {
+  color: $white-light;
+  background-color: $gray-500;
+}

ee/changelogs/unreleased/8621-add-environment-info-index.yml

+---
+title: Adds environment column to the feature flags page
+merge_request:
+author:
+type: changed

ee/spec/javascripts/projects/feature_flags/feature_flags_table_spec.js

@@ -43,6 +43,30 @@ describe('Feature Flag table', () => {
     );
   });
 
+  it('should render a environments specs column', () => {
+    const envColumn = vm.$el.querySelector('.js-feature-flag-environments');
+
+    expect(envColumn).not.toBeNull();
+    expect(envColumn.textContent.trim()).toContain(featureFlag.scopes[0].environment_scope);
+    expect(envColumn.textContent.trim()).toContain(featureFlag.scopes[1].environment_scope);
+  });
+
+  it('should render a environments specs badge with inactive class', () => {
+    const envColumn = vm.$el.querySelector('.js-feature-flag-environments');
+
+    expect(envColumn.querySelector('.badge-inactive').textContent.trim()).toContain(
+      featureFlag.scopes[1].environment_scope,
+    );
+  });
+
+  it('should render a environments specs badge with active class', () => {
+    const envColumn = vm.$el.querySelector('.js-feature-flag-environments');
+
+    expect(envColumn.querySelector('.badge-active').textContent.trim()).toContain(
+      featureFlag.scopes[0].environment_scope,
+    );
+  });
+
   it('Should render an actions column', () => {
     expect(vm.$el.querySelector('.table-action-buttons')).not.toBeNull();
     expect(vm.$el.querySelector('.js-feature-flag-delete-button')).not.toBeNull();

ee/spec/javascripts/projects/feature_flags/mock_data.js

@@ -20,4 +20,20 @@ export const featureFlag = {
   description: 'flag for tests',
   destroy_path: 'feature_flags/1',
   edit_path: 'feature_flags/1/edit',
+  scopes: [
+    {
+      id: 1,
+      active: true,
+      environment_scope: '*',
+      created_at: '2019-01-14T06:41:40.987Z',
+      updated_at: '2019-01-14T06:41:40.987Z',
+    },
+    {
+      id: 2,
+      active: false,
+      environment_scope: 'production',
+      created_at: '2019-01-14T06:41:40.987Z',
+      updated_at: '2019-01-14T06:41:40.987Z',
+    },
+  ],
 };

locale/gitlab.pot

@@ -3764,13 +3764,13 @@ msgstr ""
 msgid "FeatureFlags|Edit Feature Flag"
 msgstr ""
 
-msgid "FeatureFlags|Feature Flag"
+msgid "FeatureFlags|Environment Specs"
 msgstr ""
 
-msgid "FeatureFlags|Feature Flags"
+msgid "FeatureFlags|Feature Flag"
 msgstr ""
 
-msgid "FeatureFlags|Feature flag"
+msgid "FeatureFlags|Feature Flags"
 msgstr ""
 
 msgid "FeatureFlags|Feature flag %{name} will be removed. Are you sure?"
@@ -4903,6 +4903,9 @@ msgstr ""
 msgid "In the next step, you'll be able to select the projects you want to import."
 msgstr ""
 
+msgid "Inactive flag for %{scope}"
+msgstr ""
+
 msgid "Include a Terms of Service agreement and Privacy Policy that all users must accept."
 msgstr ""