Merge branch '334896-add-icons-to-project-storage-view' into 'master'

Add icons to project's storage table

See merge request gitlab-org/gitlab!72524

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

 <script>
-import { GlLink, GlIcon, GlTable, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlIcon, GlTableLite as GlTable, GlSprintf } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { thWidthClass } from '~/lib/utils/table_utility';
 import { sprintf } from '~/locale';
 import { PROJECT_TABLE_LABELS, HELP_LINK_ARIA_LABEL } from '../constants';
+import StorageTypeIcon from './storage_type_icon.vue';
 
 export default {
   name: 'StorageTable',
@@ -12,6 +13,7 @@ export default {
     GlIcon,
     GlTable,
     GlSprintf,
+    StorageTypeIcon,
   },
   props: {
     storageTypes: {
@@ -48,31 +50,39 @@ export default {
 <template>
   <gl-table :items="storageTypes" :fields="$options.projectTableFields">
     <template #cell(storageType)="{ item }">
-      <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`">
-        {{ item.storageType.name }}
-        <gl-link
-          v-if="item.storageType.helpPath"
-          :href="item.storageType.helpPath"
-          target="_blank"
-          :aria-label="helpLinkAriaLabel(item.storageType.name)"
-          :data-testid="`${item.storageType.id}-help-link`"
-        >
-          <gl-icon name="question" :size="12" />
-        </gl-link>
-      </p>
-      <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`">
-        {{ item.storageType.description }}
-      </p>
-      <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm">
-        <gl-icon name="warning" :size="12" />
-        <gl-sprintf :message="item.storageType.warningMessage">
-          <template #warningLink="{ content }">
-            <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{
-              content
-            }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
+      <div class="gl-display-flex gl-flex-direction-row">
+        <storage-type-icon
+          :name="item.storageType.id"
+          :data-testid="`${item.storageType.id}-icon`"
+        />
+        <div>
+          <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`">
+            {{ item.storageType.name }}
+            <gl-link
+              v-if="item.storageType.helpPath"
+              :href="item.storageType.helpPath"
+              target="_blank"
+              :aria-label="helpLinkAriaLabel(item.storageType.name)"
+              :data-testid="`${item.storageType.id}-help-link`"
+            >
+              <gl-icon name="question" :size="12" />
+            </gl-link>
+          </p>
+          <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`">
+            {{ item.storageType.description }}
+          </p>
+          <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm">
+            <gl-icon name="warning" :size="12" />
+            <gl-sprintf :message="item.storageType.warningMessage">
+              <template #warningLink="{ content }">
+                <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{
+                  content
+                }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </p>
+        </div>
+      </div>
     </template>
   </gl-table>
 </template>

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

+<script>
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  components: { GlIcon },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    iconName(storageTypeName) {
+      const defaultStorageTypeIcon = 'disk';
+      const storageTypeIconMap = {
+        lfsObjectsSize: 'doc-image',
+        snippetsSize: 'snippet',
+        uploadsSize: 'upload',
+        repositorySize: 'infrastructure-registry',
+        packagesSize: 'package',
+      };
+
+      return storageTypeIconMap[`${storageTypeName}`] ?? defaultStorageTypeIcon;
+    },
+  },
+};
+</script>
+<template>
+  <span
+    class="gl-display-inline-flex gl-align-items-flex-start gl-justify-content-center gl-min-w-8 gl-pr-2 gl-pt-1"
+  >
+    <gl-icon :name="iconName(name)" :size="16" class="gl-mt-1" />
+  </span>
+</template>

spec/frontend/projects/storage_counter/components/storage_table_spec.js

-import { GlTable } from '@gitlab/ui';
+import { GlTableLite } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import StorageTable from '~/projects/storage_counter/components/storage_table.vue';
@@ -22,7 +22,7 @@ describe('StorageTable', () => {
     );
   };
 
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
 
   beforeEach(() => {
     createComponent();
@@ -37,6 +37,7 @@ describe('StorageTable', () => {
       ({ storageType: { id, name, description } }) => {
         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(
           defaultProvideValues.helpLinks[id.replace(`Size`, `HelpPagePath`)]
             .replace(`Size`, ``)

spec/frontend/projects/storage_counter/components/storage_type_icon_spec.js

+import { mount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import StorageTypeIcon from '~/projects/storage_counter/components/storage_type_icon.vue';
+
+describe('StorageTypeIcon', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(StorageTypeIcon, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findGlIcon = () => wrapper.findComponent(GlIcon);
+
+  describe('rendering icon', () => {
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it.each`
+      expected                     | provided
+      ${'doc-image'}               | ${'lfsObjectsSize'}
+      ${'snippet'}                 | ${'snippetsSize'}
+      ${'infrastructure-registry'} | ${'repositorySize'}
+      ${'package'}                 | ${'packagesSize'}
+      ${'upload'}                  | ${'uploadsSize'}
+      ${'disk'}                    | ${'wikiSize'}
+      ${'disk'}                    | ${'anything-else'}
+    `(
+      'renders icon with name of $expected when name prop is $provided',
+      ({ expected, provided }) => {
+        createComponent({ name: provided });
+
+        expect(findGlIcon().props('name')).toBe(expected);
+      },
+    );
+  });
+});