Remove button and add text link, fix text format

- Add GlLink to empty state message of feature_flags.vue
- Update tests

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

 <script>
 import { createNamespacedHelpers } from 'vuex';
 import _ from 'underscore';
-import { GlEmptyState, GlLoadingIcon, GlButton, GlModalDirective } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlButton, GlModalDirective, GlLink } from '@gitlab/ui';
 import FeatureFlagsTable from './feature_flags_table.vue';
 import store from '../store';
 import { __, s__ } from '~/locale';
@@ -26,6 +26,7 @@ export default {
     GlEmptyState,
     GlLoadingIcon,
     GlButton,
+    GlLink,
     ConfigureFeatureFlagsModal,
   },
   directives: {
@@ -151,11 +152,11 @@ export default {
     },
     emptyStateTitle() {
       if (this.scope === this.$options.scopes.disabled) {
-        return s__(`FeatureFlags|There are no inactive Feature Flags`);
+        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|There are no active feature flags`);
       }
-      return s__(`FeatureFlags|Get started with Feature Flags`);
+      return s__(`FeatureFlags|Get started with feature flags`);
     },
   },
   created() {
@@ -234,7 +235,7 @@ export default {
           :href="newFeatureFlagPath"
           variant="success"
           class="js-ff-new"
-          >{{ s__('FeatureFlags|New Feature Flag') }}</gl-button
+          >{{ s__('FeatureFlags|New feature flag') }}</gl-button
         >
       </div>
     </h3>
@@ -245,7 +246,7 @@ export default {
 
     <gl-loading-icon
       v-if="isLoading"
-      :label="s__('FeatureFlags|Loading Feature Flags')"
+      :label="s__('FeatureFlags|Loading feature flags')"
       :size="3"
       class="js-loading-state prepend-top-20"
     />
@@ -261,15 +262,19 @@ export default {
       v-else-if="shouldShowEmptyState"
       class="js-feature-flags-empty-state"
       :title="emptyStateTitle"
-      :description="
-        s__(
-          `FeatureFlags|Feature Flags allow you to configure your code into different flavors by dynamically toggling certain functionality.`,
-        )
-      "
       :svg-path="errorStateSvgPath"
-      :primary-button-link="featureFlagsHelpPagePath"
-      :primary-button-text="s__(`FeatureFlags|More Information`)"
-    />
+    >
+      <template v-slot:description>
+        {{
+          s__(
+            'FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.',
+          )
+        }}
+        <gl-link :href="featureFlagsHelpPagePath" target="_blank" rel="noopener noreferrer">
+          {{ s__('FeatureFlags|More information') }}
+        </gl-link>
+      </template>
+    </gl-empty-state>
 
     <feature-flags-table
       v-else-if="shouldRenderTable"

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

@@ -47,7 +47,7 @@ export default {
 </script>
 <template>
   <div>
-    <h3 class="page-title">{{ s__('FeatureFlags|New Feature Flag') }}</h3>
+    <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3>
 
     <div v-if="error.length" class="alert alert-danger">
       <p v-for="(message, index) in error" :key="index" class="mb-0">{{ message }}</p>

ee/changelogs/unreleased/9230-remove-second-primary-button-from-feature-flags-empty-state.yml

+---
+title: Remove primary button from feature flags empty state and update text
+merge_request: 15841
+author:
+type: changed

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

@@ -74,8 +74,8 @@ 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_selector('.btn-success', text: 'New Feature Flag')
+      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
   end

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

@@ -7,7 +7,7 @@ import { TEST_HOST } from 'spec/test_constants';
 
 const localVue = createLocalVue();
 
-describe('Feature Flags > Environments dropdown ', () => {
+describe('Feature flags > Environments dropdown ', () => {
   let wrapper;
   let mock;
 

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

@@ -7,7 +7,7 @@ import { trimText } from 'spec/helpers/text_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import { getRequestData } from '../mock_data';
 
-describe('Feature Flags', () => {
+describe('Feature flags', () => {
   const mockData = {
     endpoint: `${TEST_HOST}/endpoint.json`,
     csrfToken: 'testToken',
@@ -82,7 +82,7 @@ describe('Feature Flags', () => {
 
       expect(loadingElement).not.toBeNull();
       expect(loadingElement.querySelector('span').getAttribute('aria-label')).toEqual(
-        'Loading Feature Flags',
+        'Loading feature flags',
       );
 
       setTimeout(() => {
@@ -130,7 +130,7 @@ describe('Feature Flags', () => {
         it('renders generic title', () => {
           expect(
             component.$el.querySelector('.js-feature-flags-empty-state h4').textContent.trim(),
-          ).toEqual('Get started with Feature Flags');
+          ).toEqual('Get started with feature flags');
         });
       });
 
@@ -141,7 +141,7 @@ describe('Feature Flags', () => {
           Vue.nextTick(() => {
             expect(
               component.$el.querySelector('.js-feature-flags-empty-state h4').textContent.trim(),
-            ).toEqual('There are no inactive Feature Flags');
+            ).toEqual('There are no inactive feature flags');
             done();
           });
         });
@@ -154,7 +154,7 @@ describe('Feature Flags', () => {
           Vue.nextTick(() => {
             expect(
               component.$el.querySelector('.js-feature-flags-empty-state h4').textContent.trim(),
-            ).toEqual('There are no active Feature Flags');
+            ).toEqual('There are no active feature flags');
             done();
           });
         });

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

@@ -8,7 +8,7 @@ import {
   DEFAULT_PERCENT_ROLLOUT,
 } from 'ee/feature_flags/constants';
 
-describe('Feature Flag table', () => {
+describe('Feature flag table', () => {
   let Component;
   let vm;
 

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

@@ -51,7 +51,7 @@ describe('New feature flag form', () => {
   });
 
   it('renders form title', () => {
-    expect(wrapper.find('h3').text()).toEqual('New Feature Flag');
+    expect(wrapper.find('h3').text()).toEqual('New feature flag');
   });
 
   it('should render feature flag form', () => {

locale/gitlab.pot

@@ -6460,13 +6460,13 @@ msgstr ""
 msgid "FeatureFlags|Feature Flags"
 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|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|Get started with Feature Flags"
+msgid "FeatureFlags|Get started with feature flags"
 msgstr ""
 
 msgid "FeatureFlags|Inactive"
@@ -6481,10 +6481,10 @@ msgstr ""
 msgid "FeatureFlags|Instance ID"
 msgstr ""
 
-msgid "FeatureFlags|Loading Feature Flags"
+msgid "FeatureFlags|Loading feature flags"
 msgstr ""
 
-msgid "FeatureFlags|More Information"
+msgid "FeatureFlags|More information"
 msgstr ""
 
 msgid "FeatureFlags|Name"
@@ -6496,6 +6496,9 @@ msgstr ""
 msgid "FeatureFlags|New Feature Flag"
 msgstr ""
 
+msgid "FeatureFlags|New feature flag"
+msgstr ""
+
 msgid "FeatureFlags|Percent rollout (logged in users)"
 msgstr ""
 
@@ -6526,10 +6529,10 @@ msgstr ""
 msgid "FeatureFlags|Target user behaviour is built up by creating a list of active user IDs. These IDs should be the users in the system in which the feature flag is set, not GitLab ids. Target users apply across %{strong_start}All Environments%{strong_end} and are not affected by Target Environment rules."
 msgstr ""
 
-msgid "FeatureFlags|There are no active Feature Flags"
+msgid "FeatureFlags|There are no active feature flags"
 msgstr ""
 
-msgid "FeatureFlags|There are no inactive Feature Flags"
+msgid "FeatureFlags|There are no inactive feature flags"
 msgstr ""
 
 msgid "FeatureFlags|There was an error fetching the feature flags."