Move storage usage_graph component to new usage_quotas folder

app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.stories.js

-/* eslint-disable @gitlab/require-i18n-strings */
-import '@gitlab/ui/dist/utility_classes.css';
-import UsageGraph from './usage_graph.vue';
-
-export default {
-  component: UsageGraph,
-  title: 'vue_shared/components/storage_counter/usage_graph',
-};
-
-const Template = (args, { argTypes }) => ({
-  components: { UsageGraph },
-  props: Object.keys(argTypes),
-  template: '<usage-graph v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.argTypes = {
-  rootStorageStatistics: {
-    description: 'The statistics object with all its fields',
-    type: { name: 'object', required: true },
-    defaultValue: {
-      buildArtifactsSize: 400000,
-      pipelineArtifactsSize: 38000,
-      lfsObjectsSize: 4800000,
-      packagesSize: 3800000,
-      repositorySize: 39000000,
-      snippetsSize: 2000112,
-      storageSize: 39930000,
-      uploadsSize: 7000,
-      wikiSize: 300000,
-    },
-  },
-  limit: {
-    description:
-      'When a limit is set, users will see how much of their storage usage (limit) is used. In case the limit is 0 or the current usage exceeds the limit, it just renders the distribution',
-    defaultValue: 0,
-  },
-};

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

@@ -8,7 +8,6 @@ import {
   GlKeysetPagination,
 } from '@gitlab/ui';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { PROJECTS_PER_PAGE } from '../constants';
 import query from '../queries/namespace_storage.query.graphql';
@@ -16,6 +15,7 @@ import { formatUsageSize, parseGetStorageResults } from '../utils';
 import ProjectList from './project_list.vue';
 import StorageInlineAlert from './storage_inline_alert.vue';
 import TemporaryStorageIncreaseModal from './temporary_storage_increase_modal.vue';
+import UsageGraph from './usage_graph.vue';
 import UsageStatistics from './usage_statistics.vue';
 
 export default {

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

 <script>
 import { GlAlert, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf } from '~/locale';
-import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
 import {
   ERROR_MESSAGE,
   LEARN_MORE_LABEL,
@@ -13,6 +12,7 @@ import {
 } from '../constants';
 import getProjectStorageStatistics from '../queries/project_storage.query.graphql';
 import { parseGetProjectStorageResults } from '../utils';
+import UsageGraph from './usage_graph.vue';
 import ProjectStorageDetail from './project_storage_detail.vue';
 
 export default {

app/assets/javascripts/vue_shared/components/storage_counter/usage_graph.vue → ee/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue

 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { s__ } from '~/locale';
+import { PROJECT_STORAGE_TYPES } from '../constants';
 
 export default {
   components: {
@@ -41,51 +41,62 @@ export default {
 
       return [
         {
-          name: s__('UsageQuota|Repositories'),
+          id: 'repositorySize',
           style: this.usageStyle(this.barRatio(repositorySize)),
           class: 'gl-bg-data-viz-blue-500',
           size: repositorySize,
         },
         {
-          name: s__('UsageQuota|LFS Objects'),
+          id: 'lfsObjectsSize',
           style: this.usageStyle(this.barRatio(lfsObjectsSize)),
           class: 'gl-bg-data-viz-orange-600',
           size: lfsObjectsSize,
         },
         {
-          name: s__('UsageQuota|Packages'),
+          id: 'packagesSize',
           style: this.usageStyle(this.barRatio(packagesSize)),
           class: 'gl-bg-data-viz-aqua-500',
           size: packagesSize,
         },
         {
-          name: s__('UsageQuota|Artifacts'),
+          id: 'buildArtifactsSize',
           style: this.usageStyle(this.barRatio(artifactsSize)),
           class: 'gl-bg-data-viz-green-600',
           size: artifactsSize,
-          tooltip: s__('UsageQuota|Artifacts is a sum of build and pipeline artifacts.'),
         },
         {
-          name: s__('UsageQuota|Wikis'),
+          id: 'wikiSize',
           style: this.usageStyle(this.barRatio(wikiSize)),
           class: 'gl-bg-data-viz-magenta-500',
           size: wikiSize,
         },
         {
-          name: s__('UsageQuota|Snippets'),
+          id: 'snippetsSize',
           style: this.usageStyle(this.barRatio(snippetsSize)),
           class: 'gl-bg-data-viz-orange-800',
           size: snippetsSize,
         },
         {
-          name: s__('UsageQuota|Uploads'),
+          id: 'uploadsSize',
           style: this.usageStyle(this.barRatio(uploadsSize)),
           class: 'gl-bg-data-viz-aqua-700',
           size: uploadsSize,
         },
       ]
         .filter((data) => data.size !== 0)
-        .sort((a, b) => b.size - a.size);
+        .sort((a, b) => b.size - a.size)
+        .map((storageType) => {
+          const storageTypeExtraData = PROJECT_STORAGE_TYPES.find(
+            (type) => storageType.id === type.id,
+          );
+          const { name, tooltip } = storageTypeExtraData || {};
+
+          return {
+            name,
+            tooltip,
+            ...storageType,
+          };
+        });
     },
   },
   methods: {

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

@@ -22,6 +22,7 @@ export const PROJECT_STORAGE_TYPES = [
       'UsageQuota|Because of a known issue, the artifact total for some projects may be incorrect. For more details, read %{warningLinkStart}the epic%{warningLinkEnd}.',
     ),
     warningLink: 'https://gitlab.com/groups/gitlab-org/-/epics/5380',
+    tooltip: s__('UsageQuota|Artifacts is a sum of build and pipeline artifacts.'),
   },
   {
     id: 'lfsObjectsSize',

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

@@ -5,9 +5,9 @@ import ProjectList from 'ee/usage_quotas/storage/components/project_list.vue';
 import StorageInlineAlert from 'ee/usage_quotas/storage/components/storage_inline_alert.vue';
 import TemporaryStorageIncreaseModal from 'ee/usage_quotas/storage/components/temporary_storage_increase_modal.vue';
 import UsageStatistics from 'ee/usage_quotas/storage/components/usage_statistics.vue';
+import UsageGraph from 'ee/usage_quotas/storage/components/usage_graph.vue';
 import { formatUsageSize } from 'ee/usage_quotas/storage/utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
 import { namespaceData, withRootStorageStatistics } from '../mock_data';
 
 const TEST_LIMIT = 1000;

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

@@ -5,9 +5,9 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ProjectStorageApp from 'ee/usage_quotas/storage/components/project_storage_app.vue';
+import UsageGraph from 'ee/usage_quotas/storage/components/usage_graph.vue';
 import { TOTAL_USAGE_DEFAULT_TEXT } from 'ee/usage_quotas/storage/constants';
 import getProjectStorageStatistics from 'ee/usage_quotas/storage/queries/project_storage.query.graphql';
-import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
 import {
   projectData,
   mockGetProjectStorageStatisticsGraphQLResponse,

spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js → ee/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
+import UsageGraph from 'ee/usage_quotas/storage/components/usage_graph.vue';
 
 let data;
 let wrapper;
@@ -56,15 +56,15 @@ describe('Storage Counter usage graph component', () => {
       uploadsSize,
     } = data.rootStorageStatistics;
 
-    expect(types.at(0).text()).toMatchInterpolatedText(`Wikis ${numberToHumanSize(wikiSize)}`);
+    expect(types.at(0).text()).toMatchInterpolatedText(`Wiki ${numberToHumanSize(wikiSize)}`);
     expect(types.at(1).text()).toMatchInterpolatedText(
-      `Repositories ${numberToHumanSize(repositorySize)}`,
+      `Repository ${numberToHumanSize(repositorySize)}`,
     );
     expect(types.at(2).text()).toMatchInterpolatedText(
       `Packages ${numberToHumanSize(packagesSize)}`,
     );
     expect(types.at(3).text()).toMatchInterpolatedText(
-      `LFS Objects ${numberToHumanSize(lfsObjectsSize)}`,
+      `LFS storage ${numberToHumanSize(lfsObjectsSize)}`,
     );
     expect(types.at(4).text()).toMatchInterpolatedText(
       `Snippets ${numberToHumanSize(snippetsSize)}`,

locale/gitlab.pot

@@ -37553,9 +37553,6 @@ msgstr ""
 msgid "UsageQuota|Increase storage temporarily"
 msgstr ""
 
-msgid "UsageQuota|LFS Objects"
-msgstr ""
-
 msgid "UsageQuota|LFS storage"
 msgstr ""
 
@@ -37586,9 +37583,6 @@ msgstr ""
 msgid "UsageQuota|Purchased storage available"
 msgstr ""
 
-msgid "UsageQuota|Repositories"
-msgstr ""
-
 msgid "UsageQuota|Repository"
 msgstr ""
 
@@ -37667,9 +37661,6 @@ msgstr ""
 msgid "UsageQuota|Wiki content."
 msgstr ""
 
-msgid "UsageQuota|Wikis"
-msgstr ""
-
 msgid "UsageQuota|You have consumed all of your additional storage, please purchase more to unlock your projects over the free %{actualRepositorySizeLimit} limit."
 msgstr ""