From eb6fa651f597524a8eeecad5b57f34cc55663466 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 15 Sep 2023 11:16:20 -0600
Subject: [PATCH] Update artifacts page layout

- Change branch and commit styling
- Monospaced font when applicable
- Partially fix mobile layout
- Use small ci-badge-link component across all statuses

Changelog: changed
---
 .../components/job_artifacts_table.vue        | 66 ++++++++-----------
 .../vue_shared/components/ci_badge_link.vue   |  2 +-
 .../components/job_artifacts_table_spec.js    | 32 ++++-----
 .../components/ci_badge_link_spec.js          |  6 ++
 4 files changed, 47 insertions(+), 59 deletions(-)

diff --git a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
index e08470c62beec9..d2f63eef9ced1d 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
@@ -5,16 +5,15 @@ import {
   GlLink,
   GlButtonGroup,
   GlButton,
-  GlBadge,
   GlIcon,
   GlPagination,
   GlFormCheckbox,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
 import getJobArtifactsQuery from '../graphql/queries/get_job_artifacts.query.graphql';
 import { totalArtifactsSizeForJob, mapArchivesToJobNodes, mapBooleansToJobNodes } from '../utils';
@@ -65,12 +64,11 @@ export default {
     GlLink,
     GlButtonGroup,
     GlButton,
-    GlBadge,
     GlIcon,
     GlPagination,
     GlFormCheckbox,
-    CiIcon,
     TimeAgo,
+    CiBadgeLink,
     JobCheckbox,
     ArtifactsBulkDelete,
     BulkDeleteModal,
@@ -328,7 +326,7 @@ export default {
     {
       key: 'artifacts',
       label: I18N_ARTIFACTS,
-      thClass: 'gl-w-quarter',
+      thClass: 'gl-w-eighth',
     },
     {
       key: 'job',
@@ -350,7 +348,7 @@ export default {
     {
       key: 'actions',
       label: '',
-      thClass: 'gl-w-eighth',
+      thClass: 'gl-w-20p',
       tdClass: 'gl-text-right',
     },
   ],
@@ -441,45 +439,37 @@ export default {
         </span>
       </template>
       <template #cell(job)="{ item }">
-        <span class="gl-display-inline-flex gl-align-items-center gl-w-full gl-mb-4">
+        <div class="gl-display-inline-flex gl-align-items-center gl-mb-3 gl-gap-3">
           <span data-testid="job-artifacts-job-status">
-            <ci-icon v-if="item.succeeded" :status="item.detailedStatus" class="gl-mr-3" />
-            <gl-badge
-              v-else
-              :icon="item.detailedStatus.icon"
-              :variant="$options.STATUS_BADGE_VARIANTS[item.detailedStatus.group]"
-              class="gl-mr-3"
-            >
-              {{ item.detailedStatus.label }}
-            </gl-badge>
+            <ci-badge-link :status="item.detailedStatus" size="sm" :show-text="false" />
           </span>
-          <gl-link :href="item.webPath" class="gl-font-weight-bold">
+          <gl-link :href="item.webPath">
             {{ item.name }}
           </gl-link>
-        </span>
-        <span class="gl-display-inline-flex">
+        </div>
+        <div class="gl-mb-1">
           <gl-icon name="pipeline" class="gl-mr-2" />
-          <gl-link
-            :href="item.pipeline.path"
-            class="gl-text-black-normal gl-text-decoration-underline gl-mr-4"
-          >
+          <gl-link :href="item.pipeline.path" class="gl-mr-2">
             {{ pipelineId(item) }}
           </gl-link>
-          <gl-icon name="branch" class="gl-mr-2" />
-          <gl-link
-            :href="item.refPath"
-            class="gl-text-black-normal gl-text-decoration-underline gl-mr-4"
-          >
-            {{ item.refName }}
-          </gl-link>
-          <gl-icon name="commit" class="gl-mr-2" />
-          <gl-link
-            :href="item.commitPath"
-            class="gl-text-black-normal gl-text-decoration-underline gl-mr-4"
-          >
-            {{ item.shortSha }}
-          </gl-link>
-        </span>
+          <span class="gl-display-inline-block gl-rounded-base gl-px-2 gl-bg-gray-50">
+            <gl-icon name="commit" :size="12" class="gl-mr-2" />
+            <gl-link
+              :href="item.commitPath"
+              class="gl-text-black-normal gl-font-sm gl-font-monospace"
+            >
+              {{ item.shortSha }}
+            </gl-link>
+          </span>
+        </div>
+        <div>
+          <span class="gl-display-inline-block gl-rounded-base gl-px-2 gl-bg-gray-50">
+            <gl-icon name="branch" :size="12" class="gl-mr-1" />
+            <gl-link :href="item.refPath" class="gl-text-black-normal gl-font-sm gl-font-monospace">
+              {{ item.refName }}
+            </gl-link>
+          </span>
+        </div>
       </template>
       <template #cell(size)="{ item }">
         <span data-testid="job-artifacts-size">{{ artifactsSize(item) }}</span>
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 1f45b4c5c9dd63..101ebcd1c48cce 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -121,7 +121,7 @@ export default {
 <template>
   <gl-badge
     v-gl-tooltip
-    :class="{ 'gl-pl-2': isSmallBadgeSize }"
+    :class="{ 'gl-pl-2': isSmallBadgeSize, 'gl-p-2!': !showText }"
     :title="title"
     :href="detailsPath"
     :size="size"
diff --git a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
index 1cbb1a714c9506..3628af31aa10f3 100644
--- a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
@@ -1,16 +1,8 @@
-import {
-  GlLoadingIcon,
-  GlTable,
-  GlLink,
-  GlBadge,
-  GlPagination,
-  GlModal,
-  GlFormCheckbox,
-} from '@gitlab/ui';
+import { GlLoadingIcon, GlTable, GlLink, GlPagination, GlModal, GlFormCheckbox } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import getJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import JobArtifactsTable from '~/ci/artifacts/components/job_artifacts_table.vue';
 import ArtifactsTableRowDetails from '~/ci/artifacts/components/artifacts_table_row_details.vue';
@@ -59,13 +51,13 @@ describe('JobArtifactsTable component', () => {
 
   const findStatuses = () => wrapper.findAllByTestId('job-artifacts-job-status');
   const findSuccessfulJobStatus = () => findStatuses().at(0);
-  const findFailedJobStatus = () => findStatuses().at(1);
+  const findCiBadgeLink = () => findSuccessfulJobStatus().findComponent(CiBadgeLink);
 
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findJobLink = () => findLinks().at(0);
   const findPipelineLink = () => findLinks().at(1);
-  const findRefLink = () => findLinks().at(2);
-  const findCommitLink = () => findLinks().at(3);
+  const findCommitLink = () => findLinks().at(2);
+  const findRefLink = () => findLinks().at(3);
 
   const findSize = () => wrapper.findByTestId('job-artifacts-size');
   const findCreated = () => wrapper.findByTestId('job-artifacts-created');
@@ -209,13 +201,13 @@ describe('JobArtifactsTable component', () => {
     });
 
     it('shows the job status as an icon for a successful job', () => {
-      expect(findSuccessfulJobStatus().findComponent(CiIcon).exists()).toBe(true);
-      expect(findSuccessfulJobStatus().findComponent(GlBadge).exists()).toBe(false);
-    });
-
-    it('shows the job status as a badge for other job statuses', () => {
-      expect(findFailedJobStatus().findComponent(GlBadge).exists()).toBe(true);
-      expect(findFailedJobStatus().findComponent(CiIcon).exists()).toBe(false);
+      expect(findCiBadgeLink().props()).toMatchObject({
+        status: {
+          group: 'success',
+        },
+        size: 'sm',
+        showText: false,
+      });
     });
 
     it('shows links to the job, pipeline, ref, and commit', () => {
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
index c74964c13f5348..fa42e87ec70548 100644
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
@@ -149,4 +149,10 @@ describe('CI Badge Link Component', () => {
 
     expect(findBadge().props('size')).toBe('lg');
   });
+
+  it('should have class `gl-p-2!` when `showText` is false', () => {
+    createComponent({ status: statuses.success, size: 'lg', showText: false });
+
+    expect(findBadge().classes()).toContain('gl-p-2!');
+  });
 });
-- 
GitLab