Merge branch '334888-extract-usage-graph-to-vue_shared' into 'master'

Move usage_graph component to vue_shared folder

See merge request gitlab-org/gitlab!69374

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/storage_counter/components/app.vue

@@ -8,6 +8,7 @@ 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/storage.query.graphql';
@@ -15,7 +16,6 @@ import { formatUsageSize, parseGetStorageResults } from '../utils';
 import ProjectsTable from './projects_table.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/spec/frontend/storage_counter/components/app_spec.js

@@ -4,10 +4,10 @@ import Project from 'ee/storage_counter/components/project.vue';
 import ProjectsTable from 'ee/storage_counter/components/projects_table.vue';
 import StorageInlineAlert from 'ee/storage_counter/components/storage_inline_alert.vue';
 import TemporaryStorageIncreaseModal from 'ee/storage_counter/components/temporary_storage_increase_modal.vue';
-import UsageGraph from 'ee/storage_counter/components/usage_graph.vue';
 import UsageStatistics from 'ee/storage_counter/components/usage_statistics.vue';
 import { formatUsageSize } from 'ee/storage_counter/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/storage_counter/components/usage_graph_spec.js → spec/frontend/vue_shared/components/storage_counter/usage_graph_spec.js

 import { shallowMount } from '@vue/test-utils';
-import UsageGraph from 'ee/storage_counter/components/usage_graph.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
+import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
 
 let data;
 let wrapper;