From ba9b7c9c002dbc48937c8d8f4fc610c95df14230 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 4 Oct 2024 15:15:33 +0200
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20migrate=20`License?=
 =?UTF-8?q?Selector`=20to=20the=20composition=20API=20and=20typescript,=20?=
 =?UTF-8?q?add=20error=20alert,=20improve=20button=20controls=20and=20make?=
 =?UTF-8?q?=20them=20accessible=20via=20keyboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/License/LicenseSelector.vue    | 263 ++++++++++--------
 1 file changed, 147 insertions(+), 116 deletions(-)

diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index e6208be03f15..45386b3764db 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -1,130 +1,161 @@
+<script setup lang="ts">
+import { faEdit, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BFormSelect } from "bootstrap-vue";
+import { computed, onMounted, ref, watch } from "vue";
+
+import { GalaxyApi } from "@/api";
+import { type components } from "@/api/schema";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import License from "./License.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+type LicenseMetadataModel = components["schemas"]["LicenseMetadataModel"];
+
+interface Props {
+    inputLicense: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "onLicense", license: string): void;
+}>();
+
+const editLicense = ref(false);
+const licensesLoading = ref(false);
+const errorMessage = ref<string>("");
+const currentLicense = ref<string>(props.inputLicense);
+const licenses = ref<LicenseMetadataModel[] | undefined>([]);
+
+const currentLicenseInfo = computed(() => {
+    for (const l of licenses.value || []) {
+        if (l.licenseId == currentLicense.value) {
+            return l;
+        }
+    }
+
+    return null;
+});
+const licenseOptions = computed(() => {
+    const options = [];
+
+    options.push({
+        value: null,
+        text: "*Do not specify a license.*",
+    });
+
+    for (const l of licenses.value || []) {
+        if (l.licenseId == currentLicense.value || l.recommended) {
+            options.push({
+                value: l.licenseId,
+                text: l.name,
+            });
+        }
+    }
+
+    return options;
+});
+
+function onSave() {
+    onLicense(currentLicense.value);
+    disableEdit();
+}
+
+function disableEdit() {
+    editLicense.value = false;
+    errorMessage.value = "";
+}
+
+function onLicense(l: string) {
+    emit("onLicense", l);
+}
+
+watch(
+    () => props.inputLicense,
+    (newLicense) => {
+        currentLicense.value = newLicense;
+    }
+);
+
+onMounted(async () => {
+    licensesLoading.value = true;
+
+    const { error, data } = await GalaxyApi().GET("/api/licenses");
+
+    if (error) {
+        errorMessage.value = errorMessageAsString(error) || "Unable to fetch licenses.";
+    }
+
+    licenses.value = data;
+
+    licensesLoading.value = false;
+});
+</script>
+
 <template>
-    <div v-if="editLicense">
-        <LoadingSpan v-if="licensesLoading" message="Loading licenses..." />
-        <b-form-select
-            v-else
-            v-model="license"
-            data-description="license select"
-            :options="licenseOptions"></b-form-select>
-        <License v-if="currentLicenseInfo" :license-id="license" :input-license-info="currentLicenseInfo">
+    <div v-if="editLicense" class="license-selector">
+        <LoadingSpan v-if="licensesLoading" message="Loading licenses" />
+        <BAlert v-else-if="errorMessage" variant="danger" class="m-0" show>
+            {{ errorMessage }}
+        </BAlert>
+        <BFormSelect v-else v-model="currentLicense" data-description="license select" :options="licenseOptions" />
+
+        <License v-if="currentLicenseInfo" :license-id="currentLicense" :input-license-info="currentLicenseInfo">
             <template v-slot:buttons>
-                <span v-b-tooltip.hover title="Save License"
-                    ><FontAwesomeIcon data-description="license save" icon="save" @click="onSave"
-                /></span>
-                <span v-b-tooltip.hover title="Cancel Edit"><FontAwesomeIcon icon="times" @click="disableEdit" /></span>
+                <BButton v-b-tooltip.hover variant="outline-danger" title="Cancel Edit" @click="disableEdit">
+                    <FontAwesomeIcon :icon="faTimes" data-description="license cancel" />
+                    Cancel
+                </BButton>
+                <BButton v-b-tooltip.hover variant="primary" title="Save License" @click="onSave">
+                    <FontAwesomeIcon :icon="faSave" data-description="license save" />
+                    Save License
+                </BButton>
             </template>
         </License>
         <div v-else>
