Use pipeline wrapper and improve scaffold UI (#1368)

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

web/src/components/layout/FluidContainer.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="w-full max-w-5xl p-2 md:p-4 lg:px-0 mx-auto">
+  <div class="w-full p-2 md:p-4 lg:px-0 mx-auto" :class="{ 'max-w-5xl': !fullWidth }">
     <slot />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+export interface Props {
+  fullWidth?: boolean;
+}
 
-export default defineComponent({
-  name: 'FluidContainer',
-});
+defineProps<Props>();
 </script>

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

@@ -10,9 +10,10 @@
     <template v-if="$slots.tabActions" #tabActions><slot name="tabActions" /></template>
   </Header>
 
-  <FluidContainer>
+  <FluidContainer v-if="fluidContent">
     <slot />
   </FluidContainer>
+  <slot v-else />
 </template>
 
 <script setup lang="ts">
@@ -32,6 +33,9 @@ export interface Props {
   enableTabs?: boolean;
   disableHashMode?: boolean;
   activeTab: string;
+
+  // Content
+  fluidContent?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,6 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
   // eslint-disable-next-line vue/no-boolean-default
   enableTabs: false,
   activeTab: '',
+  // eslint-disable-next-line vue/no-boolean-default
+  fluidContent: true,
 });
 
 const emit = defineEmits(['update:activeTab', 'update:search']);

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

@@ -24,7 +24,11 @@ onMounted(() => {
     id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
     title: props.title,
   };
-  tabs.value.push(tab.value);
+
+  // don't add tab if tab id is already present
+  if (!tabs.value.find(({ id }) => id === props.id)) {
+    tabs.value.push(tab.value);
+  }
 });
 
 const isActive = computed(() => tab.value && tab.value.id === activeTab.value);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-grow">
+  <FluidContainer full-width class="flex flex-col flex-grow">
     <div class="flex w-full min-h-0 flex-grow">
       <PipelineStepList
         v-if="pipeline?.steps?.length || 0 > 0"
@@ -46,7 +46,7 @@
         />
       </div>
     </div>
-  </div>
+  </FluidContainer>
 </template>
 
 <script lang="ts">
@@ -56,6 +56,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import FluidContainer from '~/components/layout/FluidContainer.vue';
 import PipelineLog from '~/components/repo/pipeline/PipelineLog.vue';
 import PipelineStepList from '~/components/repo/pipeline/PipelineStepList.vue';
 import useApiClient from '~/compositions/useApiClient';
@@ -72,6 +73,7 @@ export default defineComponent({
     PipelineStepList,
     Icon,
     PipelineLog,
+    FluidContainer,
   },
 
   props: {

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

@@ -1,28 +1,24 @@
 <template>
-  <FluidContainer v-if="pipeline" class="flex flex-col gap-y-6 text-color justify-between py-0">
-    <Panel>
-      <div v-if="pipeline.changed_files === undefined || pipeline.changed_files.length < 1" class="w-full">
-        <span class="text-color">{{ $t('repo.pipeline.no_files') }}</span>
-      </div>
-      <div v-for="file in pipeline.changed_files" v-else :key="file" class="w-full">
-        <div>- {{ file }}</div>
-      </div>
-    </Panel>
-  </FluidContainer>
+  <Panel v-if="pipeline">
+    <div v-if="pipeline.changed_files === undefined || pipeline.changed_files.length < 1" class="w-full">
+      <span class="text-color">{{ $t('repo.pipeline.no_files') }}</span>
+    </div>
+    <div v-for="file in pipeline.changed_files" v-else :key="file" class="w-full">
+      <div>- {{ file }}</div>
+    </div>
+  </Panel>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject, Ref } from 'vue';
 
-import FluidContainer from '~/components/layout/FluidContainer.vue';
 import Panel from '~/components/layout/Panel.vue';
 import { Pipeline } from '~/lib/api/types';
 
 export default defineComponent({
   name: 'PipelineChangedFiles',
 
   components: {
-    FluidContainer,
     Panel,
   },
 

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

@@ -1,16 +1,15 @@
 <template>
-  <FluidContainer v-if="pipelineConfigs" class="flex flex-col gap-y-6 text-color justify-between !pt-0">
-    <Panel v-for="pipelineConfig in pipelineConfigs" :key="pipelineConfig.hash" :title="pipelineConfig.name">
+  <div class="flex flex-col gap-y-6">
+    <Panel v-for="pipelineConfig in pipelineConfigs || []" :key="pipelineConfig.hash" :title="pipelineConfig.name">
       <SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />
     </Panel>
-  </FluidContainer>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
 
 import SyntaxHighlight from '~/components/atomic/SyntaxHighlight';
-import FluidContainer from '~/components/layout/FluidContainer.vue';
 import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { Pipeline, PipelineConfig, Repo } from '~/lib/api/types';
@@ -19,7 +18,6 @@ export default defineComponent({
   name: 'PipelineConfig',
 
   components: {
-    FluidContainer,
     Panel,
     SyntaxHighlight,
   },

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

@@ -1,6 +1,12 @@
 <template>
   <template v-if="pipeline && repo">
-    <Scaffold v-model:activeTab="activeTab" enable-tabs disable-hash-mode :go-back="goBack">
+    <Scaffold
+      v-model:activeTab="activeTab"
+      enable-tabs
+      disable-hash-mode
+      :go-back="goBack"
+      :fluid-content="activeTab !== 'tasks'"
+    >
       <template #title>
         <span class="w-full md:w-auto text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
         <span class="<md:hidden">-</span>
@@ -53,9 +59,8 @@
         id="changed-files"
         :title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length || 0 })"
       />
+      <router-view />
     </Scaffold>
-
-    <router-view />
   </template>
 </template>