Some UI enhancement (#2468)

- Closes #2001 
-
#2162 (comment)
- shows prettyRef for deployments

Author: qwerty287

web/.prettierignore

@@ -4,5 +4,5 @@ coverage/
 LICENSE
 components.d.ts
 src/assets/locales/*.json
-src/assets/timeAgoLocales/*.json
+src/assets/timeAgoLocales/
 !src/assets/locales/en.json

web/src/components/pipeline-feed/PipelineFeedItem.vue

@@ -2,7 +2,14 @@
   <div v-if="pipeline" class="flex text-wp-text-100 w-full">
     <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
     <div class="flex flex-col ml-4 min-w-0">
-      <span class="underline">{{ repo?.owner }} / {{ repo?.name }}</span>
+      <router-link
+        :to="{
+          name: 'repo',
+          params: { repoId: pipeline.repo_id },
+        }"
+        class="underline"
+        >{{ repo?.owner }} / {{ repo?.name }}</router-link
+      >
       <span class="whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">{{ title }}</span>
       <div class="flex flex-col mt-2">
         <div class="flex space-x-2 items-center" :title="created">

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -10,21 +10,28 @@
         </div>
         <span>{{ pipeline.author }}</span>
       </div>
-      <div class="flex space-x-1 items-center min-w-0">
+      <a
+        v-if="pipeline.event === 'pull_request'"
+        class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
+        :href="pipeline.link_url"
+      >
+        <Icon name="pull_request" />
+        <span class="truncate">{{ prettyRef }}</span>
+      </a>
+      <router-link
+        v-else-if="pipeline.event === 'push' || pipeline.event === 'manual' || pipeline.event === 'deployment'"
+        class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
+        :to="{ name: 'repo-branch', params: { branch: prettyRef } }"
+      >
         <Icon v-if="pipeline.event === 'manual'" name="manual-pipeline" />
-        <Icon v-if="pipeline.event === 'push'" name="push" />
-        <Icon v-if="pipeline.event === 'deployment'" name="deployment" />
-        <Icon v-else-if="pipeline.event === 'tag'" name="tag" />
-        <a
-          v-else-if="pipeline.event === 'pull_request'"
-          class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
-          :href="pipeline.link_url"
-          target="_blank"
-        >
-          <Icon name="pull_request" />
-          <span class="truncate">{{ prettyRef }}</span>
-        </a>
-        <span v-if="pipeline.event !== 'pull_request'" class="truncate">{{ prettyRef }}</span>
+        <Icon v-else-if="pipeline.event === 'push'" name="push" />
+        <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
+        <span class="truncate">{{ prettyRef }}</span>
+      </router-link>
+      <div v-else class="flex space-x-1 items-center min-w-0">
+        <Icon v-if="pipeline.event === 'tag'" name="tag" />
+
+        <span class="truncate">{{ prettyRef }}</span>
       </div>
       <div class="flex items-center flex-shrink-0">
         <template v-if="pipeline.event === 'pull_request'">

web/src/compositions/usePipeline.ts

@@ -87,7 +87,7 @@ export default (pipeline: Ref<Pipeline | undefined>) => {
   const title = computed(() => message.value.split('\n')[0]);
 
   const prettyRef = computed(() => {
-    if (pipeline.value?.event === 'push') {
+    if (pipeline.value?.event === 'push' || pipeline.value?.event === 'deployment') {
       return pipeline.value.branch;
     }