From 16773855ed2520e9aaf344cba7b5fdd2ee1a8330 Mon Sep 17 00:00:00 2001
From: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Date: Thu, 18 Jul 2024 20:53:33 +0200
Subject: [PATCH] Revert pipeline list UI change (#3926)

---
 web/src/assets/locales/en.json                | 16 +---
 .../components/repo/pipeline/PipelineItem.vue | 90 ++++++++-----------
 2 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 3cf2254ca..0b3cb8b27 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -242,7 +242,9 @@
       "errors": "Errors ({count})",
       "warnings": "Warnings ({count})",
       "show_errors": "Show errors",
-      "we_got_some_errors": "Oh no, we got some errors!"
+      "we_got_some_errors": "Oh no, we got some errors!",
+      "duration": "Pipeline duration",
+      "created": "Created: {created}"
     }
   },
   "org": {
@@ -467,15 +469,5 @@
   "internal_error": "Some internal error occurred",
   "registration_closed": "The registration is closed",
   "access_denied": "You are not allowed to access this instance",
-  "invalid_state": "The OAuth state is invalid",
-  "by_user": "by {user}",
-  "pushed_to": "pushed to",
-  "closed": "closed",
-  "deployed_to": "deployed to",
-  "created": "created",
-  "triggered": "triggered",
-  "pipeline_duration": "Pipeline duration",
-  "pipeline_since": "Pipeline was created {created} minutes ago",
-  "pipeline_has_warnings": "The pipeline has warnings",
-  "pipeline_has_errors": "The pipeline has errors"
+  "invalid_state": "The OAuth state is invalid"
 }
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index c34faa5f8..18ce5d898 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -1,8 +1,8 @@
 <template>
   <ListItem v-if="pipeline" class="p-0 w-full">
-    <div class="flex w-6 items-center md:mr-4">
+    <div class="flex w-11 items-center md:mr-4">
       <div
-        class="h-full w-2 flex-shrink-0"
+        class="h-full w-3"
         :class="{
           'bg-wp-state-warn-100': pipeline.status === 'pending',
           'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
@@ -11,20 +11,36 @@
           'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
         }"
       />
-      <div class="w-6 flex flex-wrap justify-between items-center h-full">
+      <div class="w-8 flex flex-wrap justify-between items-center h-full">
         <PipelineRunningIcon v-if="pipeline.status === 'started' || pipeline.status === 'running'" />
         <PipelineStatusIcon v-else class="mx-2 md:mx-3" :status="pipeline.status" />
       </div>
     </div>
 
-    <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap gap-2">
-      <div class="flex flex-col min-w-0 justify-center gap-2">
-        <span class="text-wp-text-100 text-lg whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">
+    <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
+      <div class="<md:hidden flex items-center flex-shrink-0">
+        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
+        <img v-else class="rounded-md w-8" :src="pipeline.author_avatar" />
+      </div>
+
+      <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+        <span
+          class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis"
+          :title="message"
+        >
           {{ shortMessage }}
         </span>
+      </div>
 
-        <div class="flex <md:flex-wrap gap-1 text-wp-text-alt-100">
-          <div class="flex items-center" :title="pipelineEventTitle">
+      <div
+        class="grid grid-rows-2 grid-cols-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
+      >
+        <div class="flex space-x-2 items-center min-w-0">
+          <span :title="pipelineEventTitle">
             <Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
             <Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
             <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
@@ -32,46 +48,23 @@
             <Icon v-else-if="pipeline.event === 'cron'" name="push" />
             <Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
             <Icon v-else name="push" />
-          </div>
-
-          <a :href="pipeline.forge_url" target="_blank" class="underline" :title="pipeline.commit">
-            <Badge :label="pipeline.commit.slice(0, 7)" />
-          </a>
-
-          <span v-if="pipeline.event === 'pull_request' || pipeline.event === 'push'">{{ $t('pushed_to') }}</span>
-          <span v-if="pipeline.event === 'pull_request_closed'">{{ $t('closed') }}</span>
-          <span v-if="pipeline.event === 'deployment'">{{ $t('deployed_to') }}</span>
-          <span v-if="pipeline.event === 'tag' || pipeline.event === 'release'">{{ $t('created') }}</span>
-          <span v-if="pipeline.event === 'cron' || pipeline.event === 'manual'">{{ $t('triggered') }}</span>
-          <span v-else>{{ $t('triggered') }}</span>
-          <Badge
-            v-if="prettyRef"
-            :title="prTitleWithDescription"
-            :label="prTitle ? `${prettyRef} (${truncate(prTitle, 30)})` : prettyRef"
-          />
-          <span class="truncate">{{ $t('by_user', { user: pipeline.author }) }}</span>
-        </div>
-      </div>
-
-      <div class="flex min-w-0 <md:w-full gap-2 justify-between items-center md:ml-auto relative">
-        <div class="flex flex-col gap-2 text-wp-text-alt-100">
-          <div class="flex gap-2 items-center min-w-0" :title="$t('pipeline_duration')">
-            <Icon name="duration" />
-            <span class="truncate">{{ duration }}</span>
-          </div>
-
-          <div class="flex gap-2 items-center min-w-0" :title="$t('pipeline_since', { created })">
-            <Icon name="since" />
-            <span>{{ since }}</span>
-          </div>
+          </span>
+          <span class="truncate">{{ prettyRef }}</span>
         </div>
 
-        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
-        <img v-else class="rounded-md w-8 flex-shrink-0" :src="pipeline.author_avatar" :title="pipeline.author" />
+        <div class="flex space-x-2 items-center min-w-0">
+          <Icon name="commit" />
+          <span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
+        </div>
 
-        <div v-if="pipeline.errors" class="flex items-center absolute -top-1 -right-2">
-          <Icon v-if="hasErrors" name="attention" class="text-wp-state-error-100" :title="$t('pipeline_has_errors')" />
-          <Icon v-else name="warning" class="text-wp-state-warn-100" :title="$t('pipeline_has_warnings')" />
+        <div class="flex space-x-2 items-center min-w-0" :title="$t('repo.pipeline.duration')">
+          <Icon name="duration" />
+          <span class="truncate">{{ duration }}</span>
+        </div>
+
+        <div class="flex space-x-2 items-center min-w-0" :title="$t('repo.pipeline.created', { created })">
+          <Icon name="since" />
+          <span>{{ since }}</span>
         </div>
       </div>
     </div>
@@ -82,7 +75,6 @@
 import { computed, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import Badge from '~/components/atomic/Badge.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import { pipelineStatusColors } from '~/components/repo/pipeline/pipeline-status';
@@ -90,7 +82,6 @@ import PipelineRunningIcon from '~/components/repo/pipeline/PipelineRunningIcon.
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import usePipeline from '~/compositions/usePipeline';
 import type { Pipeline } from '~/lib/api/types';
-import { truncate } from '~/utils/locale';
 
 const props = defineProps<{
   pipeline: Pipeline;
@@ -99,10 +90,7 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const pipeline = toRef(props, 'pipeline');
-const { since, duration, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created } =
-  usePipeline(pipeline);
-
-const hasErrors = computed(() => pipeline.value.errors?.some((e) => !e.is_warning));
+const { since, duration, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
 
 const pipelineEventTitle = computed(() => {
   switch (pipeline.value.event) {