Enforce unique ids for multiselect fields, fix naming and tests

guerler · guerler · commit f1d2bbad9ec0 · 2023-08-12T08:53:14.000+02:00
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
@@ -3,6 +3,7 @@ import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
+import { uid } from "@/utils/utils";
 
 type SelectValue = string | number | null;
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
@@ -14,12 +15,14 @@ interface SelectOption {
 
 const props = withDefaults(
     defineProps<{
+        id?: string;
         multiple?: boolean;
         optional?: boolean;
         options: Array<[string, SelectValue]>;
         value?: Array<SelectValue> | string | number;
     }>(),
     {
+        id: `form-select-${uid()}`,
         multiple: false,
         optional: false,
         value: null,
@@ -143,6 +146,7 @@ onMounted(() => {
 <template>
     <Multiselect
         v-if="hasOptions"
+        :id="id"
         v-model="currentValue"
         :allow-empty="true"
         :class="['form-select', cls]"
diff --git a/client/src/components/Upload/CompositeBox.vue b/client/src/components/Upload/CompositeBox.vue
@@ -8,7 +8,7 @@ import { uploadSubmit } from "@/utils/upload-submit.js";
 import { defaultModel } from "./model.js";
 
 import CompositeRow from "./CompositeRow.vue";
-import UploadSettingsSelect from "./UploadSettingsSelect.vue";
+import UploadSelect from "./UploadSelect.vue";
 
 const props = defineProps({
     defaultDbKey: {
@@ -188,14 +188,14 @@ defineExpose({
         </div>
         <div class="upload-footer">
             <span class="upload-footer-title">Composite Type:</span>
-            <UploadSettingsSelect
+            <UploadSelect
                 class="upload-footer-extension"
                 :value="null"
                 :options="listExtensions"
                 :disabled="isRunning"
                 @input="inputExtension" />
             <span class="upload-footer-title">Reference:</span>
-            <UploadSettingsSelect :value="dbKey" :options="listDbKeys" :disabled="isRunning" @input="inputDbkey" />
+            <UploadSelect :value="dbKey" :options="listDbKeys" :disabled="isRunning" @input="inputDbkey" />
         </div>
         <div class="upload-buttons d-flex justify-content-end">
             <BButton
diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
@@ -14,8 +14,8 @@ import { COLLECTION_TYPES, DEFAULT_FILE_NAME, hasBrowserSupport } from "./utils"
 
 import DefaultRow from "./DefaultRow.vue";
 import UploadBox from "./UploadBox.vue";
-import UploadExtensionDetails from "./UploadExtensionDetails.vue";
-import UploadSettingsSelect from "./UploadSettingsSelect.vue";
+import UploadExtension from "./UploadExtension.vue";
+import UploadSelect from "./UploadSelect.vue";
 
 library.add(faCopy, faEdit, faFolderOpen, faLaptop);
 
@@ -382,7 +382,7 @@ defineExpose({
         </UploadBox>
         <div class="upload-footer text-center">
             <span v-if="isCollection" class="upload-footer-title">Collection:</span>
-            <UploadSettingsSelect
+            <UploadSelect
                 v-if="isCollection"
                 class="upload-footer-collection-type"
                 :value="collectionType"
@@ -391,16 +391,16 @@ defineExpose({
                 placeholder="Select Type"
                 @input="updateCollectionType" />
             <span class="upload-footer-title">Type (set all):</span>
-            <UploadSettingsSelect
+            <UploadSelect
                 class="upload-footer-extension"
                 :value="extension"
                 :disabled="isRunning"
                 :options="listExtensions"
                 placeholder="Select Type"
                 @input="updateExtension" />
-            <UploadExtensionDetails :extension="extension" :list-extensions="listExtensions" />
+            <UploadExtension :extension="extension" :list-extensions="listExtensions" />
             <span class="upload-footer-title">Reference (set all):</span>
-            <UploadSettingsSelect
+            <UploadSelect
                 class="upload-footer-genome"
                 :value="dbKey"
                 :disabled="isRunning"
diff --git a/client/src/components/Upload/DefaultRow.vue b/client/src/components/Upload/DefaultRow.vue
@@ -5,9 +5,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { bytesToString } from "utils/utils";
 import { computed } from "vue";
 
-import UploadExtensionDetails from "./UploadExtensionDetails.vue";
+import UploadExtension from "./UploadExtension.vue";
 import UploadSettings from "./UploadSettings.vue";
-import UploadSettingsSelect from "./UploadSettingsSelect.vue";
+import UploadSelect from "./UploadSelect.vue";
 
 library.add(faEdit, faLaptop, faFolderOpen);
 
@@ -122,19 +122,16 @@ function removeUpload() {
             <div class="upload-size">
                 {{ bytesToString(fileSize) }}
             </div>
-            <UploadSettingsSelect
+            <UploadSelect
                 v-if="listExtensions !== null"
                 class="upload-extension"
                 :value="extension"
                 :disabled="isDisabled"
                 :options="listExtensions"
                 placeholder="Select Type"
                 @input="inputExtension" />
-            <UploadExtensionDetails
-                v-if="listExtensions !== null"
-                :extension="extension"
-                :list-extensions="listExtensions" />
-            <UploadSettingsSelect
+            <UploadExtension v-if="listExtensions !== null" :extension="extension" :list-extensions="listExtensions" />
+            <UploadSelect
                 v-if="listDbKeys !== null"
                 class="upload-genome"
                 :value="dbKey"
diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
@@ -11,7 +11,7 @@ import { computed, ref } from "vue";
 
 import { RULES_TYPES } from "./utils.js";
 
-import UploadSettingsSelect from "./UploadSettingsSelect.vue";
+import UploadSelect from "./UploadSelect.vue";
 
 library.add(faEdit, faFile, faFolderOpen, faLock);
 
@@ -132,7 +132,7 @@ function inputRemote() {
         <FontAwesomeIcon v-if="isDisabled" class="upload-text-lock" icon="fa-lock" />
         <div class="upload-footer text-center">
             <span class="upload-footer-title">Upload type:</span>
-            <UploadSettingsSelect v-model="dataType" class="rule-data-type" :options="RULES_TYPES" />
+            <UploadSelect v-model="dataType" class="rule-data-type" :options="RULES_TYPES" />
         </div>
         <div class="upload-buttons d-flex justify-content-end">
             <BButton @click="inputPaste">
diff --git a/client/src/components/Upload/UploadContainer.vue b/client/src/components/Upload/UploadContainer.vue
diff --git a/client/src/components/Upload/UploadExtension.vue b/client/src/components/Upload/UploadExtension.vue
diff --git a/client/src/components/Upload/UploadModal.test.js b/client/src/components/Upload/UploadModal.test.js
@@ -7,7 +7,7 @@ import { useUserStore } from "stores/userStore";
 import { getLocalVue } from "tests/jest/helpers";
 
 import { getDatatypes, getDbKeys } from "./services";
-import UploadModalContent from "./UploadModalContent";
+import UploadContainer from "./UploadContainer.vue";
 
 import UploadModal from "./UploadModal.vue";
 
@@ -86,21 +86,21 @@ describe("UploadModal.vue", () => {
     });
 
     it("should load with correct defaults", async () => {
-        const contentWrapper = wrapper.findComponent(UploadModalContent);
+        const contentWrapper = wrapper.findComponent(UploadContainer);
         expect(contentWrapper.vm.auto.id).toBe("auto");
         expect(contentWrapper.vm.datatypesDisableAuto).toBe(false);
     });
 
     it("should fetch datatypes and parse them", async () => {
-        const contentWrapper = wrapper.findComponent(UploadModalContent);
+        const contentWrapper = wrapper.findComponent(UploadContainer);
         expect(contentWrapper.exists()).toBe(true);
         expect(contentWrapper.vm.listExtensions.length).toBe(2);
         expect(contentWrapper.vm.listExtensions[0].id).toBe("auto");
         expect(contentWrapper.vm.listExtensions[1].id).toBe("fasta");
     });
 
     it("should fetch genomes and parse them", async () => {
-        const contentWrapper = wrapper.findComponent(UploadModalContent);
+        const contentWrapper = wrapper.findComponent(UploadContainer);
         expect(contentWrapper.vm.listDbKeys.length).toBe(3);
     });
 });
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
@@ -7,7 +7,7 @@ import { ref, watch } from "vue";
 import { useUserStore } from "@/stores/userStore";
 import { wait } from "@/utils/utils";
 
-import UploadModalContent from "./UploadModalContent";
+import UploadContainer from "./UploadContainer.vue";
 
 const { currentUser } = storeToRefs(useUserStore());
 const { currentHistoryId } = useUserHistories(currentUser);
@@ -89,7 +89,7 @@ defineExpose({
         <template v-slot:modal-header>
             <h2 class="title h-sm" tabindex="0">{{ options.title }}</h2>
         </template>
-        <UploadModalContent
+        <UploadContainer
             v-if="currentHistoryId"
             ref="content"
             :key="showModal"
diff --git a/client/src/components/Upload/UploadOption.vue b/client/src/components/Upload/UploadOption.vue
diff --git a/client/src/components/Upload/UploadSelect.vue b/client/src/components/Upload/UploadSelect.vue
@@ -2,11 +2,29 @@
 import { computed } from "vue";
 import Multiselect from "vue-multiselect";
 
+import { uid } from "@/utils/utils";
+
 const props = defineProps({
-    disabled: Boolean,
-    options: Array,
-    placeholder: String,
-    value: String,
+    id: {
+        type: String,
+        default: `upload-settings-select-${uid()}`,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    value: {
+        type: String,
+        default: null,
+    },
 });
 
 const emit = defineEmits(["input"]);
@@ -21,6 +39,7 @@ const currentValue = computed({
 
 <template>
     <Multiselect
+        :id="id"
         v-model="currentValue"
         class="upload-settings-select rounded"
         deselect-label=""
diff --git a/client/src/components/Upload/UploadSettings.vue b/client/src/components/Upload/UploadSettings.vue
@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-import UploadSettingsOption from "./UploadSettingsOption.vue";
+import UploadOption from "./UploadOption.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
 library.add(faCog);
@@ -38,17 +38,17 @@ const emit = defineEmits(["input"]);
         <div class="upload-settings-content px-2 py-2 no-highlight">
             <table class="upload-settings-table grid">
                 <tbody>
-                    <UploadSettingsOption
+                    <UploadOption
                         class="upload-space-to-tab"
                         title="Convert spaces to tabs"
                         :value="spaceToTab"
                         @click="emit('input', 'spaceToTab')" />
-                    <UploadSettingsOption
+                    <UploadOption
                         class="upload-to-posix-lines"
                         title="Use POSIX standard"
                         :value="toPosixLines"
                         @click="emit('input', 'toPosixLines')" />
-                    <UploadSettingsOption
+                    <UploadOption
                         v-if="deferred !== null"
                         class="upload-deferred"
                         title="Defer dataset resolution"
diff --git a/lib/galaxy_test/selenium/test_library_contents.py b/lib/galaxy_test/selenium/test_library_contents.py
@@ -105,9 +105,7 @@ def download_dataset_from_library(self):
     def test_delete_dataset(self):
         self.test_import_dataset_from_history()
 
-        self.sleep_for(self.wait_types.UX_RENDER)
-        # assert "you must select at least one" modal
-        assert self.components.libraries.folder.toast_msg.is_displayed
+        self.components.libraries.folder.toast_msg.wait_for_visible()
 
         self.components.libraries.folder.delete_btn.wait_for_and_click()
 
