Improves title in FF empty state

The empty state title is based on the
scope selected

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

@@ -4,7 +4,7 @@ import _ from 'underscore';
 import { GlEmptyState, GlLoadingIcon, GlButton } from '@gitlab/ui';
 import FeatureFlagsTable from './feature_flags_table.vue';
 import store from '../store';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 import TablePagination from '~/vue_shared/components/table_pagination.vue';
 import {
@@ -113,6 +113,14 @@ export default {
     hasNewPath() {
       return !_.isEmpty(this.newFeatureFlagPath);
     },
+    emptyStateTitle() {
+      if (this.scope === this.$options.scopes.disabled) {
+        return s__(`FeatureFlags|There are no inactive Feature Flags`);
+      } else if (this.scope === this.$options.scopes.enabled) {
+        return s__(`FeatureFlags|There are no active Feature Flags`);
+      }
+      return s__(`FeatureFlags|Get started with Feature Flags`);
+    },
   },
   created() {
     this.setFeatureFlagsEndpoint(this.endpoint);
@@ -196,10 +204,10 @@ export default {
     <gl-empty-state
       v-else-if="shouldShowEmptyState"
       class="js-feature-flags-empty-state"
-      :title="s__(`FeatureFlags|Get started with feature flags`)"
+      :title="emptyStateTitle"
       :description="
         s__(
-          `FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.`,
+          `FeatureFlags|Feature Flags allow you to configure your code into different flavors by dynamically toggling certain functionality.`,
         )
       "
       :svg-path="errorStateSvgPath"

ee/changelogs/unreleased/9282-empty-states-ff.yml

+---
+title: Improves title in feature flags empty states
+merge_request:
+author:
+type: changed

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

@@ -74,7 +74,7 @@ describe 'User sees feature flag list', :js do
     end
 
     it 'shows empty page' do
-      expect(page).to have_text 'Get started with feature flags'
+      expect(page).to have_text 'Get started with Feature Flags'
       expect(page).to have_selector('.btn-success', text: 'New Feature Flag')
       expect(page).to have_selector('.btn-primary.btn-inverted', text: 'Configure')
     end

ee/spec/features/projects/feature_flags_spec.rb

@@ -138,7 +138,7 @@ describe 'Feature Flags', :js do
 
     shared_examples_for 'correct empty index behavior' do
       it 'shows empty state' do
-        expect(page).to have_content('Get started with feature flags')
+        expect(page).to have_content('Get started with Feature Flags')
         expect(page).to have_link('New Feature Flag')
         expect(page).to have_button('Configure')
       end
@@ -234,7 +234,7 @@ describe 'Feature Flags', :js do
   end
 
   def expect_empty_state
-    expect(page).to have_text 'Get started with feature flags'
+    expect(page).to have_selector('.js-feature-flags-empty-state')
     expect(page).to have_selector('.btn-success', text: 'New Feature Flag')
     expect(page).to have_selector('.btn-primary.btn-inverted', text: 'Configure')
   end

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

@@ -106,7 +106,7 @@ describe('Feature Flags', () => {
       });
 
       it('should render the empty state', () => {
-        expect(component.$el.querySelectorAll('.js-feature-flags-empty-state')).not.toBeNull();
+        expect(component.$el.querySelector('.js-feature-flags-empty-state')).not.toBeNull();
       });
 
       it('renders configure button', () => {
@@ -116,6 +116,40 @@ describe('Feature Flags', () => {
       it('renders new feature flag button', () => {
         expect(component.$el.querySelector('.js-ff-new')).not.toBeNull();
       });
+
+      describe('in all tab', () => {
+        it('renders generic title', () => {
+          expect(
+            component.$el.querySelector('.js-feature-flags-empty-state h4').textContent.trim(),
+          ).toEqual('Get started with Feature Flags');
+        });
+      });
+
+      describe('in disabled tab', () => {
+        it('renders disabled title', done => {
+          component.scope = 'disabled';
+
+          Vue.nextTick(() => {
+            expect(
+              component.$el.querySelector('.js-feature-flags-empty-state h4').textContent.trim(),
+            ).toEqual('There are no inactive Feature Flags');
+            done();
+          });
+        });
+      });
+
+      describe('in enabled tab', () => {
+        it('renders enabled title', done => {
+          component.scope = 'enabled';
+
+          Vue.nextTick(() => {
+            expect(
+              component.$el.querySelector('.js-feature-flags-empty-state h4').textContent.trim(),
+            ).toEqual('There are no active Feature Flags');
+            done();
+          });
+        });
+      });
     });
 
     describe('with paginated feature flags', () => {

locale/gitlab.pot

@@ -3860,13 +3860,13 @@ msgstr ""
 msgid "FeatureFlags|Feature Flags"
 msgstr ""
 
-msgid "FeatureFlags|Feature flag %{name} will be removed. Are you sure?"
+msgid "FeatureFlags|Feature Flags allow you to configure your code into different flavors by dynamically toggling certain functionality."
 msgstr ""
 
-msgid "FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality."
+msgid "FeatureFlags|Feature flag %{name} will be removed. Are you sure?"
 msgstr ""
 
-msgid "FeatureFlags|Get started with feature flags"
+msgid "FeatureFlags|Get started with Feature Flags"
 msgstr ""
 
 msgid "FeatureFlags|Inactive"
@@ -3908,6 +3908,12 @@ msgstr ""
 msgid "FeatureFlags|Target environments"
 msgstr ""
 
+msgid "FeatureFlags|There are no active Feature Flags"
+msgstr ""
+
+msgid "FeatureFlags|There are no inactive Feature Flags"
+msgstr ""
+
 msgid "FeatureFlags|There was an error fetching the feature flags."
 msgstr ""