Repository: kestra-io/kestra
Issue: Blueprints adjustements
Labels: bug
frontend

### Issue description

- [x] Markdown not rendered in blueprint description
- [x] Use purple for "Use" button (dark theme)
- [x] keep the breadcrumb on main blueprint page (from left side section)
- [x] move the Flow Gallery section above the Documentation section in the left bar menu
~- [ ]  Move "About this blueprint" text at the top of blueprint page~
- [x] Rename Flow Gallery by Blueprints

Issue comments:
- [x] separate tags by spaces rather than dots

atm this looks like a hierarchy, but all tags seem equally important, right?

![image](https://github.com/kestra-io/kestra/assets/86264395/c8420b87-8af7-4b93-933d-ed278909746f)

one easy item checked :) https://github.com/kestra-io/kestra/pull/1518 
 Regarding `Move "About this blueprint" text at the top of blueprint page`

After using blueprints, it actually seems more convenient to have the source code first and a description below
WDYT @Ben8t ? This would lead to lesser visibility of topology but I'm okay with that
to add: the description is usually just a summary of what's already visible in the topology and source code (i.e. less important), so the way it's currently presented seems intuitive

Atm you can see the blueprint's source code directly in the editor. However, if the description moves to the top, the source code, which is the most important part, won't be visible  

