From 2d59483893ea2321afdd0bc6392d56deb34626ab Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:07:21 +0200
Subject: [PATCH 01/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Hidden`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormHidden.vue   | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Form/Elements/FormHidden.vue b/client/src/components/Form/Elements/FormHidden.vue
index fb4d9879a5bf..2f6efc98d34a 100644
--- a/client/src/components/Form/Elements/FormHidden.vue
+++ b/client/src/components/Form/Elements/FormHidden.vue
@@ -1,19 +1,13 @@
+<script setup lang="ts">
+interface Props {
+    info?: string;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
     <div>
         {{ info }}
     </div>
 </template>
-
-<script>
-export default {
-    props: {
-        value: {
-            required: true,
-        },
-        info: {
-            type: String,
-            default: null,
-        },
-    },
-};
-</script>

From dd3234472da4759e467014a98c751e42ae816441 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:08:03 +0200
Subject: [PATCH 02/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Hidden`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormHidden.test.js          | 27 -------------------
 .../Form/Elements/FormHidden.test.ts          | 23 ++++++++++++++++
 2 files changed, 23 insertions(+), 27 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormHidden.test.js
 create mode 100644 client/src/components/Form/Elements/FormHidden.test.ts

diff --git a/client/src/components/Form/Elements/FormHidden.test.js b/client/src/components/Form/Elements/FormHidden.test.js
deleted file mode 100644
index 93e5b1402614..000000000000
--- a/client/src/components/Form/Elements/FormHidden.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import FormHidden from "./FormHidden";
-
-const localVue = getLocalVue();
-
-describe("FormHidden", () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(FormHidden, {
-            propsData: {
-                value: false,
-                info: "info",
-            },
-            localVue,
-        });
-    });
-
-    it("check initial value and value change", async () => {
-        expect(wrapper.vm.value).toBe(false);
-        await wrapper.setProps({ value: true });
-        expect(wrapper.vm.value).toBe(true);
-        expect(wrapper.text()).toBe("info");
-    });
-});
diff --git a/client/src/components/Form/Elements/FormHidden.test.ts b/client/src/components/Form/Elements/FormHidden.test.ts
new file mode 100644
index 000000000000..8b95dc3d173a
--- /dev/null
+++ b/client/src/components/Form/Elements/FormHidden.test.ts
@@ -0,0 +1,23 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
+
+import FormHidden from "./FormHidden.vue";
+
+const localVue = getLocalVue();
+
+describe("FormHidden", () => {
+    let wrapper: Wrapper<Vue>;
+
+    beforeEach(() => {
+        wrapper = mount(FormHidden as object, {
+            propsData: {
+                info: "info",
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        expect(wrapper.text()).toBe("info");
+    });
+});

From 4788781cad98e13b8cec11c98dffe7a0ed0e15c1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:08:33 +0200
Subject: [PATCH 03/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Input`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormInput.vue    | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Form/Elements/FormInput.vue b/client/src/components/Form/Elements/FormInput.vue
index d6d3d54bd056..7b95af35fe3e 100644
--- a/client/src/components/Form/Elements/FormInput.vue
+++ b/client/src/components/Form/Elements/FormInput.vue
@@ -1,32 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+    id: string;
+    value?: string;
+    area?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "input", value: string | undefined): void;
+}>();
+
+const currentValue = computed({
+    get() {
+        return props.value;
+    },
+    set(val) {
+        emit("input", val);
+    },
+});
+</script>
+
 <template>
     <textarea v-if="area" :id="id" v-model="currentValue" class="ui-textarea" />
+
     <input v-else :id="id" v-model="currentValue" class="ui-input" />
 </template>
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        value: {
-            type: String,
-            default: "",
-        },
-        area: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    computed: {
-        currentValue: {
-            get() {
-                return this.value;
-            },
-            set(val) {
-                this.$emit("input", val);
-            },
-        },
-    },
-};
-</script>

From 5ece53cceff74b8fbb5f1d70f0d0763bde9111f5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:09:23 +0200
Subject: [PATCH 04/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Input`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormInput.test.js           | 37 ----------------
 .../Form/Elements/FormInput.test.ts           | 42 +++++++++++++++++++
 2 files changed, 42 insertions(+), 37 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormInput.test.js
 create mode 100644 client/src/components/Form/Elements/FormInput.test.ts

diff --git a/client/src/components/Form/Elements/FormInput.test.js b/client/src/components/Form/Elements/FormInput.test.js
deleted file mode 100644
index 7b009edcf58e..000000000000
--- a/client/src/components/Form/Elements/FormInput.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import FormInput from "./FormInput";
-
-const localVue = getLocalVue();
-
-describe("FormInput", () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(FormInput, {
-            propsData: {
-                id: "input",
-                value: "initial_value",
-            },
-            localVue,
-        });
-    });
-
-    it("check initial value and value change", async () => {
-        const input = wrapper.find("input");
-        expect(input.element.value).toBe("initial_value");
-        await input.setValue("new_value");
-        expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().input[0][0]).toBe("new_value");
-    });
-
-    it("check switching to text area", async () => {
-        await wrapper.setProps({ area: true });
-        const input = wrapper.find("textarea");
-        expect(input.element.value).toBe("initial_value");
-        await input.setValue("new_value");
-        expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().input[0][0]).toBe("new_value");
-    });
-});
diff --git a/client/src/components/Form/Elements/FormInput.test.ts b/client/src/components/Form/Elements/FormInput.test.ts
new file mode 100644
index 000000000000..2c2958d9f85f
--- /dev/null
+++ b/client/src/components/Form/Elements/FormInput.test.ts
@@ -0,0 +1,42 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
+
+import FormInput from "./FormInput.vue";
+
+const localVue = getLocalVue();
+
+describe("FormInput", () => {
+    let wrapper: Wrapper<Vue>;
+
+    beforeEach(() => {
+        wrapper = mount(FormInput as object, {
+            propsData: {
+                id: "input",
+                value: "initial_value",
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        const input = wrapper.find("input");
+        expect((input.element as HTMLInputElement).value).toBe("initial_value");
+
+        await input.setValue("new_value");
+
+        expect((input.element as HTMLInputElement).value).toBe("new_value");
+        expect(wrapper.emitted().input?.[0]?.[0]).toBe("new_value");
+    });
+
+    it("check switching to text area", async () => {
+        await wrapper.setProps({ area: true });
+
+        const input = wrapper.find("textarea");
+        expect((input.element as HTMLInputElement).value).toBe("initial_value");
+
+        await input.setValue("new_value");
+
+        expect((input.element as HTMLInputElement).value).toBe("new_value");
+        expect(wrapper.emitted().input?.[0]?.[0]).toBe("new_value");
+    });
+});

From 6e7d1fa9359a03961f45ea0a8e2467731ecb6503 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:19:09 +0200
Subject: [PATCH 05/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Radio`=20to=20`typeScript`=20and=20import=20missing=20component?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormRadio.vue    | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Elements/FormRadio.vue b/client/src/components/Form/Elements/FormRadio.vue
index 561870f3e44a..d4cdd5f415b9 100644
--- a/client/src/components/Form/Elements/FormRadio.vue
+++ b/client/src/components/Form/Elements/FormRadio.vue
@@ -1,16 +1,20 @@
-<script setup>
+<script setup lang="ts">
+import { BAlert, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
 import { computed } from "vue";
 
-const emit = defineEmits(["input"]);
-const props = defineProps({
-    value: {
-        default: null,
-    },
+interface Props {
+    value?: string | number;
     options: {
-        type: Array,
-        required: true,
-    },
-});
+        label: string;
+        value: string | number;
+    }[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "input", value: string | number | undefined): void;
+}>();
 
 const currentValue = computed({
     get: () => {
@@ -27,10 +31,10 @@ const hasOptions = computed(() => {
 </script>
 
 <template>
-    <b-form-radio-group v-if="hasOptions" v-model="currentValue" stacked>
-        <b-form-radio v-for="(option, index) in options" :key="index" :value="option.value">
+    <BFormRadioGroup v-if="hasOptions" v-model="currentValue" stacked>
+        <BFormRadio v-for="(option, index) in options" :key="index" :value="option.value">
             {{ option.label }}
-        </b-form-radio>
-    </b-form-radio-group>
-    <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
+        </BFormRadio>
+    </BFormRadioGroup>
+    <BAlert v-else v-localize variant="warning" show> No options available. </BAlert>
 </template>

From fe3b212f87df8523864418329a51c49647f09a91 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:19:46 +0200
Subject: [PATCH 06/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Radio`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{FormRadio.test.js => FormRadio.test.ts}  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)
 rename client/src/components/Form/Elements/{FormRadio.test.js => FormRadio.test.ts} (76%)

diff --git a/client/src/components/Form/Elements/FormRadio.test.js b/client/src/components/Form/Elements/FormRadio.test.ts
similarity index 76%
rename from client/src/components/Form/Elements/FormRadio.test.js
rename to client/src/components/Form/Elements/FormRadio.test.ts
index 9328055ec30e..9dc14802f9bc 100644
--- a/client/src/components/Form/Elements/FormRadio.test.js
+++ b/client/src/components/Form/Elements/FormRadio.test.ts
@@ -1,15 +1,15 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 
-import MountTarget from "./FormRadio";
+import MountTarget from "./FormRadio.vue";
 
 const localVue = getLocalVue(true);
 
 describe("FormRadio", () => {
-    let wrapper;
+    let wrapper: Wrapper<Vue>;
 
     beforeEach(() => {
-        wrapper = mount(MountTarget, {
+        wrapper = mount(MountTarget as object, {
             propsData: {
                 value: false,
                 options: [],
@@ -20,21 +20,30 @@ describe("FormRadio", () => {
 
     it("basics", async () => {
         const noInput = wrapper.find("[type='radio']");
+
         expect(noInput.exists()).toBe(false);
+
         const n = 3;
         const options = [];
+
         for (let i = 0; i < n; i++) {
             options.push({ label: `label_${i}`, value: `value_${i}` });
         }
+
         await wrapper.setProps({ options });
+
         const inputs = wrapper.findAll("[type='radio']");
         const labels = wrapper.findAll(".custom-control-label");
+
         expect(inputs.length).toBe(n);
+
         for (let i = 0; i < n; i++) {
             await inputs.at(i).setChecked();
+
             expect(labels.at(i).text()).toBe(`label_${i}`);
             expect(inputs.at(i).attributes("value")).toBe(`value_${i}`);
-            expect(wrapper.emitted()["input"][i][0]).toBe(`value_${i}`);
+
+            expect(wrapper.emitted()["input"]?.[i]?.[0]).toBe(`value_${i}`);
         }
     });
 });

From 218a136a54c055d9434ab9c02c81a47acb483d0c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 5 Apr 2024 19:20:55 +0200
Subject: [PATCH 07/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?RulesEdit`=20to=20`typeScript`=20and=20import=20missing=20compo?=
 =?UTF-8?q?nents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormRulesEdit.vue           | 61 ++++++++++++-------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Form/Elements/FormRulesEdit.vue b/client/src/components/Form/Elements/FormRulesEdit.vue
index e174743031a1..ecf0b01b0336 100644
--- a/client/src/components/Form/Elements/FormRulesEdit.vue
+++ b/client/src/components/Form/Elements/FormRulesEdit.vue
@@ -1,27 +1,37 @@
-<script setup>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import RuleCollectionBuilder from "components/RuleCollectionBuilder";
-import RulesDisplay from "components/RulesDisplay/RulesDisplay";
+import { BButton, BModal } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
+import { type HDCADetailed } from "@/api";
 import { fetchCollectionDetails } from "@/api/datasetCollections";
 
+import RuleCollectionBuilder from "@/components/RuleCollectionBuilder.vue";
+import RulesDisplay from "@/components/RulesDisplay/RulesDisplay.vue";
+
 library.add(faEdit);
 
-const props = defineProps({
+interface Props {
     value: {
-        type: Object,
-    },
+        rules: any[];
+        mapping: any[];
+    };
     target: {
-        type: Object,
-        default: null,
-    },
-});
+        id: string;
+    };
+}
+
+const props = defineProps<Props>();
 
-const modal = ref(null);
-const elements = ref(null);
+const emit = defineEmits<{
+    // TODO: Define the correct type for the value
+    (e: "input", value: any): void;
+}>();
+
+const modal = ref<BModal>();
+const elements = ref<HDCADetailed>();
 
 const initialRules = {
     rules: [],
@@ -34,41 +44,46 @@ async function onEdit() {
     if (props.target) {
         try {
             const collectionDetails = await fetchCollectionDetails({ id: props.target.id });
+
             elements.value = collectionDetails;
-            modal.value.show();
+
+            modal.value?.show();
         } catch (e) {
             console.error(e);
             console.log("problem fetching collection");
         }
     } else {
-        modal.value.show();
+        modal.value?.show();
     }
 }
 
-const emit = defineEmits(["input"]);
+// TODO: Define the correct type for the rules
+function onSaveRules(rules: any) {
+    modal.value?.hide();
 
-function onSaveRules(rules) {
-    modal.value.hide();
     emit("input", rules);
 }
 
 function onCancel() {
-    modal.value.hide();
+    modal.value?.hide();
 }
 </script>
 
 <template>
     <div class="form-rules-edit">
         <RulesDisplay :input-rules="displayRules" />
-        <b-button title="Edit Rules" @click="onEdit">
-            <FontAwesomeIcon icon="fa-edit" />
+
+        <BButton title="Edit Rules" @click="onEdit">
+            <FontAwesomeIcon :icon="faEdit" />
+
             <span>Edit</span>
-        </b-button>
+        </BButton>
 
-        <b-modal ref="modal" modal-class="ui-form-rules-edit-modal" hide-footer>
+        <BModal ref="modal" modal-class="ui-form-rules-edit-modal" hide-footer>
             <template v-slot:modal-title>
                 <h2 class="mb-0">Build Rules for Applying to Existing Collection</h2>
             </template>
+
             <RuleCollectionBuilder
                 elements-type="collection_contents"
                 import-type="collections"
@@ -77,7 +92,7 @@ function onCancel() {
                 :save-rules-fn="onSaveRules"
                 :oncancel="onCancel"
                 :oncreate="() => {}" />
-        </b-modal>
+        </BModal>
     </div>
 </template>
 

From f564b207fd7bf3344b284cee5f01854d6006604f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:10:27 +0200
Subject: [PATCH 08/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Element`=20and=20import=20missing=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/FormElement.vue | 61 +++++++++++++---------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 17314b77cbcc..05e7a799251f 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -3,26 +3,29 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretSquareDown, faCaretSquareUp } from "@fortawesome/free-regular-svg-icons";
 import { faArrowsAltH, faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
 import type { ComputedRef } from "vue";
 import { computed, ref, useAttrs } from "vue";
 
 import type { FormParameterAttributes, FormParameterTypes, FormParameterValue } from "./parameterTypes";
 
-import FormBoolean from "./Elements/FormBoolean.vue";
-import FormColor from "./Elements/FormColor.vue";
-import FormData from "./Elements/FormData/FormData.vue";
-import FormDataDialog from "./Elements/FormDataDialog.vue";
-import FormDirectory from "./Elements/FormDirectory.vue";
-import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
-import FormHidden from "./Elements/FormHidden.vue";
-import FormInput from "./Elements/FormInput.vue";
-import FormNumber from "./Elements/FormNumber.vue";
-import FormOptionalText from "./Elements/FormOptionalText.vue";
-import FormRulesEdit from "./Elements/FormRulesEdit.vue";
-import FormSelection from "./Elements/FormSelection.vue";
-import FormTags from "./Elements/FormTags.vue";
-import FormText from "./Elements/FormText.vue";
-import FormUpload from "./Elements/FormUpload.vue";
+import FormDrilldown from "./Element@/components/Form/FormDrilldown/FormDrilldown.vue";
+import FormBoolean from "@/components/Form/Elements/FormBoolean.vue";
+import FormColor from "@/components/Form/Elements/FormColor.vue";
+import FormData from "@/components/Form/Elements/FormData/FormData.vue";
+import FormDataDialog from "@/components/Form/Elements/FormDataDialog.vue";
+import FormDirectory from "@/components/Form/Elements/FormDirectory.vue";
+import FormHidden from "@/components/Form/Elements/FormHidden.vue";
+import FormInput from "@/components/Form/Elements/FormInput.vue";
+import FormNumber from "@/components/Form/Elements/FormNumber.vue";
+import FormOptionalText from "@/components/Form/Elements/FormOptionalText.vue";
+import FormRulesEdit from "@/components/Form/Elements/FormRulesEdit.vue";
+import FormSelection from "@/components/Form/Elements/FormSelection.vue";
+import FormTags from "@/components/Form/Elements/FormTags.vue";
+import FormText from "@/components/Form/Elements/FormText.vue";
+import FormUpload from "@/components/Form/Elements/FormUpload.vue";
+
+library.add(faCaretSquareDown, faCaretSquareUp, faArrowsAltH, faExclamation, faTimes);
 
 interface FormElementProps {
     id?: string;
@@ -49,8 +52,15 @@ interface FormElementProps {
 
 const props = withDefaults(defineProps<FormElementProps>(), {
     id: "identifier",
+    type: "text",
+    value: "",
+    title: "",
     refreshOnChange: false,
+    help: "",
+    error: "",
+    warning: "",
     disabled: false,
+    attributes: undefined,
     collapsedEnableText: "Enable",
     collapsedDisableText: "Disable",
     collapsedEnableIcon: "far fa-caret-square-down",
@@ -67,8 +77,6 @@ const emit = defineEmits<{
     (e: "change", shouldRefresh: boolean): void;
 }>();
 
-library.add(faExclamation, faTimes, faArrowsAltH, faCaretSquareDown, faCaretSquareUp);
-
 /** TODO: remove attrs computed.
  useAttrs is *not* reactive, and does not play nice with type safety.
  It is present for compatibility with the legacy "FormParameter" component,
@@ -180,25 +188,26 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
         class="ui-form-element section-row"
         :class="{ alert: hasAlert, 'alert-info': hasAlert }">
         <div v-if="hasAlert" class="ui-form-error">
-            <FontAwesomeIcon class="mr-1" icon="fa-exclamation" />
+            <FontAwesomeIcon class="mr-1" :icon="faExclamation" />
+
             <span class="ui-form-error-text" v-html="props.error || props.warning" />
         </div>
 
         <div class="ui-form-title">
             <span v-if="collapsible || connectable">
-                <b-button
+                <BButton
                     v-if="collapsible && !connected"
                     class="ui-form-collapsible-icon"
                     :title="collapseText"
                     @click="onCollapse">
                     <FontAwesomeIcon v-if="collapsed" :icon="props.collapsedEnableIcon" />
                     <FontAwesomeIcon v-else :icon="props.collapsedDisableIcon" />
-                </b-button>
+                </BButton>
 
-                <b-button v-if="connectable" class="ui-form-connected-icon" :title="connectText" @click="onConnect">
+                <BButton v-if="connectable" class="ui-form-connected-icon" :title="connectText" @click="onConnect">
                     <FontAwesomeIcon v-if="connected" :icon="props.connectedEnableIcon" />
                     <FontAwesomeIcon v-else :icon="props.connectedDisableIcon" />
-                </b-button>
+                </BButton>
 
                 <span v-if="props.title" class="ui-form-title-text ml-1">
                     <label :for="props.id">{{ props.title }}</label>
@@ -221,6 +230,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 - optional
             </span>
         </div>
+
         <div v-if="showField" class="ui-form-field" :data-label="props.title">
             <FormBoolean v-if="props.type === 'boolean'" :id="props.id" v-model="currentValue" />
             <FormHidden v-else-if="isHiddenType" :id="props.id" v-model="currentValue" :info="attrs['info']" />
@@ -237,7 +247,6 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :id="id"
                 v-model="currentValue"
                 :readonly="attrs.readonly"
-                :value="attrs.value"
                 :area="attrs.area"
                 :placeholder="attrs.placeholder"
                 :multiple="attrs.multiple"
@@ -252,7 +261,6 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :id="id"
                 v-model="currentValue"
                 :readonly="attrs.readonly"
-                :value="attrs.value"
                 :area="attrs.area"
                 :placeholder="attrs.placeholder"
                 :color="attrs.color"
@@ -306,7 +314,10 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
             <FormInput v-else :id="props.id" v-model="currentValue" :area="attrs['area']" />
         </div>
 
-        <div v-if="showPreview" class="ui-form-preview pt-1 pl-2 mt-1">{{ previewText }}</div>
+        <div v-if="showPreview" class="ui-form-preview pt-1 pl-2 mt-1">
+            {{ previewText }}
+        </div>
+
         <span v-if="Boolean(helpText)" class="ui-form-info form-text text-muted" v-html="helpText" />
     </div>
 </template>

From 4d41ea49714af7992eb66b1a7f360f02dba00e4e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:14:18 +0200
Subject: [PATCH 09/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Directory`=20to=20`typeScript`=20and=20import=20missing=20compo?=
 =?UTF-8?q?nents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormDirectory.vue           | 233 ++++++++++--------
 1 file changed, 127 insertions(+), 106 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDirectory.vue b/client/src/components/Form/Elements/FormDirectory.vue
index 75678d82b1ad..c48692b65eb0 100644
--- a/client/src/components/Form/Elements/FormDirectory.vue
+++ b/client/src/components/Form/Elements/FormDirectory.vue
@@ -1,27 +1,135 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFolder, faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBreadcrumb, BBreadcrumbItem, BButton, BFormInput } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import localize from "@/utils/localization";
+
+import FilesDialog from "@/components/FilesDialog/FilesDialog.vue";
+
+library.add(faFolder, faFolderOpen);
+
+const emit = defineEmits<{
+    (e: "input", value: string): void;
+}>();
+
+const modalKey = ref(0);
+const url = ref<URL | null>(null);
+const currentDirectoryName = ref("");
+const pathChunks = ref<{ pathChunk: string; editable: boolean }[]>([]);
+
+const isValidName = computed(() => {
+    if (!currentDirectoryName.value) {
+        return null;
+    }
+
+    const regex = new RegExp("^(\\w+\\.?)*\\w+$", "g");
+
+    return regex.test(currentDirectoryName.value);
+});
+
+// forcing modal to be redrawn
+// https://michaelnthiessen.com/force-re-render/
+function redrawModal() {
+    modalKey.value += 1;
+}
+
+function removePath(index: number) {
+    pathChunks.value = pathChunks.value.slice(0, index);
+}
+
+function reset() {
+    url.value = null;
+    pathChunks.value = [];
+    currentDirectoryName.value = "";
+
+    redrawModal();
+
+    updateURL(true);
+}
+
+function removeLastPath(event: KeyboardEvent) {
+    // check whether the last item is editable
+    if (currentDirectoryName.value === "" && pathChunks.value.length > 0 && pathChunks.value.at(-1)?.editable) {
+        // prevent deleting last character on 'currentDirectoryName'
+        event.preventDefault();
+
+        currentDirectoryName.value = pathChunks.value.pop()?.pathChunk ?? "";
+    }
+}
+
+function setUrl(file: { url: string }) {
+    url.value = new URL(file.url);
+
+    // split path and keep only valid entries
+    pathChunks.value = url.value.href
+        .split(/[/\\]/)
+        .splice(2)
+        .map((x) => ({ pathChunk: x, editable: false }));
+
+    if (file.url) {
+        updateURL();
+    }
+}
+
+function addPath(event: KeyboardEvent) {
+    if ((event.key === "Enter" || event.key === "/") && isValidName.value) {
+        const newFolder = currentDirectoryName.value;
+
+        pathChunks.value.push({ pathChunk: newFolder, editable: true });
+
+        currentDirectoryName.value = "";
+
+        updateURL();
+    }
+}
+
+function updateURL(isReset = false) {
+    if (!isReset) {
+        // create an string of path chunks separated by `/`
+        const urlTmp = encodeURI(
+            `${url.value?.protocol}//${pathChunks.value.map(({ pathChunk }) => pathChunk).join("/")}`
+        );
+
+        if (urlTmp) {
+            emit("input", urlTmp);
+        }
+    }
+}
+</script>
+
 <template>
     <div>
         <div v-if="!url">
-            <b-button id="select-btn" @click="reset">
-                <FontAwesomeIcon icon="folder-open" /> {{ selectText }}
-            </b-button>
+            <BButton id="select-btn" @click="reset">
+                <FontAwesomeIcon :icon="faFolderOpen" />
+                {{ localize("Select") }}
+            </BButton>
+
             <FilesDialog :key="modalKey" mode="directory" :callback="setUrl" :require-writable="true" />
         </div>
-        <b-breadcrumb v-if="url">
-            <b-breadcrumb-item title="Select another folder" class="align-items-center" @click="reset">
-                <b-button class="pathname" variant="primary">
-                    <FontAwesomeIcon icon="folder-open" /> {{ url.protocol }}</b-button
-                >
-            </b-breadcrumb-item>
-            <b-breadcrumb-item
+
+        <BBreadcrumb v-if="url">
+            <BBreadcrumbItem title="Select another folder" class="align-items-center" @click="reset">
+                <BButton class="pathname" variant="primary">
+                    <FontAwesomeIcon :icon="faFolderOpen" />
+                    {{ url.protocol }}
+                </BButton>
+            </BBreadcrumbItem>
+
+            <BBreadcrumbItem
                 v-for="({ pathChunk, editable }, index) in pathChunks"
                 :key="index"
                 class="existent-url-path align-items-center">
-                <b-button class="regular-path-chunk" :disabled="!editable" variant="dark" @click="removePath(index)">
-                    {{ pathChunk }}</b-button
-                >
-            </b-breadcrumb-item>
-            <b-breadcrumb-item class="directory-input-field align-items-center">
-                <b-input
+                <BButton class="regular-path-chunk" :disabled="!editable" variant="dark" @click="removePath(index)">
+                    {{ pathChunk }}
+                </BButton>
+            </BBreadcrumbItem>
+
+            <BBreadcrumbItem class="directory-input-field align-items-center">
+                <BFormInput
                     id="path-input-breadcrumb"
                     v-model="currentDirectoryName"
                     aria-describedby="input-live-help input-live-feedback"
@@ -31,103 +139,16 @@
                     @keyup.enter="addPath"
                     @keydown.191.capture.prevent.stop="addPath"
                     @keydown.8.capture="removeLastPath" />
-            </b-breadcrumb-item>
-        </b-breadcrumb>
+            </BBreadcrumbItem>
+        </BBreadcrumb>
     </div>
 </template>
 
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faFolder, faFolderOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { FilesDialog } from "components/FilesDialog";
-import _l from "utils/localization";
-
-library.add(faFolder, faFolderOpen);
-
-const getDefaultValues = () => ({
-    isModalShown: false,
-    url: "",
-    pathChunks: "",
-    currentDirectoryName: "",
-});
-
-export default {
-    components: {
-        FontAwesomeIcon,
-        FilesDialog,
-    },
-    data() {
-        return { ...getDefaultValues(), modalKey: 0, selectText: _l("Select") };
-    },
-    computed: {
-        isValidName() {
-            if (!this.currentDirectoryName) {
-                return null;
-            }
-            const regex = new RegExp("^(\\w+\\.?)*\\w+$", "g");
-            return regex.test(this.currentDirectoryName);
-        },
-    },
-    methods: {
-        removePath(index) {
-            this.pathChunks = this.pathChunks.slice(0, index);
-        },
-        reset() {
-            const data = getDefaultValues();
-            Object.keys(data).forEach((k) => (this[k] = data[k]));
-            this.redrawModal();
-            this.updateURL(true);
-        },
-        // forcing modal to be redrawn
-        // https://michaelnthiessen.com/force-re-render/
-        redrawModal() {
-            this.modalKey += 1;
-        },
-        removeLastPath(event) {
-            // check whether the last item is editable
-            if (this.currentDirectoryName === "" && this.pathChunks.length > 0 && this.pathChunks.at(-1).editable) {
-                // prevent deleting last character on 'currentDirectoryName'
-                event.preventDefault();
-                this.currentDirectoryName = this.pathChunks.pop().pathChunk;
-            }
-        },
-        setUrl({ url }) {
-            this.url = new URL(url);
-            // split path and keep only valid entries
-            this.pathChunks = this.url.href
-                .split(/[/\\]/)
-                .splice(2)
-                .map((x) => ({ pathChunk: x, editable: false }));
-
-            if (url) {
-                this.updateURL();
-            }
-        },
-        addPath({ key }) {
-            if ((key === "Enter" || key === "/") && this.isValidName) {
-                const newFolder = this.currentDirectoryName;
-                this.pathChunks.push({ pathChunk: newFolder, editable: true });
-                this.currentDirectoryName = "";
-                this.updateURL();
-            }
-        },
-        updateURL(isReset = false) {
-            let url = undefined;
-            if (!isReset) {
-                // create an string of path chunks separated by `/`
-                url = encodeURI(`${this.url.protocol}//${this.pathChunks.map(({ pathChunk }) => pathChunk).join("/")}`);
-            }
-            this.$emit("input", url);
-        },
-    },
-};
-</script>
-
 <style scoped>
 .breadcrumb-item::before {
     font-size: 1.5rem;
 }
+
 .directory-input-field a {
     text-decoration: none;
 }

From 4f1e16a5a5b3ac9dca437d66c682ce6421456ecc Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:17:43 +0200
Subject: [PATCH 10/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Directory`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...irectory.test.js => FormDirectory.test.ts} | 134 +++++++++++-------
 1 file changed, 79 insertions(+), 55 deletions(-)
 rename client/src/components/Form/Elements/{FormDirectory.test.js => FormDirectory.test.ts} (53%)

diff --git a/client/src/components/Form/Elements/FormDirectory.test.js b/client/src/components/Form/Elements/FormDirectory.test.ts
similarity index 53%
rename from client/src/components/Form/Elements/FormDirectory.test.js
rename to client/src/components/Form/Elements/FormDirectory.test.ts
index 589456f27836..3f57d90600a1 100644
--- a/client/src/components/Form/Elements/FormDirectory.test.js
+++ b/client/src/components/Form/Elements/FormDirectory.test.ts
@@ -1,78 +1,90 @@
-import { mount } from "@vue/test-utils";
-import FilesDialog from "components/FilesDialog/FilesDialog";
-import { rootResponse } from "components/FilesDialog/testingData";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import Vue from "vue";
 
 import { mockFetcher } from "@/api/schema/__mocks__";
-
-import FormDirectory from "./FormDirectory";
+import { rootResponse } from "@/components/FilesDialog/testingData";
+
+import FormDirectory from "./FormDirectory.vue";
+import FilesDialog from "@/components/FilesDialog/FilesDialog.vue";
+
+const INVALID_PATH = "./];";
+const VALID_PATH = "valid_path";
+const TEST_DATA = {
+    url: "gxfiles://directory/subdirectory",
+    protocol: "gxfiles:",
+    expectedNumberOfPaths: 4,
+    pathChunks: [
+        {
+            pathChunk: "directory",
+        },
+        {
+            pathChunk: "subdirectory",
+        },
+    ],
+};
 
 const localVue = getLocalVue();
+
 jest.mock("app");
 jest.mock("@/api/schema");
 
 describe("DirectoryPathEditableBreadcrumb", () => {
-    let wrapper;
-    let spyOnUrlSet;
-    let spyOnAddPath;
-    let spyOnUpdateURL;
-
-    const testingData = {
-        url: "gxfiles://directory/subdirectory",
-        protocol: "gxfiles:",
-        expectedNumberOfPaths: 4,
-        pathChunks: [{ pathChunk: "directory" }, { pathChunk: "subdirectory" }],
-    };
-    const validPath = "validpath";
-    const invalidPath = "./];";
+    let wrapper: Wrapper<Vue>;
+    let spyOnUrlSet: jest.SpyInstance;
+    let spyOnAddPath: jest.SpyInstance;
+    let spyOnUpdateURL: jest.SpyInstance;
 
-    const saveNewChunk = async (path) => {
+    const saveNewChunk = async (path: string) => {
         // enter a new path chunk
         const input = wrapper.find("#path-input-breadcrumb");
+
         await input.setValue(path);
-        expect(input.element.value).toBe(path);
+
+        expect((input.element as HTMLInputElement).value).toBe(path);
 
         input.trigger("keyup.enter");
         return input;
     };
-    const init = async () => {
-        // the file dialog modal should exist
-        const filesDialogComponent = wrapper.findComponent(FilesDialog);
-        expect(filesDialogComponent.exists()).toBe(true);
-        filesDialogComponent.vm.callback({ url: testingData.url });
-        // HACK to avoid https://github.com/facebook/jest/issues/2549 (URL implementation is not the same as global node)
-        wrapper.vm.pathChunks = testingData.pathChunks;
-        await flushPromises();
-    };
 
     beforeEach(async () => {
-        spyOnUrlSet = jest.spyOn(FormDirectory.methods, "setUrl");
-        spyOnAddPath = jest.spyOn(FormDirectory.methods, "addPath");
-        spyOnUpdateURL = jest.spyOn(FormDirectory.methods, "updateURL");
+        const init = async () => {
+            // the file dialog modal should exist
+            const filesDialogComponent = wrapper.findComponent(FilesDialog);
+
+            expect(filesDialogComponent.exists()).toBe(true);
+
+            filesDialogComponent.vm.callback({ url: TEST_DATA.url });
+
+            // HACK to avoid https://github.com/facebook/jest/issues/2549 (URL implementation is not the same as global node)
+            wrapper.vm.pathChunks = TEST_DATA.pathChunks;
+
+            await flushPromises();
+        };
+
+        spyOnUrlSet = jest.spyOn(FormDirectory.prototype.methods, "setUrl");
+        spyOnAddPath = jest.spyOn(FormDirectory.prototype.methods, "addPath");
+        spyOnUpdateURL = jest.spyOn(FormDirectory.prototype.methods, "updateURL");
 
         mockFetcher.path("/api/remote_files/plugins").method("get").mock({ data: rootResponse });
         mockFetcher.path("/api/configuration").method("get").mock({ data: {} });
 
         const pinia = createPinia();
 
-        wrapper = mount(FormDirectory, {
+        wrapper = mount(FormDirectory as object, {
             propsData: {
                 callback: () => {},
             },
-            localVue: localVue,
+            localVue,
             pinia,
         });
+
         await flushPromises();
+
         await init();
     });
-    afterEach(async () => {
-        if (wrapper) {
-            wrapper.destroy();
-        }
-        wrapper = undefined;
-    });
 
     it("should render Breadcrumb", async () => {
         // after initial folder is chosen, setUrl() should be called and modal disappear
@@ -84,13 +96,14 @@ describe("DirectoryPathEditableBreadcrumb", () => {
 
         // check breadcrumb items
         const breadcrumbPaths = wrapper.findAll("li.breadcrumb-item");
-        expect(breadcrumbPaths.length).toBe(testingData.expectedNumberOfPaths);
-        expect(wrapper.find(".pathname").text()).toBe(testingData.protocol);
+        expect(breadcrumbPaths.length).toBe(TEST_DATA.expectedNumberOfPaths);
+        expect(wrapper.find(".pathname").text()).toBe(TEST_DATA.protocol);
+
         const regularPathElements = wrapper.findAll("li.breadcrumb-item button[disabled='disabled']");
+        expect(regularPathElements.length).toBe(TEST_DATA.pathChunks.length);
 
-        expect(regularPathElements.length).toBe(testingData.pathChunks.length);
+        const chunks = TEST_DATA.pathChunks.map((e) => e.pathChunk);
 
-        const chunks = testingData.pathChunks.map((e) => e.pathChunk);
         // every item should be rendered
         for (let i = 0; i < regularPathElements.length; i++) {
             const text = regularPathElements.at(i).text();
@@ -100,38 +113,49 @@ describe("DirectoryPathEditableBreadcrumb", () => {
 
     it("should prevent invalid Paths", async () => {
         // enter a new path chunk
-        const input = await saveNewChunk(invalidPath);
+        const input = await saveNewChunk(INVALID_PATH);
+
         await flushPromises();
+
         // after new entry is entered the value of input should be an empty string
-        expect(input.element.value).toBe(invalidPath);
+        expect((input.element as HTMLInputElement).value).toBe(INVALID_PATH);
+
         // should be the same name plus additional item
-        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(testingData.expectedNumberOfPaths);
+        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(TEST_DATA.expectedNumberOfPaths);
     });
 
     it("should save and remove new Paths", async () => {
         // enter a new path chunk
-        const input = await saveNewChunk(validPath);
+        const input = await saveNewChunk(VALID_PATH);
 
         await flushPromises();
+
         expect(spyOnAddPath).toHaveBeenCalled();
+
         // after new entry is entered the value of input should be an empty string
-        expect(input.element.value).toBe("");
+        expect((input.element as HTMLInputElement).value).toBe("");
 
         // should be the same name plus additional item
-        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(testingData.expectedNumberOfPaths + 1);
+        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(TEST_DATA.expectedNumberOfPaths + 1);
+
         // find newly added chunk
-        const addedChunk = wrapper.findAll("li.breadcrumb-item button").wrappers.find((e) => e.text() === validPath);
+        const addedChunk = wrapper.findAll("li.breadcrumb-item button").wrappers.find((e) => e.text() === VALID_PATH);
+
         // remove chunk from the path
-        await addedChunk.trigger("click");
+        await addedChunk?.trigger("click");
+
         await flushPromises();
+
         // number of elements should be the same again
-        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(testingData.expectedNumberOfPaths);
+        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(TEST_DATA.expectedNumberOfPaths);
     });
 
     it("should update new path", async () => {
         // enter a new path chunk
         expect(spyOnUpdateURL).toHaveBeenCalled();
-        await saveNewChunk(validPath);
+
+        await saveNewChunk(VALID_PATH);
+
         await flushPromises();
 
         expect(spyOnUpdateURL).toHaveBeenCalled();

From 4d69ec180d6d4a0689f07ff49fb708c0acf0ff3e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:19:19 +0200
Subject: [PATCH 11/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Number`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormNumber.vue   | 286 +++++++++---------
 1 file changed, 143 insertions(+), 143 deletions(-)

diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
index a616bd3d8706..022a2cd98187 100644
--- a/client/src/components/Form/Elements/FormNumber.vue
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -1,12 +1,144 @@
+<script setup lang="ts">
+import { BAlert, BCol, BFormInput, BRow } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+interface Props {
+    value: number;
+    type: "integer" | "float";
+    min?: number;
+    max?: number;
+    workflowBuildingMode?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    min: undefined,
+    max: undefined,
+});
+
+const emit = defineEmits<{
+    (e: "input", value: string | number): void;
+}>();
+
+const dismissSecs = ref(5);
+const errorMessage = ref("");
+const dismissCountDown = ref(0);
+const defaultInputSizeWithSlider = ref(4);
+const fractionWarning = ref("This output doesn't allow fractions!");
+
+const isInteger = computed(() => {
+    return props.type.toLowerCase() === "integer";
+});
+const fieldType = computed(() => {
+    return props.workflowBuildingMode ? "text" : "number";
+});
+const isRangeValid = computed(() => {
+    return !isNaN(props.min) && !isNaN(props.max) && props.max > props.min;
+});
+const decimalPlaces = computed(() => {
+    return props.type.toLowerCase() === "integer" ? 0 : getNumberOfDecimals(props.value);
+});
+const currentValue = computed({
+    get() {
+        return props.value;
+    },
+    set(newVal: string | number) {
+        if (newVal !== props.value) {
+            emit("input", newVal);
+        }
+    },
+});
+
+/**
+ * Dynamically sets the step value depending on the
+ * current value precision when float number.
+ */
+const step = computed(() => {
+    if (isInteger.value) {
+        return 1;
+    }
+
+    if (decimalPlaces.value < 2) {
+        return 0.1;
+    } else if (decimalPlaces.value < 3) {
+        return 0.01;
+    }
+
+    return 0.001;
+});
+
+function onFloatInput(e: KeyboardEvent) {
+    if (isInteger.value) {
+        e.preventDefault();
+
+        showAlert(fractionWarning.value);
+    }
+}
+
+function onInputChange(value: number) {
+    resetAlert();
+
+    if (isOutOfRange(value)) {
+        showOutOfRangeWarning(value);
+
+        currentValue.value = value > props.max ? props.max : props.min;
+    }
+}
+
+function showAlert(error: string) {
+    if (error) {
+        errorMessage.value = error;
+        dismissCountDown.value = dismissSecs.value;
+    }
+}
+
+function isOutOfRange(value: number) {
+    return isRangeValid.value && (value > props.max || value < props.min);
+}
+
+function showOutOfRangeWarning(value: number) {
+    const warningMessage = `${value} is out of ${props.min} - ${props.max} range!`;
+
+    showAlert(warningMessage);
+}
+
+function resetAlert() {
+    dismissCountDown.value = 0;
+}
+
+/**
+ * https://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number
+ */
+function getNumberOfDecimals(value: number | string): number {
+    if (value == null) {
+        return 0;
+    }
+
+    var match = value.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+
+    if (!match) {
+        return 0;
+    }
+
+    return Math.max(
+        0,
+        // Number of digits right of decimal point.
+        (match[1] ? match[1].length : 0) -
+            // Adjust for scientific notation.
+            (match[2] ? +match[2] : 0)
+    );
+}
+</script>
+
 <template>
     <div>
-        <b-alert v-if="errorMessage" class="mt-2" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
+        <BAlert v-if="errorMessage" class="mt-2" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
             {{ errorMessage }}
-        </b-alert>
-        <b-row align-v="center">
-            <b-col :sm="isRangeValid ? defaultInputSizeWithSlider : false">
+        </BAlert>
+
+        <BRow align-v="center">
+            <BCol :sm="isRangeValid ? defaultInputSizeWithSlider : false">
                 <!-- regular dot and dot on numpad have different codes -->
-                <b-form-input
+                <BFormInput
                     v-model="currentValue"
                     class="ui-input"
                     :no-wheel="true"
@@ -15,143 +147,11 @@
                     @change="onInputChange"
                     @keydown.190.capture="onFloatInput"
                     @keydown.110.capture="onFloatInput" />
-            </b-col>
-            <b-col v-if="isRangeValid" class="pl-0">
-                <b-form-input v-model="currentValue" class="ui-input" :min="min" :max="max" :step="step" type="range" />
-            </b-col>
-        </b-row>
+            </BCol>
+
+            <BCol v-if="isRangeValid" class="pl-0">
+                <BFormInput v-model="currentValue" class="ui-input" :min="min" :max="max" :step="step" type="range" />
+            </BCol>
+        </BRow>
     </div>
 </template>
-
-<script>
-export default {
-    props: {
-        value: {
-            required: true,
-        },
-        type: {
-            type: String,
-            required: true,
-            validator: (prop) => ["integer", "float"].includes(prop.toLowerCase()),
-        },
-        min: {
-            type: [Number, String],
-            required: false,
-            default: undefined,
-        },
-        max: {
-            type: [Number, String],
-            required: false,
-            default: undefined,
-        },
-        workflowBuildingMode: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            defaultInputSizeWithSlider: 4,
-            dismissSecs: 5,
-            dismissCountDown: 0,
-            errorMessage: "",
-            fractionWarning: "This output doesn't allow fractions!",
-            decimalPlaces: this.type.toLowerCase() === "integer" ? 0 : this.getNumberOfDecimals(this.value),
-        };
-    },
-    computed: {
-        currentValue: {
-            get() {
-                return this.value;
-            },
-            set(newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.$emit("input", newVal);
-                }
-            },
-        },
-        fieldType() {
-            return this.workflowBuildingMode ? "text" : "number";
-        },
-        isRangeValid() {
-            return !isNaN(this.min) && !isNaN(this.max) && this.max > this.min;
-        },
-        isInteger() {
-            return this.type.toLowerCase() === "integer";
-        },
-        isFloat() {
-            return !this.isInteger;
-        },
-        /**
-         * Dynamically sets the step value depending on the
-         * current value precision when float number.
-         */
-        step() {
-            if (this.isInteger) {
-                return 1;
-            }
-            const numDecimals = this.decimalPlaces;
-            if (numDecimals < 2) {
-                return 0.1;
-            }
-            if (numDecimals < 3) {
-                return 0.01;
-            }
-            return 0.001;
-        },
-    },
-    methods: {
-        onFloatInput(e) {
-            if (this.isInteger) {
-                e.preventDefault();
-                this.showAlert(this.fractionWarning);
-            }
-        },
-        onInputChange(value) {
-            this.resetAlert();
-            if (this.isOutOfRange(value)) {
-                this.showOutOfRangeWarning(value);
-                this.currentValue = value > this.max ? this.max : this.min;
-            }
-            if (this.isFloat) {
-                this.decimalPlaces = this.getNumberOfDecimals(this.currentValue);
-            }
-        },
-        showAlert(error) {
-            if (error) {
-                this.errorMessage = error;
-                this.dismissCountDown = this.dismissSecs;
-            }
-        },
-        isOutOfRange(value) {
-            return this.isRangeValid && (value > this.max || value < this.min);
-        },
-        showOutOfRangeWarning(value) {
-            const warningMessage = `${value} is out of ${this.min} - ${this.max} range!`;
-            this.showAlert(warningMessage);
-        },
-        resetAlert() {
-            this.dismissCountDown = 0;
-        },
-        /**
-         * https://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number
-         */
-        getNumberOfDecimals(value) {
-            if (value == null) {
-                return 0;
-            }
-            var match = value.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
-            if (!match) {
-                return 0;
-            }
-            return Math.max(
-                0,
-                // Number of digits right of decimal point.
-                (match[1] ? match[1].length : 0) -
-                    // Adjust for scientific notation.
-                    (match[2] ? +match[2] : 0)
-            );
-        },
-    },
-};
-</script>

From 11315d58d7597dc32cc0fdbcd1902571941ca54e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:21:24 +0200
Subject: [PATCH 12/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Number`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...{FormNumber.test.js => FormNumber.test.ts} | 89 ++++++++++++-------
 1 file changed, 56 insertions(+), 33 deletions(-)
 rename client/src/components/Form/Elements/{FormNumber.test.js => FormNumber.test.ts} (64%)

diff --git a/client/src/components/Form/Elements/FormNumber.test.js b/client/src/components/Form/Elements/FormNumber.test.ts
similarity index 64%
rename from client/src/components/Form/Elements/FormNumber.test.js
rename to client/src/components/Form/Elements/FormNumber.test.ts
index b44cb4caca28..d1c706e93429 100644
--- a/client/src/components/Form/Elements/FormNumber.test.js
+++ b/client/src/components/Form/Elements/FormNumber.test.ts
@@ -1,65 +1,82 @@
-import { mount } from "@vue/test-utils";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
 
-import FormNumber from "./FormNumber";
+import FormNumber from "./FormNumber.vue";
 
 const localVue = getLocalVue();
 
-describe("FormInput", () => {
-    const mountFormNumber = async (props) =>
-        await mount(FormNumber, {
-            propsData: props,
-            localVue,
-        });
+async function mountFormNumber(propsData: object) {
+    return mount(FormNumber as object, {
+        localVue,
+        propsData,
+    });
+}
 
-    const getInput = async (wrapper) => await wrapper.find("input[type='number']");
-    const getInputRange = async (wrapper) => await wrapper.find("input[type='range']");
-    const getAlert = async (wrapper) => await wrapper.find("[role='alert']");
+describe("FormInput", () => {
+    const getAlert = (wrapper: Wrapper<Vue>) => wrapper.find("[role='alert']");
+    const getInput = (wrapper: Wrapper<Vue>) => wrapper.find("input[type='number']");
 
     it("input should be rendered with number type", async () => {
         const wrapper = await mountFormNumber({ value: 1, type: "float" });
+
         await flushPromises();
-        const input = await getInput(wrapper);
+
+        const input = getInput(wrapper);
         expect(input.exists()).toBe(true);
     });
 
     it("input range should exist", async () => {
-        const assertRange = async (props, shoudExist) => {
+        async function assertRange(props: object, shouldExist: boolean) {
             const wrapper = await mountFormNumber(props);
 
-            const inputRange = await getInputRange(wrapper);
-            expect(inputRange.exists()).toBe(shoudExist);
+            const inputRange = wrapper.find("input[type='range']");
+            expect(inputRange.exists()).toBe(shouldExist);
+
             wrapper.destroy();
-        };
+        }
 
-        const props = { value: 50, type: "float" };
+        const props: { value: number; type: string; min?: number; max?: number } = { value: 50, type: "float" };
         // if min or max is not defined, range shouldn't be rendered
         await assertRange(props, false);
+
         props.min = 1;
+
         await assertRange(props, false);
+
         props.max = 100;
+
         await assertRange(props, true);
+
         // test usecase: range should be rendered on 0
         props.min = 0;
+
         await assertRange(props, true);
+
         // test usecase: if max < min range shouldn't be rendered
         props.max = -100;
+
         await assertRange(props, false);
     });
 
     it("range should be respected", async () => {
-        const checkOutOfRangeAlert = async (number) => {
+        async function checkOutOfRangeAlert(number: number) {
             const props = { value: 50, type: "float", min: 10, max: 100 };
+
             const wrapper = await mountFormNumber(props);
-            const input = await getInput(wrapper);
+
+            const input = getInput(wrapper);
+
             await input.setValue(number);
+
             await input.trigger("change");
-            const alert = await getAlert(wrapper);
+
+            const alert = getAlert(wrapper);
             expect(alert.exists()).toBeTruthy();
             expect(alert.text().includes(`${number} is out`)).toBeTruthy();
+
             wrapper.destroy();
-        };
+        }
 
         const numberBiggerThanRange = [110, Number.MAX_VALUE];
         const numberSmallerThanRange = [1, 0, -1, Number.MIN_VALUE];
@@ -68,15 +85,18 @@ describe("FormInput", () => {
         for (const value of numberSmallerThanRange) {
             await checkOutOfRangeAlert(value);
         }
+
         for (const value of numberBiggerThanRange) {
             await checkOutOfRangeAlert(value);
         }
     });
 
     it("type should be expected", async () => {
-        const checkFractionsAlert = async (key) => {
+        async function checkFractionsAlert(key: number) {
+            const props = { value: 50, type: "integer", min: 10, max: 100 };
             const wrapper = await mountFormNumber(props);
-            const input = await getInput(wrapper);
+
+            const input = getInput(wrapper);
 
             await input.trigger("keydown", {
                 keyCode: key,
@@ -84,25 +104,27 @@ describe("FormInput", () => {
 
             await flushPromises();
 
-            const alert = await getAlert(wrapper);
+            const alert = getAlert(wrapper);
             expect(alert.exists()).toBeTruthy();
+
             wrapper.destroy();
-        };
+        }
 
-        const props = { value: 50, type: "integer", min: 10, max: 100 };
-        const keycodes = [190, 110];
+        const keyCodes = [190, 110];
 
-        for (const key of keycodes) {
+        for (const key of keyCodes) {
             await checkFractionsAlert(key);
         }
     });
 
     it("should calculate the right step for floats", async () => {
-        const expectStep = async (value, expectedStep) => {
+        async function expectStep(value: number | string | undefined, expectedStep: number) {
             const props = { value: value, type: "float", min: 0, max: 1 };
             const wrapper = await mountFormNumber(props);
-            expect(wrapper.vm.step).toBe(expectedStep);
-        };
+
+            const input = getInput(wrapper);
+            expect(input.attributes("step")).toBe(expectedStep.toString());
+        }
 
         //minimum step 0.1 - maximum step 0.001
         const testValues = [
@@ -115,8 +137,9 @@ describe("FormInput", () => {
             { value: 0.5555, step: 0.001 },
             { value: 25e-100, step: 0.001 },
         ];
+
         for (let index = 0; index < testValues.length; index++) {
-            expectStep(testValues[index].value, testValues[index].step);
+            expectStep(testValues[index]?.value, testValues[index].step);
         }
     });
 });

From d8ab05d4de3007747b5add4558481c323fbeb7b0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:23:32 +0200
Subject: [PATCH 13/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?OptionalText`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormOptionalText.vue        | 134 ++++++++----------
 1 file changed, 57 insertions(+), 77 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index 928b118eba99..ae1f9223ec37 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -1,14 +1,68 @@
+<script setup lang="ts">
+import { BFormCheckbox } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import FormText from "@/components/Form/Elements/FormText.vue";
+
+interface Props {
+    value?: string;
+    id?: string;
+    type?: string;
+    area?: boolean;
+    multiple?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    datalist?: { value: string; label: string }[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: "",
+    id: "",
+    type: "text",
+    area: false,
+    multiple: false,
+    readonly: false,
+    placeholder: "",
+    datalist: () => [],
+});
+
+const emit = defineEmits<{
+    (e: "input", value: string): void;
+}>();
+
+const status = ref(false);
+
+const currentValue = computed({
+    get() {
+        return props.value;
+    },
+    set(val) {
+        emit("input", val);
+    },
+});
+const currentStatus = computed({
+    get() {
+        return status.value || props.value !== null;
+    },
+    set(val) {
+        status.value = Boolean(val);
+
+        currentValue.value = "";
+    },
+});
+</script>
+
 <template>
     <div>
-        <b-form-checkbox v-model="currentStatus" class="ui-switch" switch>
+        <BFormCheckbox v-model="currentStatus" class="ui-switch" switch>
             Set value for this optional select field?
-        </b-form-checkbox>
+        </BFormCheckbox>
+
         <FormText
             v-if="currentStatus"
             :id="id"
             v-model="currentValue"
             :readonly="readonly"
-            :value="value"
             :area="area"
             :placeholder="placeholder"
             :multiple="multiple"
@@ -16,77 +70,3 @@
             :type="type" />
     </div>
 </template>
-
-<script>
-import FormText from "./FormText";
-
-export default {
-    components: {
-        FormText,
-    },
-    props: {
-        value: {
-            default: "",
-        },
-        id: {
-            type: String,
-            default: null,
-        },
-        type: {
-            type: String,
-            default: "text",
-        },
-        area: {
-            // <textarea> instead of <input> element
-            type: Boolean,
-            default: false,
-        },
-        multiple: {
-            // Allow multiple entries to be created
-            type: Boolean,
-            default: false,
-        },
-        readonly: {
-            type: Boolean,
-            default: false,
-        },
-        placeholder: {
-            type: String,
-            default: null,
-        },
-        datalist: {
-            // Display list of suggestions in autocomplete dialog
-            type: Array,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            status: false,
-        };
-    },
-    computed: {
-        currentValue: {
-            get() {
-                return this.value;
-            },
-            set(val) {
-                this.$emit("input", val);
-            },
-        },
-        currentStatus: {
-            get() {
-                return this.status || this.value !== null;
-            },
-            set(val) {
-                this.status = Boolean(val);
-                if (this.status) {
-                    this.currentValue = "";
-                } else {
-                    this.currentValue = null;
-                }
-            },
-        },
-    },
-};
-</script>

From a49d13742b5bb844ae6572f7f6d3e76ae45b8a06 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:23:53 +0200
Subject: [PATCH 14/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?OptionalText`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormOptionalText.test.js    | 36 ---------------
 .../Form/Elements/FormOptionalText.test.ts    | 45 +++++++++++++++++++
 2 files changed, 45 insertions(+), 36 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormOptionalText.test.js
 create mode 100644 client/src/components/Form/Elements/FormOptionalText.test.ts

diff --git a/client/src/components/Form/Elements/FormOptionalText.test.js b/client/src/components/Form/Elements/FormOptionalText.test.js
deleted file mode 100644
index 5086323eee1a..000000000000
--- a/client/src/components/Form/Elements/FormOptionalText.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import FormOptionalText from "./FormOptionalText";
-
-const localVue = getLocalVue();
-
-describe("FormOptionalText", () => {
-    const mountFormOptionalText = async (props) =>
-        await mount(FormOptionalText, {
-            propsData: props,
-            localVue,
-        });
-
-    it("should display existing values", async () => {
-        const v = "somevalue";
-        const wrapper = await mountFormOptionalText({ value: v });
-        const el = wrapper.find("input");
-        expect(el.element.checked).toEqual(true);
-        const elText = wrapper.find("input[type='text']");
-        expect(elText.element.value).toEqual(v);
-        await el.setChecked(false);
-        expect(wrapper.emitted().input[0][0]).toEqual(null);
-        await el.setChecked(true);
-        expect(wrapper.emitted().input[1][0]).toEqual("");
-    });
-
-    it("should initialize with null if value does not exist", async () => {
-        const v = null;
-        const wrapper = await mountFormOptionalText({ value: v });
-        const el = wrapper.find("input");
-        expect(el.element.checked).toEqual(false);
-        await wrapper.setProps({ value: "" });
-        expect(el.element.checked).toEqual(true);
-    });
-});
diff --git a/client/src/components/Form/Elements/FormOptionalText.test.ts b/client/src/components/Form/Elements/FormOptionalText.test.ts
new file mode 100644
index 000000000000..2bf20929c7b7
--- /dev/null
+++ b/client/src/components/Form/Elements/FormOptionalText.test.ts
@@ -0,0 +1,45 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+
+import FormOptionalText from "./FormOptionalText.vue";
+
+const localVue = getLocalVue();
+
+async function mountFormOptionalText(propsData: object) {
+    return mount(FormOptionalText as object, {
+        localVue,
+        propsData,
+    });
+}
+
+describe("FormOptionalText", () => {
+    it("should display existing values", async () => {
+        const v = "some_value";
+        const wrapper = await mountFormOptionalText({ value: v });
+
+        const el = wrapper.find("input");
+        expect((el.element as HTMLInputElement).checked).toEqual(true);
+
+        const elText = wrapper.find("input[type='text']");
+        expect((elText.element as HTMLInputElement).value).toEqual(v);
+
+        await el.setChecked(false);
+
+        expect(wrapper.emitted().input?.[0]?.[0]).toEqual(null);
+
+        await el.setChecked(true);
+
+        expect(wrapper.emitted().input?.[1]?.[0]).toEqual("");
+    });
+
+    it("should initialize with null if value does not exist", async () => {
+        const wrapper = await mountFormOptionalText({ value: null });
+
+        const el = wrapper.find("input");
+        expect((el.element as HTMLInputElement).checked).toEqual(false);
+
+        await wrapper.setProps({ value: "" });
+
+        expect((el.element as HTMLInputElement).checked).toEqual(true);
+    });
+});

From 039a077052efacd6339ad5cc3cadde35e3debe4f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:25:58 +0200
Subject: [PATCH 15/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Selection`=20to=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormSelection.vue           | 77 ++++++++++---------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 2b533461c338..b65fb9ad9096 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -8,40 +8,39 @@ import { computed, ref, watch } from "vue";
 
 import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
-import FormCheck from "./FormCheck.vue";
-import FormRadio from "./FormRadio.vue";
-import FormSelect from "./FormSelect.vue";
-import FormSelectMany from "./FormSelectMany/FormSelectMany.vue";
+import FormCheck from "@/components/Form/Elements/FormCheck.vue";
+import FormRadio from "@/components/Form/Elements/FormRadio.vue";
+import FormSelect from "@/components/Form/Elements/FormSelect.vue";
+import FormSelectMany from "@/components/Form/Elements/FormSelectMany/FormSelectMany.vue";
 
 library.add(faCaretDown);
 
-const emit = defineEmits(["input"]);
-const props = defineProps({
-    value: {
-        default: null,
-    },
-    data: {
-        type: Array,
-        default: null,
-    },
-    display: {
-        type: String,
-        default: null,
-    },
-    optional: {
-        type: Boolean,
-        default: false,
-    },
-    options: {
-        type: Array,
-        default: null,
-    },
-    multiple: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    display?: string;
+    optional?: boolean;
+    multiple?: boolean;
+    value?: string | string[];
+    options?: [string, string][];
+    data?: { label: string; value: string }[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    display: "select",
+    optional: false,
+    multiple: false,
+    value: "",
+    options: () => [],
+    data: () => [],
 });
 
+const emit = defineEmits<{
+    (e: "input", value: string | string[]): void;
+}>();
+
+const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
+
+const useMany = ref(false);
+
 const currentValue = computed({
     get: () => {
         return props.value;
@@ -53,27 +52,27 @@ const currentValue = computed({
 
 /** Provides formatted select options. */
 const currentOptions = computed(() => {
-    let result = [];
     const data = props.data;
     const options = props.options;
+
+    let result: { label: string; value: string }[] = [];
+
     if (options && options.length > 0) {
         result = options.map((option) => ({ label: option[0], value: option[1] }));
     } else if (data && data.length > 0) {
         result = data;
     }
+
     if (!props.display && !props.multiple && props.optional) {
         result.unshift({
             label: "Nothing selected",
-            value: null,
+            value: "",
         });
     }
+
     return result;
 });
 
-const useMany = ref(false);
-
-const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
-
 watch(
     () => preferredFormSelectElement.value,
     (newValue, oldValue) => {
@@ -120,19 +119,23 @@ const showMultiButton = computed(() => displayMany.value);
 
             <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
                 <template v-slot:button-content>
-                    <FontAwesomeIcon icon="fa-caret-down"></FontAwesomeIcon>
+                    <FontAwesomeIcon :icon="faCaretDown" />
+
                     <span class="sr-only">select element preferences</span>
                 </template>
+
                 <BDropdownItemButton
                     :active="preferredFormSelectElement === 'none'"
                     @click="preferredFormSelectElement = 'none'">
                     No preference
                 </BDropdownItemButton>
+
                 <BDropdownItemButton
                     :active="preferredFormSelectElement === 'multi'"
                     @click="preferredFormSelectElement = 'multi'">
                     Default to simple select
                 </BDropdownItemButton>
+
                 <BDropdownItemButton
                     :active="preferredFormSelectElement === 'many'"
                     @click="preferredFormSelectElement = 'many'">

From 1b722212c7fdb44b83989782084cb0e5f0fdf799 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:28:04 +0200
Subject: [PATCH 16/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Select`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...{FormSelect.test.js => FormSelect.test.ts} | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)
 rename client/src/components/Form/Elements/{FormSelect.test.js => FormSelect.test.ts} (79%)

diff --git a/client/src/components/Form/Elements/FormSelect.test.js b/client/src/components/Form/Elements/FormSelect.test.ts
similarity index 79%
rename from client/src/components/Form/Elements/FormSelect.test.js
rename to client/src/components/Form/Elements/FormSelect.test.ts
index 1854a23698ac..3a94312ba817 100644
--- a/client/src/components/Form/Elements/FormSelect.test.js
+++ b/client/src/components/Form/Elements/FormSelect.test.ts
@@ -1,15 +1,15 @@
 import { createTestingPinia } from "@pinia/testing";
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 
 import MountTarget from "./FormSelection.vue";
 
 const localVue = getLocalVue(true);
 
-function createTarget(propsData) {
+async function mountFormSelection(propsData: object) {
     const pinia = createTestingPinia();
 
-    return mount(MountTarget, {
+    return mount(MountTarget as object, {
         localVue,
         propsData,
         pinia,
@@ -23,10 +23,12 @@ const defaultOptions = [
     ["label_4", 99],
 ];
 
-function testDefaultOptions(wrapper) {
+function testDefaultOptions(wrapper: Wrapper<Vue>) {
     const target = wrapper.findComponent(MountTarget);
     const options = target.findAll("li > span > span");
+
     expect(options.length).toBe(4);
+
     for (let i = 0; i < options.length; i++) {
         expect(options.at(i).text()).toBe(`label_${i + 1}`);
     }
@@ -34,67 +36,93 @@ function testDefaultOptions(wrapper) {
 
 describe("FormSelect", () => {
     it("basics", async () => {
-        const wrapper = createTarget({
+        const wrapper = await mountFormSelection({
             options: defaultOptions,
         });
+
         testDefaultOptions(wrapper);
+
         const noValue = wrapper.find(".multiselect__option--selected");
         expect(noValue.exists()).toBe(false);
-        expect(wrapper.emitted().input[0][0]).toBe("value_1");
+        expect(wrapper.emitted().input?.[0]?.[0]).toBe("value_1");
+
         await wrapper.setProps({ value: "value_1" });
+
         const selectedValue = wrapper.find(".multiselect__option--selected");
         expect(selectedValue.text()).toBe("label_1");
     });
 
     it("optional values", async () => {
-        const wrapper = createTarget({
+        const wrapper = await mountFormSelection({
             options: defaultOptions,
             optional: true,
         });
+
         const target = wrapper.findComponent(MountTarget);
+
         const options = target.findAll("li > span > span");
         expect(options.length).toBe(5);
         expect(options.at(0).text()).toBe("Nothing selected");
+
         const selectedDefault = wrapper.find(".multiselect__option--selected");
         expect(selectedDefault.text()).toBe("Nothing selected");
+
         await wrapper.setProps({ value: "value_1" });
+
         const selectedValue = wrapper.find(".multiselect__option--selected");
         expect(selectedValue.text()).toBe("label_1");
+
         options.at(0).trigger("click");
-        const nullValue = wrapper.emitted().input[0][0];
+
+        const nullValue = wrapper.emitted().input?.[0]?.[0];
         expect(nullValue).toBe(null);
+
         await wrapper.setProps({ value: null });
+
         const unselectDefault = wrapper.find(".multiselect__option--selected");
         expect(unselectDefault.text()).toBe("Nothing selected");
     });
 
     it("multiple values", async () => {
-        const wrapper = createTarget({
+        const wrapper = await mountFormSelection({
             optional: true,
             multiple: true,
             options: defaultOptions,
             value: ["value_1", "", 99],
         });
+
         testDefaultOptions(wrapper);
+
         const selectedValue = wrapper.findAll(".multiselect__option--selected");
         expect(selectedValue.length).toBe(3);
         expect(selectedValue.at(0).text()).toBe("label_1");
         expect(selectedValue.at(1).text()).toBe("label_3");
         expect(selectedValue.at(2).text()).toBe("label_4");
+
         selectedValue.at(0).trigger("click");
-        const newValue = wrapper.emitted().input[0][0];
+
+        const newValue = wrapper.emitted().input?.[0]?.[0];
         expect(newValue).toEqual(["", 99]);
+
         await wrapper.setProps({ value: newValue });
+
         selectedValue.at(1).trigger("click");
-        const numericValue = wrapper.emitted().input[1][0];
+
+        const numericValue = wrapper.emitted().input?.[1]?.[0];
         expect(numericValue).toEqual([99]);
+
         await wrapper.setProps({ value: numericValue });
+
         selectedValue.at(2).trigger("click");
-        const nullValue = wrapper.emitted().input[2][0];
+
+        const nullValue = wrapper.emitted().input?.[2]?.[0];
         expect(nullValue).toBe(null);
+
         await wrapper.setProps({ value: nullValue });
+
         selectedValue.at(0).trigger("click");
-        const finalValue = wrapper.emitted().input[3][0];
+
+        const finalValue = wrapper.emitted().input?.[3]?.[0];
         expect(finalValue).toEqual(["value_1"]);
     });
 });

From 646559776d6533821efa2976d50005070c6da615 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:28:44 +0200
Subject: [PATCH 17/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Tags`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormTags.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormTags.vue b/client/src/components/Form/Elements/FormTags.vue
index bdeb536f6945..9f88bb89a81f 100644
--- a/client/src/components/Form/Elements/FormTags.vue
+++ b/client/src/components/Form/Elements/FormTags.vue
@@ -20,5 +20,5 @@ function onInput(tags: string[]) {
 </script>
 
 <template>
-    <StatelessTags :value="valueArray" :placeholder="props.placeholder" @input="onInput"></StatelessTags>
+    <StatelessTags :value="valueArray" :placeholder="props.placeholder" @input="onInput" />
 </template>

From 2345698e69272cf5eeb4e0e9b91520d9b836464e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:29:48 +0200
Subject: [PATCH 18/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Text`=20to=20composition=20API=20and=20`typeScript`=20and=20imp?=
 =?UTF-8?q?ort=20missing=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Form/Elements/FormText.vue | 170 ++++++++----------
 1 file changed, 79 insertions(+), 91 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 8a07155ae4f8..dcf66da0efcb 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -1,7 +1,79 @@
+<script setup lang="ts">
+import { BCol, BFormInput, BFormTextarea, BRow } from "bootstrap-vue";
+import { computed } from "vue";
+
+interface Props {
+    id?: string;
+    cls?: string;
+    type?: string;
+    color?: string;
+    area?: boolean;
+    multiple?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    value?: string | string[];
+    datalist?: { value: string; label: string }[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    id: "",
+    cls: "",
+    type: "text",
+    color: "",
+    area: false,
+    multiple: false,
+    readonly: false,
+    placeholder: "",
+    value: "",
+    datalist: () => [],
+});
+
+const emit = defineEmits<{
+    (e: "input", value: string): void;
+}>();
+
+const acceptedTypes = computed(() => {
+    return ["text", "password"].includes(props.type) ? props.type : "text";
+});
+const inputArea = computed(() => {
+    return props.area || props.multiple;
+});
+const style = computed(() => {
+    return props.color
+        ? {
+              color: props.color,
+              "border-color": props.color,
+          }
+        : null;
+});
+const currentValue = computed({
+    get() {
+        const v = props.value ?? "";
+
+        if (Array.isArray(v)) {
+            if (v.length === 0) {
+                return "";
+            }
+
+            return props.multiple && Array.isArray(props.value)
+                ? props.value.reduce((str_value: string, v: string) => str_value + String(v) + "\n", "")
+                : String(props.value[0]);
+        }
+
+        return String(v);
+    },
+    set(newVal: string) {
+        if (newVal !== props.value) {
+            emit("input", newVal);
+        }
+    },
+});
+</script>
+
 <template>
-    <b-row align-v="center">
-        <b-col>
-            <b-form-textarea
+    <BRow align-v="center">
+        <BCol>
+            <BFormTextarea
                 v-if="inputArea"
                 :id="id"
                 v-model="currentValue"
@@ -9,7 +81,7 @@
                 :readonly="readonly"
                 :placeholder="placeholder"
                 :style="style" />
-            <b-form-input
+            <BFormInput
                 v-else
                 :id="id"
                 v-model="currentValue"
@@ -19,98 +91,14 @@
                 :style="style"
                 :type="acceptedTypes"
                 :list="`${id}-datalist`" />
+
             <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">
                 <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value" />
             </datalist>
-        </b-col>
-    </b-row>
+        </BCol>
+    </BRow>
 </template>
 
-<script>
-export default {
-    props: {
-        value: {
-            // String; Array for multiple
-            default: "",
-        },
-        id: {
-            type: String,
-            default: "",
-        },
-        type: {
-            type: String,
-            default: "text",
-        },
-        area: {
-            // <textarea> instead of <input> element
-            type: Boolean,
-            default: false,
-        },
-        multiple: {
-            // Allow multiple entries to be created
-            type: Boolean,
-            default: false,
-        },
-        readonly: {
-            type: Boolean,
-            default: false,
-        },
-        placeholder: {
-            type: String,
-            default: "",
-        },
-        color: {
-            type: String,
-            default: null,
-        },
-        cls: {
-            // Refers to an optional custom css class name
-            type: String,
-            default: null,
-        },
-        datalist: {
-            // Display list of suggestions in autocomplete dialog
-            type: Array,
-            default: null,
-        },
-    },
-    computed: {
-        acceptedTypes() {
-            return ["text", "password"].includes(this.type) ? this.type : "text";
-        },
-        currentValue: {
-            get() {
-                const v = this.value ?? "";
-                if (Array.isArray(v)) {
-                    if (v.length === 0) {
-                        return "";
-                    }
-                    return this.multiple
-                        ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
-                        : String(this.value[0]);
-                }
-                return String(v);
-            },
-            set(newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.$emit("input", newVal);
-                }
-            },
-        },
-        inputArea() {
-            return this.area || this.multiple;
-        },
-        style() {
-            return this.color
-                ? {
-                      color: this.color,
-                      "border-color": this.color,
-                  }
-                : null;
-        },
-    },
-};
-</script>
 <style scoped>
 .ui-input-linked {
     border-left-width: 0.5rem;

From e850518a8b9a297383ce4269ddda7657cc18744c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:31:28 +0200
Subject: [PATCH 19/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Text`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{FormText.test.js => FormText.test.ts}    | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)
 rename client/src/components/Form/Elements/{FormText.test.js => FormText.test.ts} (86%)

diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.ts
similarity index 86%
rename from client/src/components/Form/Elements/FormText.test.js
rename to client/src/components/Form/Elements/FormText.test.ts
index 9f1d0c6d46a9..1b6568b59d4d 100644
--- a/client/src/components/Form/Elements/FormText.test.js
+++ b/client/src/components/Form/Elements/FormText.test.ts
@@ -1,61 +1,79 @@
+import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
 
-import FormText from "./FormText";
+import FormText from "./FormText.vue";
 
 const localVue = getLocalVue();
 
-describe("FormText", () => {
-    const mountFormText = async (props) =>
-        await mount(FormText, {
-            propsData: props,
-            localVue,
-        });
+async function mountFormText(props: object) {
+    return await mount(FormText as object, {
+        propsData: props,
+        localVue,
+    });
+}
 
+describe("FormText", () => {
     it("should render the appropriate input type", async () => {
         const wrapper = await mountFormText({});
+
         const el = wrapper.find("input[type='text']");
         expect(el.exists()).toBe(true);
+
         await wrapper.setProps({ type: "password" });
+
         const elPassword = wrapper.find("input[type='password']");
         expect(elPassword.exists()).toBe(true);
+
         await wrapper.setProps({ type: "anyothertype" });
+
         const elOtherType = wrapper.find("input[type='text']");
         expect(elOtherType.exists()).toBe(true);
     });
 
     it("should render the appropriate component", async () => {
         const wrapper = await mountFormText({ area: true });
+
         const el = wrapper.find("textarea");
         expect(el.exists()).toBe(true);
+
         await wrapper.setProps({ area: false, multiple: true });
+
         const elMultiple = wrapper.find("textarea");
         expect(elMultiple.exists()).toBe(true);
     });
 
     it("should be able to render a datalist", async () => {
         const wrapper = await mountFormText({ id: "text-input", datalist: ["one", "two", "three"] });
+
         let el = wrapper.find("datalist");
         expect(el.exists()).toBe(true);
+
         el = wrapper.find("option");
         expect(el.exists()).toBe(true);
+
         el = wrapper.find("[list='text-input-datalist']");
         expect(el.exists()).toBe(true);
     });
 
     it("should be able to render border and text color from props", async () => {
         const wrapper = await mountFormText({});
+
         const el = wrapper.find("input");
-        expect(el.element.style).toMatchObject({});
+        expect((el.element as HTMLInputElement).style).toMatchObject({});
+
         await wrapper.setProps({ color: "green" });
-        expect(el.element.style).toMatchObject({ color: "green", "border-color": "green" });
+
+        expect((el.element as HTMLInputElement).style).toMatchObject({ color: "green", "border-color": "green" });
+
         await wrapper.setProps({ cls: "my-custom-class" });
+
         expect(el.element.classList).toContain("my-custom-class");
     });
 
     it("should be able to accept a default value", async () => {
         const v = "something";
         const wrapper = await mountFormText({ value: v });
+
         const el = wrapper.find("input");
         expect(el.props("value")).toEqual(v);
     });
@@ -63,9 +81,12 @@ describe("FormText", () => {
     it("should be able to accept an array as value", async () => {
         const v = ["field_1", "field_2", "field_3"];
         const wrapper = await mountFormText({ value: v });
+
         const el = wrapper.find("input");
         expect(el.props("value")).toEqual("field_1");
+
         await wrapper.setProps({ multiple: true });
+
         const elMultiple = wrapper.find("textarea");
         expect(elMultiple.props("value")).toEqual("field_1\nfield_2\nfield_3\n");
     });
@@ -73,6 +94,7 @@ describe("FormText", () => {
     it("should be able to accept an empty array as value", async () => {
         const v = [];
         const wrapper = await mountFormText({ value: v });
+
         const el = wrapper.find("input");
         expect(el.props("value")).toEqual("");
     });

From 425396e1a516945418f0d42a3a9da364adec29fa Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:32:01 +0200
Subject: [PATCH 20/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Upload`=20to=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormUpload.vue   | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/Elements/FormUpload.vue b/client/src/components/Form/Elements/FormUpload.vue
index 4d6bc46968a7..59b60391fd74 100644
--- a/client/src/components/Form/Elements/FormUpload.vue
+++ b/client/src/components/Form/Elements/FormUpload.vue
@@ -1,17 +1,25 @@
-<script setup>
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BFormFile } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-const props = defineProps({
-    value: {
-        required: true,
-    },
-});
+library.add(faSpinner);
+
+interface Props {
+    value: string | ArrayBuffer | unknown;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "input", value: string | ArrayBuffer | unknown): void;
+}>();
+
 const file = ref(null);
 const waiting = ref(false);
 
-const emit = defineEmits(["input"]);
-
 const currentValue = computed({
     get() {
         return props.value;
@@ -23,12 +31,15 @@ const currentValue = computed({
 
 function readFile() {
     var reader = new FileReader();
+
     if (file.value) {
         waiting.value = true;
+
         reader.onload = () => {
-            currentValue.value = reader.result;
+            currentValue.value = reader.result ?? "";
             waiting.value = false;
         };
+
         reader.readAsText(file.value);
     }
 }
@@ -36,11 +47,13 @@ function readFile() {
 
 <template>
     <div>
-        <b-form-file v-model="file" class="mb-1" @input="readFile" />
+        <BFormFile v-model="file" class="mb-1" @input="readFile" />
+
         <div v-if="waiting">
-            <FontAwesomeIcon icon="spinner" spin />
+            <FontAwesomeIcon :icon="faSpinner" spin />
             Uploading File...
         </div>
+
         <textarea v-show="currentValue" v-model="currentValue" class="ui-textarea" disabled />
     </div>
 </template>

From 6d13116ac17b50f7acc1139f482e6604139771a7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 8 Apr 2024 23:32:25 +0200
Subject: [PATCH 21/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Upload`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{FormUpload.test.js => FormUpload.test.ts} | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)
 rename client/src/components/Form/Elements/{FormUpload.test.js => FormUpload.test.ts} (65%)

diff --git a/client/src/components/Form/Elements/FormUpload.test.js b/client/src/components/Form/Elements/FormUpload.test.ts
similarity index 65%
rename from client/src/components/Form/Elements/FormUpload.test.js
rename to client/src/components/Form/Elements/FormUpload.test.ts
index dd22ccb2e4b8..6c9b6959bc21 100644
--- a/client/src/components/Form/Elements/FormUpload.test.js
+++ b/client/src/components/Form/Elements/FormUpload.test.ts
@@ -1,30 +1,34 @@
+import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
 
-import FormUpload from "./FormUpload";
+import FormUpload from "./FormUpload.vue";
 
 const localVue = getLocalVue();
 
 describe("FormUpload", () => {
-    const mountFormUpload = (props) =>
-        mount(FormUpload, {
+    const mountFormUpload = (props: { value: string }) =>
+        mount(FormUpload as object, {
             propsData: props,
             localVue,
         });
 
     it("should display selected file in disabled textarea", async () => {
         const v = "H1, H2, H3\nv1, v2, v3";
+
         const wrapper = mountFormUpload({ value: v });
+
         const el = wrapper.find("textarea");
-        expect(el.element.value).toEqual(v);
-        expect(el.element.disabled).toBe(true);
+        expect((el.element as HTMLInputElement).value).toEqual(v);
+        expect((el.element as HTMLInputElement).disabled).toBe(true);
     });
 
     it("should not display text box if file has not been selected", async () => {
-        const wrapper = mountFormUpload({ value: null });
+        const wrapper = mountFormUpload({ value: "" });
+
         const el = wrapper.find("textarea");
         expect(el.isVisible()).toBe(false);
         expect(el.text()).toBe("");
+
         const noInput = wrapper.find("label");
         expect(noInput.text()).toBe("No file chosen");
     });

From 185d42aee8f5f9b6c7eed2ebcfb4113668cd77c4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 9 Apr 2024 14:53:43 +0200
Subject: [PATCH 22/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20fix=20import=20c?=
 =?UTF-8?q?omponent=20`FormDrilldown`=20in=20`FormElement`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/FormElement.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 05e7a799251f..0893b58cdb5d 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -9,12 +9,12 @@ import { computed, ref, useAttrs } from "vue";
 
 import type { FormParameterAttributes, FormParameterTypes, FormParameterValue } from "./parameterTypes";
 
-import FormDrilldown from "./Element@/components/Form/FormDrilldown/FormDrilldown.vue";
 import FormBoolean from "@/components/Form/Elements/FormBoolean.vue";
 import FormColor from "@/components/Form/Elements/FormColor.vue";
 import FormData from "@/components/Form/Elements/FormData/FormData.vue";
 import FormDataDialog from "@/components/Form/Elements/FormDataDialog.vue";
 import FormDirectory from "@/components/Form/Elements/FormDirectory.vue";
+import FormDrilldown from "@/components/Form/Elements/FormDrilldown/FormDrilldown.vue";
 import FormHidden from "@/components/Form/Elements/FormHidden.vue";
 import FormInput from "@/components/Form/Elements/FormInput.vue";
 import FormNumber from "@/components/Form/Elements/FormNumber.vue";

From b2906ff353afbd1939c8753898d73f2bafe541f8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 9 Apr 2024 14:54:08 +0200
Subject: [PATCH 23/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20update=20`FormUp?=
 =?UTF-8?q?load`=20prop=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormUpload.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormUpload.vue b/client/src/components/Form/Elements/FormUpload.vue
index 59b60391fd74..b07d25f2d92c 100644
--- a/client/src/components/Form/Elements/FormUpload.vue
+++ b/client/src/components/Form/Elements/FormUpload.vue
@@ -8,13 +8,13 @@ import { computed, ref } from "vue";
 library.add(faSpinner);
 
 interface Props {
-    value: string | ArrayBuffer | unknown;
+    value: string | string[] | number;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "input", value: string | ArrayBuffer | unknown): void;
+    (e: "input", value: string | string[] | number): void;
 }>();
 
 const file = ref(null);
@@ -36,7 +36,7 @@ function readFile() {
         waiting.value = true;
 
         reader.onload = () => {
-            currentValue.value = reader.result ?? "";
+            currentValue.value = reader.result as string;
             waiting.value = false;
         };
 

From 4444068e2c23e223d3f6b67524d2104765cdc0cc Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 10 Apr 2024 15:23:08 +0200
Subject: [PATCH 24/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20import=20missing?=
 =?UTF-8?q?=20bootstrap=20components=20in=20`FormBoolean`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormBoolean.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Form/Elements/FormBoolean.vue b/client/src/components/Form/Elements/FormBoolean.vue
index c2a30124d2fe..cf4107ffa2cb 100644
--- a/client/src/components/Form/Elements/FormBoolean.vue
+++ b/client/src/components/Form/Elements/FormBoolean.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { BFormCheckbox } from "bootstrap-vue";
 import { computed } from "vue";
 
-export interface FormBooleanProps {
-    value: boolean | string;
+export interface Props {
+    value: boolean | "true" | "false";
 }
 
-const props = defineProps<FormBooleanProps>();
+const props = defineProps<Props>();
+
 const emit = defineEmits<{
     (e: "input", value: boolean): void;
 }>();
@@ -23,7 +25,7 @@ const label = computed(() => (currentValue.value ? "Yes" : "No"));
 </script>
 
 <template>
-    <b-form-checkbox v-model="currentValue" class="no-highlight" switch>
+    <BFormCheckbox v-model="currentValue" class="no-highlight" switch>
         {{ label }}
-    </b-form-checkbox>
+    </BFormCheckbox>
 </template>

From 2d0ad9238e1d22f253f2a7d27f6f76750bcde4cb Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 10 Apr 2024 17:06:13 +0200
Subject: [PATCH 25/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Boolean`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormBoolean.test.js         | 35 -----------------
 .../Form/Elements/FormBoolean.test.ts         | 38 +++++++++++++++++++
 2 files changed, 38 insertions(+), 35 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormBoolean.test.js
 create mode 100644 client/src/components/Form/Elements/FormBoolean.test.ts

diff --git a/client/src/components/Form/Elements/FormBoolean.test.js b/client/src/components/Form/Elements/FormBoolean.test.js
deleted file mode 100644
index 377c3423e017..000000000000
--- a/client/src/components/Form/Elements/FormBoolean.test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import FormBoolean from "./FormBoolean";
-
-const localVue = getLocalVue();
-
-describe("FormBoolean", () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(FormBoolean, {
-            propsData: {
-                value: false,
-            },
-            localVue,
-        });
-    });
-
-    it("check initial value and value change", async () => {
-        const input = wrapper.find("input");
-        const switchComponent = wrapper.findComponent(".custom-switch");
-        expect(switchComponent.props().value).toBe(false);
-        await wrapper.setProps({ value: "true" });
-        expect(wrapper.emitted().input[0][0]).toBe(true);
-        await wrapper.setProps({ value: "false" });
-        expect(wrapper.emitted().input[1][0]).toBe(false);
-        await wrapper.setProps({ value: true });
-        expect(wrapper.emitted().input[2][0]).toBe(true);
-        await input.setChecked(false);
-        expect(wrapper.emitted().input[3][0]).toBe(false);
-        await input.setChecked(true);
-        expect(wrapper.emitted().input[4][0]).toBe(true);
-    });
-});
diff --git a/client/src/components/Form/Elements/FormBoolean.test.ts b/client/src/components/Form/Elements/FormBoolean.test.ts
new file mode 100644
index 000000000000..f9bebff341fa
--- /dev/null
+++ b/client/src/components/Form/Elements/FormBoolean.test.ts
@@ -0,0 +1,38 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
+
+import FormBoolean from "./FormBoolean.vue";
+
+const localVue = getLocalVue();
+
+describe("FormBoolean", () => {
+    let wrapper: Wrapper<Vue>;
+
+    beforeEach(() => {
+        wrapper = mount(FormBoolean as object, {
+            propsData: {
+                value: false,
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        const input = wrapper.find("input");
+
+        await wrapper.setProps({ value: "true" });
+        expect(wrapper.emitted()?.input?.[0]?.[0]).toBe(true);
+
+        await wrapper.setProps({ value: "false" });
+        expect(wrapper.emitted()?.input?.[1]?.[0]).toBe(false);
+
+        await wrapper.setProps({ value: true });
+        expect(wrapper.emitted()?.input?.[2]?.[0]).toBe(true);
+
+        await input.setChecked(false);
+        expect(wrapper.emitted()?.input?.[3]?.[0]).toBe(false);
+
+        await input.setChecked(true);
+        expect(wrapper.emitted()?.input?.[4]?.[0]).toBe(true);
+    });
+});

From f788b8766524e261a2a0b75c64f67ff0a8fc53b0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 10 Apr 2024 18:22:49 +0200
Subject: [PATCH 26/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20import=20missing?=
 =?UTF-8?q?=20bootstrap=20components=20in=20`FormColor`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormColor.vue    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormColor.vue b/client/src/components/Form/Elements/FormColor.vue
index 6bb30b94245c..132d078cbb03 100644
--- a/client/src/components/Form/Elements/FormColor.vue
+++ b/client/src/components/Form/Elements/FormColor.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import { BCol, BFormInput, BRow } from "bootstrap-vue";
 import { computed } from "vue";
 
-export interface FormColorProps {
-    value?: string;
+export interface Props {
     id: string;
+    value?: string;
 }
 
-const props = withDefaults(defineProps<FormColorProps>(), {
+const props = withDefaults(defineProps<Props>(), {
     value: "",
 });
 
@@ -25,14 +26,15 @@ const currentValue = computed({
 </script>
 
 <template>
-    <b-row>
-        <b-col class="form-color-input">
-            <b-form-input :id="id" v-model="currentValue" class="cursor-pointer" type="color" size="sm" />
-        </b-col>
-        <b-col class="pl-0">
+    <BRow>
+        <BCol class="form-color-input">
+            <BFormInput :id="id" v-model="currentValue" class="cursor-pointer" type="color" size="sm" />
+        </BCol>
+
+        <BCol class="pl-0">
             <label class="pt-1 cursor-pointer" :for="id">Select a color</label>
-        </b-col>
-    </b-row>
+        </BCol>
+    </BRow>
 </template>
 
 <style scoped>

From 4db89aaf43b6fa0503bf1b08880e0ef46556d09b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 11 Apr 2024 15:37:32 +0200
Subject: [PATCH 27/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20update=20`FormCh?=
 =?UTF-8?q?eck`=20component=20to=20use=20generic=20type=20for=20value=20an?=
 =?UTF-8?q?d=20import=20missing=20bootstrap=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormCheck.vue    | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Elements/FormCheck.vue b/client/src/components/Form/Elements/FormCheck.vue
index 879b4411dd2a..e696d71b8021 100644
--- a/client/src/components/Form/Elements/FormCheck.vue
+++ b/client/src/components/Form/Elements/FormCheck.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
+import { BAlert, BFormCheckbox, BFormCheckboxGroup } from "bootstrap-vue";
 import { computed } from "vue";
 
+type Value = string | number | boolean;
+
 interface CheckOption {
     label: string;
-    value: string;
+    value: Value;
 }
 
-export interface FormCheckProps {
-    value?: string | string[];
-    options: Array<CheckOption>;
+export interface Props {
+    options: CheckOption[];
+    value?: Value | Value[];
 }
 
-const props = defineProps<FormCheckProps>();
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "input", value: string[] | null): void;
+    (e: "input", value: Value | Value[] | null): void;
 }>();
 
 const currentValue = computed({
     get: () => {
         const val = props.value ?? [];
+
         return Array.isArray(val) ? val : [val];
     },
     set: (newValue) => {
@@ -32,12 +36,13 @@ const currentValue = computed({
 });
 
 const hasOptions = computed(() => props.options.length > 0);
-const indeterminate = computed(() => ![0, props.options.length].includes(currentValue.value.length));
 const selectAll = computed(() => currentValue.value.length === props.options.length);
+const indeterminate = computed(() => ![0, props.options.length].includes(currentValue.value.length));
 
-function onSelectAll(selected: boolean): void {
+function onSelectAll(selected: boolean) {
     if (selected) {
         const allValues = props.options.map((option) => option.value);
+
         emit("input", allValues);
     } else {
         emit("input", null);
@@ -47,19 +52,20 @@ function onSelectAll(selected: boolean): void {
 
 <template>
     <div v-if="hasOptions">
-        <b-form-checkbox
+        <BFormCheckbox
             v-localize
             class="mb-1"
             :checked="selectAll"
             :indeterminate="indeterminate"
             @change="onSelectAll">
             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.value">
+        </BFormCheckbox>
+
+        <BFormCheckboxGroup v-model="currentValue" stacked class="pl-3">
+            <BFormCheckbox v-for="(option, index) in options" :key="index" :value="option.value">
                 {{ option.label }}
-            </b-form-checkbox>
-        </b-form-checkbox-group>
+            </BFormCheckbox>
+        </BFormCheckboxGroup>
     </div>
-    <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
+    <BAlert v-else v-localize variant="warning" show> No options available. </BAlert>
 </template>

From 8004400a49cfce177517d0192092c479440129e4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 11 Apr 2024 15:38:02 +0200
Subject: [PATCH 28/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Form?=
 =?UTF-8?q?Check`=20test=20to=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{FormCheck.test.js => FormCheck.test.ts}  | 78 ++++++++++++++-----
 1 file changed, 57 insertions(+), 21 deletions(-)
 rename client/src/components/Form/Elements/{FormCheck.test.js => FormCheck.test.ts} (67%)

diff --git a/client/src/components/Form/Elements/FormCheck.test.js b/client/src/components/Form/Elements/FormCheck.test.ts
similarity index 67%
rename from client/src/components/Form/Elements/FormCheck.test.js
rename to client/src/components/Form/Elements/FormCheck.test.ts
index 99a83267b89d..4b9b9d7b3706 100644
--- a/client/src/components/Form/Elements/FormCheck.test.js
+++ b/client/src/components/Form/Elements/FormCheck.test.ts
@@ -1,17 +1,18 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
+import flushPromises from "flush-promises";
 
-import MountTarget from "./FormCheck";
+import MountTarget from "./FormCheck.vue";
 
 const localVue = getLocalVue(true);
 
 describe("FormCheck", () => {
-    let wrapper;
+    let wrapper: Wrapper<Vue>;
 
     beforeEach(() => {
-        wrapper = mount(MountTarget, {
+        wrapper = mount(MountTarget as object, {
             propsData: {
-                value: null,
+                value: [],
                 options: [],
             },
             localVue,
@@ -20,83 +21,118 @@ describe("FormCheck", () => {
 
     it("Confirm 'n + 1' checkboxes created (eg. includes the Select-All). Confirm labels and values match. Confirm correct values emitted.", async () => {
         const noInput = wrapper.find("[type='checkbox']");
+
         expect(noInput.exists()).toBe(false);
+
         const n = 3;
         const options = [];
+
         for (let i = 0; i < n; i++) {
             options.push({ label: `label_${i}`, value: `value_${i}` });
         }
+
         await wrapper.setProps({ options });
+
         const inputs = wrapper.findAll("[type='checkbox']");
         const labels = wrapper.findAll(".custom-control-label");
         expect(inputs.length).toBe(n + 1);
-        let expectedValues = [];
+        expect(labels.length).toBe(n + 1);
+
+        let expectedValues: string[] | undefined | null = [];
+
         for (let i = 0; i < n; i++) {
             await inputs.at(i + 1).setChecked();
+
             expect(labels.at(i + 1).text()).toBe(`label_${i}`);
             expect(inputs.at(i + 1).attributes("value")).toBe(`value_${i}`);
+
             expectedValues.push(`value_${i}`);
-            expect(wrapper.emitted()["input"][i][0]).toEqual(expectedValues);
+
+            await flushPromises();
+
+            expect(wrapper.emitted()).toHaveProperty("input");
+            expect(wrapper.emitted()["input"]?.[i]?.[0]).toEqual(expectedValues);
         }
+
         for (let i = 0; i < n; i++) {
             await inputs.at(i + 1).setChecked(false);
-            expectedValues = expectedValues.slice(1);
-            if (expectedValues.length === 0) {
+
+            expectedValues = expectedValues?.slice(1);
+
+            if (expectedValues?.length === 0) {
                 expectedValues = null;
             }
-            expect(wrapper.emitted().input[i + 3][0]).toEqual(expectedValues);
+
+            expect(wrapper.emitted().input?.[i + 3]?.[0]).toEqual(expectedValues);
         }
     });
 
     it("Confirm checkboxes are created when various 'empty values' are passed.", async () => {
         const emptyValues = [0, null, false, true, undefined];
         const options = [];
+
         for (let i = 0; i < emptyValues.length; i++) {
             options.push({ label: `label_${i}`, value: emptyValues[i] });
         }
+
         await wrapper.setProps({ options });
+
         const inputs = wrapper.findAll("[type='checkbox']");
         expect(inputs.length).toBe(emptyValues.length + 1);
+
         const expectedValues = [];
-        for (let i = 0; i < emptyValues; i++) {
+
+        for (let i = 0; i < emptyValues.length; i++) {
             await inputs.at(i + 1).setChecked();
+
             expect(inputs.at(i + 1).attributes("value")).toBe(emptyValues[i]);
-            expectedValues.push(expectedValues[i]);
-            expect(wrapper.emitted()["input"][i][0]).toEqual(expectedValues);
+            expectedValues.push(emptyValues[i]);
+            expect(wrapper.emitted()?.["input"]?.[i]?.[0]).toEqual(expectedValues);
         }
     });
 
     it("Confirm Select-All checkbox works in various states: select-all, unselect-all, indeterminate/partial-list-selection.", async () => {
         const n = 3;
         const options = [];
+
         for (let i = 0; i < n; i++) {
             options.push({ label: `label_${i}`, value: `value_${i}` });
         }
+
         await wrapper.setProps({ options });
+
         const inputs = wrapper.findAll("[type='checkbox']");
+
         /* confirm number of checkboxes requested matches number checkboxes created */
         expect(inputs.length).toBe(n + 1);
+
         /* confirm component loads unchecked */
         for (let i = 0; i < n + 1; i++) {
-            expect(inputs.at(i).element.checked).toBeFalsy();
+            expect((inputs.at(i).element as HTMLInputElement).checked).toBeFalsy();
         }
+
         /* 1 - confirm select-all option checked */
         await inputs.at(0).setChecked();
-        expect(inputs.at(0).element.checked).toBeTruthy();
+        expect((inputs.at(0).element as HTMLInputElement).checked).toBeTruthy();
+
         /* ...confirm corresponding options checked */
         const values = options.map((option) => option.value);
-        expect(wrapper.emitted()["input"][0][0]).toStrictEqual(values);
+        expect(wrapper.emitted()?.["input"]?.[0]?.[0]).toStrictEqual(values);
+
         /* 2 - confirm select-all option UNchecked */
         await inputs.at(0).setChecked(false);
-        expect(inputs.at(0).element.checked).toBeFalsy();
+        expect((inputs.at(0).element as HTMLInputElement).checked).toBeFalsy();
+
         /* ...confirm corresponding options UNchecked */
         for (let i = 0; i < n; i++) {
-            expect(inputs.at(i + 1).element.checked).toBeFalsy();
+            expect((inputs.at(i + 1).element as HTMLInputElement).checked).toBeFalsy();
         }
+
         /* 3 - confirm corresponding options indeterminate-state */
         await inputs.at(1).setChecked(true);
-        expect(wrapper.emitted().input[2][0]).toStrictEqual(["value_0"]);
+        expect(wrapper.emitted()?.input?.[2]?.[0]).toStrictEqual(["value_0"]);
+
         await wrapper.setProps({ value: ["value_0"] });
-        expect(inputs.at(0).element.indeterminate).toBe(true);
+        expect((inputs.at(0).element as HTMLInputElement).indeterminate).toBe(true);
     });
 });

From 71751db77a798b1eb9e51d49d2686ab50ddbedb8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 11 Apr 2024 15:58:27 +0200
Subject: [PATCH 29/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20import=20missing?=
 =?UTF-8?q?=20bootstrap=20components=20in=20`FormDataDialog`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormDataDialog.vue          | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDataDialog.vue b/client/src/components/Form/Elements/FormDataDialog.vue
index f7db0dfeaae4..1b8fdf2928fb 100644
--- a/client/src/components/Form/Elements/FormDataDialog.vue
+++ b/client/src/components/Form/Elements/FormDataDialog.vue
@@ -2,6 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BInputGroup } from "bootstrap-vue";
 import { ref, watch } from "vue";
 
 import { getCurrentGalaxyHistory } from "@/utils/data";
@@ -10,21 +11,29 @@ import DataDialog from "@/components/DataDialog/DataDialog.vue";
 
 library.add(faFolderOpen);
 
-interface DataDialogProps {
+type Value = string | string[];
+
+interface Props {
     id: string;
     multiple?: boolean;
-    value?: Array<string> | string;
+    value?: Value;
 }
 
-const props = withDefaults(defineProps<DataDialogProps>(), {
-    multiple: false,
-    value: "",
-});
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "input", value: Value): void;
+}>();
 
-const title = "Browse Datasets";
 const localHistoryId = ref("");
 const dataDialogOpen = ref(false);
 
+function onData(result: string[] | string) {
+    dataDialogOpen.value = false;
+
+    emit("input", result);
+}
+
 watch(
     () => dataDialogOpen.value,
     async () => {
@@ -32,25 +41,18 @@ watch(
         localHistoryId.value = await getCurrentGalaxyHistory();
     }
 );
-
-const emit = defineEmits<{
-    (e: "input", value: Array<string> | string): void;
-}>();
-
-function onData(result: Array<string> | string) {
-    dataDialogOpen.value = false;
-    emit("input", result);
-}
 </script>
 
 <template>
     <div class="d-flex">
-        <b-input-group>
+        <BInputGroup>
             <button @click="dataDialogOpen = true">
-                <FontAwesomeIcon icon="folder-open" :title="title" />
+                <FontAwesomeIcon :icon="faFolderOpen" title="Browse Datasets" />
             </button>
+
             <input :value="props.value" readonly class="float-left" />
-        </b-input-group>
+        </BInputGroup>
+
         <DataDialog
             v-if="dataDialogOpen"
             :history="localHistoryId"

From c5316e77201f80c462c13b55c0ec007b627f3e43 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 11 Apr 2024 16:40:58 +0200
Subject: [PATCH 30/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20update=20`FormIn?=
 =?UTF-8?q?put`=20value=20prop=20type=20to=20accept=20string=20or=20number?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormInput.vue b/client/src/components/Form/Elements/FormInput.vue
index 7b95af35fe3e..4fd5e93d484a 100644
--- a/client/src/components/Form/Elements/FormInput.vue
+++ b/client/src/components/Form/Elements/FormInput.vue
@@ -3,14 +3,14 @@ import { computed } from "vue";
 
 interface Props {
     id: string;
-    value?: string;
     area?: boolean;
+    value?: string | number;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "input", value: string | undefined): void;
+    (e: "input", value: string | number | undefined): void;
 }>();
 
 const currentValue = computed({

From a3bdad030d44cfd330ad2c700341b1d0a3dc6fd5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 11 Apr 2024 16:44:22 +0200
Subject: [PATCH 31/36] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20fix=20`FormNumber`?=
 =?UTF-8?q?=20test=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormNumber.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormNumber.test.ts b/client/src/components/Form/Elements/FormNumber.test.ts
index d1c706e93429..7cf1a74fa0bf 100644
--- a/client/src/components/Form/Elements/FormNumber.test.ts
+++ b/client/src/components/Form/Elements/FormNumber.test.ts
@@ -118,12 +118,12 @@ describe("FormInput", () => {
     });
 
     it("should calculate the right step for floats", async () => {
-        async function expectStep(value: number | string | undefined, expectedStep: number) {
-            const props = { value: value, type: "float", min: 0, max: 1 };
+        async function expectStep(value: number | string | undefined, expectedStep?: number) {
+            const props = { value: Number(value), type: "float", min: 0, max: 1 };
             const wrapper = await mountFormNumber(props);
 
             const input = getInput(wrapper);
-            expect(input.attributes("step")).toBe(expectedStep.toString());
+            expect(input.attributes("step")).toBe(expectedStep?.toString());
         }
 
         //minimum step 0.1 - maximum step 0.001
@@ -139,7 +139,7 @@ describe("FormInput", () => {
         ];
 
         for (let index = 0; index < testValues.length; index++) {
-            expectStep(testValues[index]?.value, testValues[index].step);
+            expectStep(testValues[index]?.value, testValues[index]?.step);
         }
     });
 });

From 9e285ed8ead9995dd5e24af35f18204d687a4395 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 11 Apr 2024 16:53:54 +0200
Subject: [PATCH 32/36] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20fix=20`FormOptional?=
 =?UTF-8?q?Text`=20test=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormOptionalText.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.test.ts b/client/src/components/Form/Elements/FormOptionalText.test.ts
index 2bf20929c7b7..2bbc4976f010 100644
--- a/client/src/components/Form/Elements/FormOptionalText.test.ts
+++ b/client/src/components/Form/Elements/FormOptionalText.test.ts
@@ -25,7 +25,7 @@ describe("FormOptionalText", () => {
 
         await el.setChecked(false);
 
-        expect(wrapper.emitted().input?.[0]?.[0]).toEqual(null);
+        expect(wrapper.emitted().input?.[0]?.[0]).toEqual("");
 
         await el.setChecked(true);
 

From e84658be4fb6de4d0f207afec1f20f407992e48b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 16 Apr 2024 14:44:13 +0200
Subject: [PATCH 33/36] =?UTF-8?q?=F0=9F=90=9B:=20fix=20`FormText`=20test?=
 =?UTF-8?q?=20type=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormText.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormText.test.ts b/client/src/components/Form/Elements/FormText.test.ts
index 1b6568b59d4d..03754b7296ef 100644
--- a/client/src/components/Form/Elements/FormText.test.ts
+++ b/client/src/components/Form/Elements/FormText.test.ts
@@ -92,7 +92,7 @@ describe("FormText", () => {
     });
 
     it("should be able to accept an empty array as value", async () => {
-        const v = [];
+        const v: string[] = [];
         const wrapper = await mountFormText({ value: v });
 
         const el = wrapper.find("input");

From 1bf0113195afb4eb55c547326dbee792b653a594 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 19 Apr 2024 13:08:23 +0200
Subject: [PATCH 34/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20rename=20`FormSe?=
 =?UTF-8?q?lect.test`=20to=20`FormSelection.test`=20and=20update=20default?=
 =?UTF-8?q?Options=20usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...rmSelect.test.ts => FormSelection.test.ts} | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)
 rename client/src/components/Form/Elements/{FormSelect.test.ts => FormSelection.test.ts} (62%)

diff --git a/client/src/components/Form/Elements/FormSelect.test.ts b/client/src/components/Form/Elements/FormSelection.test.ts
similarity index 62%
rename from client/src/components/Form/Elements/FormSelect.test.ts
rename to client/src/components/Form/Elements/FormSelection.test.ts
index 3a94312ba817..d96eb03374f1 100644
--- a/client/src/components/Form/Elements/FormSelect.test.ts
+++ b/client/src/components/Form/Elements/FormSelection.test.ts
@@ -16,11 +16,11 @@ async function mountFormSelection(propsData: object) {
     });
 }
 
-const defaultOptions = [
-    ["label_1", "value_1"],
-    ["label_2", "value_2"],
-    ["label_3", ""],
-    ["label_4", 99],
+const defaultOptions: [string, string | number][] = [
+    ["label_1", ""],
+    ["label_2", 99],
+    ["label_3", "value_1"],
+    ["label_4", "value_2"],
 ];
 
 function testDefaultOptions(wrapper: Wrapper<Vue>) {
@@ -34,7 +34,7 @@ function testDefaultOptions(wrapper: Wrapper<Vue>) {
     }
 }
 
-describe("FormSelect", () => {
+describe("FormSelection", () => {
     it("basics", async () => {
         const wrapper = await mountFormSelection({
             options: defaultOptions,
@@ -42,14 +42,17 @@ describe("FormSelect", () => {
 
         testDefaultOptions(wrapper);
 
-        const noValue = wrapper.find(".multiselect__option--selected");
-        expect(noValue.exists()).toBe(false);
-        expect(wrapper.emitted().input?.[0]?.[0]).toBe("value_1");
+        const defaultSelected = wrapper.find(".multiselect__option--selected");
+        expect(defaultSelected.exists()).toBe(false);
 
-        await wrapper.setProps({ value: "value_1" });
+        expect(wrapper.emitted()?.input?.[0]?.[0]).toBe(defaultOptions?.[0]?.[1]);
 
-        const selectedValue = wrapper.find(".multiselect__option--selected");
-        expect(selectedValue.text()).toBe("label_1");
+        for (const option of defaultOptions) {
+            await wrapper.setProps({ value: option[1] });
+
+            const selectedValue = wrapper.find(".multiselect__option--selected");
+            expect(selectedValue.text()).toBe(option[0]);
+        }
     });
 
     it("optional values", async () => {
@@ -67,17 +70,17 @@ describe("FormSelect", () => {
         const selectedDefault = wrapper.find(".multiselect__option--selected");
         expect(selectedDefault.text()).toBe("Nothing selected");
 
-        await wrapper.setProps({ value: "value_1" });
+        await wrapper.setProps({ value: defaultOptions?.[2]?.[1] });
 
         const selectedValue = wrapper.find(".multiselect__option--selected");
-        expect(selectedValue.text()).toBe("label_1");
+        expect(selectedValue.text()).toBe(defaultOptions?.[2]?.[0]);
 
         options.at(0).trigger("click");
 
-        const nullValue = wrapper.emitted().input?.[0]?.[0];
-        expect(nullValue).toBe(null);
+        const undefinedValue = wrapper.emitted().input?.[0]?.[0];
+        expect(undefinedValue).toBe(undefined);
 
-        await wrapper.setProps({ value: null });
+        await wrapper.setProps({ value: undefined });
 
         const unselectDefault = wrapper.find(".multiselect__option--selected");
         expect(unselectDefault.text()).toBe("Nothing selected");
@@ -95,34 +98,35 @@ describe("FormSelect", () => {
 
         const selectedValue = wrapper.findAll(".multiselect__option--selected");
         expect(selectedValue.length).toBe(3);
-        expect(selectedValue.at(0).text()).toBe("label_1");
-        expect(selectedValue.at(1).text()).toBe("label_3");
-        expect(selectedValue.at(2).text()).toBe("label_4");
+        expect(selectedValue.at(0).text()).toBe(defaultOptions?.[0]?.[0]);
+        expect(selectedValue.at(1).text()).toBe(defaultOptions?.[1]?.[0]);
+        expect(selectedValue.at(2).text()).toBe(defaultOptions?.[2]?.[0]);
 
         selectedValue.at(0).trigger("click");
 
         const newValue = wrapper.emitted().input?.[0]?.[0];
-        expect(newValue).toEqual(["", 99]);
+        expect(newValue).toEqual([defaultOptions?.[1]?.[1], defaultOptions?.[2]?.[1]]);
 
         await wrapper.setProps({ value: newValue });
 
         selectedValue.at(1).trigger("click");
 
         const numericValue = wrapper.emitted().input?.[1]?.[0];
-        expect(numericValue).toEqual([99]);
+        expect(numericValue).toEqual([defaultOptions?.[2]?.[1]]);
 
         await wrapper.setProps({ value: numericValue });
 
         selectedValue.at(2).trigger("click");
 
-        const nullValue = wrapper.emitted().input?.[2]?.[0];
-        expect(nullValue).toBe(null);
+        const undefinedValue = wrapper.emitted().input?.[2]?.[0];
+        expect(undefinedValue).toBeUndefined();
 
-        await wrapper.setProps({ value: nullValue });
+        await wrapper.setProps({ value: undefinedValue });
 
         selectedValue.at(0).trigger("click");
 
         const finalValue = wrapper.emitted().input?.[3]?.[0];
-        expect(finalValue).toEqual(["value_1"]);
+
+        expect(finalValue).toEqual([defaultOptions?.[0]?.[1], defaultOptions?.[1]?.[1]]);
     });
 });

From f7ddf497620a33e58e578b70ca86eaa75032ff34 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 19 Apr 2024 13:09:05 +0200
Subject: [PATCH 35/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20import=20missing?=
 =?UTF-8?q?=20bootstrap=20components=20on=20`FormSelect`and=20update=20typ?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Form/Elements/FormSelect.vue   | 72 +++++++++----------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 3b93539f0de6..84268225d460 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
+import { BAlert } from "bootstrap-vue";
+import { computed, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
@@ -7,43 +8,34 @@ import { uid } from "@/utils/utils";
 
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
-type SelectValue = Record<string, unknown> | string | number | null;
+type SelectValue = Record<string, unknown> | string | number | boolean;
 
 interface SelectOption {
     label: string;
     value: SelectValue;
 }
 
-const props = defineProps({
-    id: { type: String, default: `form-select-${uid()}` },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    multiple: {
-        type: Boolean,
-        default: false,
-    },
-    optional: {
-        type: Boolean,
-        default: false,
-    },
-    options: {
-        type: Array as PropType<Array<SelectOption>>,
-        required: true,
-    },
-    placeholder: {
-        type: String,
-        default: "Select Value",
-    },
-    value: {
-        type: String as PropType<SelectValue | SelectValue[]>,
-        default: null,
-    },
+interface Props {
+    options: SelectOption[];
+    id?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    optional?: boolean;
+    placeholder?: string;
+    value?: SelectValue | SelectValue[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    id: `form-select-${uid()}`,
+    disabled: false,
+    multiple: false,
+    optional: false,
+    placeholder: "Select Value",
+    value: undefined,
 });
 
 const emit = defineEmits<{
-    (e: "input", value: SelectValue | Array<SelectValue>): void;
+    (e: "input", value?: SelectValue | SelectValue[]): void;
 }>();
 
 /**
@@ -73,34 +65,36 @@ const reorderedOptions = computed(() => {
 /**
  * Configure deselect label
  */
-const deselectLabel: ComputedRef<string> = computed(() => {
+const deselectLabel = computed(() => {
     return props.multiple ? "Click to remove" : "";
 });
 
 /**
  * Tracks if the select field has options
  */
-const hasOptions: ComputedRef<Boolean> = computed(() => {
+const hasOptions = computed(() => {
     return props.options.length > 0;
 });
 
 /**
  * Provides initial value if necessary
  */
-const initialValue: ComputedRef<SelectValue> = computed(() => {
-    if (props.value === null && !props.optional && hasOptions.value) {
+const initialValue = computed(() => {
+    if (props.value === undefined && !props.optional && hasOptions.value) {
         const v = props.options[0];
+
         if (v) {
             return v.value;
         }
     }
-    return null;
+
+    return undefined;
 });
 
 /**
  * Configure selected label
  */
-const selectedLabel: ComputedRef<string> = computed(() => {
+const selectedLabel = computed(() => {
     return props.multiple ? "Selected" : "";
 });
 
@@ -114,16 +108,16 @@ const selectedValues = computed(() => (Array.isArray(props.value) ? props.value
  */
 const currentValue = computed({
     get: () => props.options.filter((option: SelectOption) => selectedValues.value.includes(option.value)),
-    set: (val: Array<SelectOption> | SelectOption): void => {
+    set: (val: SelectOption | SelectOption[]) => {
         if (Array.isArray(val)) {
             if (val.length > 0) {
                 const values: Array<SelectValue> = val.map((v: SelectOption) => v.value);
                 emit("input", values);
             } else {
-                emit("input", null);
+                emit("input", undefined);
             }
         } else {
-            emit("input", val ? val.value : null);
+            emit("input", val ? val.value : undefined);
         }
     },
 });
@@ -174,7 +168,7 @@ onMounted(() => {
             @open="onOpen"
             @close="onClose" />
         <slot v-else name="no-options">
-            <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
+            <BAlert v-localize class="w-100" variant="warning" show> No options available. </BAlert>
         </slot>
     </div>
 </template>

From 3f4d02ccff1a06c1cb3e3d40380bda8622dbdd67 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 19 Apr 2024 13:10:50 +0200
Subject: [PATCH 36/36] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20update=20`FormSe?=
 =?UTF-8?q?lection`=20component=20to=20accept=20number=20values=20in=20`va?=
 =?UTF-8?q?lue`=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormSelection.vue           | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index b65fb9ad9096..0fcfb2a99ab8 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -19,22 +19,25 @@ interface Props {
     display?: string;
     optional?: boolean;
     multiple?: boolean;
-    value?: string | string[];
-    options?: [string, string][];
-    data?: { label: string; value: string }[];
+    value?: string | string[] | number | number[];
+    options?: [string, string | number][];
+    data?: {
+        label: string;
+        value: string;
+    }[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    display: "select",
+    display: undefined,
     optional: false,
     multiple: false,
-    value: "",
-    options: () => [],
-    data: () => [],
+    value: undefined,
+    options: undefined,
+    data: undefined,
 });
 
 const emit = defineEmits<{
-    (e: "input", value: string | string[]): void;
+    (e: "input", value: string | string[] | number | number[]): void;
 }>();
 
 const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
@@ -55,7 +58,7 @@ const currentOptions = computed(() => {
     const data = props.data;
     const options = props.options;
 
-    let result: { label: string; value: string }[] = [];
+    let result: { label: string; value?: string | number }[] = [];
 
     if (options && options.length > 0) {
         result = options.map((option) => ({ label: option[0], value: option[1] }));
@@ -66,7 +69,7 @@ const currentOptions = computed(() => {
     if (!props.display && !props.multiple && props.optional) {
         result.unshift({
             label: "Nothing selected",
-            value: "",
+            value: undefined,
         });
     }