Add count badge to visualize counters in tab title (#4419)

web/src/assets/locales/en.json

@@ -191,7 +191,7 @@
     "pipeline": {
       "tasks": "Tasks",
       "config": "Config",
-      "files": "Changed files ({files})",
+      "files": "Changed files",
       "no_pipelines": "No pipelines have been started yet.",
       "no_pipeline_steps": "No pipeline steps available!",
       "step_not_started": "This step hasn't started yet.",
@@ -248,8 +248,8 @@
         "failure": "failure",
         "killed": "killed"
       },
-      "errors": "Errors ({count})",
-      "warnings": "Warnings ({count})",
+      "errors": "Errors",
+      "warnings": "Warnings",
       "show_errors": "Show errors",
       "we_got_some_errors": "Oh no, we got some errors!",
       "duration": "Pipeline duration",

web/src/components/atomic/CountBadge.vue

@@ -0,0 +1,13 @@
+<template>
+  <span
+    class="text-xs font-bold inline-block min-w-5 leading-4 rounded-full bg-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 text-center py-0.5 px-1.5"
+  >
+    {{ value }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  value?: string | number;
+}>();
+</script>

web/src/components/layout/scaffold/Tab.vue

@@ -10,6 +10,7 @@ import { useTabsClient } from '~/compositions/useTabs';
 const props = defineProps<{
   to: RouteLocationRaw;
   title: string;
+  count?: number;
   icon?: IconNames;
   iconClass?: string;
   matchChildren?: boolean;
@@ -32,6 +33,7 @@ onMounted(() => {
   tabs.value.push({
     to: props.to,
     title: props.title,
+    count: props.count,
     icon: props.icon,
     iconClass: props.iconClass,
     matchChildren: props.matchChildren,

web/src/components/layout/scaffold/Tabs.vue

@@ -11,15 +11,17 @@
     >
       <Icon v-if="isExactActive || (isActive && tab.matchChildren)" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
-      <span class="flex gap-2 items-center flex-row-reverse md:flex-row">
+      <span class="flex gap-2 items-center flex-row">
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
         <span>{{ tab.title }}</span>
+        <CountBadge v-if="tab.count" :value="tab.count" />
       </span>
     </router-link>
   </div>
 </template>
 
 <script setup lang="ts">
+import CountBadge from '~/components/atomic/CountBadge.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import { useTabsClient } from '~/compositions/useTabs';
 

web/src/compositions/useTabs.ts

@@ -8,6 +8,7 @@ import { inject, provide } from './useInjectProvide';
 export interface Tab {
   to: RouteLocationRaw;
   title: string;
+  count?: number;
   icon?: IconNames;
   iconClass?: string;
   matchChildren?: boolean;

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -78,18 +78,16 @@
       v-if="pipeline.errors && pipeline.errors.length > 0"
       :to="{ name: 'repo-pipeline-errors' }"
       icon="attention"
-      :title="
-        pipeline.errors.some((e) => !e.is_warning)
-          ? $t('repo.pipeline.errors', { count: pipeline.errors?.length })
-          : $t('repo.pipeline.warnings', { count: pipeline.errors?.length })
-      "
+      :title="pipeline.errors.some((e) => !e.is_warning) ? $t('repo.pipeline.errors') : $t('repo.pipeline.warnings')"
+      :count="pipeline.errors?.length"
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
     />
     <Tab :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
     <Tab
       v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
       :to="{ name: 'repo-pipeline-changed-files' }"
-      :title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length })"
+      :title="$t('repo.pipeline.files')"
+      :count="pipeline.changed_files?.length"
     />
     <Tab
       v-if="repoPermissions && repoPermissions.push"