Merge branch 'fl-fix-label-feature-flags' into 'master'

Fixes bad wording in FF loading state

Closes #9190

See merge request gitlab-org/gitlab-ee!9153

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

@@ -142,9 +142,9 @@ export default {
 
     <gl-loading-icon
       v-if="isLoading"
-      :label="s__('Pipelines|Loading Pipelines')"
+      :label="s__('FeatureFlags|Loading Feature Flags')"
       :size="3"
-      class="prepend-top-20"
+      class="js-loading-state prepend-top-20"
     />
 
     <template v-else-if="shouldRenderErrorState">

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

@@ -30,6 +30,35 @@ describe('Feature Flags', () => {
     mock.restore();
   });
 
+  describe('loading state', () => {
+    it('renders a loading icon', done => {
+      mock.onGet(mockData.endpoint).reply(200, {
+        feature_flags: [],
+        count: {
+          all: 0,
+          enabled: 0,
+          disabled: 0,
+        },
+      });
+
+      component = mountComponentWithStore(FeatureFlagsComponent, {
+        store,
+        props: mockData,
+      });
+
+      const loadingElement = component.$el.querySelector('.js-loading-state');
+
+      expect(loadingElement).not.toBeNull();
+      expect(loadingElement.querySelector('i').getAttribute('aria-label')).toEqual(
+        'Loading Feature Flags',
+      );
+
+      setTimeout(() => {
+        done();
+      }, 0);
+    });
+  });
+
   describe('successful request', () => {
     describe('without feature flags', () => {
       beforeEach(done => {

locale/gitlab.pot

@@ -3770,6 +3770,9 @@ msgstr ""
 msgid "FeatureFlags|Instance ID"
 msgstr ""
 
+msgid "FeatureFlags|Loading Feature Flags"
+msgstr ""
+
 msgid "FeatureFlags|More Information"
 msgstr ""