Add latest changes from gitlab-org/gitlab@master

6 files changed, 148 insertions, 353 deletions

diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
index 576263d5418..ca5f80f331c 100644
--- a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
@@ -1,19 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { GlButton, GlDrawer, GlModal } from '@gitlab/ui';
+import { GlButton, GlModal } from '@gitlab/ui';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import CiEditorHeader from '~/ci/pipeline_editor/components/editor/ci_editor_header.vue';
 import CommitSection from '~/ci/pipeline_editor/components/commit/commit_section.vue';
 import PipelineEditorDrawer from '~/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
 import JobAssistantDrawer from '~/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue';
 import PipelineEditorFileNav from '~/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorFileTree from '~/ci/pipeline_editor/components/file_tree/container.vue';
-import BranchSwitcher from '~/ci/pipeline_editor/components/file_nav/branch_switcher.vue';
 import PipelineEditorHeader from '~/ci/pipeline_editor/components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from '~/ci/pipeline_editor/components/pipeline_editor_tabs.vue';
 import {
   CREATE_TAB,
+  EDITOR_APP_DRAWER_HELP,
+  EDITOR_APP_DRAWER_JOB_ASSISTANT,
+  EDITOR_APP_DRAWER_NONE,
   FILE_TREE_DISPLAY_KEY,
   VALIDATE_TAB,
   MERGED_TAB,
@@ -29,10 +29,9 @@ jest.mock('~/lib/utils/common_utils');
 describe('Pipeline editor home wrapper', () => {
   let wrapper;
 
-  const createComponent = ({ props = {}, glFeatures = {}, data = {}, stubs = {} } = {}) => {
+  const createComponent = ({ props = {}, glFeatures = {}, stubs = {} } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(PipelineEditorHome, {
-        data: () => data,
         propsData: {
           ciConfigData: mockLintResponse,
           ciFileContent: mockCiYml,
@@ -53,7 +52,6 @@ describe('Pipeline editor home wrapper', () => {
     );
   };
 
-  const findBranchSwitcher = () => wrapper.findComponent(BranchSwitcher);
   const findCommitSection = () => wrapper.findComponent(CommitSection);
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
   const findModal = () => wrapper.findComponent(GlModal);
@@ -63,8 +61,16 @@ describe('Pipeline editor home wrapper', () => {
   const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
   const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
   const findFileTreeBtn = () => wrapper.findByTestId('file-tree-toggle');
-  const findHelpBtn = () => wrapper.findByTestId('drawer-toggle');
-  const findJobAssistantBtn = () => wrapper.findByTestId('job-assistant-drawer-toggle');
+
+  const clickHelpBtn = async () => {
+    await findPipelineEditorDrawer().vm.$emit('switch-drawer', EDITOR_APP_DRAWER_HELP);
+  };
+  const clickJobAssistantBtn = async () => {
+    await findJobAssistantDrawer().vm.$emit('switch-drawer', EDITOR_APP_DRAWER_JOB_ASSISTANT);
+  };
+  const closeDrawer = async (finder) => {
+    await finder().vm.$emit('switch-drawer', EDITOR_APP_DRAWER_NONE);
+  };
 
   afterEach(() => {
     localStorage.clear();
@@ -103,11 +109,9 @@ describe('Pipeline editor home wrapper', () => {
       });
     });
     describe('when `showSwitchBranchModal` value is true', () => {
-      beforeEach(() => {
-        createComponent({
-          data: { showSwitchBranchModal: true },
-          stubs: { PipelineEditorFileNav },
-        });
+      beforeEach(async () => {
+        createComponent();
+        await findFileNav().vm.$emit('select-branch');
       });
 
       it('is visible', () => {
@@ -115,11 +119,11 @@ describe('Pipeline editor home wrapper', () => {
       });
 
       it('pass down `shouldLoadNewBranch` to the branch switcher when primary is selected', async () => {
-        expect(findBranchSwitcher().props('shouldLoadNewBranch')).toBe(false);
+        expect(findFileNav().props('shouldLoadNewBranch')).toBe(false);
 
         await findModal().vm.$emit('primary');
 
-        expect(findBranchSwitcher().props('shouldLoadNewBranch')).toBe(true);
+        expect(findFileNav().props('shouldLoadNewBranch')).toBe(true);
       });
 
       it('closes the modal when secondary action is selected', async () => {
@@ -148,9 +152,7 @@ describe('Pipeline editor home wrapper', () => {
       async ({ tab, shouldShow }) => {
         expect(findCommitSection().exists()).toBe(true);
 
-        findPipelineEditorTabs().vm.$emit('set-current-tab', tab);
-
-        await nextTick();
+        await findPipelineEditorTabs().vm.$emit('set-current-tab', tab);
 
         expect(findCommitSection().isVisible()).toBe(shouldShow);
       },
@@ -159,12 +161,10 @@ describe('Pipeline editor home wrapper', () => {
     it('shows the commit form again when coming back to the create tab', async () => {
       expect(findCommitSection().isVisible()).toBe(true);
 
-      findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB);
-      await nextTick();
+      await findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB);
       expect(findCommitSection().isVisible()).toBe(false);
 
-      findPipelineEditorTabs().vm.$emit('set-current-tab', CREATE_TAB);
-      await nextTick();
+      await findPipelineEditorTabs().vm.$emit('set-current-tab', CREATE_TAB);
       expect(findCommitSection().isVisible()).toBe(true);
     });
 
@@ -195,7 +195,9 @@ describe('Pipeline editor home wrapper', () => {
     describe('when "walkthrough-popover-cta-clicked" is emitted from pipeline editor tabs', () => {
       it('passes down `scrollToCommitForm=true` to commit section', async () => {
         expect(findCommitSection().props('scrollToCommitForm')).toBe(false);
+
         await findPipelineEditorTabs().vm.$emit('walkthrough-popover-cta-clicked');
+
         expect(findCommitSection().props('scrollToCommitForm')).toBe(true);
       });
     });
@@ -204,6 +206,7 @@ describe('Pipeline editor home wrapper', () => {
       it('passes down `scrollToCommitForm=false` to commit section', async () => {
         await findPipelineEditorTabs().vm.$emit('walkthrough-popover-cta-clicked');
         expect(findCommitSection().props('scrollToCommitForm')).toBe(true);
+
         await findCommitSection().vm.$emit('scrolled-to-commit-form');
         expect(findCommitSection().props('scrollToCommitForm')).toBe(false);
       });
@@ -211,133 +214,49 @@ describe('Pipeline editor home wrapper', () => {
   });
 
   describe('help drawer', () => {
-    const clickHelpBtn = async () => {
-      findHelpBtn().vm.$emit('click');
-      await nextTick();
-    };
-
-    it('hides the drawer by default', () => {
+    beforeEach(() => {
       createComponent();
+    });
 
+    it('hides the drawer by default', () => {
       expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
     });
 
     it('toggles the drawer on button click', async () => {
-      createComponent({
-        stubs: {
-          CiEditorHeader,
-          GlButton,
-          GlDrawer,
-          PipelineEditorTabs,
-          PipelineEditorDrawer,
-        },
-      });
-
-      await clickHelpBtn();
-
-      expect(findPipelineEditorDrawer().props('isVisible')).toBe(true);
-
-      await clickHelpBtn();
-
       expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
-    });
-
-    it("closes the drawer through the drawer's close button", async () => {
-      createComponent({
-        stubs: {
-          CiEditorHeader,
-          GlButton,
-          GlDrawer,
-          PipelineEditorTabs,
-          PipelineEditorDrawer,
-        },
-      });
 
       await clickHelpBtn();
-
       expect(findPipelineEditorDrawer().props('isVisible')).toBe(true);
 
-      findPipelineEditorDrawer().findComponent(GlDrawer).vm.$emit('close');
-      await nextTick();
-
+      await closeDrawer(findPipelineEditorDrawer);
       expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
     });
   });
 
   describe('job assistant drawer', () => {
-    const clickHelpBtn = async () => {
-      findHelpBtn().vm.$emit('click');
-      await nextTick();
-    };
-    const clickJobAssistantBtn = async () => {
-      findJobAssistantBtn().vm.$emit('click');
-      await nextTick();
-    };
-
-    const stubs = {
-      CiEditorHeader,
-      GlButton,
-      GlDrawer,
-      PipelineEditorTabs,
-      JobAssistantDrawer,
-    };
-
-    it('hides the job assistant drawer by default', () => {
+    beforeEach(() => {
       createComponent({
         glFeatures: {
           ciJobAssistantDrawer: true,
         },
       });
+    });
 
+    it('hides the job assistant drawer by default', () => {
       expect(findJobAssistantDrawer().props('isVisible')).toBe(false);
     });
 
     it('toggles the job assistant drawer on button click', async () => {
-      createComponent({
-        stubs,
-        glFeatures: {
-          ciJobAssistantDrawer: true,
-        },
-      });
-
-      await clickJobAssistantBtn();
-
-      expect(findJobAssistantDrawer().props('isVisible')).toBe(true);
-
-      await clickJobAssistantBtn();
-
       expect(findJobAssistantDrawer().props('isVisible')).toBe(false);
-    });
-
-    it("closes the job assistant drawer through the drawer's close button", async () => {
-      createComponent({
-        stubs,
-        glFeatures: {
-          ciJobAssistantDrawer: true,
-        },
-      });
 
       await clickJobAssistantBtn();
-
       expect(findJobAssistantDrawer().props('isVisible')).toBe(true);
 
-      findJobAssistantDrawer().findComponent(GlDrawer).vm.$emit('close');
-      await nextTick();
-
+      await closeDrawer(findJobAssistantDrawer);
       expect(findJobAssistantDrawer().props('isVisible')).toBe(false);
     });
 
     it('covers helper drawer when opened last', async () => {
-      createComponent({
-        stubs: {
-          ...stubs,
-          PipelineEditorDrawer,
-        },
-        glFeatures: {
-          ciJobAssistantDrawer: true,
-        },
-      });
-
       await clickHelpBtn();
       await clickJobAssistantBtn();
 
@@ -348,16 +267,6 @@ describe('Pipeline editor home wrapper', () => {
     });
 
     it('covered by helper drawer when opened first', async () => {
-      createComponent({
-        stubs: {
-          ...stubs,
-          PipelineEditorDrawer,
-        },
-        glFeatures: {
-          ciJobAssistantDrawer: true,
-        },
-      });
-
       await clickJobAssistantBtn();
       await clickHelpBtn();
 
@@ -370,8 +279,7 @@ describe('Pipeline editor home wrapper', () => {
 
   describe('file tree', () => {
     const toggleFileTree = async () => {
-      findFileTreeBtn().vm.$emit('click');
-      await nextTick();
+      await findFileTreeBtn().vm.$emit('click');
     };
 
     describe('button toggle', () => {
@@ -412,9 +320,7 @@ describe('Pipeline editor home wrapper', () => {
     describe('when file tree display state is saved in local storage', () => {
       beforeEach(() => {
         localStorage.setItem(FILE_TREE_DISPLAY_KEY, 'true');
-        createComponent({
-          stubs: { PipelineEditorFileNav },
-        });
+        createComponent();
       });
 
       it('shows the file tree by default', () => {
@@ -424,9 +330,7 @@ describe('Pipeline editor home wrapper', () => {
 
     describe('when file tree display state is not saved in local storage', () => {
       beforeEach(() => {
-        createComponent({
-          stubs: { PipelineEditorFileNav },
-        });
+        createComponent();
       });
 
       it('hides the file tree by default', () => {
diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
index 1a200090805..88ab51cf135 100644
--- a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
@@ -1,16 +1,24 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ProjectStorageApp from '~/usage_quotas/storage/components/project_storage_app.vue';
 import UsageGraph from '~/usage_quotas/storage/components/usage_graph.vue';
-import { TOTAL_USAGE_DEFAULT_TEXT } from '~/usage_quotas/storage/constants';
+import {
+  descendingStorageUsageSort,
+  getStorageTypesFromProjectStatistics,
+} from '~/usage_quotas/storage/utils';
+import {
+  storageTypeHelpPaths,
+  PROJECT_STORAGE_TYPES,
+  NAMESPACE_STORAGE_TYPES,
+  TOTAL_USAGE_DEFAULT_TEXT,
+} from '~/usage_quotas/storage/constants';
 import getProjectStorageStatistics from '~/usage_quotas/storage/queries/project_storage.query.graphql';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
 import {
-  projectData,
   mockGetProjectStorageStatisticsGraphQLResponse,
   mockEmptyResponse,
   defaultProjectProvideValues,
@@ -36,25 +44,26 @@ describe('ProjectStorageApp', () => {
   };
 
   const createComponent = ({ provide = {}, mockApollo } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(ProjectStorageApp, {
-        apolloProvider: mockApollo,
-        provide: {
-          ...defaultProjectProvideValues,
-          ...provide,
-        },
-      }),
-    );
+    wrapper = shallowMountExtended(ProjectStorageApp, {
+      apolloProvider: mockApollo,
+      provide: {
+        ...defaultProjectProvideValues,
+        ...provide,
+      },
+    });
   };
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findUsagePercentage = () => wrapper.findByTestId('total-usage');
-  const findUsageQuotasHelpLink = () => wrapper.findByTestId('usage-quotas-help-link');
   const findUsageGraph = () => wrapper.findComponent(UsageGraph);
+  const findProjectDetailsTable = () => wrapper.findByTestId('usage-quotas-project-usage-details');
+  const findNamespaceDetailsTable = () =>
+    wrapper.findByTestId('usage-quotas-namespace-usage-details');
 
   describe('with apollo fetching successful', () => {
     let mockApollo;
+    const mockProjectData = mockGetProjectStorageStatisticsGraphQLResponse.data.project;
 
     beforeEach(async () => {
       mockApollo = createMockApolloProvider({
@@ -65,13 +74,33 @@ describe('ProjectStorageApp', () => {
     });
 
     it('renders correct total usage', () => {
-      expect(findUsagePercentage().text()).toBe(projectData.storage.totalUsage);
+      const expectedValue = numberToHumanSize(
+        mockGetProjectStorageStatisticsGraphQLResponse.data.project.statistics.storageSize,
+        1,
+      );
+      expect(findUsagePercentage().text()).toBe(expectedValue);
+    });
+
+    it('passes project storage entities to project details table', () => {
+      const expectedValue = getStorageTypesFromProjectStatistics(
+        PROJECT_STORAGE_TYPES,
+        mockProjectData.statistics,
+        mockProjectData.statisticsDetailsPaths,
+        storageTypeHelpPaths,
+      ).sort(descendingStorageUsageSort('value'));
+
+      expect(findProjectDetailsTable().props('storageTypes')).toStrictEqual(expectedValue);
     });
 
-    it('renders correct usage quotas help link', () => {
-      expect(findUsageQuotasHelpLink().attributes('href')).toBe(
-        defaultProjectProvideValues.helpLinks.usageQuotas,
+    it('passes namespace storage entities to namespace details table', () => {
+      const expectedValue = getStorageTypesFromProjectStatistics(
+        NAMESPACE_STORAGE_TYPES,
+        mockProjectData.statistics,
+        mockProjectData.statisticsDetailsPaths,
+        storageTypeHelpPaths,
       );
+
+      expect(findNamespaceDetailsTable().props('storageTypes')).toStrictEqual(expectedValue);
     });
   });
 
@@ -104,6 +133,14 @@ describe('ProjectStorageApp', () => {
     it('shows default text for total usage', () => {
       expect(findUsagePercentage().text()).toBe(TOTAL_USAGE_DEFAULT_TEXT);
     });
+
+    it('passes empty array to project details table', () => {
+      expect(findProjectDetailsTable().props('storageTypes')).toStrictEqual([]);
+    });
+
+    it('passes empty array to namespace details table', () => {
+      expect(findNamespaceDetailsTable().props('storageTypes')).toStrictEqual([]);
+    });
   });
 
   describe('with apollo fetching error', () => {
diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js
index 37fc9602315..364517a474f 100644
--- a/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js
@@ -1,15 +1,36 @@
-import { GlTableLite, GlPopover } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { GlTableLite } from '@gitlab/ui';
+import { mount, Wrapper } from '@vue/test-utils'; // eslint-disable-line no-unused-vars
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ProjectStorageDetail from '~/usage_quotas/storage/components/project_storage_detail.vue';
-import { containerRegistryPopoverId, containerRegistryId } from '~/usage_quotas/storage/constants';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { projectData, projectHelpLinks } from '../mock_data';
 
 describe('ProjectStorageDetail', () => {
+  /** @type { Wrapper } */
   let wrapper;
 
-  const { storageTypes } = projectData.storage;
+  const generateStorageType = (props) => {
+    return {
+      id: 'id',
+      name: 'name',
+      description: 'description',
+      helpPath: '/help-path',
+      detailsPath: '/details-link',
+      value: 42,
+      ...props,
+    };
+  };
+
+  const storageTypes = [
+    generateStorageType({ id: 'one' }),
+    generateStorageType({ id: 'two' }),
+    generateStorageType({
+      id: 'three',
+      warning: {
+        content: 'warning message',
+      },
+    }),
+  ];
+
   const defaultProps = { storageTypes };
 
   const createComponent = (props = {}) => {
@@ -26,23 +47,7 @@ describe('ProjectStorageDetail', () => {
     );
   };
 
-  const generateStorageType = (id = 'buildArtifacts') => {
-    return {
-      storageType: {
-        id,
-        name: 'Test Name',
-        description: 'Test Description',
-        helpPath: '/test-type',
-      },
-      value: 400000,
-    };
-  };
-
   const findTable = () => wrapper.findComponent(GlTableLite);
-  const findPopoverById = (id) =>
-    wrapper.findAllComponents(GlPopover).filter((p) => p.attributes('data-testid') === id);
-  const findContainerRegistryPopover = () => findPopoverById(containerRegistryPopoverId);
-  const findContainerRegistryWarningIcon = () => wrapper.find(`#${containerRegistryPopoverId}`);
 
   beforeEach(() => {
     createComponent();
@@ -51,33 +56,23 @@ describe('ProjectStorageDetail', () => {
   describe('with storage types', () => {
     it.each(storageTypes)(
       'renders table row correctly %o',
-      ({ storageType: { id, name, description } }) => {
+      ({ id, name, value, description, helpPath, warning }) => {
         expect(wrapper.findByTestId(`${id}-name`).text()).toBe(name);
         expect(wrapper.findByTestId(`${id}-description`).text()).toBe(description);
         expect(wrapper.findByTestId(`${id}-icon`).props('name')).toBe(id);
-        expect(wrapper.findByTestId(`${id}-help-link`).attributes('href')).toBe(
-          projectHelpLinks[id],
-        );
+        expect(wrapper.findByTestId(`${id}-help-link`).attributes('href')).toBe(helpPath);
+        expect(wrapper.findByTestId(`${id}-value`).text()).toContain(numberToHumanSize(value, 1));
+
+        expect(wrapper.findByTestId(`${id}-warning-icon`).exists()).toBe(Boolean(warning));
+        expect(wrapper.findByTestId(`${id}-popover`).exists()).toBe(Boolean(warning));
       },
     );
-
-    it('should render items in order from the biggest usage size to the smallest', () => {
-      const rows = findTable().find('tbody').findAll('tr');
-      // Cloning array not to mutate the source
-      const sortedStorageTypes = [...storageTypes].sort((a, b) => b.value - a.value);
-
-      sortedStorageTypes.forEach((storageType, i) => {
-        const rowUsageAmount = rows.wrappers[i].find('td:last-child').text();
-        const expectedUsageAmount = numberToHumanSize(storageType.value, 1);
-        expect(rowUsageAmount).toBe(expectedUsageAmount);
-      });
-    });
   });
 
   describe('with details links', () => {
     it.each(storageTypes)('each $storageType.id', (item) => {
-      const shouldExist = Boolean(item.storageType.detailsPath && item.value);
-      const detailsLink = wrapper.findByTestId(`${item.storageType.id}-details-link`);
+      const shouldExist = Boolean(item.detailsPath && item.value);
+      const detailsLink = wrapper.findByTestId(`${item.id}-details-link`);
       expect(detailsLink.exists()).toBe(shouldExist);
     });
   });
@@ -95,21 +90,4 @@ describe('ProjectStorageDetail', () => {
       expect(findTable().find('td').exists()).toBe(false);
     });
   });
-
-  describe.each`
-    description                                    | mockStorageTypes                              | rendersContainerRegistryPopover
-    ${'without any storage type that has popover'} | ${[generateStorageType()]}                    | ${false}
-    ${'with container registry storage type'}      | ${[generateStorageType(containerRegistryId)]} | ${true}
-  `('$description', ({ mockStorageTypes, rendersContainerRegistryPopover }) => {
-    beforeEach(() => {
-      createComponent({ storageTypes: mockStorageTypes });
-    });
-
-    it(`does ${
-      rendersContainerRegistryPopover ? '' : ' not'
-    } render container registry warning icon and popover`, () => {
-      expect(findContainerRegistryWarningIcon().exists()).toBe(rendersContainerRegistryPopover);
-      expect(findContainerRegistryPopover().exists()).toBe(rendersContainerRegistryPopover);
-    });
-  });
 });
diff --git a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
index 7fef20c900e..fc116211bf0 100644
--- a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
@@ -44,7 +44,6 @@ describe('UsageGraph', () => {
       buildArtifactsSize,
       lfsObjectsSize,
       packagesSize,
-      containerRegistrySize,
       repositorySize,
       wikiSize,
       snippetsSize,
@@ -57,14 +56,11 @@ describe('UsageGraph', () => {
     expect(types.at(2).text()).toMatchInterpolatedText(
       `Packages ${numberToHumanSize(packagesSize)}`,
     );
-    expect(types.at(3).text()).toMatchInterpolatedText(
-      `Container Registry ${numberToHumanSize(containerRegistrySize)}`,
-    );
-    expect(types.at(4).text()).toMatchInterpolatedText(`LFS ${numberToHumanSize(lfsObjectsSize)}`);
-    expect(types.at(5).text()).toMatchInterpolatedText(
+    expect(types.at(3).text()).toMatchInterpolatedText(`LFS ${numberToHumanSize(lfsObjectsSize)}`);
+    expect(types.at(4).text()).toMatchInterpolatedText(
       `Snippets ${numberToHumanSize(snippetsSize)}`,
     );
-    expect(types.at(6).text()).toMatchInterpolatedText(
+    expect(types.at(5).text()).toMatchInterpolatedText(
       `Job artifacts ${numberToHumanSize(buildArtifactsSize)}`,
     );
   });
@@ -102,7 +98,6 @@ describe('UsageGraph', () => {
         '0.29411764705882354',
         '0.23529411764705882',
         '0.17647058823529413',
-        '0.14705882352941177',
         '0.11764705882352941',
         '0.11764705882352941',
         '0.041176470588235294',
@@ -121,7 +116,6 @@ describe('UsageGraph', () => {
         '0.29411764705882354',
         '0.23529411764705882',
         '0.17647058823529413',
-        '0.14705882352941177',
         '0.11764705882352941',
         '0.11764705882352941',
         '0.041176470588235294',
diff --git a/spec/frontend/usage_quotas/storage/mock_data.js b/spec/frontend/usage_quotas/storage/mock_data.js
index 452fa83b9a7..16c03a13028 100644
--- a/spec/frontend/usage_quotas/storage/mock_data.js
+++ b/spec/frontend/usage_quotas/storage/mock_data.js
@@ -3,95 +3,6 @@ import mockGetProjectStorageStatisticsGraphQLResponse from 'test_fixtures/graphq
 export { mockGetProjectStorageStatisticsGraphQLResponse };
 export const mockEmptyResponse = { data: { project: null } };
 
-export const projectData = {
-  storage: {
-    totalUsage: '13.4 MiB',
-    storageTypes: [
-      {
-        storageType: {
-          id: 'containerRegistry',
-          name: 'Container Registry',
-          description: 'Gitlab-integrated Docker Container Registry for storing Docker Images.',
-          helpPath: '/container_registry',
-          detailsPath: 'http://localhost/frontend-fixtures/builds-project/container_registry',
-        },
-        value: 3900000,
-      },
-      {
-        storageType: {
-          id: 'buildArtifacts',
-          name: 'Job artifacts',
-          description: 'Job artifacts created by CI/CD.',
-          helpPath: '/build-artifacts',
-          detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/artifacts',
-        },
-        value: 400000,
-      },
-      {
-        storageType: {
-          id: 'lfsObjects',
-          name: 'LFS',
-          description: 'Audio samples, videos, datasets, and graphics.',
-          helpPath: '/lsf-objects',
-        },
-        value: 4800000,
-      },
-      {
-        storageType: {
-          id: 'packages',
-          name: 'Packages',
-          description: 'Code packages and container images.',
-          helpPath: '/packages',
-          detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/packages',
-        },
-        value: 3800000,
-      },
-      {
-        storageType: {
-          id: 'repository',
-          name: 'Repository',
-          description: 'Git repository.',
-          helpPath: '/repository',
-          detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/tree/master',
-        },
-        value: 3900000,
-      },
-      {
-        storageType: {
-          id: 'snippets',
-          name: 'Snippets',
-          description: 'Shared bits of code and text.',
-          helpPath: '/snippets',
-          detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/snippets',
-        },
-        value: 0,
-      },
-      {
-        storageType: {
-          id: 'wiki',
-          name: 'Wiki',
-          description: 'Wiki content.',
-          helpPath: '/wiki',
-          detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/wikis/pages',
-        },
-        value: 300000,
-      },
-    ],
-  },
-};
-
-export const projectHelpLinks = {
-  containerRegistry: '/container_registry',
-  usageQuotas: '/usage-quotas',
-  buildArtifacts: '/build-artifacts',
-  lfsObjects: '/lsf-objects',
-  packages: '/packages',
-  repository: '/repository',
-  snippets: '/snippets',
-  wiki: '/wiki',
-};
-
 export const defaultProjectProvideValues = {
   projectPath: '/project-path',
-  helpLinks: projectHelpLinks,
 };
diff --git a/spec/frontend/usage_quotas/storage/utils_spec.js b/spec/frontend/usage_quotas/storage/utils_spec.js
index e3a271adc57..dd05e105c26 100644
--- a/spec/frontend/usage_quotas/storage/utils_spec.js
+++ b/spec/frontend/usage_quotas/storage/utils_spec.js
@@ -1,15 +1,9 @@
-import cloneDeep from 'lodash/cloneDeep';
 import { PROJECT_STORAGE_TYPES } from '~/usage_quotas/storage/constants';
 import {
-  parseGetProjectStorageResults,
   getStorageTypesFromProjectStatistics,
   descendingStorageUsageSort,
 } from '~/usage_quotas/storage/utils';
-import {
-  mockGetProjectStorageStatisticsGraphQLResponse,
-  defaultProjectProvideValues,
-  projectData,
-} from './mock_data';
+import { mockGetProjectStorageStatisticsGraphQLResponse } from './mock_data';
 
 describe('getStorageTypesFromProjectStatistics', () => {
   const {
@@ -18,15 +12,18 @@ describe('getStorageTypesFromProjectStatistics', () => {
   } = mockGetProjectStorageStatisticsGraphQLResponse.data.project;
 
   describe('matches project statistics value with matching storage type', () => {
-    const typesWithStats = getStorageTypesFromProjectStatistics(projectStatistics);
+    const typesWithStats = getStorageTypesFromProjectStatistics(
+      PROJECT_STORAGE_TYPES,
+      projectStatistics,
+    );
 
     it.each(PROJECT_STORAGE_TYPES)('storage type: $id', ({ id }) => {
-      expect(typesWithStats).toContainEqual({
-        storageType: expect.objectContaining({
+      expect(typesWithStats).toContainEqual(
+        expect.objectContaining({
           id,
+          value: projectStatistics[`${id}Size`],
         }),
-        value: projectStatistics[`${id}Size`],
-      });
+      );
     });
   });
 
@@ -38,57 +35,31 @@ describe('getStorageTypesFromProjectStatistics', () => {
       };
     }, {});
 
-    const typesWithStats = getStorageTypesFromProjectStatistics(projectStatistics, helpLinks);
+    const typesWithStats = getStorageTypesFromProjectStatistics(
+      PROJECT_STORAGE_TYPES,
+      projectStatistics,
+      {},
+      helpLinks,
+    );
 
     typesWithStats.forEach((type) => {
-      const key = type.storageType.id;
-      expect(type.storageType.helpPath).toBe(helpLinks[key]);
+      expect(type.helpPath).toBe(helpLinks[type.id]);
     });
   });
 
   it('adds details page path', () => {
     const typesWithStats = getStorageTypesFromProjectStatistics(
+      PROJECT_STORAGE_TYPES,
       projectStatistics,
-      {},
       statisticsDetailsPaths,
+      {},
     );
     typesWithStats.forEach((type) => {
-      expect(type.storageType.detailsPath).toBe(statisticsDetailsPaths[type.storageType.id]);
+      expect(type.detailsPath).toBe(statisticsDetailsPaths[type.id]);
     });
   });
 });
 
-describe('parseGetProjectStorageResults', () => {
-  it('parses project statistics correctly', () => {
-    expect(
-      parseGetProjectStorageResults(
-        mockGetProjectStorageStatisticsGraphQLResponse.data,
-        defaultProjectProvideValues.helpLinks,
-      ),
-    ).toMatchObject(projectData);
-  });
-
-  it('includes storage type with size of 0 in returned value', () => {
-    const mockedResponse = cloneDeep(mockGetProjectStorageStatisticsGraphQLResponse.data);
-    // ensuring a specific storage type item has size of 0
-    mockedResponse.project.statistics.repositorySize = 0;
-
-    const response = parseGetProjectStorageResults(
-      mockedResponse,
-      defaultProjectProvideValues.helpLinks,
-    );
-
-    expect(response.storage.storageTypes).toEqual(
-      expect.arrayContaining([
-        {
-          storageType: expect.any(Object),
-          value: 0,
-        },
-      ]),
-    );
-  });
-});
-
 describe('descendingStorageUsageSort', () => {
   it('sorts items by a given key in descending order', () => {
     const items = [{ k: 1 }, { k: 3 }, { k: 2 }];