Merge pull request #18657 from ahmedhamidawan/improve_wf_save_ux

[24.0] Improve workflow creating/saving UX
galaxyproject · Aug 8, 2024 · 6a7a889 · 6a7a889
2 parents c3738ad + 76cbfbe
commit 6a7a889
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
@@ -42,8 +42,10 @@
             <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="hasChanges" class="text-muted"> (unsaved changes) </i>
+                    </span>
                 </div>
             </div>
             <WorkflowGraph
@@ -389,12 +391,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
@@ -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) {
@@ -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
@@ -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,
         };