From 9960452f0f0b22dcb019e5623ecf7cfb3157c3f6 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 09:44:19 +0200
Subject: [PATCH 1/8] Add utility for workflow file validation

---
 .../Workflow/Import/workflowValidation.ts     | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 client/src/components/Workflow/Import/workflowValidation.ts

diff --git a/client/src/components/Workflow/Import/workflowValidation.ts b/client/src/components/Workflow/Import/workflowValidation.ts
new file mode 100644
index 00000000000..19b4f69b4ae
--- /dev/null
+++ b/client/src/components/Workflow/Import/workflowValidation.ts
@@ -0,0 +1,69 @@
+/** Accepted workflow file extensions */
+export const WORKFLOW_FILE_EXTENSIONS = [".ga", ".gxwf.yml", ".gxwf.yaml", ".yml", ".yaml"] as const;
+
+/** Human-readable list of accepted formats for file inputs */
+export const WORKFLOW_FILE_ACCEPT = ".ga, .yml, .yaml";
+
+/**
+ * Check if a filename has a valid workflow file extension.
+ * Supports .ga (Galaxy Archive), .yml/.yaml (Galaxy Workflow Format), and .gxwf.yml/.gxwf.yaml
+ */
+export function hasWorkflowFileExtension(fileName: string): boolean {
+    const lowerName = fileName.toLowerCase();
+    return WORKFLOW_FILE_EXTENSIONS.some((ext) => lowerName.endsWith(ext));
+}
+
+/**
+ * Validate a workflow file by checking its extension and optionally its content.
+ *
+ * For .ga files (JSON format), checks for `"a_galaxy_workflow": "true"`.
+ * For .yml/.yaml files (YAML format), checks for `class: GalaxyWorkflow` or `class: GalaxyWorkflow`.
+ *
+ * Content validation reads only the first 1KB of the file for efficiency.
+ */
+export async function validateWorkflowFile(
+    file: File,
+    options: { checkContent?: boolean } = {},
+): Promise<{ valid: boolean; error?: string }> {
+    if (!hasWorkflowFileExtension(file.name)) {
+        return { valid: false, error: `Invalid file type. Accepted formats: ${WORKFLOW_FILE_ACCEPT}` };
+    }
+
+    if (options.checkContent) {
+        const lowerName = file.name.toLowerCase();
+
+        if (lowerName.endsWith(".ga")) {
+            const hasMarker = await readFileMarker(file, '"a_galaxy_workflow"');
+            if (!hasMarker) {
+                return {
+                    valid: false,
+                    error: "File does not appear to be a Galaxy workflow (.ga). Missing workflow marker.",
+                };
+            }
+        } else if (lowerName.endsWith(".yml") || lowerName.endsWith(".yaml")) {
+            const hasMarker = await readFileMarker(file, "class:");
+            if (!hasMarker) {
+                return {
+                    valid: false,
+                    error: "File does not appear to be a Galaxy workflow (.yml/.yaml). Missing 'class:' marker.",
+                };
+            }
+        }
+    }
+
+    return { valid: true };
+}
+
+/**
+ * Read the first 1KB of a file and check if it contains the given marker string.
+ * This is efficient and avoids loading the entire file into memory.
+ */
+async function readFileMarker(file: File, marker: string): Promise<boolean> {
+    try {
+        const slice = file.slice(0, 1024);
+        const text = await slice.text();
+        return text.includes(marker);
+    } catch {
+        return false;
+    }
+}

From b2f79e1084f4eea9b56a33e1d619c382251380d4 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 09:44:20 +0200
Subject: [PATCH 2/8] Improve file import usability with drag-and-drop and
 validation

---
 .../components/Workflow/Import/FromFile.vue   | 171 +++++++++++++-----
 .../Workflow/Import/FromFileOrUrl.test.ts     |   2 +-
 2 files changed, 126 insertions(+), 47 deletions(-)

diff --git a/client/src/components/Workflow/Import/FromFile.vue b/client/src/components/Workflow/Import/FromFile.vue
index d5fe4ffa9a5..607f9e9b246 100644
--- a/client/src/components/Workflow/Import/FromFile.vue
+++ b/client/src/components/Workflow/Import/FromFile.vue
@@ -1,44 +1,40 @@
 <script setup lang="ts">
+import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert, BForm, BFormFile, BFormGroup } from "bootstrap-vue";
+import { BForm, BFormFile, BFormGroup } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { getRedirectOnImportPath } from "@/components/Workflow/redirectPath";
+import { useFileDrop } from "@/composables/fileDrop";
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import { validateWorkflowFile, WORKFLOW_FILE_ACCEPT } from "./workflowValidation";
+
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
-    hideSubmitButton?: boolean;
+    /** A file dropped on the parent's method card, to be consumed on mount */
+    droppedFile?: File | null;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-    hideSubmitButton: false,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
     (e: "input-valid", valid: boolean): void;
 }>();
 
 const loading = ref(false);
-const sourceFile: Ref<string | null> = ref(null);
+const sourceFile: Ref<File | null> = ref(null);
 const errorMessage: Ref<string | null> = ref(null);
