Repository: kestra-io/kestra
Issue: Regression: bring "Edit flow" back to the main navigation bar
Labels: enhancement

### Feature description

It's a regression in developer productivity when the edit button is no longer available on the execution page. It is important to bring it back to the top navigation bar:

![image](https://github.com/kestra-io/kestra/assets/86264395/37b910fe-702f-4239-8362-2e218fc6b589)


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/executions/ExecutionRoot.vue b/ui/src/components/executions/ExecutionRoot.vue
index d0d8d4bd67..3d187fffa8 100644
--- a/ui/src/components/executions/ExecutionRoot.vue
+++ b/ui/src/components/executions/ExecutionRoot.vue
@@ -2,42 +2,25 @@
     <top-nav-bar :title="routeInfo?.title" :breadcrumb="routeInfo?.breadcrumb">
         <template #additional-right v-if="canDelete || isAllowedTrigger || isAllowedEdit">
             <ul>
-                <li>
-                    <el-dropdown>
-                        <el-button type="default">
-                            <DotsVertical title="" />
-                            {{ $t("actions") }}
+                <li v-if="isAllowedEdit">
+                    <a :href="`${finalApiUrl}/executions/${execution.id}`" target="_blank">
+                        <el-button :icon="Api">
+                            {{ $t('api') }}
                         </el-button>
-                        <template #dropdown>
-                            <el-dropdown-menu class="m-dropdown-menu">
-                                <a class="el-dropdown-menu__item d-flex gap-2" :href="`${finalApiUrl}/executions/${execution.id}`" target="_blank">
-                                    <Api /> {{ $t('api') }}
-                                </a>
-                                <el-dropdown-item
-                                    v-if="canDelete"
-                                    :icon="Delete"
-                                    size="large"
-                                    @click="deleteExecution"
-                                >
-                                    {{ $t('delete') }}
-                                </el-dropdown-item>
-
-                                <el-dropdown-item
-                                    v-if="isAllowedEdit"
-                                    :icon="Pencil"
-                                    size="large"
-                                    @click="editFlow"
-                                >
-                                    {{ $t('edit flow') }}
-                                </el-dropdown-item>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
+                    </a>
+                </li>
+                <li v-if="canDelete">
+                    <el-button :icon="Delete" @click="deleteExecution">
+                        {{ $t('delete') }}
+                    </el-button>
+                </li>
+                <li v-if="isAllowedEdit">
+                    <el-button :icon="Pencil" @click="editFlow">
+                        {{ $t("edit flow") }}
+                    </el-button>
                 </li>
-                <li>
-                    <template v-if="isAllowedTrigger">
-                        <trigger-flow type="primary" :flow-id="$route.params.flowId" :namespace="$route.params.namespace" />
-                    </template>
+                <li v-if="isAllowedTrigger">
+                    <trigger-flow type="primary" :flow-id="$route.params.flowId" :namespace="$route.params.namespace" />
                 </li>
             </ul>
         </template>
@@ -53,7 +36,6 @@
     import Api from "vue-material-design-icons/Api.vue";
     import Delete from "vue-material-design-icons/Delete.vue";
     import Pencil from "vue-material-design-icons/Pencil.vue";
-    import DotsVertical from "vue-material-design-icons/DotsVertical.vue";
 </script>
 
 <script>
diff --git a/ui/src/components/flows/FlowRoot.vue b/ui/src/components/flows/FlowRoot.vue
index 8e1cf2a656..1091f9af1d 100644
--- a/ui/src/components/flows/FlowRoot.vue
+++ b/ui/src/components/flows/FlowRoot.vue
@@ -13,7 +13,7 @@
                             {{ $t("restore") }}
                         </el-button>
                     </li>
-                    <li v-if="isAllowedEdit && !deleted && activeTabName !== 'editor'">
+                    <li v-if="isAllowedEdit && !deleted && activeTabName() !== 'editor'">
                         <el-button :icon="Pencil" @click="editFlow" :disabled="deleted">
                             {{ $t("edit flow") }}
                         </el-button>
diff --git a/ui/src/components/layout/GlobalSearch.vue b/ui/src/components/layout/GlobalSearch.vue
index 43cb9a69fa..159a29d6d2 100644
--- a/ui/src/components/layout/GlobalSearch.vue
+++ b/ui/src/components/layout/GlobalSearch.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dropdown trigger="click" popper-class="hide-arrow overflow-hidden separator-m-0 global-search-popper">
+    <el-dropdown class="flex-shrink-0" trigger="click" popper-class="hide-arrow overflow-hidden separator-m-0 global-search-popper">
         <search-field class="align-items-center" @search="search" :router="false" ref="search" placeholder="jump to...">
             <template #prefix>
                 <magnify />
diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index 6b36a11a56..be315d109d 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -14,7 +14,7 @@
                 </slot>
             </h1>
         </div>
-        <div class="d-flex side gap-2">
+        <div class="d-flex side gap-2 flex-shrink-0">
             <global-search />
             <slot name="additional-right" />
             <div class="d-flex fixed-buttons">
@@ -123,9 +123,9 @@
 
         h1 {
             line-height: 1.6;
-            max-width: 40ch;
             flex-wrap: wrap;
             white-space: pre-wrap;
+            word-break: break-all;
         }
 
         .side {


Test patch: