Update doc links in usage quotas

ee/app/assets/javascripts/storage_counter/components/usage_statistics.vue

 <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"

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">

ee/changelogs/unreleased/vs-update-doc-links-in-usage-quotas.yml

+---
+title: Replace text with links on Usage Quota page
+merge_request: 53279
+author:
+type: added

ee/spec/frontend/storage_counter/components/usage_statistics_spec.js

-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);
     });
   });
 });

locale/gitlab.pot

@@ -31362,6 +31362,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 ""