Commit 7d8a28c5 authored by Ahmed Awan's avatar Ahmed Awan
Browse files

[24.0] Improve workflow creating/saving UX 

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
parent c3738ad9

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

+8 −4
Original line number Diff line number Diff line
@@ -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

+1 −1
Original line number Diff line number Diff line
@@ -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/entry/analysis/App.vue

+15 −1
Original line number Diff line number Diff line
@@ -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,

        };