![image](https://github.com/kestra-io/kestra/assets/86264395/de4c69b0-988f-418e-aa02-6f99d6f268cb)

Don't have a opinion, it was asked by Manu. But kinda agree with both of you, so let it keep things as they are

Pull request review comments:
You can move on the `element-plus-overload.scss` since it a global layout for breadcrumb 
I made the change however I had to add !important on every property since element plus adds a file called breadcrumb.scss which takes precedence over everything since it is no more scoped to a component so selectors are less precise :'(
Another workaround is to add '#app .el-breadcrumb' instead of '.el-breadcrumb' and it will take precedence but I don't know if that's better...
breadcrumb.scss (which is an element plus stylesheet which takes the precedence) comes from vendor.scss which imports element plus index which imports breadcrumb.scss. Not sure there is a way to prevent this import so idk

Patch that resolved the issue:
diff --git a/ui/src/components/flows/blueprints/BlueprintDetail.vue b/ui/src/components/flows/blueprints/BlueprintDetail.vue
index 277b3da68b..0bbe7197a3 100644
--- a/ui/src/components/flows/blueprints/BlueprintDetail.vue
+++ b/ui/src/components/flows/blueprints/BlueprintDetail.vue
@@ -1,22 +1,36 @@
 <template>
     <div v-loading="!blueprint">
         <template v-if="blueprint">
-            <div class="header">
-                <button class="back-button">
-                    <el-icon size="medium" @click="goBack">
-                        <KeyboardBackspace />
-                    </el-icon>
-                </button>
-                <h4 class="blueprint-title">
-                    {{ blueprint.title }}
-                </h4>
-                <div class="ms-auto">
-                    <router-link :to="{name: 'flows/create'}" @click="asAutoRestoreDraft">
-                        <el-button size="large" v-if="!embed">
-                            {{ $t('use') }}
-                        </el-button>
-                    </router-link>
+            <div class="header-wrapper">
+                <div class="header d-flex">
+                    <button class="back-button align-self-center">
+                        <el-icon size="medium" @click="goBack">
+                            <KeyboardBackspace />
+                        </el-icon>
+                    </button>
+                    <h4 class="blueprint-title align-self-center">
+                        {{ blueprint.title }}
+                    </h4>
+                    <div class="ms-auto align-self-center">
+                        <router-link :to="{name: 'flows/create'}" @click="asAutoRestoreDraft">
+                            <el-button size="large" v-if="!embed">
+                                {{ $t('use') }}
+                            </el-button>
+                        </router-link>
+                    </div>
                 </div>
+                <el-breadcrumb v-if="!embed">
+                    <el-breadcrumb-item>
+                        <router-link :to="{name: 'home'}">
+                            <home-outline /> {{ $t('home') }}
+                        </router-link>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item>
+                        <router-link :to="{name: 'blueprints', params: $route.params}">
+                            {{ $t('blueprints.title') }}
+                        </router-link>
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
             </div>
 
             <div class="blueprint-container">
@@ -60,6 +74,7 @@
     import Editor from "../../inputs/Editor.vue";
     import LowCodeEditor from "../../inputs/LowCodeEditor.vue";
     import TaskIcon from "../../plugins/TaskIcon.vue";
+    import HomeOutline from "vue-material-design-icons/HomeOutline.vue";
 </script>
 <script>
     import YamlUtils from "../../../utils/yamlUtils";
@@ -129,25 +144,27 @@
 <style scoped lang="scss">
     @import "../../../styles/variable";
 
-    .header {
-        display: flex;
+    .header-wrapper {
+        margin-bottom: $spacer;
 
-        > * {
-            margin-top: auto;
-            margin-bottom: auto;
-        }
+        .header {
+            margin-bottom: calc(var(--spacer) * 0.5);
 
-        .back-button {
-            cursor: pointer;
-            padding: $spacer;
-            height: calc(1em + (var(--spacer) * 2));
-            width: calc(1em + (var(--spacer) * 2));
-            border: none;
-            background: none;
-        }
+            > * {
+                margin: 0;
+            }
 
-        .blueprint-title {
-            font-weight: bold;
+            .back-button {
+                cursor: pointer;
+                height: calc(1em + (var(--spacer) * 2));
+                width: calc(1em + (var(--spacer) * 2));
+                border: none;
+                background: none;
+            }
+
+            .blueprint-title {
+                font-weight: bold;
+            }
         }
     }
 
diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index e6f97ee918..69daae4c79 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -74,42 +74,6 @@
                     color: var(--bs-white);
                 }
             }
-
-            :deep(.el-breadcrumb) {
-                display: flex;
-
-                a {
-                    font-weight: normal;
-                    color: var(--bs-gray-500);
-                    white-space: nowrap;
-                }
-
-                .el-breadcrumb__separator {
-                    color: var(--bs-gray-500);
-                }
-
-                .el-breadcrumb__item {
-                    display: flex;
-                    flex-wrap: nowrap;
-                    float: none;
-                }
-
-                .material-design-icon {
-                    height: 0.75rem;
-                    width: 0.75rem;
-                    margin-right: calc(var(--spacer) / 2);
-                }
-
-                a {
-                    cursor: pointer !important;
-                }
-
-                html.dark & {
-                    a, .el-breadcrumb__separator {
-                        color: var(--bs-gray-700);
-                    }
-                }
-            }
         }
 
         .side {
diff --git a/ui/src/styles/layout/element-plus-overload.scss b/ui/src/styles/layout/element-plus-overload.scss
index 7923971196..24d19685ff 100644
--- a/ui/src/styles/layout/element-plus-overload.scss
+++ b/ui/src/styles/layout/element-plus-overload.scss
@@ -640,4 +640,37 @@ form.ks-horizontal {
     .el-date-table th {
         border-bottom-color: var(--bs-border-color);
     }
+}
+
+.el-breadcrumb {
+    display: flex;
+
+    a {
+        font-weight: normal;
+        color: var(--bs-gray-500) !important;
+        white-space: nowrap;
+        cursor: pointer !important;
+    }
+
+    .el-breadcrumb__separator {
+        color: var(--bs-gray-500);
+    }
+
+    .el-breadcrumb__item {
+        display: flex;
+        flex-wrap: nowrap;
+        float: none;
+    }
+
+    .material-design-icon {
+        height: 0.75rem;
+        width: 0.75rem;
+        margin-right: calc(var(--spacer) / 2);
+    }
+
+    html.dark & {
+        a, .el-breadcrumb__separator {
+            color: var(--bs-gray-700) !important;
+        }
+    }
 }
\ No newline at end of file


Test patch: