Add latest changes from gitlab-org/gitlab@master

2 files changed, 17 insertions, 11 deletions

diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index 340cf68793f..fe327a98605 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/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"
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue b/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue
index 5c35aa33e14..0539b5ff832 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue
+++ b/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>