-            <a href="#" @click.prevent="onSave">Save without license</a> or
-            <a href="#" @click.prevent="editLicense = false">cancel edit.</a>
+            <BButton variant="outline-danger" @click="editLicense = false">
+                <FontAwesomeIcon :icon="faTimes" data-description="license cancel" />
+                Cancel
+            </BButton>
+            <BButton variant="primary" @click="onSave">
+                <FontAwesomeIcon :icon="faSave" data-description="license save" />
+                Save without license
+            </BButton>
         </div>
     </div>
-    <div v-else-if="license" data-description="license selector" :data-license="license">
-        <License :license-id="license">
-            <template v-slot:buttons>
-                <span v-b-tooltip.hover title="Edit License"
-                    ><FontAwesomeIcon icon="edit" data-description="edit license link" @click="editLicense = true"
-                /></span>
+    <div
+        v-else-if="currentLicense"
+        data-description="license selector"
+        :data-license="currentLicense"
+        class="license-selector-edit">
+        <License :license-id="currentLicense">
+            <template v-slot:inline-buttons>
+                <BButton
+                    v-b-tooltip.hover
+                    class="inline-icon-button"
+                    variant="link"
+                    size="sm"
+                    title="Edit License"
+                    @click="editLicense = true">
+                    <FontAwesomeIcon :icon="faEdit" data-description="edit license link" fixed-width />
+                </BButton>
             </template>
         </License>
     </div>
     <div v-else data-description="license selector" data-license="null">
-        <i
-            ><a href="#" data-description="edit license link" @click.prevent="editLicense = true"
-                >Specify a license for this workflow.</a
-            ></i
-        >
+        <i>
+            <a href="#" data-description="edit license link" @click.prevent="editLicense = true">
+                Specify a license for this workflow.
+            </a>
+        </i>
     </div>
 </template>
 
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEdit, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import LoadingSpan from "components/LoadingSpan";
-import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
-
-import License from "./License";
-
-library.add(faSave);
-library.add(faTimes);
-library.add(faEdit);
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: { License, LoadingSpan, FontAwesomeIcon },
-    props: {
-        inputLicense: {
-            type: String,
-        },
-    },
-    data() {
-        return {
-            license: this.inputLicense || null,
-            licensesLoading: false,
-            licenses: [],
-            editLicense: false,
-        };
-    },
-    computed: {
-        currentLicenseInfo() {
-            for (const license of this.licenses) {
-                if (license.licenseId == this.license) {
-                    return license;
-                }
-            }
-            return null;
-        },
-        licenseOptions() {
-            const options = [];
-            options.push({
-                value: null,
-                text: "*Do not specify a license.*",
-            });
-            for (const license of this.licenses) {
-                if (license.licenseId == this.license || license.recommended) {
-                    options.push({
-                        value: license.licenseId,
-                        text: license.name,
-                    });
-                }
-            }
-            return options;
-        },
-    },
-    watch: {
-        inputLicense() {
-            this.license = this.inputLicense;
-        },
-    },
-    mounted() {
-        const url = `${getAppRoot()}api/licenses`;
-        axios
-            .get(url)
-            .then((response) => response.data)
-            .then((data) => {
-                this.licenses = data;
-                this.licensesLoading = false;
-            })
-            .catch((e) => {
-                console.error(e);
-            });
-    },
-    methods: {
-        onSave() {
-            this.onLicense(this.license);
-            this.disableEdit();
-        },
-        disableEdit() {
-            this.editLicense = false;
-        },
-        onLicense(license) {
-            this.$emit("onLicense", license);
-        },
-    },
-};
-</script>
+<style scoped lang="scss">
+.license-selector {
+    display: grid;
+    gap: 0.5em;
+}
+</style>

From 46082181a0e48b4b067c1fd5584aafc518cc5c48 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 4 Oct 2024 15:17:29 +0200
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20make=20edit=20and?=
 =?UTF-8?q?=20cancel=20buttons=20in=20`CreatorEditor`=20accessible=20via?=
 =?UTF-8?q?=20keyboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SchemaOrg/CreatorEditor.vue    | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/src/components/SchemaOrg/CreatorEditor.vue b/client/src/components/SchemaOrg/CreatorEditor.vue
index 1310a1a2dfac..7a5c6882fc95 100644
--- a/client/src/components/SchemaOrg/CreatorEditor.vue
+++ b/client/src/components/SchemaOrg/CreatorEditor.vue
@@ -10,12 +10,24 @@
             <div v-for="(creator, index) in creatorsCurrent" :key="index">
                 <CreatorViewer :creator="creator">
                     <template v-slot:buttons>
