Show changed files of pipeline in UI (#650)

web/src/components/tabs/Tab.vue

@@ -37,7 +37,7 @@ export default defineComponent({
 
     onMounted(() => {
       tab.value = {
-        id: props.title.toLocaleLowerCase() || tabs.value.length.toString(),
+        id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
         title: props.title,
       };
       tabs.value.push(tab.value);

web/src/router.ts

@@ -58,6 +58,11 @@ const routes: RouteRecordRaw[] = [
             component: (): Component => import('~/views/repo/build/Build.vue'),
             props: true,
           },
+          {
+            path: 'changed-files',
+            name: 'repo-build-changed-files',
+            component: (): Component => import('~/views/repo/build/BuildChangedFiles.vue'),
+          },
           {
             path: 'config',
             name: 'repo-build-config',

web/src/views/repo/build/BuildChangedFiles.vue

@@ -0,0 +1,38 @@
+<template>
+  <FluidContainer v-if="build" class="flex flex-col gap-y-6 text-gray-500 justify-between py-0">
+    <Panel>
+      <div v-if="build.changed_files === undefined || build.changed_files.length < 1" class="w-full">
+        <span class="text-gray-500">No files have been changed.</span>
+      </div>
+      <div v-for="file in build.changed_files" v-else :key="file" class="w-full">
+        <div>- {{ file }}</div>
+      </div>
+    </Panel>
+  </FluidContainer>
+</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 { Build } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'BuildChangedFiles',
+
+  components: {
+    FluidContainer,
+    Panel,
+  },
+
+  setup() {
+    const build = inject<Ref<Build>>('build');
+    if (!build) {
+      throw new Error('Unexpected: "build" should be provided at this place');
+    }
+
+    return { build };
+  },
+});
+</script>

web/src/views/repo/build/BuildWrapper.vue

@@ -32,6 +32,7 @@
         <Tabs v-model="activeTab" disable-hash-mode>
           <Tab id="tasks" title="Tasks" />
           <Tab id="config" title="Config" />
+          <Tab id="changed-files" :title="`Changed files (${build.changed_files?.length || 0})`" />
         </Tabs>
 
         <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 ml-auto">
@@ -193,6 +194,10 @@ export default defineComponent({
 
     const activeTab = computed({
       get() {
+        if (route.name === 'repo-build-changed-files') {
+          return 'changed-files';
+        }
+
         if (route.name === 'repo-build-config') {
           return 'config';
         }
@@ -204,6 +209,10 @@ export default defineComponent({
           router.replace({ name: 'repo-build' });
         }
 
+        if (tab === 'changed-files') {
+          router.replace({ name: 'repo-build-changed-files' });
+        }
+
         if (tab === 'config') {
           router.replace({ name: 'repo-build-config' });
         }