Merge branch '334888-use-usage-graph-in-project-storage' into 'master'

Replace projects storage placeholder with usage-graph

See merge request gitlab-org/gitlab!68866

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

 <script>
 import { GlAlert } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
 import getProjectStorageCount from '../queries/project_storage.query.graphql';
 import { parseGetProjectStorageResults } from '../utils';
 
@@ -8,6 +9,7 @@ export default {
   name: 'StorageCounterApp',
   components: {
     GlAlert,
+    UsageGraph,
   },
   inject: ['projectPath'],
   apollo: {
@@ -43,8 +45,13 @@ export default {
 };
 </script>
 <template>
-  <gl-alert v-if="error" variant="danger" @dismiss="clearError">
-    {{ error }}
-  </gl-alert>
-  <div v-else>{{ $options.i18n.placeholder }}</div>
+  <div>
+    <gl-alert v-if="error" variant="danger" @dismiss="clearError">
+      {{ error }}
+    </gl-alert>
+    <div v-else>{{ $options.i18n.placeholder }}</div>
+    <div v-if="project.statistics" class="gl-w-full">
+      <usage-graph :root-storage-statistics="project.statistics" :limit="0" />
+    </div>
+  </div>
 </template>

app/assets/javascripts/projects/storage_counter/utils.js

@@ -60,5 +60,6 @@ export const parseGetProjectStorageResults = (data) => {
       totalUsage: numberToHumanSize(storageSize),
       storageTypes,
     },
+    statistics: projectStatistics,
   };
 };

spec/frontend/projects/storage_counter/app_spec.js

@@ -4,18 +4,18 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import StorageCounterApp from '~/projects/storage_counter/components/app.vue';
 import getProjectStorageCount from '~/projects/storage_counter/queries/project_storage.query.graphql';
+import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
+import { projectStorageCountResponse } from './mock_data';
 
 const localVue = createLocalVue();
 
 describe('Storage counter app', () => {
   let wrapper;
 
-  const createMockApolloProvider = () => {
+  const createMockApolloProvider = ({ mutationMock }) => {
     localVue.use(VueApollo);
 
-    const requestHandlers = [
-      [getProjectStorageCount, jest.fn().mockRejectedValue(new Error('GraphQL error'))],
-    ];
+    const requestHandlers = [[getProjectStorageCount, mutationMock]];
 
     return createMockApollo(requestHandlers);
   };
@@ -36,6 +36,7 @@ describe('Storage counter app', () => {
   };
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findUsageGraph = () => wrapper.findComponent(UsageGraph);
 
   beforeEach(() => {
     createComponent();
@@ -50,10 +51,10 @@ describe('Storage counter app', () => {
   });
 
   describe('handling apollo fetching error', () => {
-    let mockApollo;
+    const mutationMock = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 
     beforeEach(() => {
-      mockApollo = createMockApolloProvider();
+      const mockApollo = createMockApolloProvider({ mutationMock });
       createComponent({ mockApollo });
     });
 
@@ -61,4 +62,22 @@ describe('Storage counter app', () => {
       expect(findAlert().exists()).toBe(true);
     });
   });
+
+  describe('rendering <usage-graph />', () => {
+    const mutationMock = jest.fn().mockResolvedValue(projectStorageCountResponse);
+
+    beforeEach(() => {
+      const mockApollo = createMockApolloProvider({ mutationMock });
+      createComponent({ mockApollo });
+    });
+
+    it('renders usage-graph component if project.statistics exists', () => {
+      expect(findUsageGraph().exists()).toBe(true);
+    });
+
+    it('passes project.statistics to usage-graph component', () => {
+      const { __typename, ...statistics } = projectStorageCountResponse.data.project.statistics;
+      expect(findUsageGraph().props('rootStorageStatistics')).toMatchObject(statistics);
+    });
+  });
 });

spec/frontend/projects/storage_counter/mock_data.js

+export const projectStorageCountResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/20',
+      statistics: {
+        buildArtifactsSize: 400000,
+        lfsObjectsSize: 4800000,
+        packagesSize: 3800000,
+        repositorySize: 39000000,
+        snippetsSize: 0,
+        storageSize: 39930000,
+        uploadsSize: 0,
+        wikiSize: 300000,
+        __typename: 'ProjectStatistics',
+      },
+      __typename: 'Project',
+    },
+  },
+};