UI changes for usage quota table

Usage quota page in group and user profile is
updated to look like the table in groups main
page

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

@@ -144,13 +144,13 @@ export default {
     </div>
     <div class="ci-table" role="grid">
       <div
-        class="gl-responsive-table-row table-row-header bg-gray-light pl-2 border-top mt-3 lh-100"
+        class="gl-responsive-table-row table-row-header gl-pl-3 gl-border-t-solid gl-border-t-1 gl-border-gray-100 gl-mt-5 gl-line-height-normal gl-text-black-normal gl-font-base"
         role="row"
       >
-        <div class="table-section section-70 font-weight-bold" role="columnheader">
+        <div class="table-section section-70 gl-font-weight-bold" role="columnheader">
           {{ __('Project') }}
         </div>
-        <div class="table-section section-30 font-weight-bold" role="columnheader">
+        <div class="table-section section-30 gl-font-weight-bold" role="columnheader">
           {{ __('Usage') }}
         </div>
       </div>

ee/app/assets/javascripts/storage_counter/components/project.vue

 <script>
-import { GlButton, GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { numberToHumanSize, isOdd } from '~/lib/utils/number_utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__ } from '~/locale';
 import StorageRow from './storage_row.vue';
 
 export default {
   components: {
     GlIcon,
-    GlButton,
     GlLink,
     ProjectAvatar,
     StorageRow,
@@ -29,7 +29,7 @@ export default {
       const { name, id, avatarUrl, webUrl } = this.project;
       return {
         name,
-        id: Number(id),
+        id: Number(getIdFromGraphQLId(id)),
         avatar_url: avatarUrl,
         path: webUrl,
       };
@@ -54,7 +54,13 @@ export default {
     },
   },
   methods: {
-    toggleProject() {
+    toggleProject(e) {
+      const NO_EXPAND_CLS = 'js-project-link';
+      const targetClasses = e.target.classList;
+
+      if (targetClasses.contains(NO_EXPAND_CLS)) {
+        return;
+      }
       this.isOpen = !this.isOpen;
     },
     getFormattedName(name) {
@@ -83,27 +89,42 @@ export default {
 </script>
 <template>
   <div>
-    <div class="gl-responsive-table-row border-bottom" role="row">
-      <div class="table-section section-wrap section-70 text-truncate" role="gridcell">
-        <div class="table-mobile-header font-weight-bold" role="rowheader">{{ __('Project') }}</div>
-        <div class="table-mobile-content">
-          <gl-button
-            class="btn-transparent float-left p-0 mr-2"
-            :aria-label="__('Toggle project')"
-            category="tertiary"
+    <div
+      class="gl-responsive-table-row gl-border-solid gl-border-b-1 gl-pt-3 gl-pb-3 gl-border-b-gray-100 gl-hover-bg-blue-50 gl-hover-border-blue-200 gl-hover-cursor-pointer"
+      role="row"
+      data-testid="projectTableRow"
       @click="toggleProject"
     >
-            <gl-icon :name="iconName" class="folder-icon" />
-          </gl-button>
-
-          <project-avatar :project="projectAvatar" :size="20" />
-
-          <gl-link :href="project.webUrl" class="font-weight-bold">{{ name }}</gl-link>
+      <div
+        class="table-section gl-white-space-normal! gl-flex-sm-wrap section-70 gl-text-truncate"
+        role="gridcell"
+      >
+        <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
+          {{ __('Project') }}
+        </div>
+        <div class="table-mobile-content gl-display-flex gl-align-items-center">
+          <div class="gl-display-flex gl-mr-3 gl-align-items-center">
+            <gl-icon :size="10" :name="iconName" class="gl-mr-2" />
+            <gl-icon name="bookmark" />
           </div>
+          <div>
+            <project-avatar :project="projectAvatar" :size="32" />
+          </div>
+          <gl-link
+            :href="project.webUrl"
+            class="js-project-link gl-font-weight-bold gl-text-gray-900!"
+            >{{ name }}</gl-link
+          >
+        </div>
+      </div>
+      <div
+        class="table-section gl-white-space-normal! gl-flex-sm-wrap section-30 gl-text-truncate"
+        role="gridcell"
+      >
+        <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
+          {{ __('Usage') }}
         </div>
-      <div class="table-section section-wrap section-30 text-truncate" role="gridcell">
-        <div class="table-mobile-header font-weight-bold" role="rowheader">{{ __('Usage') }}</div>
-        <div class="table-mobile-content">{{ storageSize }}</div>
+        <div class="table-mobile-content gl-text-gray-900">{{ storageSize }}</div>
       </div>
     </div>
 
@@ -113,7 +134,7 @@ export default {
         :key="index"
         :name="getFormattedName(statisticsName)"
         :value="getValue(value)"
-        :class="{ 'bg-gray-light': isOdd(index) }"
+        :class="{ 'gl-bg-gray-10': isOdd(index) }"
       />
     </template>
   </div>

ee/changelogs/unreleased/usage-quotas-table-view.yml

+---
+title: Improve projects table in Usage quotas page
+merge_request: 43080
+author:
+type: changed

ee/spec/frontend/storage_counter/components/project_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
 import Project from 'ee/storage_counter/components/project.vue';
+import StorageRow from 'ee/storage_counter/components/storage_row.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 
@@ -32,6 +32,9 @@ function factory(project) {
   });
 }
 
+const findTableRow = () => wrapper.find('[data-testid="projectTableRow"]');
+const findStorageRow = () => wrapper.find(StorageRow);
+
 describe('Storage Counter project component', () => {
   beforeEach(() => {
     factory(data);
@@ -52,15 +55,18 @@ describe('Storage Counter project component', () => {
   describe('toggle row', () => {
     describe('on click', () => {
       it('toggles isOpen', () => {
-        expect(wrapper.vm.isOpen).toEqual(false);
-
-        wrapper.find(GlButton).vm.$emit('click');
+        expect(findStorageRow().exists()).toBe(false);
 
-        expect(wrapper.vm.isOpen).toEqual(true);
+        findTableRow().trigger('click');
 
-        wrapper.find(GlButton).vm.$emit('click');
+        wrapper.vm.$nextTick(() => {
+          expect(findStorageRow().exists()).toBe(true);
+          findTableRow().trigger('click');
 
-        expect(wrapper.vm.isOpen).toEqual(false);
+          wrapper.vm.$nextTick(() => {
+            expect(findStorageRow().exists()).toBe(false);
+          });
+        });
       });
     });
   });

locale/gitlab.pot

@@ -26893,9 +26893,6 @@ msgstr ""
 msgid "Toggle navigation"
 msgstr ""
 
-msgid "Toggle project"
-msgstr ""
-
 msgid "Toggle sidebar"
 msgstr ""