Add breadcrumbs component to the form page in order to display navigation links for easier user navigation.

Author: mms-gianni

client/src/components/pipelines/form.vue

@@ -1,6 +1,7 @@
 <template>
   <v-form v-model="valid">
     <v-container>
+      <Breadcrumbs :items="breadcrumbItems"></Breadcrumbs>
       <v-row>
         <v-col cols="12" sm="12" md="12" lg="12" xl="12">
 
@@ -224,6 +225,7 @@
 <script lang="ts">
 import axios from "axios";
 import { defineComponent } from 'vue'
+import Breadcrumbs from "../breadcrumbs.vue";
 
 type Buildpack = {
   name?: string,
@@ -257,7 +259,15 @@ export default defineComponent({
         default: "new"
       }
     },
-    data: () => ({
+    data () {
+    return {
+      breadcrumbItems: [
+          {
+              title: 'dashboard.-',
+              disabled: false,
+              to: { name: 'Pipelines', params: {}}
+          },
+      ],
       gitops: false,
       dockerimage: '',
       deploymentstrategy: "git",
@@ -348,7 +358,7 @@ export default defineComponent({
         //    ((git|ssh|http(s)?)|(git@[\w\.]+))(:(//)?)([\w\.@\:/\-~]+)(\.git)(/)?
         (v: any) => /((git|ssh|http(s)?)|(git@[\w.]+))(:(\/\/)?)([\w.@:/\-~]+)(\.git)(\/)?/.test(v) || 'Format "owner/repository"',
       ],
-    }),
+    }}, 
     computed: {
       showConnectButton() {
         return this.gitrepoItems.includes(this.gitrepo) && this.repository_status.connected === false;
@@ -361,6 +371,9 @@ export default defineComponent({
       this.loadRepository();
       this.loadPipeline();
     },
+    components: {
+        Breadcrumbs,
+    },
     methods: {
       updateBuildpack(buildpack: Buildpack) {
         this.buildpack = buildpack;