feat(ui): Design change on dashboard creation

close #6943
kestra-io · Jan 27, 2025 · 2b69b5b · 2b69b5b
1 parent 69b5093
commit 2b69b5b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/ui/src/components/dashboard/components/Header.vue b/ui/src/components/dashboard/components/Header.vue
@@ -8,12 +8,23 @@
                             name: 'dashboards/update',
                             params: {id: props.id},
                         }"
+                        data-test-id="dashboard-update-dashboard-button"
                     >
                         <el-button :icon="Pencil">
                             {{ $t("edit_custom_dashboard") }}
                         </el-button>
                     </router-link>
                 </li>
+                <li v-if="!props.id">
+                    <router-link
+                        :to="{name: 'dashboards/create'}"
+                        data-test-id="dashboard-create-dashboard-button"
+                    >
+                        <el-button :icon="ViewDashboardEdit">
+                            {{ $t("create_dashboard") }}
+                        </el-button>
+                    </router-link>
+                </li>
                 <li>
                     <router-link
                         :to="{name: 'flows/create'}"
@@ -42,6 +53,7 @@
 
     import Pencil from "vue-material-design-icons/Pencil.vue";
     import Plus from "vue-material-design-icons/Plus.vue";
+    import ViewDashboardEdit from "vue-material-design-icons/ViewDashboardEdit.vue";
 
     const store = useStore();
     const {t} = useI18n({useScope: "global"});

diff --git a/ui/src/components/filter/segments/Dashboards.vue b/ui/src/components/filter/segments/Dashboards.vue
@@ -1,7 +1,7 @@
 <template>
     <el-dropdown trigger="click" placement="bottom-end">
         <KestraIcon placement="bottom">
-            <el-button :icon="ViewDashboardEdit">
+            <el-button :icon="Menu">
                 {{ selectedDashboard ?? $t('default_dashboard') }}
             </el-button>
         </KestraIcon>
@@ -73,7 +73,7 @@
 <script setup lang="ts">
     import {onBeforeMount, ref, computed, getCurrentInstance} from "vue";
     import KestraIcon from "../../Kicon.vue";
-    import {ViewDashboardEdit, Plus, DeleteOutline, Magnify, Pencil} from "../utils/icons";
+    import {Menu, Plus, DeleteOutline, Magnify, Pencil} from "../utils/icons";
     import {useI18n} from "vue-i18n";
     import {useStore} from "vuex";
     import {useRouter, useRoute} from "vue-router";

diff --git a/ui/src/components/filter/utils/icons.ts b/ui/src/components/filter/utils/icons.ts
@@ -20,6 +20,7 @@ import TagOutline from "vue-material-design-icons/TagOutline.vue";
 import TimelineTextOutline from "vue-material-design-icons/TimelineTextOutline.vue";
 import ViewDashboardEdit from "vue-material-design-icons/ViewDashboardEdit.vue";
 import Pencil from "vue-material-design-icons/Pencil.vue";
+import Menu from "vue-material-design-icons/Menu.vue";
 
 export {
     AccountCheck,
@@ -43,5 +44,6 @@ export {
     TagOutline,
     TimelineTextOutline,
     ViewDashboardEdit,
-    Pencil
+    Pencil,
+    Menu
 };
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -999,6 +999,7 @@
     "default_dashboard": "Default Dashboard",
     "custom_dashboard": "Custom Dashboards",
     "create_custom_dashboard": "Create new dashboard",
+    "create_dashboard": "Create Dashboard",
     "edit_custom_dashboard": "Edit Dashboard",
     "custom_dashboard_empty": "There are no results to be shown.",
     "filters": {