-                        <span v-b-tooltip.hover title="Edit Creator"
-                            ><FontAwesomeIcon icon="edit" @click="onEdit(index)"
-                        /></span>
-                        <span v-b-tooltip.hover title="Remove Creator">
-                            <FontAwesomeIcon icon="times" @click="onRemove(index)" />
-                        </span>
+                        <BButton
+                            v-b-tooltip.hover
+                            class="inline-icon-button"
+                            variant="link"
+                            size="sm"
+                            title="Edit Creator"
+                            @click="onEdit(index)">
+                            <FontAwesomeIcon icon="edit" />
+                        </BButton>
+                        <BButton
+                            v-b-tooltip.hover
+                            class="inline-icon-button"
+                            variant="link"
+                            size="sm"
+                            title="Remove Creator"
+                            @click="onRemove(index)">
+                            <FontAwesomeIcon icon="times" />
+                        </BButton>
                     </template>
                 </CreatorViewer>
             </div>

From 2afaf994514be288187126fe05f34a0e06d47af1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 9 Oct 2024 14:21:18 +0200
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20replace=20unnecess?=
 =?UTF-8?q?ary=20`onMounted`=20in=20`LicenseSelector`=20with=20an=20async?=
 =?UTF-8?q?=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/License/LicenseSelector.vue    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index 45386b3764db..53f5fef6d7a3 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -2,7 +2,7 @@
 import { faEdit, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BFormSelect } from "bootstrap-vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
 import { type components } from "@/api/schema";
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 }>();
 
 const editLicense = ref(false);
-const licensesLoading = ref(false);
+const licensesLoading = ref(true);
 const errorMessage = ref<string>("");
 const currentLicense = ref<string>(props.inputLicense);
 const licenses = ref<LicenseMetadataModel[] | undefined>([]);
@@ -72,16 +72,7 @@ function onLicense(l: string) {
     emit("onLicense", l);
 }
 
