Updates copy for feature flag user lists

**app/assets/javascripts/feature_flags/components/
feature_flags.vue:**
**app/assets/javascripts/feature_flags/components/
feature_flags_tab.vue:**

Custom empty tile description.

**locale/gitlab.pot:**
**spec/frontend/feature_flags/components/feature_flags_tab_spec.js:**

Updated.

**changelogs/unreleased/update-copy-on-user-lists-empty-state.yml:**

Changelog.

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

@@ -7,7 +7,6 @@ import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
 import FeatureFlagsTab from './feature_flags_tab.vue';
 import FeatureFlagsTable from './feature_flags_table.vue';
 import UserListsTable from './user_lists_table.vue';
-import { s__ } from '~/locale';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import {
   buildUrlWithCurrentLocation,
@@ -96,9 +95,6 @@ export default {
     hasNewPath() {
       return !isEmpty(this.newFeatureFlagPath);
     },
-    emptyStateTitle() {
-      return s__('FeatureFlags|Get started with feature flags');
-    },
   },
   created() {
     this.setFeatureFlagsOptions({ scope: this.scope, page: this.page });
@@ -246,7 +242,12 @@ export default {
           :error-state="shouldRenderErrorState"
           :error-title="s__(`FeatureFlags|There was an error fetching the feature flags.`)"
           :empty-state="shouldShowEmptyState"
-          :empty-title="emptyStateTitle"
+          :empty-title="s__('FeatureFlags|Get started with feature flags')"
+          :empty-description="
+            s__(
+              'FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.',
+            )
+          "
           data-testid="feature-flags-tab"
           @dismissAlert="clearAlert"
           @changeTab="onFeatureFlagsTab"
@@ -266,7 +267,12 @@ export default {
           :error-state="shouldRenderErrorState"
           :error-title="s__(`FeatureFlags|There was an error fetching the user lists.`)"
           :empty-state="shouldShowEmptyState"
-          :empty-title="emptyStateTitle"
+          :empty-title="s__('FeatureFlags|Get started with user lists')"
+          :empty-description="
+            s__(
+              'FeatureFlags|User lists allow you to define a set of users to use with Feature Flags.',
+            )
+          "
           data-testid="user-lists-tab"
           @dismissAlert="clearAlert"
           @changeTab="onUserListsTab"

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

@@ -41,6 +41,10 @@ export default {
       required: true,
       type: String,
     },
+    emptyDescription: {
+      required: true,
+      type: String,
+    },
   },
   inject: ['errorStateSvgPath', 'featureFlagsHelpPagePath'],
   computed: {
@@ -92,11 +96,7 @@ export default {
         data-testid="empty-state"
       >
         <template #description>
-          {{
-            s__(
-              'FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.',
-            )
-          }}
+          {{ emptyDescription }}
           <gl-link :href="featureFlagsHelpPagePath" target="_blank">
             {{ s__('FeatureFlags|More information') }}
           </gl-link>

changelogs/unreleased/update-copy-on-user-lists-empty-state.yml

+---
+title: Updates the copy on empty users list tabs
+merge_request: 49642
+author:
+type: changed

locale/gitlab.pot

@@ -11852,6 +11852,9 @@ msgstr ""
 msgid "FeatureFlags|Get started with feature flags"
 msgstr ""
 
+msgid "FeatureFlags|Get started with user lists"
+msgstr ""
+
 msgid "FeatureFlags|GitLab is moving to a new way of managing feature flags, and in 13.4, this feature flag will become read-only. Please create a new feature flag."
 msgstr ""
 
@@ -11966,6 +11969,9 @@ msgstr ""
 msgid "FeatureFlags|User Lists"
 msgstr ""
 
+msgid "FeatureFlags|User lists allow you to define a set of users to use with Feature Flags."
+msgstr ""
+
 msgid "FeatureFlag|Percentage"
 msgstr ""
 

spec/frontend/feature_flags/components/feature_flags_tab_spec.js

@@ -12,6 +12,7 @@ const DEFAULT_PROPS = {
   errorTitle: 'test title',
   emptyState: true,
   emptyTitle: 'test empty',
+  emptyDescription: 'empty description',
 };
 
 const DEFAULT_PROVIDE = {
@@ -115,9 +116,7 @@ describe('feature_flags/components/feature_flags_tab.vue', () => {
 
     it('should show an empty state if it is empty', () => {
       expect(emptyState.text()).toContain(DEFAULT_PROPS.emptyTitle);
-      expect(emptyState.text()).toContain(
-        'Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.',
-      );
+      expect(emptyState.text()).toContain(DEFAULT_PROPS.emptyDescription);
       expect(emptyState.props('svgPath')).toBe(DEFAULT_PROVIDE.errorStateSvgPath);
       expect(emptyStateLink.attributes('href')).toBe(DEFAULT_PROVIDE.featureFlagsHelpPagePath);
       expect(emptyStateLink.text()).toBe('More information');