Merge pull request galaxyproject#16578 from guerler/form_data

Vueify Tool Form Data Selector
bgruening · Sep 18, 2023 · 0daa4aa · 0daa4aa
2 parents c631c62 + 491dcd5
commit 0daa4aa
Show file tree

Hide file tree

Showing 33 changed files with 1,202 additions and 1,101 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.test.js b/client/src/components/ActivityBar/ActivityBar.test.js
@@ -1,7 +1,7 @@
 import { createTestingPinia } from "@pinia/testing";
 import { shallowMount } from "@vue/test-utils";
 import { PiniaVuePlugin } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { dispatchEvent, getLocalVue } from "tests/jest/helpers";
 
 import { useConfig } from "@/composables/config";
 import { useActivityStore } from "@/stores/activityStore";
@@ -37,12 +37,6 @@ function testActivity(id, newOptions = {}) {
     return { ...defaultOptions, ...newOptions };
 }
 
-const createBubbledEvent = (type, props = {}) => {
-    const event = new Event(type, { bubbles: true });
-    Object.assign(event, props);
-    return event;
-};
-
 describe("ActivityBar", () => {
     let activityStore;
     let eventStore;
@@ -74,7 +68,7 @@ describe("ActivityBar", () => {
             name: "workflow-name",
         });
         const bar = wrapper.find("[data-description='activity bar']");
-        bar.element.dispatchEvent(createBubbledEvent("dragenter", { clientX: 0, clientY: 0 }));
+        dispatchEvent(bar, "dragenter");
         const emittedEvent = wrapper.emitted()["dragstart"][0][0];
         expect(emittedEvent.to).toBe("/workflows/run?id=workflow-id");
     });

diff --git a/client/src/components/Form/Elements/FormCheck.test.js b/client/src/components/Form/Elements/FormCheck.test.js
@@ -24,7 +24,7 @@ describe("FormCheck", () => {
         const n = 3;
         const options = [];
         for (let i = 0; i < n; i++) {
-            options.push([`label_${i}`, `value_${i}`]);
+            options.push({ label: `label_${i}`, value: `value_${i}` });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='checkbox']");
@@ -52,7 +52,7 @@ describe("FormCheck", () => {
         const emptyValues = [0, null, false, true, undefined];
         const options = [];
         for (let i = 0; i < emptyValues.length; i++) {
-            options.push([`label_${i}`, emptyValues[i]]);
+            options.push({ label: `label_${i}`, value: emptyValues[i] });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='checkbox']");
@@ -70,7 +70,7 @@ describe("FormCheck", () => {
         const n = 3;
         const options = [];
         for (let i = 0; i < n; i++) {
-            options.push([`label_${i}`, `value_${i}`]);
+            options.push({ label: `label_${i}`, value: `value_${i}` });
         }
         await wrapper.setProps({ options });
         const inputs = wrapper.findAll("[type='checkbox']");
@@ -84,7 +84,7 @@ describe("FormCheck", () => {
         await inputs.at(0).setChecked();
         expect(inputs.at(0).element.checked).toBeTruthy();
         /* ...confirm corresponding options checked */
-        const values = options.map((option) => option[1]);
+        const values = options.map((option) => option.value);
         expect(wrapper.emitted()["input"][0][0]).toStrictEqual(values);
         /* 2 - confirm select-all option UNchecked */
         await inputs.at(0).setChecked(false);

diff --git a/client/src/components/Form/Elements/FormCheck.vue b/client/src/components/Form/Elements/FormCheck.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+interface CheckOption {
+    label: string;
+    value: string;
+}
+
 export interface FormCheckProps {
     value?: string | string[];
-    options: Array<[string, string]>;
+    options: Array<CheckOption>;
 }
 
 const props = defineProps<FormCheckProps>();
@@ -32,7 +37,7 @@ const selectAll = computed(() => currentValue.value.length === props.options.len
 
 function onSelectAll(selected: boolean): void {
     if (selected) {
-        const allValues = props.options.map((option) => option[1]);
+        const allValues = props.options.map((option) => option.value);
         emit("input", allValues);
     } else {
         emit("input", null);
@@ -51,8 +56,8 @@ function onSelectAll(selected: boolean): void {
             Select / Deselect all
         </b-form-checkbox>
         <b-form-checkbox-group v-model="currentValue" stacked class="pl-3">
-            <b-form-checkbox v-for="(option, index) in options" :key="index" :value="option[1]">
-                {{ option[0] }}
+            <b-form-checkbox v-for="(option, index) in options" :key="index" :value="option.value">
+                {{ option.label }}
             </b-form-checkbox>
         </b-form-checkbox-group>
     </div>