Merge branch '350646-rename-usage-column-in-storage-projects-list' into 'master'

Rename usage column in storage projects-list

See merge request gitlab-org/gitlab!81144

ee/app/assets/javascripts/usage_quotas/storage/components/namespace_storage_app.vue

@@ -9,7 +9,7 @@ import {
 } from '@gitlab/ui';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { PROJECTS_PER_PAGE } from '../constants';
+import { PROJECTS_PER_PAGE, PROJECT_TABLE_LABEL_STORAGE_USAGE } from '../constants';
 import query from '../queries/namespace_storage.query.graphql';
 import { formatUsageSize, parseGetStorageResults } from '../utils';
 import ProjectList from './project_list.vue';
@@ -35,6 +35,9 @@ export default {
   directives: {
     GlModalDirective,
   },
+  i18n: {
+    PROJECT_TABLE_LABEL_STORAGE_USAGE,
+  },
   mixins: [glFeatureFlagsMixin()],
   inject: ['namespacePath', 'purchaseStorageUrl', 'isTemporaryStorageIncreaseVisible', 'helpLinks'],
   apollo: {
@@ -212,6 +215,7 @@ export default {
       :projects="namespaceProjects"
       :is-loading="isQueryLoading"
       :additional-purchased-storage-size="namespace.additionalPurchasedStorageSize || 0"
+      :usage-label="$options.i18n.PROJECT_TABLE_LABEL_STORAGE_USAGE"
       @search="handleSearch"
     />
     <div class="gl-display-flex gl-justify-content-center gl-mt-5">

ee/app/assets/javascripts/usage_quotas/storage/components/project_list.vue

@@ -23,10 +23,14 @@ export default {
       required: false,
       default: false,
     },
+    usageLabel: {
+      type: String,
+      required: false,
+      default: PROJECT_TABLE_LABEL_USAGE,
+    },
   },
   i18n: {
     PROJECT_TABLE_LABEL_PROJECT,
-    PROJECT_TABLE_LABEL_USAGE,
   },
 };
 </script>
@@ -40,8 +44,12 @@ export default {
       <div class="table-section section-70 gl-font-weight-bold" role="columnheader">
         {{ $options.i18n.PROJECT_TABLE_LABEL_PROJECT }}
       </div>
-      <div class="table-section section-30 gl-font-weight-bold" role="columnheader">
-        {{ $options.i18n.PROJECT_TABLE_LABEL_USAGE }}
+      <div
+        class="table-section section-30 gl-font-weight-bold"
+        role="columnheader"
+        data-testid="usage-label"
+      >
+        {{ usageLabel }}
       </div>
     </div>
     <projects-skeleton-loader v-if="isLoading" />

ee/app/assets/javascripts/usage_quotas/storage/constants.js

@@ -60,6 +60,7 @@ export const PROJECT_STORAGE_TYPES = [
 export const PROJECT_TABLE_LABEL_PROJECT = __('Project');
 export const PROJECT_TABLE_LABEL_STORAGE_TYPE = s__('UsageQuota|Storage type');
 export const PROJECT_TABLE_LABEL_USAGE = s__('UsageQuota|Usage');
+export const PROJECT_TABLE_LABEL_STORAGE_USAGE = s__('UsageQuota|Storage used');
 
 export const SKELETON_LOADER_ROWS = 5;
 

ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CollapsibleProjectStorageDetail from 'ee/usage_quotas/storage/components/collapsible_project_storage_detail.vue';
 import ProjectList from 'ee/usage_quotas/storage/components/project_list.vue';
+import {
+  PROJECT_TABLE_LABEL_STORAGE_USAGE,
+  PROJECT_TABLE_LABEL_USAGE,
+} from 'ee/usage_quotas/storage/constants';
 import { projects } from '../mock_data';
 
 let wrapper;
 
-const createComponent = ({ additionalRepoStorageByNamespace = false } = {}) => {
-  wrapper = shallowMount(ProjectList, {
+const createComponent = ({ props = {}, additionalRepoStorageByNamespace = false } = {}) => {
+  wrapper = shallowMountExtended(ProjectList, {
     propsData: {
       projects,
       additionalPurchasedStorageSize: 0,
+      ...props,
     },
     provide: {
       glFeatures: {
@@ -20,6 +25,7 @@ const createComponent = ({ additionalRepoStorageByNamespace = false } = {}) => {
 };
 
 const findTableRows = () => wrapper.findAllComponents(CollapsibleProjectStorageDetail);
+const findUsageLabel = () => wrapper.findByTestId('usage-label');
 
 describe('ProjectList', () => {
   beforeEach(() => {
@@ -34,6 +40,20 @@ describe('ProjectList', () => {
     expect(findTableRows()).toHaveLength(3);
   });
 
+  describe('usage column', () => {
+    it('renders passed `usageLabel` as column label', () => {
+      createComponent({ props: { usageLabel: PROJECT_TABLE_LABEL_STORAGE_USAGE } });
+
+      expect(findUsageLabel().text()).toBe(PROJECT_TABLE_LABEL_STORAGE_USAGE);
+    });
+
+    it('renders `Usage` as column label by default', () => {
+      createComponent();
+
+      expect(findUsageLabel().text()).toBe(PROJECT_TABLE_LABEL_USAGE);
+    });
+  });
+
   describe('with additional repo storage feature flag ', () => {
     beforeEach(() => {
       createComponent({ additionalRepoStorageByNamespace: true });

locale/gitlab.pot

@@ -39399,6 +39399,9 @@ msgstr ""
 msgid "UsageQuota|Storage type"
 msgstr ""
 
+msgid "UsageQuota|Storage used"
+msgstr ""
+
 msgid "UsageQuota|This is the total amount of storage used across your projects within this namespace."
 msgstr ""