fix(ui): Blueprints 404 on load error

closes #1849
kestra-io · Aug 22, 2023 · b81147d · b81147d
1 parent d6766ce
commit b81147d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
@@ -622,7 +622,7 @@
             </template>
         </editor>
         <div class="slider" @mousedown="dragEditor" v-if="combinedEditor" />
-        <Blueprints v-if="(viewType === 'source-blueprints' && (blueprintsLoaded = true)) || blueprintsLoaded" :class="{'d-none': viewType !== 'source-blueprints'}" embed class="combined-right-view enhance-readability" :top-navbar="false" prevent-route-info />
+        <Blueprints v-if="viewType === 'source-blueprints' || blueprintsLoaded" @loaded="blueprintsLoaded = true" :class="{'d-none': viewType !== 'source-blueprints'}" embed class="combined-right-view enhance-readability" :top-navbar="false" prevent-route-info />
         <div
             :class="viewType === 'source-topology' ? 'combined-right-view' : viewType === 'topology' ? 'vueflow': 'hide-view'"
         >

diff --git a/ui/src/override/components/flows/blueprints/Blueprints.vue b/ui/src/override/components/flows/blueprints/Blueprints.vue
@@ -2,7 +2,7 @@
     <blueprints-page-header v-if="!embed" />
     <div class="main-container" v-bind="$attrs">
         <blueprint-detail v-if="selectedBlueprintId" :embed="embed" :blueprint-id="selectedBlueprintId" @back="selectedBlueprintId = undefined" />
-        <blueprints-browser :class="{'d-none': !!selectedBlueprintId}" :embed="embed" blueprint-base-uri="/api/v1/blueprints/community" @go-to-detail="blueprintId => selectedBlueprintId = blueprintId" />
+        <blueprints-browser @loaded="$emit('loaded', $event)" :class="{'d-none': !!selectedBlueprintId}" :embed="embed" blueprint-base-uri="/api/v1/blueprints/community" @go-to-detail="blueprintId => selectedBlueprintId = blueprintId" />
     </div>
 </template>
 <script>

diff --git a/ui/src/override/components/flows/blueprints/BlueprintsBrowser.vue b/ui/src/override/components/flows/blueprints/BlueprintsBrowser.vue
@@ -1,5 +1,6 @@
 <template>
-    <div>
+    <errors code="404" v-if="error && embed"/>
+    <div v-else>
         <data-table class="blueprints" @page-changed="onPageChanged" ref="dataTable" :total="total" divider>
             <template #navbar>
                 <div class="d-flex sub-nav">
@@ -80,11 +81,12 @@
     import action from "../../../../models/action";
     import {mapState} from "vuex";
     import Utils from "../../../../utils/utils";
+    import Errors from "../../../../components/errors/Errors.vue";
 
     export default {
         mixins: [RestoreUrl, DataTableActions],
-        components: {TaskIcon, DataTable, SearchField},
-        emits: ["goToDetail"],
+        components: {TaskIcon, DataTable, SearchField, Errors},
+        emits: ["goToDetail", "loaded"],
         props: {
             blueprintBaseUri: {
                 type: String,
@@ -108,7 +110,8 @@
                 total: 0,
                 icon: {
                     ContentCopy: shallowRef(ContentCopy)
-                }
+                },
+                error: false
             }
         },
         methods: {
@@ -189,7 +192,15 @@
                 Promise.all([
                     this.loadTags(beforeLoadBlueprintBaseUri),
                     this.loadBlueprints(beforeLoadBlueprintBaseUri)
-                ]).finally(() => {
+                ]).then(() => {
+                    this.$emit("loaded");
+                }).catch(() => {
+                    if(this.embed) {
+                        this.error = true;
+                    } else {
+                        this.$store.dispatch("core/showError", 404);
+                    }
+                }).finally(() => {
                     // Handle switch tab while fetching data
                     if (this.blueprintBaseUri === beforeLoadBlueprintBaseUri) {
                         callback();