feat: add starred pages (kestra-io#5761)

* store page title and breadcrumb in vuex * refactor leftmenu with composition API * last fixes * extract menu in a composable for inheritance replacement * feat: add starred pages (no dashboard) * keep "generateMenu" because of hack * add comment about what function is expected * cleanup and style * fix starring when no breadcrumbs * chore(translations): auto generate values for languages other than english * add hover message to get full title * remove extra class that was not used --------- Co-authored-by: Bart Ledoux <[email protected]> Co-authored-by: GitHub Action <[email protected]>
boktoday · Nov 4, 2024 · 8c83df5 · 8c83df5
1 parent f6fdb65
commit 8c83df5
Show file tree

Hide file tree

Showing 11 changed files with 393 additions and 251 deletions.
diff --git a/ui/src/components/dashboard/Dashboard.vue b/ui/src/components/dashboard/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-    <Header v-if="!embed" />
+    <Header v-if="!embed" not-starrable />
 
     <div class="filters">
         <el-row :gutter="10" class="mx-0">

diff --git a/ui/src/components/dashboard/components/Header.vue b/ui/src/components/dashboard/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <TopNavBar :title="routeInfo.title">
+    <TopNavBar :title="routeInfo.title" :not-starrable="notStarrable">
         <template #additional-right v-if="canCreate">
             <ul>
                 <li>
@@ -30,6 +30,10 @@
 
     import Plus from "vue-material-design-icons/Plus.vue";
 
+    defineProps({
+        notStarrable: Boolean,
+    });
+
     const store = useStore();
     const {t} = useI18n({useScope: "global"});
 

diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
@@ -12,6 +12,14 @@
                 <slot name="title">
                     {{ title }}
                 </slot>
+                <el-button
+                    v-if="!notStarrable"
+                    class="star-button"
+                    :class="{'star-active': starred}"
+                    :icon="StarOutlineIcon"
+                    circle
+                    @click="onStarClick"
+                />
             </h1>
         </div>
         <div class="d-lg-flex side gap-2 flex-shrink-0 align-items-center mycontainer">
@@ -107,6 +115,9 @@
     import ProgressQuestion from "vue-material-design-icons/ProgressQuestion.vue";
     import GlobalSearch from "./GlobalSearch.vue";
     import TrashCan from "vue-material-design-icons/TrashCan.vue";
+    import StarOutlineIcon from "vue-material-design-icons/StarOutline.vue";
+    import StarIcon from "vue-material-design-icons/Star.vue";
+
 
     export default {
         components: {
@@ -131,12 +142,17 @@
             breadcrumb: {
                 type: Array,
                 default: undefined
+            },
+            notStarrable: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {
             ...mapState("api", ["version"]),
             ...mapState("core", ["tutorialFlows"]),
             ...mapState("log", ["logs"]),
+            ...mapState("starred", ["pages"]),
             ...mapGetters("core", ["guidedProperties"]),
             ...mapGetters("auth", ["user"]),
             displayNavBar() {
@@ -149,6 +165,12 @@
             shouldDisplayDeleteButton() {
                 return this.$route.name === "flows/update" && this.$route.params?.tab === "logs"
             },
+            StarOutlineIcon() {
+                return this.starred ? StarIcon : StarOutlineIcon
+            },
+            starred() {
+                return this.pages.some(page => page.path === this.$route.fullPath)
+            },
         },
         methods: {
             restartGuidedTour() {
@@ -164,6 +186,18 @@
                     () => {}
                 )
             },
+            onStarClick() {
+                if (this.starred) {
+                    this.$store.dispatch("starred/remove", {
+                        path:this.$route.fullPath
+                    })
+                } else {
+                    this.$store.dispatch("starred/add", {
+                        path:this.$route.fullPath,
+                        label: this.breadcrumb?.length ? `${this.breadcrumb[0].label}: ${this.title}` : this.title,
+                    })
+                }
+            }
         },
     };
 </script>,
@@ -185,7 +219,17 @@
 
         h1 {
             line-height: 1.6;
-            display: block !important;
+            display: flex !important;
+            align-items: center;
+        }
+
+        .star-button{
+            margin-left: var(--spacer);
+            border: none;
+        }
+
+        .star-active {
+            color: var(--bs-primary);
         }
 
         :deep(.el-breadcrumb__item) {
@@ -227,15 +271,15 @@
                 grid-template-rows: repeat(2, auto);
                 gap:10px;
                 overflow: hidden;
-                
+
 
             }
             .icons{
                 grid-row:2;
                 grid-column:2;
                 display: contents;
             }
-            
+
         }
         @media (max-width: 664px){
             .mycontainer{