Merge branch 'mtimoustafa/436407-code-suggestions-admin-title-subtitle' into 'master'

Add title and subtitle to Code Suggestions admin page

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/140962



Merged-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Approved-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Approved-by: Angelo Gulina <agulina@gitlab.com>
Reviewed-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Angelo Gulina <agulina@gitlab.com>
Co-authored-by: Mohamed Moustafa <mmoustafa@gitlab.com>

ee/app/assets/javascripts/usage_quotas/code_suggestions/components/code_suggestions_usage.vue

@@ -101,6 +101,18 @@ export default {
     </section>
     <template v-else>
       <section v-if="hasCodeSuggestions">
+        <h1 data-testid="code-suggestions-title" class="page-title gl-font-size-h-display">
+          {{ s__('CodeSuggestions|Code Suggestions') }}
+        </h1>
+
+        <p data-testid="code-suggestions-subtitle">
+          {{
+            s__(
+              'CodeSuggestions|Manage seat assignments for Code Suggestions across your instance.',
+            )
+          }}
+        </p>
+
         <section
           class="gl-display-grid gl-md-grid-template-columns-2 gl-gap-5 gl-bg-gray-10 gl-p-5"
         >

ee/app/views/admin/code_suggestions/index.html.haml

 -# EE:Self Managed
-- page_title _('Code Suggestions')
+- page_title s_('CodeSuggestions|Code Suggestions')
 
 #js-code-suggestions-page{ data: {} }

ee/spec/frontend/usage_quotas/code_suggestions/components/code_suggestions_usage_spec.js

-import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import addOnPurchaseQuery from 'ee/usage_quotas/add_on/graphql/get_add_on_purchase.query.graphql';
 import CodeSuggestionsIntro from 'ee/usage_quotas/code_suggestions/components/code_suggestions_intro.vue';
@@ -33,12 +33,14 @@ describe('Code Suggestions Usage', () => {
   const findCodeSuggestionsIntro = () => wrapper.findComponent(CodeSuggestionsIntro);
   const findCodeSuggestionsInfo = () => wrapper.findComponent(CodeSuggestionsInfo);
   const findCodeSuggestionsStatistics = () => wrapper.findComponent(CodeSuggestionsStatisticsCard);
+  const findCodeSuggestionsSubtitle = () => wrapper.findByTestId('code-suggestions-subtitle');
+  const findCodeSuggestionsTitle = () => wrapper.findByTestId('code-suggestions-title');
   const findSaasAddOnEligibleUserList = () => wrapper.findComponent(SaasAddOnEligibleUserList);
   const findSelfManagedAddOnEligibleUserList = () =>
     wrapper.findComponent(SelfManagedAddOnEligibleUserList);
 
   const createComponent = ({ handler, provideProps } = {}) => {
-    wrapper = shallowMount(CodeSuggestionsUsage, {
+    wrapper = shallowMountExtended(CodeSuggestionsUsage, {
       provide: {
         isSaaS: true,
         ...provideProps,
@@ -84,6 +86,14 @@ describe('Code Suggestions Usage', () => {
     it('renders code suggestions intro', () => {
       expect(findCodeSuggestionsIntro().exists()).toBe(true);
     });
+
+    it('does not render code suggestions title', () => {
+      expect(findCodeSuggestionsTitle().exists()).toBe(false);
+    });
+
+    it('does not render code suggestions subtitle', () => {
+      expect(findCodeSuggestionsSubtitle().exists()).toBe(false);
+    });
   });
 
   describe('with code suggestions data', () => {
@@ -95,6 +105,16 @@ describe('Code Suggestions Usage', () => {
       expect(findCodeSuggestionsIntro().exists()).toBe(false);
     });
 
+    it('renders code suggestions title', () => {
+      expect(findCodeSuggestionsTitle().text()).toBe('Code Suggestions');
+    });
+
+    it('renders code suggestions subtitle', () => {
+      expect(findCodeSuggestionsSubtitle().text()).toBe(
+        'Manage seat assignments for Code Suggestions across your instance.',
+      );
+    });
+
     it('renders code suggestions statistics card', () => {
       expect(findCodeSuggestionsStatistics().props()).toEqual({ usageValue: 0, totalValue: 20 });
     });

locale/gitlab.pot

@@ -11998,9 +11998,6 @@ msgstr ""
 msgid "Code Review Analytics displays a table of open merge requests considered to be in code review. There are currently no merge requests in review for this project and/or filters."
 msgstr ""
-msgid "Code Suggestions"
-msgstr ""
-
 msgid "Code Suggestions add-on status"
 msgstr ""
@@ -12118,6 +12115,9 @@ msgstr ""
 msgid "CodeSuggestions|Introducing the Code Suggestions add‑on"
 msgstr ""
+msgid "CodeSuggestions|Manage seat assignments for Code Suggestions across your instance."
+msgstr ""
+
 msgid "CodeSuggestions|Projects in this group can use Code Suggestions"
 msgstr ""