diff --git a/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/code_suggestions_usage.vue b/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/code_suggestions_usage.vue index 71bf3409cbc4c72a78e4a173378ae3686f15245f..e71b840c9fd5783e5751fbae8c50357e9ff1fdda 100644 --- a/ee/app/assets/javascripts/usage_quotas/code_suggestions/components/code_suggestions_usage.vue +++ b/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" > diff --git a/ee/app/views/admin/code_suggestions/index.html.haml b/ee/app/views/admin/code_suggestions/index.html.haml index 008ce90da9557123b5d9017c38b9367a3ac9150c..89aecc860740a3bada8469d078b9fc43e5d08379 100644 --- a/ee/app/views/admin/code_suggestions/index.html.haml +++ b/ee/app/views/admin/code_suggestions/index.html.haml @@ -1,4 +1,4 @@ -# EE:Self Managed -- page_title _('Code Suggestions') +- page_title s_('CodeSuggestions|Code Suggestions') #js-code-suggestions-page{ data: {} } diff --git a/ee/spec/frontend/usage_quotas/code_suggestions/components/code_suggestions_usage_spec.js b/ee/spec/frontend/usage_quotas/code_suggestions/components/code_suggestions_usage_spec.js index 636b629ceffb7753864aa30d947d3c2d438e93f5..e3d2fc9adfe7a0facc764452d1f0f0e0cce63d87 100644 --- a/ee/spec/frontend/usage_quotas/code_suggestions/components/code_suggestions_usage_spec.js +++ b/ee/spec/frontend/usage_quotas/code_suggestions/components/code_suggestions_usage_spec.js @@ -1,6 +1,6 @@ -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 }); }); diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 7c3313f78c8fd3665b88c815181cfffe561cc013..0cd099c053fe437847af2b5335c4504330c788b2 100644 --- a/locale/gitlab.pot +++ b/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 ""