From 7d8a28c5d0e4026db9f5859e26b3c721246b877f Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 6 Aug 2024 16:16:16 -0500
Subject: [PATCH 1/2] [24.0] Improve workflow creating/saving UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The UX is improved with the following changes:
- 🎨 For any unsaved changes in the workflow editor, the following text has been added next to the workflow name header: "_(unsaved changes)_"
- 🐞 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 https://github.com/galaxyproject/galaxy/issues/18609
---
 client/src/components/Workflow/Editor/Index.vue  | 12 ++++++++----
 .../src/components/Workflow/Editor/Options.vue   |  2 +-
 client/src/entry/analysis/App.vue                | 16 +++++++++++++++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 420cbb473a3a..fe473d3cd4e6 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/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;
             }
         },
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index c5e959598772..e8fbf85a2509 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/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"
diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index a494dfde2012..3f36e1b3965b 100644
--- a/client/src/entry/analysis/App.vue
+++ b/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,
         };

From 76cbfbe2ce005bed16d8af01021375eac268c191 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 7 Aug 2024 11:11:25 -0500
Subject: [PATCH 2/2] replace `Create` with `Save` when inside the editor

---
 client/src/components/Workflow/Editor/Index.vue   | 4 +---
 client/src/components/Workflow/Editor/Options.vue | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index fe473d3cd4e6..cb18d5094a60 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -44,9 +44,7 @@
                     <span class="sr-only">Workflow Editor</span>
                     <span>
                         {{ name || "..." }}
-                        <i v-if="isNewTempWorkflow">
-                            (Click Save <span class="fa fa-floppy-o" /> to create this workflow)
-                        </i>
+                        <i v-if="hasChanges" class="text-muted"> (unsaved changes) </i>
                     </span>
                 </div>
             </div>
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index e8fbf85a2509..9d7e0035c4b2 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/client/src/components/Workflow/Editor/Options.vue
@@ -28,7 +28,7 @@ const { confirm } = useConfirmDialog();
 
 const saveHover = computed(() => {
     if (props.isNewTempWorkflow) {
-        return "Create a new workflow";
+        return "Save Workflow";
     } else if (!props.hasChanges) {
         return "Workflow has no changes";
     } else if (props.hasInvalidConnections) {