-watch(
-    () => props.inputLicense,
-    (newLicense) => {
-        currentLicense.value = newLicense;
-    }
-);
-
-onMounted(async () => {
-    licensesLoading.value = true;
-
+async function fetchLicenses() {
     const { error, data } = await GalaxyApi().GET("/api/licenses");
 
     if (error) {
@@ -91,7 +82,16 @@ onMounted(async () => {
     licenses.value = data;
 
     licensesLoading.value = false;
-});
+}
+
+watch(
+    () => props.inputLicense,
+    (newLicense) => {
+        currentLicense.value = newLicense;
+    }
+);
+
+fetchLicenses();
 </script>
 
 <template>

From d2ee04ebaf75c1673db9ae64fb87a6e9dbec19b0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 11 Oct 2024 16:46:22 +0200
Subject: [PATCH 4/6] Redesign license selection using `vue-multiselect` for
 improved usability

Updated the `LicenseSelector` component to enhance user experience by replace a `Multiselect` form `vue-multiselect` dropdown and simplifying the license handling steps and logic.
---
 .../components/License/LicenseSelector.vue    | 148 ++++++------------
 1 file changed, 49 insertions(+), 99 deletions(-)

diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index 53f5fef6d7a3..5e7384160c6d 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
-import { faEdit, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormSelect } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
+import Multiselect from "vue-multiselect";
 
 import { GalaxyApi } from "@/api";
 import { type components } from "@/api/schema";
 import { errorMessageAsString } from "@/utils/simple-error";
 
-import License from "./License.vue";
+import License from "@/components/License/License.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+const defaultLicense: LicenseType = {
+    licenseId: null,
+    name: "*Do not specify a license.*",
+};
+
 type LicenseMetadataModel = components["schemas"]["LicenseMetadataModel"];
+type LicenseType = {
+    licenseId: string | null;
+    name: string;
+};
 
 interface Props {
     inputLicense: string;
@@ -20,37 +28,24 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "onLicense", license: string): void;
+    (e: "onLicense", license: string | null): void;
 }>();
 
-const editLicense = ref(false);
 const licensesLoading = ref(true);
 const errorMessage = ref<string>("");
-const currentLicense = ref<string>(props.inputLicense);
+const currentLicense = ref<LicenseType>();
 const licenses = ref<LicenseMetadataModel[] | undefined>([]);
 
-const currentLicenseInfo = computed(() => {
-    for (const l of licenses.value || []) {
-        if (l.licenseId == currentLicense.value) {
-            return l;
-        }
-    }
-
-    return null;
-});
 const licenseOptions = computed(() => {
-    const options = [];
+    const options: LicenseType[] = [];
 
-    options.push({
-        value: null,
-        text: "*Do not specify a license.*",
-    });
+    options.push(defaultLicense);
 
-    for (const l of licenses.value || []) {
-        if (l.licenseId == currentLicense.value || l.recommended) {
+    for (const license of licenses.value || []) {
+        if (license.licenseId == currentLicense.value?.licenseId || license.recommended) {
             options.push({
-                value: l.licenseId,
-                text: l.name,
+                licenseId: license.licenseId,
+                name: license.name,
             });
         }
     }
@@ -58,18 +53,8 @@ const licenseOptions = computed(() => {
     return options;
 });
 
-function onSave() {
-    onLicense(currentLicense.value);
-    disableEdit();
-}
-
-function disableEdit() {
-    editLicense.value = false;
-    errorMessage.value = "";
-}
-
-function onLicense(l: string) {
-    emit("onLicense", l);
+function onLicense(license: LicenseType) {
+    emit("onLicense", license.licenseId);
 }
 
 async function fetchLicenses() {
@@ -84,78 +69,43 @@ async function fetchLicenses() {
     licensesLoading.value = false;
 }
 
+async function setCurrentLicense() {
+    if (!licenses.value?.length) {
+        await fetchLicenses();
+    }
+
+    const inputLicense = props.inputLicense;
+
+    currentLicense.value = (licenses.value || []).find((l) => l.licenseId == inputLicense) || defaultLicense;
+}
+
 watch(
     () => props.inputLicense,
-    (newLicense) => {
-        currentLicense.value = newLicense;
+    () => {
+        setCurrentLicense();
     }
 );
 
-fetchLicenses();
+setCurrentLicense();
 </script>
 
 <template>
-    <div v-if="editLicense" class="license-selector">
-        <LoadingSpan v-if="licensesLoading" message="Loading licenses" />
+    <div>
+        <BAlert v-if="licensesLoading" variant="info" class="m-0" show>
+            <LoadingSpan message="Loading licenses" />
+        </BAlert>
         <BAlert v-else-if="errorMessage" variant="danger" class="m-0" show>
             {{ errorMessage }}
         </BAlert>
-        <BFormSelect v-else v-model="currentLicense" data-description="license select" :options="licenseOptions" />
-
-        <License v-if="currentLicenseInfo" :license-id="currentLicense" :input-license-info="currentLicenseInfo">
-            <template v-slot:buttons>
-                <BButton v-b-tooltip.hover variant="outline-danger" title="Cancel Edit" @click="disableEdit">
-                    <FontAwesomeIcon :icon="faTimes" data-description="license cancel" />
-                    Cancel
-                </BButton>
-                <BButton v-b-tooltip.hover variant="primary" title="Save License" @click="onSave">
-                    <FontAwesomeIcon :icon="faSave" data-description="license save" />
-                    Save License
-                </BButton>
-            </template>
-        </License>
-        <div v-else>
-            <BButton variant="outline-danger" @click="editLicense = false">
-                <FontAwesomeIcon :icon="faTimes" data-description="license cancel" />
-                Cancel
-            </BButton>
-            <BButton variant="primary" @click="onSave">
-                <FontAwesomeIcon :icon="faSave" data-description="license save" />
-                Save without license
-            </BButton>
-        </div>
-    </div>
-    <div
-        v-else-if="currentLicense"
-        data-description="license selector"
-        :data-license="currentLicense"
-        class="license-selector-edit">
-        <License :license-id="currentLicense">
-            <template v-slot:inline-buttons>
-                <BButton
-                    v-b-tooltip.hover
-                    class="inline-icon-button"
-                    variant="link"
-                    size="sm"
-                    title="Edit License"
-                    @click="editLicense = true">
-                    <FontAwesomeIcon :icon="faEdit" data-description="edit license link" fixed-width />
-                </BButton>
-            </template>
-        </License>
-    </div>
-    <div v-else data-description="license selector" data-license="null">
-        <i>
-            <a href="#" data-description="edit license link" @click.prevent="editLicense = true">
-                Specify a license for this workflow.
-            </a>
-        </i>
+        <Multiselect
+            v-else
+            v-model="currentLicense"
+            data-description="license select"
+            track-by="licenseId"
+            :options="licenseOptions"
+            label="name"
+            placeholder="Select a license"
+            @select="onLicense" />
+        <License v-if="currentLicense?.licenseId" :license-id="currentLicense.licenseId" />
     </div>
 </template>
-
-<style scoped lang="scss">
-.license-selector {
-    display: grid;
-    gap: 0.5em;
-}
-</style>

From 8bb73a3aadc8fc7ef3b8c7f86f51b5e1056e7bdf Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Sun, 17 Nov 2024 23:55:35 +0100
Subject: [PATCH 5/6] Updates workflow editor license selection

Refactors license selection logic in the workflow editor
Simplifies selectors and improves interaction handling
Enhances test assertions for license value verification
---
 client/src/utils/navigation/navigation.yml       | 13 ++++---------
 lib/galaxy/selenium/navigates_galaxy.py          | 11 ++++++-----
 lib/galaxy_test/selenium/test_workflow_editor.py |  5 ++---
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index e69d4072f86a..ebe847ba7639 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -747,15 +747,10 @@ workflow_editor:
     canvas_body: '#workflow-canvas'
     edit_annotation: '#workflow-annotation'
     edit_name: '#workflow-name'
-    license_selector:
-      selector: 'license selector'
-      type: data-description
-    edit_license_link:
-      selector: 'edit license link'
-      type: data-description
-    license_select:
-      selector: 'license select'
-      type: data-description
+    license_selector: '[data-description="license select"]'
+    license_current_value: '[data-description="license select"] .multiselect__single'
+    license_selector_input: '[data-description="license select"] input.multiselect__input'
+    license_selector_option: '[data-description="license select"] .multiselect__element'
     license_save:
       selector: 'license save'
       type: data-description
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 555b12ea002c..3928e60b1483 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1204,11 +1204,12 @@ def rule_builder_enter_source_text(self, json):
         text_area_elem.send_keys(json)
 
     def workflow_editor_set_license(self, license: str) -> None:
-        editor = self.components.workflow_editor
-        editor.edit_license_link.wait_for_and_click()
-        select = editor.license_select.wait_for_select()
-        select.select_by_value(license)
-        editor.license_save.wait_for_and_click()
+        license_selector = self.components.workflow_editor.license_selector
+        license_selector.wait_for_and_click()
+        license_selector.wait_for_and_send_keys(license)
+
+        license_selector_option = self.components.workflow_editor.license_selector_option
+        license_selector_option.wait_for_and_click()
 
     def workflow_editor_click_option(self, option_label):
         self.workflow_editor_click_options()
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 114e5101fcba..af8ba29fbc53 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -100,15 +100,14 @@ def test_edit_license(self):
         name = self.workflow_create_new()
         editor.canvas_body.wait_for_visible()
         editor.license_selector.wait_for_visible()
-        editor.license_selector.assert_no_axe_violations_with_impact_of_at_least("serious")
-        editor.license_selector.assert_data_value("license", "null")
+        assert "Do not specify" in editor.license_current_value.wait_for_text()
 
         self.workflow_editor_set_license("MIT")
         self.workflow_editor_click_save()
 
         self.workflow_index_open_with_name(name)
         editor.license_selector.wait_for_visible()
-        editor.license_selector.assert_data_value("license", "MIT")
+        assert "MIT" in editor.license_current_value.wait_for_text()
 
     @selenium_test
     def test_optional_select_data_field(self):

From 37b4fa459e24ba00f952b3bb3ddb62b6bd0aa7f1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 18 Nov 2024 00:00:39 +0100
Subject: [PATCH 6/6] Fix license loading logic and improve reactivity

Changes initial licensesLoading state to false
Uses watchImmediate for immediate reactivity on inputLicense
Ensures licenses are fetched only when not already loading
---
 client/src/components/License/LicenseSelector.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index 5e7384160c6d..a9f55d621e1c 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { watchImmediate } from "@vueuse/core";
 import { BAlert } from "bootstrap-vue";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { GalaxyApi } from "@/api";
@@ -31,7 +32,7 @@ const emit = defineEmits<{
     (e: "onLicense", license: string | null): void;
 }>();
 
-const licensesLoading = ref(true);
+const licensesLoading = ref(false);
 const errorMessage = ref<string>("");
 const currentLicense = ref<LicenseType>();
 const licenses = ref<LicenseMetadataModel[] | undefined>([]);
@@ -70,7 +71,9 @@ async function fetchLicenses() {
 }
 
 async function setCurrentLicense() {
-    if (!licenses.value?.length) {
+    if (!licenses.value?.length && !licensesLoading.value) {
+        licensesLoading.value = true;
+
         await fetchLicenses();
     }
 
@@ -79,14 +82,12 @@ async function setCurrentLicense() {
     currentLicense.value = (licenses.value || []).find((l) => l.licenseId == inputLicense) || defaultLicense;
 }
 
-watch(
+watchImmediate(
     () => props.inputLicense,
     () => {
         setCurrentLicense();
     }
 );
-
-setCurrentLicense();
 </script>
 
 <template>