-const acceptedWorkflowFormats = ".ga, .yml";
+const dropZoneRef = ref<HTMLElement | null>(null);
+const fileSetViaDrop = ref(false);
 
-const isImportDisabled = computed(() => {
-    return !sourceFile.value;
-});
-
-const importTooltip = computed(() => {
-    return isImportDisabled.value ? "You must provide a workflow file." : "Import workflow from File";
-});
-
-const hasErrorMessage = computed(() => {
-    return errorMessage.value != null;
-});
+const hasErrorMessage = computed(() => errorMessage.value != null);
 
 // Validation state for wizard mode
 const isValid = computed(() => sourceFile.value !== null);
@@ -47,15 +43,65 @@ watch(isValid, (newValue) => {
     emit("input-valid", newValue);
 });
 
-// Hide submit button in wizard mode (or when hideSubmitButton is true)
-const showSubmitButton = computed(() => {
-    return !props.hideSubmitButton;
+// Consume a file dropped on the parent's method card
+if (props.droppedFile) {
+    sourceFile.value = props.droppedFile;
+    fileSetViaDrop.value = true;
+}
+
+// Drop zone handling
+async function onDrop(evt: DragEvent) {
+    if (evt.dataTransfer?.files?.length) {
+        const file = evt.dataTransfer.files[0];
+        if (!file) {
+            return;
+        }
+        const result = await validateWorkflowFile(file, { checkContent: true });
+        if (result.valid) {
+            sourceFile.value = file;
+            fileSetViaDrop.value = true;
+        } else {
+            errorMessage.value = result.error ?? "Invalid workflow file.";
+        }
+    }
+}
+
+const { isFileOverDropZone } = useFileDrop({
+    dropZone: dropZoneRef,
+    onDrop,
+    onDropCancel: () => {},
+    solo: false,
+    idleTime: 10000,
+    ignoreChildrenOnLeave: true,
 });
 
+/** When the user selects a file via the native input, validate it */
+async function onFileInput(file: File | null) {
+    if (!file) {
+        sourceFile.value = null;
+        fileSetViaDrop.value = false;
+        return;
+    }
+    const result = await validateWorkflowFile(file, { checkContent: true });
+    if (result.valid) {
+        sourceFile.value = file;
+        fileSetViaDrop.value = false;
+    } else {
+        sourceFile.value = null;
+        fileSetViaDrop.value = false;
+        errorMessage.value = result.error ?? "Invalid workflow file.";
+    }
+}
+
+/** Clear the current file and reset to the browse state */
+function clearFile() {
+    sourceFile.value = null;
+    fileSetViaDrop.value = false;
+}
+
 const router = useRouter();
 
-async function submit(ev: SubmitEvent) {
-    ev.preventDefault();
+async function submit() {
     const formData = new FormData();
 
     if (sourceFile.value) {
@@ -78,38 +124,71 @@ async function submit(ev: SubmitEvent) {
 
 // Expose method for wizard submit
 async function attemptImport() {
-    await submit(new Event("submit") as SubmitEvent);
+    await submit();
 }
 
 defineExpose({ attemptImport });
 </script>
 
 <template>
-    <BForm class="mt-4 workflow-import-file" @submit="submit">
-        <h2 class="h-sm">Import from a workflow file</h2>
+    <BForm class="mt-4 workflow-import-file" @submit.prevent="submit">
+        <div
+            ref="dropZoneRef"
+            class="workflow-drop-zone"
+            :class="{ 'workflow-drop-zone-active': isFileOverDropZone }"
+            data-galaxy-file-drop-target>
+            <div v-if="!sourceFile" class="mb-3">
+                <FontAwesomeIcon :icon="faCloudUploadAlt" size="3x" class="text-muted" />
+                <p class="mt-2 mb-1 font-weight-medium">Drag a workflow file here</p>
+                <p class="text-muted small mb-2">or</p>
+            </div>
+            <BFormGroup :label="sourceFile ? 'Workflow File' : 'Browse for a file'">
+                <!-- When a file was set via drop, the native file input can't reflect
+                     it programmatically, so we show the filename manually instead. -->
+                <div v-if="fileSetViaDrop && sourceFile" class="text-center py-2">
+                    <span class="font-weight-bold text-break">{{ sourceFile.name }}</span>
+                    <div class="mt-1">
+                        <GButton transparent size="small" @click="clearFile">Choose another</GButton>
+                    </div>
+                </div>
+                <BFormFile
+                    v-show="!fileSetViaDrop"
+                    v-model="sourceFile"
+                    :accept="WORKFLOW_FILE_ACCEPT"
+                    @input="onFileInput" />
+                <span v-if="!sourceFile" class="text-muted small">
+                    Accepted formats: <code>*.ga</code>, <code>*.yml</code>, <code>*.yaml</code>
+                </span>
+            </BFormGroup>
+        </div>
 
-        <BFormGroup label="Archived Workflow File">
-            <BFormFile v-model="sourceFile" :accept="acceptedWorkflowFormats" />
-            If the workflow is in a file on your computer, choose it and then click Import.
-        </BFormGroup>
-
-        <BAlert :show="hasErrorMessage" variant="danger">
+        <GAlert :show="hasErrorMessage" variant="danger">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="loading" show variant="info">
+        <GAlert v-if="loading" variant="info">
             <LoadingSpan message="Loading your workflow, this may take a while - please be patient." />
-        </BAlert>
-
-        <GButton
-            v-if="showSubmitButton"
-            id="workflow-import-button"
-            type="submit"
-            :disabled="isImportDisabled"
-            :title="importTooltip"
-            tooltip
-            color="blue">
-            Import workflow
-        </GButton>
+        </GAlert>
     </BForm>
 </template>
+
+<style scoped lang="scss">
+@import "@/style/scss/theme/blue.scss";
+
+.workflow-drop-zone {
+    border: 2px dashed $border-color;
+    border-radius: $border-radius-large;
+    text-align: center;
+    background-color: $gray-100;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    transition:
+        border-color 0.3s ease,
+        background-color 0.3s ease;
+
+    &.workflow-drop-zone-active {
+        border-color: $brand-primary;
+        background-color: lighten($brand-primary, 60%);
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Import/FromFileOrUrl.test.ts b/client/src/components/Workflow/Import/FromFileOrUrl.test.ts
index f9c759b83be..2bfdaf7f468 100644
--- a/client/src/components/Workflow/Import/FromFileOrUrl.test.ts
+++ b/client/src/components/Workflow/Import/FromFileOrUrl.test.ts
@@ -72,6 +72,6 @@ describe("FromUrl", () => {
 describe("FromFile", () => {
     it("can mount the component", async () => {
         const wrapper = mount(FromFile as object, { localVue });
-        expect(wrapper.find("#workflow-import-button").exists()).toBe(true);
+        expect(wrapper.find("form").exists()).toBe(true);
     });
 });

From 16f4744e92e9f6f77c52cb0f39e64080f28e5de0 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 09:44:20 +0200
Subject: [PATCH 3/8] Streamline import wizard navigation and UI

---
 .../components/Workflow/WorkflowImport.vue    | 93 ++++++++++++++++---
 1 file changed, 79 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowImport.vue b/client/src/components/Workflow/WorkflowImport.vue
index 3c8d1239899..8d3e149be18 100644
--- a/client/src/components/Workflow/WorkflowImport.vue
+++ b/client/src/components/Workflow/WorkflowImport.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { faCloudUploadAlt, faFileImport, faIdBadge, faLink, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, nextTick, onMounted, type Ref, ref } from "vue";
 import { useRoute } from "vue-router/composables";
 
 import { useWizard } from "@/components/Common/Wizard/useWizard";
 import type { TrsSelection } from "@/components/Workflow/Import/types";
+import { validateWorkflowFile } from "@/components/Workflow/Import/workflowValidation";
 import { Services } from "@/components/Workflow/services";
+import { useFileDrop } from "@/composables/fileDrop";
 
 import GCard from "@/components/Common/GCard.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
@@ -22,6 +26,8 @@ const trsServers: Ref<TrsSelection[]> = ref([]);
 const fileComponent = ref<InstanceType<typeof FromFile>>();
 const urlComponent = ref<InstanceType<typeof FromUrl>>();
 const trsComponent = ref<InstanceType<typeof TrsImport>>();
+const uploadCardRef = ref<HTMLElement | null>(null);
+const droppedFile: Ref<File | null> = ref(null);
 
 // Validation states for each step
 const uploadValid = ref(false);
@@ -30,6 +36,32 @@ const trsSearchValid = ref(false);
 const trsUrlValid = ref(false);
 const trsIdValid = ref(false);
 
+// Drop zone on the "Upload file" method card — allows dropping a workflow file
+// directly on the card to skip straight to the upload step with the file pre-populated
+async function onUploadCardDrop(evt: DragEvent) {
+    if (evt.dataTransfer?.files?.length) {
+        const file = evt.dataTransfer.files[0];
+        if (!file) {
+            return;
+        }
+        const result = await validateWorkflowFile(file, { checkContent: true });
+        if (result.valid) {
+            droppedFile.value = file;
+            selectMethod("upload");
+        }
+        // If invalid, the drop is silently ignored — the user can still click the card
+    }
+}
+
+const { isFileOverDropZone: isFileOverUploadCard } = useFileDrop({
+    dropZone: uploadCardRef,
+    onDrop: onUploadCardDrop,
+    onDropCancel: () => {},
+    solo: false,
+    idleTime: 10000,
+    ignoreChildrenOnLeave: true,
+});
+
 const queryParams = computed(() => ({
     trsId: route.query.trs_id as string | undefined,
     trsUrl: route.query.trs_url as string | undefined,
@@ -153,10 +185,26 @@ onMounted(async () => {
 
 function selectMethod(method: ImportMethod) {
     selectedMethod.value = method;
+    // Navigate to the appropriate step based on the selected method
+    if (method === "upload") {
+        wizard.goTo("upload-file");
+    } else if (method === "fetch") {
+        wizard.goTo("fetch-url");
+    } else if (method === "repository") {
+        wizard.goTo("select-trs-method");
+    }
 }
 
 function selectTrsMethod(method: TrsMethod) {
     selectedTrsMethod.value = method;
+    // Navigate to the appropriate TRS step
+    if (method === "search") {
+        wizard.goTo("trs-search");
+    } else if (method === "url") {
+        wizard.goTo("trs-url");
+    } else if (method === "id") {
+        wizard.goTo("trs-id");
+    }
 }
 
 function onSubmit() {
@@ -202,17 +250,24 @@ function onTrsIdValid(e: boolean) {
             <div v-if="wizard.isCurrent('select-method')" class="method-selection">
                 <div class="row">
                     <div class="col-xl-4 my-5">
-                        <GCard
-                            class="h-100 workflow-import-file-link text-center"
-                            :class="{ selected: selectedMethod === 'upload' }"
-                            :clickable="true"
-                            @click="selectMethod('upload')">
-                            <h4>Upload file</h4>
-                            <p class="text-muted mb-0">
-                                Upload a <code>*.ga</code> file from your computer. These files can be downloaded from
-                                Galaxy servers or workflow repositories.
-                            </p>
-                        </GCard>
+                        <div
+                            ref="uploadCardRef"
+                            class="h-100"
+                            :class="{ 'drop-zone-active': isFileOverUploadCard }"
+                            data-galaxy-file-drop-target>
+                            <GCard
+                                class="h-100 workflow-import-file-link text-center"
+                                :class="{ selected: selectedMethod === 'upload' }"
+                                :clickable="true"
+                                @click="selectMethod('upload')">
+                                <FontAwesomeIcon :icon="faFileImport" size="3x" class="mb-3 text-muted" />
+                                <h4>Upload file</h4>
+                                <p class="text-muted mb-0">
+                                    Upload a <code>*.ga</code> or <code>*.gxwf.yml</code> file from your computer. You
+                                    can also drag and drop a file here.
+                                </p>
+                            </GCard>
+                        </div>
                     </div>
 
                     <div class="col-xl-4 my-5">
@@ -221,10 +276,11 @@ function onTrsIdValid(e: boolean) {
                             :class="{ selected: selectedMethod === 'fetch' }"
                             :clickable="true"
                             @click="selectMethod('fetch')">
+                            <FontAwesomeIcon :icon="faLink" size="3x" class="mb-3 text-muted" />
                             <h4>Fetch URL</h4>
                             <p class="text-muted mb-0">
-                                Fetch a remote <code>*.ga</code> file from any publicly accessible URL. This can be
-                                generated by any Galaxy server, or public repositories like GitHub.
+                                Fetch a remote <code>Galaxy Workflow</code> file from any publicly accessible URL. This
+                                can be generated by any Galaxy server, or public repositories like GitHub.
                             </p>
                         </GCard>
                     </div>
@@ -235,6 +291,7 @@ function onTrsIdValid(e: boolean) {
                             :class="{ selected: selectedMethod === 'repository' }"
                             :clickable="true"
                             @click="selectMethod('repository')">
+                            <FontAwesomeIcon :icon="faCloudUploadAlt" size="3x" class="mb-3 text-muted" />
                             <h4>Import from repository</h4>
                             <p class="text-muted mb-0">
                                 Search and import workflows from our configured workflow repositories ({{
@@ -248,7 +305,7 @@ function onTrsIdValid(e: boolean) {
 
             <div v-else-if="wizard.isCurrent('upload-file')" class="import-form">
                 <div class="container-narrow">
-                    <FromFile ref="fileComponent" @input-valid="onUploadValid" />
+                    <FromFile ref="fileComponent" :dropped-file="droppedFile" @input-valid="onUploadValid" />
                 </div>
             </div>
 
@@ -266,6 +323,7 @@ function onTrsIdValid(e: boolean) {
                             :class="{ selected: selectedTrsMethod === 'search' }"
                             :clickable="true"
                             @click="selectTrsMethod('search')">
+                            <FontAwesomeIcon :icon="faSearch" size="3x" class="mb-3 text-muted" />
                             <h4>Search workflow registries</h4>
                             <p class="text-muted mb-0">Search for workflows across configured GA4GH servers.</p>
                         </GCard>
@@ -277,6 +335,7 @@ function onTrsIdValid(e: boolean) {
                             :class="{ selected: selectedTrsMethod === 'url' }"
                             :clickable="true"
                             @click="selectTrsMethod('url')">
+                            <FontAwesomeIcon :icon="faLink" size="3x" class="mb-3 text-muted" />
                             <h4>TRS URL</h4>
                             <p class="text-muted mb-0">Import directly from any GA4GH server with a TRS URL.</p>
                         </GCard>
@@ -288,6 +347,7 @@ function onTrsIdValid(e: boolean) {
                             :class="{ selected: selectedTrsMethod === 'id' }"
                             :clickable="true"
                             @click="selectTrsMethod('id')">
+                            <FontAwesomeIcon :icon="faIdBadge" size="3x" class="mb-3 text-muted" />
                             <h4>TRS ID</h4>
                             <p class="text-muted mb-0">
                                 When you know the TRS ID for a workflow in one of the configured GA4GH servers.
@@ -355,4 +415,9 @@ function onTrsIdValid(e: boolean) {
     width: 100%;
     max-width: 600px;
 }
+.drop-zone-active {
+    border-radius: 0.3rem;
+    outline: 2px dashed var(--brand-primary, #2c3143);
+    outline-offset: 2px;
+}
 </style>

From 2e76c8e3154a9293dd1b54362e6415a48bfd990d Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 09:44:21 +0200
Subject: [PATCH 4/8] Remove redundant UI elements from import sub-components

---
 .../components/Workflow/Import/FromUrl.vue    | 39 ++-----------------
 .../Workflow/Import/TrsIdImport.vue           |  2 -
 .../Workflow/Import/TrsUrlImport.vue          | 30 --------------
 3 files changed, 3 insertions(+), 68 deletions(-)

diff --git a/client/src/components/Workflow/Import/FromUrl.vue b/client/src/components/Workflow/Import/FromUrl.vue
index 4c0658cd5cb..736842ec3b1 100644
--- a/client/src/components/Workflow/Import/FromUrl.vue
+++ b/client/src/components/Workflow/Import/FromUrl.vue
@@ -9,14 +9,6 @@ import { withPrefix } from "@/utils/redirect";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-interface Props {
-    hideSubmitButton?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    hideSubmitButton: false,
-});
-
 const emit = defineEmits<{
     (e: "input-valid", valid: boolean): void;
 }>();
@@ -25,14 +17,6 @@ const loading = ref(false);
 const sourceURL: Ref<string | null> = ref(null);
 const errorMessage: Ref<string | null> = ref(null);
 
-const isImportDisabled = computed(() => {
-    return !sourceURL.value;
-});
-
-const importTooltip = computed(() => {
-    return isImportDisabled.value ? "You must provide a workflow archive URL." : "Import workflow from URL";
-});
-
 const hasErrorMessage = computed(() => {
     return errorMessage.value != null;
 });
@@ -46,11 +30,6 @@ watch(isValid, (newValue) => {
     emit("input-valid", newValue);
 });
 
-// Hide submit button in wizard mode (or when hideSubmitButton is true)
-const showSubmitButton = computed(() => {
-    return !props.hideSubmitButton;
-});
-
 function autoAppendJson(urlString: string): string {
     const sharedWorkflowRegex = /^(https?:\/\/[\S]+\/u\/[\S]+\/w\/[^\s/]+)\/?$/;
     const matches = urlString.match(sharedWorkflowRegex);
@@ -65,8 +44,7 @@ function autoAppendJson(urlString: string): string {
 
 const router = useRouter();
 
-async function submit(ev: SubmitEvent) {
-    ev.preventDefault();
+async function submit() {
     const formData = new FormData();
 
     if (sourceURL.value) {
@@ -94,14 +72,14 @@ async function submit(ev: SubmitEvent) {
 
 // Expose method for wizard submit
 async function attemptImport() {
-    await submit(new Event("submit") as SubmitEvent);
+    await submit();
 }
 
 defineExpose({ attemptImport });
 </script>
 
 <template>
-    <BForm class="mt-4 workflow-import-url" @submit="submit">
+    <BForm class="mt-4 workflow-import-url" @submit.prevent="submit">
         <h2 class="h-sm">Import from a Galaxy workflow export URL</h2>
 
         <BFormGroup label="Workflow Archive URL">
@@ -122,16 +100,5 @@ defineExpose({ attemptImport });
         <BAlert v-if="loading" show variant="info">
             <LoadingSpan message="Loading your workflow, this may take a while - please be patient." />
         </BAlert>
-
-        <GButton
-            v-if="showSubmitButton"
-            id="workflow-import-button"
-            type="submit"
-            :disabled="isImportDisabled"
-            :title="importTooltip"
-            tooltip
-            color="blue">
-            Import workflow
-        </GButton>
     </BForm>
 </template>
diff --git a/client/src/components/Workflow/Import/TrsIdImport.vue b/client/src/components/Workflow/Import/TrsIdImport.vue
index f6fb5d3f00a..3c33eed25ed 100644
--- a/client/src/components/Workflow/Import/TrsIdImport.vue
+++ b/client/src/components/Workflow/Import/TrsIdImport.vue
@@ -134,8 +134,6 @@ defineExpose({ triggerImport });
 
 <template>
     <div class="workflow-import-trs-id">
-        <h2 class="h-sm">Import from TRS ID</h2>
-
         <div>
             <b>TRS Server:</b>
 
diff --git a/client/src/components/Workflow/Import/TrsUrlImport.vue b/client/src/components/Workflow/Import/TrsUrlImport.vue
index c9f9986c36e..d64a1890d7d 100644
--- a/client/src/components/Workflow/Import/TrsUrlImport.vue
+++ b/client/src/components/Workflow/Import/TrsUrlImport.vue
@@ -2,16 +2,12 @@
 import { BForm, BFormGroup, BFormInput } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
-import GButton from "@/components/BaseComponents/GButton.vue";
-
 interface Props {
     queryTrsUrl?: string;
-    hideSubmitButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     queryTrsUrl: "",
-    hideSubmitButton: false,
 });
 
 const emit = defineEmits<{
@@ -21,14 +17,6 @@ const emit = defineEmits<{
 
 const trsUrl = ref(props.queryTrsUrl);
 
-const isImportDisabled = computed(() => {
-    return !trsUrl.value;
-});
-
-const importTooltip = computed(() => {
-    return isImportDisabled.value ? "You must provide a TRS URL." : "Import workflow from TRS URL";
-});
-
 // Validation state for wizard mode
 const isValid = computed(() => {
     return trsUrl.value !== null && trsUrl.value !== undefined && trsUrl.value.length > 0;
@@ -42,11 +30,6 @@ watch(
     { immediate: true },
 );
 
-// Hide submit button in wizard mode (or when hideSubmitButton is true)
-const showSubmitButton = computed(() => {
-    return !props.hideSubmitButton;
-});
-
 function submit(ev: SubmitEvent) {
     ev.preventDefault();
 
@@ -67,22 +50,9 @@ defineExpose({ triggerImport });
 
 <template>
     <BForm class="mt-4" @submit="submit">
-        <h2 class="h-sm">Import from TRS URL</h2>
-
         <BFormGroup label="TRS URL:" label-class="font-weight-bold">
             <BFormInput id="trs-import-url-input" v-model="trsUrl" aria-label="TRS URL" type="url" />
             If the workflow is accessible via a TRS URL, enter the URL above and click Import.
         </BFormGroup>
-
-        <GButton
-            v-if="showSubmitButton"
-            id="trs-url-import-button"
-            type="submit"
-            :disabled="isImportDisabled"
-            :title="importTooltip"
-            tooltip
-            color="blue">
-            Import workflow
-        </GButton>
     </BForm>
 </template>

From 3821169a172d9c945b37f3d810f992e2d24bf743 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:06:15 +0200
Subject: [PATCH 5/8] Update Selenium tests for workflow import wizard

Simplify workflow and TRS import tests by removing redundant clicks on the "Next" button. The import wizard now automatically navigates to the next step upon selecting an import method
---
 lib/galaxy/selenium/navigates_galaxy.py           | 14 +++++---------
 .../selenium/test_workflow_management.py          | 15 +++++----------
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 3df6ae39c27..bfb029128bf 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -385,26 +385,23 @@ class NavigatesGalaxy(HasDriverProxy[WaitType]):
         self.navigate_to(self.build_url("workflows/trs_import"))
         self.components.masthead._.wait_for_visible()
         # The wizard auto-navigates to TRS method selection on mount
-        # Click the "Search workflow registries" card then advance the wizard
+        # Clicking the "Search workflow registries" card auto-navigates to the search form
         self.components.workflows.import_trs_search_link.wait_for_and_click()
-        self.components.workflows.import_next_button.wait_for_and_click()
 
     def go_to_trs_by_id(self) -> None:
         self.navigate_to(self.build_url("workflows/trs_import"))
         self.components.masthead._.wait_for_visible()
         # The wizard auto-navigates to TRS method selection on mount
-        # Click the TRS ID sub-card then advance the wizard
+        # Clicking the TRS ID card auto-navigates to the TRS ID form
         self.components.workflows.import_trs_id_link.wait_for_and_click()
-        self.components.workflows.import_next_button.wait_for_and_click()
 
     def go_to_trs_by_url(self) -> None:
         self.navigate_to(self.build_url("workflows/trs_import"))
         self.components.masthead._.wait_for_visible()
         # The wizard auto-navigates to TRS method selection on mount
-        # Click the TRS URL sub-card then advance the wizard
+        # Clicking the TRS URL card auto-navigates to the TRS URL form
         self.components.workflows.import_trs_url_link.wait_for_and_click()
-        self.components.workflows.import_next_button.wait_for_and_click()
-        # Wait for the URL input to be visible after wizard navigates to the form
+        # Wait for the URL input to be visible after wizard auto-navigates to the form
         self.components.trs_import.url_input.wait_for_visible()
 
     def go_to_workflow_sharing(self, workflow_id: str) -> None:
@@ -2030,9 +2027,8 @@ class NavigatesGalaxy(HasDriverProxy[WaitType]):
 
     def workflow_import_submit_url(self, url):
         # Click the "Fetch URL" card to select that import method
+        # (auto-navigates to the URL input step)
         self.components.workflows.import_url_link.wait_for_and_click()
-        # Click the wizard's Next button to proceed to the URL input step
-        self.wait_for_and_click_selector(".wizard-actions .go-next-btn")
         # Enter the URL
         url_element = self.wait_for_selector_visible("#workflow-import-url-input")
         url_element.send_keys(url)
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index 222f1af710e..6cd04a2f50f 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -33,28 +33,23 @@ class TestWorkflowManagement(SeleniumTestCase, TestsGalaxyPagers, UsesWorkflowAs
         workflows = self.components.workflows
 
         self.workflow_index_click_import()
+        # Clicking the method card auto-navigates to the upload step
         workflows.import_file_link.wait_for_and_click()
-        # Click Next to navigate to the file upload view
-        self.wait_for_and_click_selector(".wizard-actions .go-next-btn")
         workflows.import_file.assert_no_axe_violations_with_impact_of_at_least("moderate")
 
         self.navigate_to_workflows_import()
+        # Clicking the TRS card auto-navigates to the TRS method selection step
         workflows.import_trs_link.wait_for_and_click()
-        # Click Next to navigate to TRS method selection
-        self.wait_for_and_click_selector(".wizard-actions .go-next-btn")
+        # Clicking the search card auto-navigates to the TRS search form
         workflows.import_trs_search_link.wait_for_and_click()
-        # Click Next to navigate to TRS search view
-        self.wait_for_and_click_selector(".wizard-actions .go-next-btn")
         # moderate violation relating to header ordering
         workflows.import_trs_search.assert_no_axe_violations_with_impact_of_at_least("serious")
 
         self.navigate_to_workflows_import()
+        # Clicking the TRS card auto-navigates to the TRS method selection step
         workflows.import_trs_link.wait_for_and_click()
-        # Click Next to navigate to TRS method selection
-        self.wait_for_and_click_selector(".wizard-actions .go-next-btn")
+        # Clicking the TRS ID card auto-navigates to the TRS ID form
         workflows.import_trs_id_link.wait_for_and_click()
-        # Click Next to navigate to TRS ID view
-        self.wait_for_and_click_selector(".wizard-actions .go-next-btn")
         # ditto - moderate violation relating to header ordering
         workflows.import_trs_id.assert_no_axe_violations_with_impact_of_at_least("serious")
 

From a23fc614af0f75130026848217e0449a0f910981 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:33:46 +0200
Subject: [PATCH 6/8] Improve TRS import test reliability

Introduces a centralized helper method to manage clicking the wizard's import button. This ensures the button is enabled and clickable before interaction, accounting for delays in UI validation propagation following user input.
---
 test/integration_selenium/test_trs_import.py | 29 ++++++++++++--------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/test/integration_selenium/test_trs_import.py b/test/integration_selenium/test_trs_import.py
index 9bf28c054c5..185ad9c16cc 100644
--- a/test/integration_selenium/test_trs_import.py
+++ b/test/integration_selenium/test_trs_import.py
@@ -51,6 +51,18 @@ class TestTrsImport(SeleniumIntegrationTestCase):
     def trs_config_dir(cls):
         return cls.temp_config_dir("trs")
 
+    def _click_wizard_import_button(self, wait_for_validation=False):
+        """Click the wizard's Import button after ensuring it's enabled.
+
+        The Import button is disabled until the current step's validation passes.
+        Set wait_for_validation=True to sleep briefly before clicking (needed when
+        user input was just entered and Vue validation hasn't propagated yet).
+        """
+        if wait_for_validation:
+            self.sleep_for(self.wait_types.UX_RENDER)
+        import_button = self.wait_for_selector_clickable(".wizard-actions .go-next-btn.btn-primary:not([disabled])")
+        import_button.click()
+
     def assert_workflow_imported(self, name):
         # surround name with quotes to consider case where name contains colons
         self.workflow_index_search_for(f'"{name}"')
@@ -69,8 +81,7 @@ class TestTrsImport(SeleniumIntegrationTestCase):
         full_url = self.build_url(import_url)
         self.driver.get(full_url)
         self.components.workflows.workflow_trs_import.wait_for_visible()
-        # Wait for the wizard's Import button to become enabled and click it
-        self.components.workflows.import_next_button.wait_for_and_click()
+        self._click_wizard_import_button()
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open()
         self.assert_workflow_imported(WORKFLOW_NAME)
@@ -81,8 +92,7 @@ class TestTrsImport(SeleniumIntegrationTestCase):
         self.components.trs_search.search_result(
             workflow_name="galaxy-workflow-dockstore-example-1"
         ).wait_for_and_click()
-        # Wait for the wizard's Import button to become enabled and click it
-        self.components.workflows.import_next_button.wait_for_and_click()
+        self._click_wizard_import_button(wait_for_validation=True)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open()
         self.assert_workflow_imported("Test Workflow")
@@ -94,8 +104,7 @@ class TestTrsImport(SeleniumIntegrationTestCase):
         # Select version from dropdown
         version_select = self.components.trs_search.version_select.wait_for_visible()
         Select(version_select).select_by_visible_text("v0.4")
-        # Wait for the wizard's Import button to become enabled and click it
-        self.components.workflows.import_next_button.wait_for_and_click()
+        self._click_wizard_import_button(wait_for_validation=True)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open()
         self.assert_workflow_imported(WORKFLOW_NAME)
@@ -109,8 +118,7 @@ class TestTrsImport(SeleniumIntegrationTestCase):
         self.components.trs_search.select_server(server="workflowhub").wait_for_and_click()
         self.components.trs_search.search.wait_for_and_send_keys(WORKFLOW_NAME)
         self.components.trs_search.search_result(workflow_name=WORKFLOW_NAME).wait_for_and_click()
-        # Wait for the wizard's Import button to become enabled and click it
-        self.components.workflows.import_next_button.wait_for_and_click()
+        self._click_wizard_import_button(wait_for_validation=True)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open()
         self.assert_workflow_imported(WORKFLOW_NAME)
@@ -146,8 +154,7 @@ class TestTrsImport(SeleniumIntegrationTestCase):
         # Select version from dropdown
         version_select = self.components.trs_import.version_select.wait_for_visible()
         Select(version_select).select_by_visible_text("v0.4")
-        # Wait for the wizard's Import button to become enabled and click it
-        self.components.workflows.import_next_button.wait_for_and_click()
+        self._click_wizard_import_button(wait_for_validation=True)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open()
         self.assert_workflow_imported(WORKFLOW_NAME)
@@ -155,7 +162,7 @@ class TestTrsImport(SeleniumIntegrationTestCase):
     def _import_by_trs_url(self, trs_url):
         self.go_to_trs_by_url()
         self.components.trs_import.url_input.wait_for_and_send_keys(trs_url)
-        self.components.trs_import.url_import_button.wait_for_and_click()
+        self._click_wizard_import_button(wait_for_validation=True)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.workflow_index_open()
         self.assert_workflow_imported(WORKFLOW_NAME)

From 884dad89152b78532cc66db3b2f23fbb66f6cf37 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:36:06 +0200
Subject: [PATCH 7/8] Use router-link for TRS import navigation

Prevent a full page reload when navigating to the TRS import section.
---
 .../src/components/Workflow/Import/FromFileOrUrl.test.ts  | 8 ++++++--
 client/src/components/Workflow/Import/FromUrl.vue         | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/Import/FromFileOrUrl.test.ts b/client/src/components/Workflow/Import/FromFileOrUrl.test.ts
index 2bfdaf7f468..b324c6cc148 100644
--- a/client/src/components/Workflow/Import/FromFileOrUrl.test.ts
+++ b/client/src/components/Workflow/Import/FromFileOrUrl.test.ts
@@ -1,6 +1,7 @@
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
+import VueRouter from "vue-router";
 
 import FromFile from "./FromFile.vue";
 import FromUrl from "./FromUrl.vue";
@@ -17,6 +18,7 @@ vi.mock("axios", () => ({
 }));
 
 const localVue = getLocalVue(true);
+localVue.use(VueRouter);
 
 const sharedUrl = "http://127.0.0.1:8081/u/admin/w/unnamed-workflow";
 const sharedUrlTrailingSlash = "http://127.0.0.1:8081/u/admin/w/unnamed-workflow/";
@@ -25,7 +27,8 @@ const invalidUrl = "http://127.0.0.1:8081/u/admin/w/unnamed-workflow/additional-
 
 describe("FromUrl", () => {
     it("converts shared urls to json urls", async () => {
-        const wrapper = mount(FromUrl as object, { localVue });
+        const router = new VueRouter();
+        const wrapper = mount(FromUrl as object, { localVue, router });
 
         {
             const input = wrapper.find("#workflow-import-url-input");
@@ -71,7 +74,8 @@ describe("FromUrl", () => {
 
 describe("FromFile", () => {
     it("can mount the component", async () => {
-        const wrapper = mount(FromFile as object, { localVue });
+        const router = new VueRouter();
+        const wrapper = mount(FromFile as object, { localVue, router });
         expect(wrapper.find("form").exists()).toBe(true);
     });
 });
diff --git a/client/src/components/Workflow/Import/FromUrl.vue b/client/src/components/Workflow/Import/FromUrl.vue
index 736842ec3b1..bb53f8507fd 100644
--- a/client/src/components/Workflow/Import/FromUrl.vue
+++ b/client/src/components/Workflow/Import/FromUrl.vue
@@ -2,6 +2,7 @@
 import axios from "axios";
 import { BAlert, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
+import { RouterLink } from "vue-router";
 import { useRouter } from "vue-router/composables";
 
 import { getRedirectOnImportPath } from "@/components/Workflow/redirectPath";
@@ -89,7 +90,7 @@ defineExpose({ attemptImport });
                 aria-label="Workflow Import URL"
                 type="url" />
             If your URL is from a workflow repository and doesn't end in <code>.ga</code>, you might need to use the
-            <a href="/workflows/import?trs_url=Enter%20a%20TRS%20URL">TRS import method</a>
+            <RouterLink to="/workflows/import?trs_url=Enter%20a%20TRS%20URL">TRS import method</RouterLink>
             instead.
         </BFormGroup>
 

From 4336259fcb7200a8e82bedde843f2662119a1808 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:43:55 +0200
Subject: [PATCH 8/8] Improve code color contrast for accessibility

Overrides the default Bootstrap code color to meet WCAG AA contrast standards.
---
 client/src/style/scss/theme/blue.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index 65b5db6f57d..57c2cdf4074 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -115,6 +115,9 @@ $h6-font-size: $font-size-base * 0.85; // default 1
 $dropdown-link-hover-color: $brand-light;
 $dropdown-link-hover-bg: $brand-primary;
 
+// Code elements (override Bootstrap default $code-color: $pink which fails WCAG AA contrast)
+$code-color: #c2266e;
+
 // Color of input elements
 $input-color: $text-color;
 $input-color-placeholder: $text-muted;