diff --git a/ee/app/assets/javascripts/storage_counter/components/usage_statistics.vue b/ee/app/assets/javascripts/storage_counter/components/usage_statistics.vue index 1cca98ec1540f9894907ddd614fd0db9a11d2d99..bf6964c2dd64b1c00f3872580fbe231897695730 100644 --- a/ee/app/assets/javascripts/storage_counter/components/usage_statistics.vue +++ b/ee/app/assets/javascripts/storage_counter/components/usage_statistics.vue @@ -1,5 +1,6 @@ <script> -import { GlButton, GlSprintf } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; import { formatUsageSize } from '../utils'; import UsageStatisticsCard from './usage_statistics_card.vue'; @@ -7,7 +8,6 @@ import UsageStatisticsCard from './usage_statistics_card.vue'; export default { components: { GlButton, - GlSprintf, UsageStatisticsCard, }, props: { @@ -32,6 +32,10 @@ export default { footerNote: s__( 'UsageQuota|This is the total amount of storage used across your projects within this namespace.', ), + link: { + text: s__('UsageQuota|Learn more about usage quotas'), + url: helpPagePath('user/usage_quotas'), + }, }; }, excessUsage() { @@ -41,6 +45,10 @@ export default { footerNote: s__( 'UsageQuota|This is the total amount of storage used by projects above the free %{actualRepositorySizeLimit} storage limit.', ), + link: { + text: s__('UsageQuota|Learn more about excess storage usage'), + url: helpPagePath('user/usage_quotas', { anchor: 'excess-storage-usage' }), + }, }; }, purchasedUsage() { @@ -87,34 +95,22 @@ export default { <template> <div class="gl-display-flex gl-sm-flex-direction-column"> <usage-statistics-card - data-testid="totalUsage" + data-testid="total-usage" :usage="totalUsage.usage" :link="totalUsage.link" :description="totalUsage.description" css-class="gl-mr-4" - > - <template #footer="{}"> - {{ totalUsage.footerNote }} - </template> - </usage-statistics-card> + /> <usage-statistics-card - data-testid="excessUsage" + data-testid="excess-usage" :usage="excessUsage.usage" :link="excessUsage.link" :description="excessUsage.description" css-class="gl-mx-4" - > - <template #footer="{}"> - <gl-sprintf :message="excessUsage.footerNote"> - <template #actualRepositorySizeLimit> - {{ formattedActualRepoSizeLimit }} - </template> - </gl-sprintf> - </template> - </usage-statistics-card> + /> <usage-statistics-card v-if="purchasedUsage" - data-testid="purchasedUsage" + data-testid="purchased-usage" :usage="purchasedUsage.usage" :usage-total="purchasedUsage.usageTotal" :link="purchasedUsage.link" diff --git a/ee/app/assets/javascripts/storage_counter/components/usage_statistics_card.vue b/ee/app/assets/javascripts/storage_counter/components/usage_statistics_card.vue index b6d430180c09f34fc5523df305b400042a7a1b3f..9f7c3718689d067792e58eb9743c3944f7d3175e 100644 --- a/ee/app/assets/javascripts/storage_counter/components/usage_statistics_card.vue +++ b/ee/app/assets/javascripts/storage_counter/components/usage_statistics_card.vue @@ -62,7 +62,7 @@ export default { </p> <p class="gl-mb-0 gl-text-gray-900 gl-font-sm gl-white-space-normal" - data-testid="statisticsCardFooter" + data-testid="statistics-card-footer" > <slot v-bind="{ link }" name="footer"> <gl-link target="_blank" :href="link.url"> diff --git a/ee/changelogs/unreleased/vs-update-doc-links-in-usage-quotas.yml b/ee/changelogs/unreleased/vs-update-doc-links-in-usage-quotas.yml new file mode 100644 index 0000000000000000000000000000000000000000..d9e8181fda5b1b8c8823ac3fd81229a07039b30b --- /dev/null +++ b/ee/changelogs/unreleased/vs-update-doc-links-in-usage-quotas.yml @@ -0,0 +1,5 @@ +--- +title: Replace text with links on Usage Quota page +merge_request: 53279 +author: +type: added diff --git a/ee/spec/frontend/storage_counter/components/usage_statistics_spec.js b/ee/spec/frontend/storage_counter/components/usage_statistics_spec.js index 4955fc48bb3999cef5ff46254a14954ed386d697..01bce1ac0f4c9c78f70024a01b24e2f77e04dad1 100644 --- a/ee/spec/frontend/storage_counter/components/usage_statistics_spec.js +++ b/ee/spec/frontend/storage_counter/components/usage_statistics_spec.js @@ -1,4 +1,4 @@ -import { GlButton, GlSprintf } from '@gitlab/ui'; +import { GlButton, GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import UsageStatistics from 'ee/storage_counter/components/usage_statistics.vue'; import UsageStatisticsCard from 'ee/storage_counter/components/usage_statistics_card.vue'; @@ -21,12 +21,15 @@ describe('Usage Statistics component', () => { stubs: { UsageStatisticsCard, GlSprintf, + GlLink, }, }); }; const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard); const getStatisticsCard = (testId) => wrapper.find(`[data-testid="${testId}"]`); + const findGlLinkInCard = (cardName) => + getStatisticsCard(cardName).find('[data-testid="statistics-card-footer"]').find(GlLink); describe('with purchaseStorageUrl passed', () => { beforeEach(() => { @@ -43,24 +46,20 @@ describe('Usage Statistics component', () => { expect(getStatisticsCards()).toHaveLength(3); }); - it('renders text in total usage card footer', () => { - expect( - getStatisticsCard('totalUsage').find('[data-testid="statisticsCardFooter"]').text(), - ).toMatchInterpolatedText( - 'This is the total amount of storage used across your projects within this namespace.', - ); + it('renders URL in total usage card footer', () => { + const url = findGlLinkInCard('total-usage'); + + expect(url.attributes('href')).toBe('/help/user/usage_quotas'); }); - it('renders text in excess usage card footer', () => { - expect( - getStatisticsCard('excessUsage').find('[data-testid="statisticsCardFooter"]').text(), - ).toMatchInterpolatedText( - 'This is the total amount of storage used by projects above the free 978.8KiB storage limit.', - ); + it('renders URL in excess usage card footer', () => { + const url = findGlLinkInCard('excess-usage'); + + expect(url.attributes('href')).toBe('/help/user/usage_quotas#excess-storage-usage'); }); it('renders button in purchased usage card footer', () => { - expect(getStatisticsCard('purchasedUsage').find(GlButton).exists()).toBe(true); + expect(getStatisticsCard('purchased-usage').find(GlButton).exists()).toBe(true); }); }); @@ -70,8 +69,13 @@ describe('Usage Statistics component', () => { purchaseStorageUrl: null, }); }); + + afterEach(() => { + wrapper.destroy(); + }); + it('does not render purchased usage card if purchaseStorageUrl is not provided', () => { - expect(getStatisticsCard('purchasedUsage').exists()).toBe(false); + expect(getStatisticsCard('purchased-usage').exists()).toBe(false); }); }); }); diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 86515a5626a14c18d187240797500d3e4cddbc8b..d52b4318f357c9980e23d3a696bb20cd2844e898 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -31413,6 +31413,12 @@ msgstr "" msgid "UsageQuota|LFS Storage" msgstr "" +msgid "UsageQuota|Learn more about excess storage usage" +msgstr "" + +msgid "UsageQuota|Learn more about usage quotas" +msgstr "" + msgid "UsageQuota|Packages" msgstr ""