[24.0] Improve workflow creating/saving UX

The UX is improved with the following changes:
- 🎨 The `+ Create` button on the `WorkflowList` shows the tooltip "Open workflow editor" instead of "Create new workflow"
- 🎨 For a fresh, empty workflow editor, where the user hasn't saved yet, the following text has been added next to the workflow name header: "_(Click Save to create this workflow)_"
- 🐞 We ensure the reload page confirmation is triggered on changing workflow name and annotation as well.
- 🐞 We also ensure that the router reload confirmation flag is reset on route change, since sometimes, the confirmation was not cleared when the route changed and the alert was shown needlessly.

Fixes galaxyproject#18609

client/src/components/Workflow/Editor/Index.vue

@@ -42,8 +42,12 @@
             <div class="unified-panel-header" unselectable="on">
                 <div class="unified-panel-header-inner">
                     <span class="sr-only">Workflow Editor</span>
-                    <span v-if="!isNewTempWorkflow || name">{{ name }}</span>
-                    <i v-else>Create New Workflow</i>
+                    <span>
+                        {{ name || "..." }}
+                        <i v-if="isNewTempWorkflow">
+                            (Click Save <span class="fa fa-floppy-o" /> to create this workflow)
+                        </i>
+                    </span>
                 </div>
             </div>
             <WorkflowGraph
@@ -389,12 +393,12 @@ export default {
             }
         },
         annotation(newAnnotation, oldAnnotation) {
-            if (newAnnotation != oldAnnotation && !this.isNewTempWorkflow) {
+            if (newAnnotation != oldAnnotation) {
                 this.hasChanges = true;
             }
         },
         name(newName, oldName) {
-            if (newName != oldName && !this.isNewTempWorkflow) {
+            if (newName != oldName) {
                 this.hasChanges = true;
             }
         },

client/src/components/Workflow/Editor/Options.vue

@@ -81,7 +81,7 @@ async function onSave() {
             <BButton
                 id="workflow-save-button"
                 role="button"
-                variant="link"
+                :variant="isNewTempWorkflow ? 'primary' : 'link'"
                 aria-label="Save Workflow"
                 class="editor-button-save"
                 :disabled="!isNewTempWorkflow && !hasChanges"

client/src/components/Workflow/WorkflowListActions.vue

@@ -21,7 +21,7 @@ const createButtonTitle = computed(() => {
     if (isAnonymous.value) {
         return "Log in to create workflow";
     } else {
-        return "Create new workflow";
+        return "Open workflow editor";
     }
 });
 const importButtonTitle = computed(() => {

client/src/entry/analysis/App.vue

@@ -62,6 +62,7 @@ import { getAppRoot } from "onload";
 import { storeToRefs } from "pinia";
 import { withPrefix } from "utils/redirect";
 import { ref, watch } from "vue";
+import { useRoute } from "vue-router/composables";
 
 import short from "@/components/plugins/short";
 import { useRouteQueryBool } from "@/composables/route";
@@ -116,7 +117,21 @@ export default {
             { immediate: true }
         );
 
+        const confirmation = ref(null);
+        const route = useRoute();
+        watch(
+            () => route.fullPath,
+            (newVal, oldVal) => {
+                // sometimes, the confirmation is not cleared when the route changes
+                // and the confirmation alert is shown needlessly
+                if (confirmation.value) {
+                    confirmation.value = null;
+                }
+            }
+        );
+
         return {
+            confirmation,
             toastRef,
             confirmDialogRef,
             uploadModal,
@@ -128,7 +143,6 @@ export default {
     data() {
         return {
             config: getGalaxyInstance().config,
-            confirmation: null,
             resendUrl: `${getAppRoot()}user/resend_verification`,
             windowManager: null,
         };