Show workflow state in ui and collapse completed workflows (#1383)

Fixes #1371

Co-authored-by: Anbraten <anton@ju60.de>

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

@@ -73,6 +73,15 @@
               class="transition-transform duration-150 min-w-6 h-6"
               :class="{ 'transform rotate-90': !stepsCollapsed[step.id] }"
             />
+            <div
+              class="min-w-2 h-2 rounded-full -ml-0.75"
+              :class="{
+                'bg-lime-400': ['success'].includes(step.state),
+                'bg-gray-400': ['pending', 'skipped'].includes(step.state),
+                'bg-red-400': ['killed', 'error', 'failure', 'blocked', 'declined'].includes(step.state),
+                'bg-blue-400': ['started', 'running'].includes(step.state),
+              }"
+            />
             <span class="truncate">{{ step.name }}</span>
           </button>
         </div>
@@ -137,5 +146,12 @@ defineEmits<{
 const pipeline = toRef(props, 'pipeline');
 const { prettyRef } = usePipeline(pipeline);
 
-const stepsCollapsed = ref<Record<PipelineStep['id'], boolean>>({});
+const stepsCollapsed = ref<Record<PipelineStep['id'], boolean>>(
+  props.pipeline.steps && props.pipeline.steps.length > 1
+    ? (props.pipeline.steps || []).reduce(
+        (collapsed, step) => ({ ...collapsed, [step.id]: !['started', 'running', 'pending'].includes(step.state) }),
+        {},
+      )
+    : {},
+);
 </script>

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

@@ -2,6 +2,7 @@
   <div class="flex flex-col flex-grow">
     <div class="flex w-full min-h-0 flex-grow">
       <PipelineStepList
+        v-if="pipeline?.steps?.length || 0 > 0"
         v-model:selected-step-id="selectedStepId"
         :class="{ 'hidden md:flex': pipeline.status === 'blocked' }"
         :pipeline="pipeline"