Merge branch 'usage-quotas-statistics-hide-docs-links' into 'master'

Remove usage statistics docs links

See merge request gitlab-org/gitlab!45856

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

@@ -85,6 +85,7 @@ export default {
 
       return {
         totalRepositorySize: this.namespace.totalRepositorySize,
+        actualRepositorySizeLimit: this.namespace.actualRepositorySizeLimit,
         totalRepositorySizeExcess: this.namespace.totalRepositorySizeExcess,
         additionalPurchasedStorageSize: this.namespace.additionalPurchasedStorageSize,
       };

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

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlSprintf } from '@gitlab/ui';
 import UsageStatisticsCard from './usage_statistics_card.vue';
 import { s__ } from '~/locale';
 import { formatUsageSize } from '../utils';
@@ -7,6 +7,7 @@ import { formatUsageSize } from '../utils';
 export default {
   components: {
     GlButton,
+    GlSprintf,
     UsageStatisticsCard,
   },
   props: {
@@ -16,24 +17,25 @@ export default {
     },
   },
   computed: {
+    formattedActualRepoSizeLimit() {
+      return formatUsageSize(this.rootStorageStatistics.actualRepositorySizeLimit);
+    },
     totalUsage() {
       return {
-        usage: this.formatSize(this.rootStorageStatistics.totalRepositorySize),
+        usage: this.formatSizeAndSplit(this.rootStorageStatistics.totalRepositorySize),
         description: s__('UsageQuota|Total namespace storage used'),
-        link: {
-          text: s__('UsageQuota|Learn more about usage quotas'),
-          url: '#',
-        },
+        footerNote: s__(
+          'UsageQuota|This is the total amount of storage used across your projects within this namespace.',
+        ),
       };
     },
     excessUsage() {
       return {
-        usage: this.formatSize(this.rootStorageStatistics.totalRepositorySizeExcess),
+        usage: this.formatSizeAndSplit(this.rootStorageStatistics.totalRepositorySizeExcess),
         description: s__('UsageQuota|Total excess storage used'),
-        link: {
-          text: s__('UsageQuota|Learn more about excess storage usage'),
-          url: '#',
-        },
+        footerNote: s__(
+          'UsageQuota|This is the total amount of storage used by projects above the free %{actualRepositorySizeLimit} storage limit.',
+        ),
       };
     },
     purchasedUsage() {
@@ -42,10 +44,10 @@ export default {
         additionalPurchasedStorageSize,
       } = this.rootStorageStatistics;
       return {
-        usage: this.formatSize(
+        usage: this.formatSizeAndSplit(
           Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
         ),
-        usageTotal: this.formatSize(additionalPurchasedStorageSize),
+        usageTotal: this.formatSizeAndSplit(additionalPurchasedStorageSize),
         description: s__('UsageQuota|Purchased storage available'),
         link: {
           text: s__('UsageQuota|Purchase more storage'),
@@ -65,7 +67,7 @@ export default {
      * @params {Number} size size in bytes
      * @returns {Object} value and unit of formatted size
      */
-    formatSize(size) {
+    formatSizeAndSplit(size) {
       const formattedSize = formatUsageSize(size);
       return {
         value: formattedSize.slice(0, -3),
@@ -83,14 +85,26 @@ export default {
       :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"
       :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
       data-testid="purchasedUsage"
       :usage="purchasedUsage.usage"
@@ -99,7 +113,7 @@ export default {
       :description="purchasedUsage.description"
       css-class="gl-ml-4"
     >
-      <template #link="{link}">
+      <template #footer="{link}">
         <gl-button
           target="_blank"
           :href="link.url"

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

@@ -60,8 +60,11 @@ export default {
     <p class="gl-border-b-2 gl-border-b-solid gl-border-b-gray-100 gl-font-weight-bold gl-pb-3">
       {{ description }}
     </p>
-    <p class="gl-mb-0">
-      <slot v-bind="{ link }" name="link">
+    <p
+      class="gl-mb-0 gl-text-gray-900 gl-font-sm gl-white-space-normal"
+      data-testid="statisticsCardFooter"
+    >
+      <slot v-bind="{ link }" name="footer">
         <gl-link target="_blank" :href="link.url">
           <span class="text-truncate">{{ link.text }}</span>
           <gl-icon name="external-link" class="gl-ml-2 gl-flex-shrink-0 gl-text-black-normal" />

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

 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlLink } from '@gitlab/ui';
+import { GlButton, GlSprintf } from '@gitlab/ui';
 import UsageStatistics from 'ee/storage_counter/components/usage_statistics.vue';
 import UsageStatisticsCard from 'ee/storage_counter/components/usage_statistics_card.vue';
 import { withRootStorageStatistics } from '../mock_data';
@@ -10,11 +10,16 @@ describe('Usage Statistics component', () => {
   const createComponent = () => {
     wrapper = shallowMount(UsageStatistics, {
       propsData: {
-        rootStorageStatistics: withRootStorageStatistics.rootStorageStatistics,
+        rootStorageStatistics: {
+          totalRepositorySize: withRootStorageStatistics.totalRepositorySize,
+          actualRepositorySizeLimit: withRootStorageStatistics.actualRepositorySizeLimit,
+          totalRepositorySizeExcess: withRootStorageStatistics.totalRepositorySizeExcess,
+          additionalPurchasedStorageSize: withRootStorageStatistics.additionalPurchasedStorageSize,
+        },
       },
       stubs: {
         UsageStatisticsCard,
-        GlLink,
+        GlSprintf,
       },
     });
   };
@@ -34,15 +39,30 @@ describe('Usage Statistics component', () => {
     expect(getStatisticsCards()).toHaveLength(3);
   });
 
-  it.each`
-    cardName            | componentName | componentType
-    ${'totalUsage'}     | ${'GlLink'}   | ${GlLink}
-    ${'excessUsage'}    | ${'GlLink'}   | ${GlLink}
-    ${'purchasedUsage'} | ${'GlButton'} | ${GlButton}
-  `('renders $componentName in $cardName', ({ cardName, componentType }) => {
+  it('renders text in total usage card footer', () => {
     expect(
-      getStatisticsCard(cardName)
-        .find(componentType)
+      getStatisticsCard('totalUsage')
+        .find('[data-testid="statisticsCardFooter"]')
+        .text(),
+    ).toMatchInterpolatedText(
+      'This is the total amount of storage used across your projects within this namespace.',
+    );
+  });
+
+  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 button in purchased usage card footer', () => {
+    expect(
+      getStatisticsCard('purchasedUsage')
+        .find(GlButton)
         .exists(),
     ).toBe(true);
   });

locale/gitlab.pot

@@ -28629,12 +28629,6 @@ 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 ""
 
@@ -28659,6 +28653,12 @@ msgstr ""
 msgid "UsageQuota|Storage"
 msgstr ""
 
+msgid "UsageQuota|This is the total amount of storage used across your projects within this namespace."
+msgstr ""
+
+msgid "UsageQuota|This is the total amount of storage used by projects above the free %{actualRepositorySizeLimit} storage limit."
+msgstr ""
+
 msgid "UsageQuota|This namespace contains locked projects"
 msgstr ""