Show workflow names if there are multiple configs (#3767)

Co-authored-by: Tchoupinax <corentinfiloche@hotmail.fr>
Co-authored-by: Anbraten <6918444+anbraten@users.noreply.github.com>

web/components.d.ts

@@ -75,6 +75,7 @@ declare module 'vue' {
     IMdiTagOutline: typeof import('~icons/mdi/tag-outline')['default']
     InputField: typeof import('./src/components/form/InputField.vue')['default']
     IPhGitlabLogoSimpleFill: typeof import('~icons/ph/gitlab-logo-simple-fill')['default']
+    ISimpleIconsForgejo: typeof import('~icons/simple-icons/forgejo')['default']
     ISimpleIconsGitea: typeof import('~icons/simple-icons/gitea')['default']
     ISvgSpinners180RingWithBg: typeof import('~icons/svg-spinners/180-ring-with-bg')['default']
     ITeenyiconsGitSolid: typeof import('~icons/teenyicons/git-solid')['default']

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

@@ -68,7 +68,7 @@
               </div>
             </div>
             <button
-              v-if="pipeline.workflows && pipeline.workflows.length > 1"
+              v-if="!singleConfig"
               type="button"
               :title="workflow.name"
               class="flex items-center gap-2 py-2 px-1 hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 rounded-md"
@@ -92,7 +92,7 @@
             class="transition-height duration-150 overflow-hidden"
             :class="{
               'max-h-0': workflowsCollapsed[workflow.id],
-              'ml-6': pipeline.workflows && pipeline.workflows.length > 1,
+              'ml-6': !singleConfig,
             }"
           >
             <button
@@ -103,9 +103,7 @@
               class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 w-full"
               :class="{
                 'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
-                'mt-1':
-                  (pipeline.workflows && pipeline.workflows.length > 1) ||
-                  (workflow.children && step.pid !== workflow.children[0].pid),
+                'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"
             >
@@ -121,7 +119,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRef } from 'vue';
+import { computed, inject, Ref, ref, toRef } from 'vue';
 
 import Badge from '~/components/atomic/Badge.vue';
 import Icon from '~/components/atomic/Icon.vue';
@@ -129,7 +127,7 @@ import Panel from '~/components/layout/Panel.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import PipelineStepDuration from '~/components/repo/pipeline/PipelineStepDuration.vue';
 import usePipeline from '~/compositions/usePipeline';
-import { Pipeline, PipelineStep, StepType } from '~/lib/api/types';
+import { Pipeline, PipelineConfig, PipelineStep, StepType } from '~/lib/api/types';
 
 const props = defineProps<{
   pipeline: Pipeline;
@@ -143,6 +141,7 @@ defineEmits<{
 const pipeline = toRef(props, 'pipeline');
 const selectedStepId = toRef(props, 'selectedStepId');
 const { prettyRef } = usePipeline(pipeline);
+const pipelineConfigs = inject<Ref<PipelineConfig[]>>('pipeline-configs');
 
 const workflowsCollapsed = ref<Record<PipelineStep['id'], boolean>>(
   pipeline.value.workflows && pipeline.value.workflows.length > 1
@@ -157,4 +156,8 @@ const workflowsCollapsed = ref<Record<PipelineStep['id'], boolean>>(
       )
     : {},
 );
+
+const singleConfig = computed(
+  () => pipelineConfigs?.value?.length === 1 && pipeline.value.workflows && pipeline.value.workflows.length === 1,
+);
 </script>

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

@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col gap-y-6">
     <Panel
-      v-for="pipelineConfig in pipelineConfigs || []"
+      v-for="pipelineConfig in pipelineConfigsDecoded || []"
       :key="pipelineConfig.hash"
-      :collapsable="pipelineConfigs && pipelineConfigs.length > 1"
+      :collapsable="pipelineConfigsDecoded && pipelineConfigsDecoded.length > 1"
       collapsed-by-default
-      :title="pipelineConfigs && pipelineConfigs.length > 1 ? pipelineConfig.name : ''"
+      :title="pipelineConfigsDecoded && pipelineConfigsDecoded.length > 1 ? pipelineConfig.name : ''"
     >
       <SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />
     </Panel>
@@ -14,37 +14,21 @@
 
 <script lang="ts" setup>
 import { decode } from 'js-base64';
-import { inject, onMounted, Ref, ref, watch } from 'vue';
+import { computed, inject, Ref } from 'vue';
 
 import SyntaxHighlight from '~/components/atomic/SyntaxHighlight';
 import Panel from '~/components/layout/Panel.vue';
-import useApiClient from '~/compositions/useApiClient';
-import { Pipeline, PipelineConfig, Repo } from '~/lib/api/types';
+import { PipelineConfig } from '~/lib/api/types';
 
-const pipeline = inject<Ref<Pipeline>>('pipeline');
-const apiClient = useApiClient();
-const repo = inject<Ref<Repo>>('repo');
-if (!repo || !pipeline) {
-  throw new Error('Unexpected: "repo" & "pipeline" should be provided at this place');
+const pipelineConfigs = inject<Ref<PipelineConfig[]>>('pipeline-configs');
+if (!pipelineConfigs) {
+  throw new Error('Unexpected: "pipelineConfigs" should be provided at this place');
 }
 
-const pipelineConfigs = ref<PipelineConfig[]>();
-async function loadPipelineConfig() {
-  if (!repo || !pipeline) {
-    throw new Error('Unexpected: "repo" & "pipeline" should be provided at this place');
-  }
-
-  pipelineConfigs.value = (await apiClient.getPipelineConfig(repo.value.id, pipeline.value.number)).map((i) => ({
+const pipelineConfigsDecoded = computed(() =>
+  pipelineConfigs.value.map((i) => ({
     ...i,
     data: decode(i.data),
-  }));
-}
-
-onMounted(() => {
-  loadPipelineConfig();
-});
-
-watch(pipeline, () => {
-  loadPipelineConfig();
-});
+  })),
+);
 </script>

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

@@ -116,7 +116,7 @@ import { useFavicon } from '~/compositions/useFavicon';
 import useNotifications from '~/compositions/useNotifications';
 import usePipeline from '~/compositions/usePipeline';
 import { useRouteBack } from '~/compositions/useRouteBack';
-import { Repo, RepoPermissions } from '~/lib/api/types';
+import { PipelineConfig, Repo, RepoPermissions } from '~/lib/api/types';
 import { usePipelineStore } from '~/store/pipelines';
 
 const props = defineProps<{
@@ -145,6 +145,9 @@ const pipeline = pipelineStore.getPipeline(repositoryId, pipelineId);
 const { since, duration, created, message, title } = usePipeline(pipeline);
 provide('pipeline', pipeline);
 
+const pipelineConfigs = ref<PipelineConfig[]>();
+provide('pipeline-configs', pipelineConfigs);
+
 watch(
   pipeline,
   () => {
@@ -161,6 +164,12 @@ async function loadPipeline(): Promise<void> {
   }
 
   await pipelineStore.loadPipeline(repo.value.id, parseInt(pipelineId.value, 10));
+
+  if (!pipeline.value?.number) {
+    throw new Error('Unexpected: Pipeline number not found');
+  }
+
+  pipelineConfigs.value = await apiClient.getPipelineConfig(repo.value.id, pipeline.value.number);
 }
 
 const { doSubmit: cancelPipeline, isLoading: isCancelingPipeline } = useAsyncAction(async () => {