From f38c28d2c0ffd64272cc41caf2e03bacc8dab465 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 2 Feb 2022 14:40:45 +1000
Subject: [PATCH 01/43] Replace _TextField with FormText.vue

---
 .../src/components/Form/Elements/FormText.vue | 134 ++++++++++++++++++
 .../components/Form/Elements/parameters.js    |  42 ------
 client/src/components/Form/FormElement.vue    |  19 ++-
 3 files changed, 151 insertions(+), 44 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormText.vue

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
new file mode 100644
index 00000000000..4472a305f06
--- /dev/null
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <b-alert class="mt-2" v-if="errorMessage" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
+            {{ errorMessage }}
+        </b-alert>
+        <b-row align-v="center">
+            <b-col>
+                <!-- type "text" or "password" ? -->
+                <!-- area <bool> presumably for a textarea instead of input -->
+                <!-- readonly <bool> -->
+                <!-- color <str> -->
+                <!-- style <obj?> -->
+                <!-- placeholder <str> -->
+                <!-- datalist -->
+
+                <!-- multiple <bool>
+                     Allow multiple entries to be created?
+                     Seems to use a textarea currently... line separated values?
+                 -->
+
+                <!-- TODO: do we handle style props in a <style scoped> section? -->
+
+                <component
+                    :is="componentName"
+                    :id="id"
+                    :readonly="readonly"
+                    :placeholder="placeholder"
+                    :color="color"
+                    :style="style"
+                    :type="type"
+                    :datalist="datalist"
+                    v-model="currentValue"
+                    @change="onInputChange"
+                />
+            </b-col>
+        </b-row>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            // String or Array for multiple
+            required: false,
+            default: "",
+        },
+        id: {
+            type: String,
+            required: false,
+        },
+        type: {
+            type: String,
+            required: true,
+            validator: (prop) => ["text", "password"].includes(prop.toLowerCase()),
+        },
+        area: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        placeholder: {
+            type: String,
+            required: false,
+        },
+        color: {
+            type: String,
+            required: false,
+        },
+        style: {
+            type: Object, // Or String?
+            required: false,
+        },
+        datalist: {
+            // Display list of suggestions in autocomplete dialog
+            type: Array,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            dismissSecs: 5,
+            dismissCountDown: 0,
+            errorMessage: "",
+        };
+    },
+    computed: {
+        currentValue: {
+            get() {
+                // TODO: is silent fail on non-strings appropriate?
+                v = this.value || "";
+                if (typeof v === "array") {
+                    return this.multiple ? v.map((i) => String(i)).join("\n") : String(v[0]);
+                }
+                return typeof v === "string" ? v : "";
+            },
+            // TODO: handle the emmitted "input"
+            set(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.$emit("input", newVal);
+                }
+            },
+        },
+        componentName() {
+            return this.area ? "b-form-textarea" : "b-form-input";
+        },
+    },
+    methods: {
+        onInputChange(value) {
+            this.resetAlert();
+            // Some validation?
+            if (cond) {
+                // Show some info alert
+            }
+        },
+        showAlert(error) {
+            if (error) {
+                this.errorMessage = error;
+                this.dismissCountDown = this.dismissSecs;
+            }
+        },
+        resetAlert() {
+            this.dismissCountDown = 0;
+        },
+    },
+};
+</script>
+
+<style></style>
diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 40ad903c675..63629dec42a 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -15,8 +15,6 @@ import DataPicker from "mvc/ui/ui-data-picker";
 export default Backbone.View.extend({
     /** Available parameter types */
     types: {
-        text: "_fieldText",
-        password: "_fieldText",
         select: "_fieldSelect",
         data_column: "_fieldSelect",
         genomebuild: "_fieldSelect",
@@ -128,46 +126,6 @@ export default Backbone.View.extend({
         });
     },
 
-    /** Text input field */
-    _fieldText: function (input_def) {
-        // field replaces e.g. a select field
-        const inputClass = input_def.optional && input_def.type === "select" ? Ui.NullableText : Ui.Input;
-        if (
-            ["SelectTagParameter", "ColumnListParameter"].includes(input_def.model_class) ||
-            (input_def.options && input_def.data)
-        ) {
-            input_def.area = input_def.multiple;
-            if (Utils.isEmpty(input_def.value)) {
-                input_def.value = null;
-            } else {
-                if (Array.isArray(input_def.value)) {
-                    var str_value = "";
-                    for (var i in input_def.value) {
-                        str_value += String(input_def.value[i]);
-                        if (!input_def.multiple) {
-                            break;
-                        }
-                        str_value += "\n";
-                    }
-                    input_def.value = str_value;
-                }
-            }
-        }
-        // create input element
-        return new inputClass({
-            id: input_def.id,
-            type: input_def.type,
-            area: input_def.area,
-            readonly: input_def.readonly,
-            color: input_def.color,
-            style: input_def.style,
-            placeholder: input_def.placeholder,
-            datalist: input_def.datalist,
-            onchange: input_def.onchange,
-            value: input_def.value,
-        });
-    },
-
     /** Data dialog picker field */
     _fieldDialog: function (input_def) {
         return new DataPicker({
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index b66906be4e0..674644e4d4d 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -29,7 +29,19 @@
                 :min="attrs.min"
                 :type="type"
                 v-model="currentValue"
-                :id="id" />
+                :id="id"
+            />
+            <FormText
+                v-else-if="type == 'text' || type == 'password'"
+                v-model="currentValue"
+                :readonly="attrs.readonly"
+                :placeholder="attrs.placeholder"
+                :color="attrs.color"
+                :style="attrs.style"
+                :datalist="attrs.datalist"
+                :type="type"
+                :id="id"
+            />
             <FormColor v-else-if="type == 'color'" v-model="currentValue" :id="id" />
             <FormDirectory v-else-if="type == 'directory_uri'" v-model="currentValue" />
             <FormParameter
@@ -39,7 +51,8 @@
                 :data-label="title"
                 :type="type"
                 :attributes="attrs"
-                ref="params" />
+                ref="params"
+            />
             <FormInput v-else v-model="currentValue" :id="id" :area="attrs['area']" />
         </div>
         <div v-if="showPreview" class="ui-form-preview" v-html="previewText" />
@@ -56,6 +69,7 @@ import FormParameter from "./Elements/FormParameter";
 import FormColor from "./Elements/FormColor";
 import FormDirectory from "./Elements/FormDirectory";
 import FormNumber from "./Elements/FormNumber";
+import FormText from "./Elements/FormText";
 
 export default {
     components: {
@@ -63,6 +77,7 @@ export default {
         FormHidden,
         FormInput,
         FormNumber,
+        FormText,
         FormColor,
         FormParameter,
         FormDirectory,

From 7deb82e6db04843a2f6a34ca1de2efee2c3f838c Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Tue, 15 Feb 2022 13:30:13 +1000
Subject: [PATCH 02/43] FormText pass unit tests

---
 .../components/Form/Elements/FormText.test.js | 70 +++++++++++++++++++
 .../src/components/Form/Elements/FormText.vue | 54 ++++++++------
 2 files changed, 102 insertions(+), 22 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormText.test.js

diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
new file mode 100644
index 00000000000..9650786cce6
--- /dev/null
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -0,0 +1,70 @@
+import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { getLocalVue } from "jest/helpers";
+import FormText from "./FormText";
+
+const localVue = getLocalVue();
+
+describe("FormText", () => {
+    const mountFormText = async (props) =>
+        await mount(FormText, {
+            propsData: props,
+            localVue,
+        });
+
+    // constants
+    const getAlert = async (wrapper) => await wrapper.find("[role='alert']");
+
+    it("should render the appropriate input type", async () => {
+        let wrapper = await mountFormText({});
+        await flushPromises();
+        let el = await wrapper.find("input[type='text']");
+        expect(el.exists()).toBe(true);
+
+        wrapper = await mountFormText({ type: "password" });
+        await flushPromises();
+        el = await wrapper.find("input[type='password']");
+        expect(el.exists()).toBe(true);
+    });
+
+    it("should render the appropriate component", async () => {
+        let wrapper = await mountFormText({ area: true });
+        await flushPromises();
+        let el = await wrapper.find("textarea");
+        expect(el.exists()).toBe(true);
+
+        wrapper = await mountFormText({ multiple: true });
+        await flushPromises();
+        el = await wrapper.find("textarea");
+        expect(el.exists()).toBe(true);
+    });
+
+    it("should be able to render a datalist", async () => {
+        let wrapper = await mountFormText({ datalist: ["one", "two", "three"] });
+        await flushPromises();
+        let el = await wrapper.find("datalist");
+        expect(el.exists()).toBe(true);
+        el = await wrapper.find("option");
+        expect(el.exists()).toBe(true);
+    });
+
+    it("should be able to render style from props", async () => {
+        let wrapper = await mountFormText({ styleObj: { fontSize: "18px" } });
+        await flushPromises();
+        let el = await wrapper.find("input");
+        expect(el.element.style).toMatchObject({ fontSize: "18px" });
+
+        wrapper = await mountFormText({ styleObj: { fontSize: "18px" }, color: 'white' });
+        await flushPromises();
+        el = await wrapper.find("input");
+        expect(el.element.style).toMatchObject({ fontSize: "18px", color: 'white' });
+    });
+
+    it("should be able to accept a default value", async () => {
+        const v = "something";
+        let wrapper = await mountFormText({ value: v });
+        await flushPromises();
+        let el = await wrapper.find("input");
+        expect(el.props('value')).toEqual(v);
+    });
+});
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 4472a305f06..b34755eddf7 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -5,33 +5,32 @@
         </b-alert>
         <b-row align-v="center">
             <b-col>
-                <!-- type "text" or "password" ? -->
-                <!-- area <bool> presumably for a textarea instead of input -->
-                <!-- readonly <bool> -->
-                <!-- color <str> -->
-                <!-- style <obj?> -->
+                <!-- type        <str> "text" or "password" -->
+                <!-- area        <bool> presumably for a textarea instead of input -->
+                <!-- readonly    <bool> -->
+                <!-- color       <str> -->
+                <!-- styleObj    <obj> applied to input element -->
                 <!-- placeholder <str> -->
-                <!-- datalist -->
+                <!-- datalist    <arr> -->
 
                 <!-- multiple <bool>
                      Allow multiple entries to be created?
                      Seems to use a textarea currently... line separated values?
                  -->
 
-                <!-- TODO: do we handle style props in a <style scoped> section? -->
-
                 <component
                     :is="componentName"
                     :id="id"
                     :readonly="readonly"
                     :placeholder="placeholder"
-                    :color="color"
                     :style="style"
                     :type="type"
-                    :datalist="datalist"
                     v-model="currentValue"
-                    @change="onInputChange"
-                />
+                    @change="onInputChange" />
+
+                <datalist v-if="datalist && !area && !multiple" :id="`${id}-datalist`">
+                    <option v-for="d in datalist" value="d"></option>
+                </datalist>
             </b-col>
         </b-row>
     </div>
@@ -51,7 +50,8 @@ export default {
         },
         type: {
             type: String,
-            required: true,
+            required: false,
+            default: "text",
             validator: (prop) => ["text", "password"].includes(prop.toLowerCase()),
         },
         area: {
@@ -59,6 +59,11 @@ export default {
             required: false,
             default: false,
         },
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
         readonly: {
             type: Boolean,
             required: false,
@@ -72,9 +77,10 @@ export default {
             type: String,
             required: false,
         },
-        style: {
-            type: Object, // Or String?
+        styleObj: {
+            type: Object,
             required: false,
+            default: () => {},
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
@@ -93,7 +99,7 @@ export default {
         currentValue: {
             get() {
                 // TODO: is silent fail on non-strings appropriate?
-                v = this.value || "";
+                const v = this.value || "";
                 if (typeof v === "array") {
                     return this.multiple ? v.map((i) => String(i)).join("\n") : String(v[0]);
                 }
@@ -107,16 +113,22 @@ export default {
             },
         },
         componentName() {
-            return this.area ? "b-form-textarea" : "b-form-input";
+            return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
+        },
+        style() {
+            return this.color ? { ...this.styleObj, color: this.color } : this.styleObj;
         },
     },
     methods: {
         onInputChange(value) {
             this.resetAlert();
             // Some validation?
-            if (cond) {
-                // Show some info alert
-            }
+
+            // Could we accept a validation function in props?
+
+            // if (value !== xxx) {
+            //     // Show some info alert
+            // }
         },
         showAlert(error) {
             if (error) {
@@ -130,5 +142,3 @@ export default {
     },
 };
 </script>
-
-<style></style>

From 4598d7178eeca2d9dfa607a26d7b74fb5af14602 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 20 Apr 2022 15:56:36 +1000
Subject: [PATCH 03/43] Restore _fieldText component to maintain compatability

---
 .../components/Form/Elements/parameters.js    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 63629dec42a..40ad903c675 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -15,6 +15,8 @@ import DataPicker from "mvc/ui/ui-data-picker";
 export default Backbone.View.extend({
     /** Available parameter types */
     types: {
+        text: "_fieldText",
+        password: "_fieldText",
         select: "_fieldSelect",
         data_column: "_fieldSelect",
         genomebuild: "_fieldSelect",
@@ -126,6 +128,46 @@ export default Backbone.View.extend({
         });
     },
 
+    /** Text input field */
+    _fieldText: function (input_def) {
+        // field replaces e.g. a select field
+        const inputClass = input_def.optional && input_def.type === "select" ? Ui.NullableText : Ui.Input;
+        if (
+            ["SelectTagParameter", "ColumnListParameter"].includes(input_def.model_class) ||
+            (input_def.options && input_def.data)
+        ) {
+            input_def.area = input_def.multiple;
+            if (Utils.isEmpty(input_def.value)) {
+                input_def.value = null;
+            } else {
+                if (Array.isArray(input_def.value)) {
+                    var str_value = "";
+                    for (var i in input_def.value) {
+                        str_value += String(input_def.value[i]);
+                        if (!input_def.multiple) {
+                            break;
+                        }
+                        str_value += "\n";
+                    }
+                    input_def.value = str_value;
+                }
+            }
+        }
+        // create input element
+        return new inputClass({
+            id: input_def.id,
+            type: input_def.type,
+            area: input_def.area,
+            readonly: input_def.readonly,
+            color: input_def.color,
+            style: input_def.style,
+            placeholder: input_def.placeholder,
+            datalist: input_def.datalist,
+            onchange: input_def.onchange,
+            value: input_def.value,
+        });
+    },
+
     /** Data dialog picker field */
     _fieldDialog: function (input_def) {
         return new DataPicker({

From 4175e37204c69cefff399f4603ca3c072bda07c6 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 20 Apr 2022 16:04:09 +1000
Subject: [PATCH 04/43] Trying to accomodate special input cases in
 FormText.vue

---
 .../src/components/Form/Elements/FormText.vue | 66 ++++++++++++-------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index b34755eddf7..ac3443ca518 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -5,19 +5,6 @@
         </b-alert>
         <b-row align-v="center">
             <b-col>
-                <!-- type        <str> "text" or "password" -->
-                <!-- area        <bool> presumably for a textarea instead of input -->
-                <!-- readonly    <bool> -->
-                <!-- color       <str> -->
-                <!-- styleObj    <obj> applied to input element -->
-                <!-- placeholder <str> -->
-                <!-- datalist    <arr> -->
-
-                <!-- multiple <bool>
-                     Allow multiple entries to be created?
-                     Seems to use a textarea currently... line separated values?
-                 -->
-
                 <component
                     :is="componentName"
                     :id="id"
@@ -37,10 +24,13 @@
 </template>
 
 <script>
+import Utils from "utils/utils";
+import Ui from "mvc/ui/ui-misc";
+
 export default {
     props: {
         value: {
-            // String or Array for multiple
+            // String; Array for multiple
             required: false,
             default: "",
         },
@@ -52,14 +42,15 @@ export default {
             type: String,
             required: false,
             default: "text",
-            validator: (prop) => ["text", "password"].includes(prop.toLowerCase()),
         },
         area: {
+            // <textarea> instead of <input> element
             type: Boolean,
             required: false,
             default: false,
         },
         multiple: {
+            // Allow multiple entries to be created
             type: Boolean,
             required: false,
             default: false,
@@ -78,6 +69,7 @@ export default {
             required: false,
         },
         styleObj: {
+            // This will be applied to the input element
             type: Object,
             required: false,
             default: () => {},
@@ -87,9 +79,43 @@ export default {
             type: Array,
             required: false,
         },
+
+        // These last three are for handling special input cases only
+
+        optional: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+        model_class: {
+            type: String,
+            required: false,
+        },
+        data: {
+            type: Object,  // ?
+            required: false,
+        },
     },
     data() {
+        if (
+            ["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) ||
+            (this.options && this.data)
+        ) {
+            this.area = this.multiple;
+            if (Utils.isEmpty(this.value)) {
+                this.value = null;
+            } else {
+                if (Array.isArray(this.value)) {
+                    this.value = this.multiple ?
+                        this.value.reduce(
+                            (str_value, v) => str_value + String(v) + '\n',
+                            ''
+                        ) : String(this.value[i]);
+                }
+            }
+        }
         return {
+            isNullable: this.optional && this.type === "select",
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
@@ -113,6 +139,9 @@ export default {
             },
         },
         componentName() {
+            if (this.isNullable) {
+                return Ui.NullableText;
+            }
             return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
         },
         style() {
@@ -122,13 +151,6 @@ export default {
     methods: {
         onInputChange(value) {
             this.resetAlert();
-            // Some validation?
-
-            // Could we accept a validation function in props?
-
-            // if (value !== xxx) {
-            //     // Show some info alert
-            // }
         },
         showAlert(error) {
             if (error) {

From 5ef24da437f8fadfda6f3cda3b5c723a1ba84e7b Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 20 Apr 2022 16:11:40 +1000
Subject: [PATCH 05/43] Remove redundant lines

---
 client/src/components/Form/Elements/FormText.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index ac3443ca518..1b730104048 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -115,7 +115,6 @@ export default {
             }
         }
         return {
-            isNullable: this.optional && this.type === "select",
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
@@ -139,9 +138,6 @@ export default {
             },
         },
         componentName() {
-            if (this.isNullable) {
-                return Ui.NullableText;
-            }
             return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
         },
         style() {

From 6bdbe09eb359de563ae3b049a0c2e7f462f592d9 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Fri, 29 Apr 2022 08:49:33 +1000
Subject: [PATCH 06/43] Remove redundant import

---
 client/src/components/Form/Elements/FormText.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 1b730104048..43fec1879d1 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -25,7 +25,6 @@
 
 <script>
 import Utils from "utils/utils";
-import Ui from "mvc/ui/ui-misc";
 
 export default {
     props: {

From 86ce9ddfbe3586875e756ddbb854cb78c6109d51 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 2 Feb 2022 14:40:45 +1000
Subject: [PATCH 07/43] Replace _TextField with FormText.vue

---
 .../src/components/Form/Elements/FormText.vue | 134 ++++++++++++++++++
 .../components/Form/Elements/parameters.js    |  42 ------
 client/src/components/Form/FormElement.vue    |  12 ++
 3 files changed, 146 insertions(+), 42 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormText.vue

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
new file mode 100644
index 00000000000..4472a305f06
--- /dev/null
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <b-alert class="mt-2" v-if="errorMessage" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
+            {{ errorMessage }}
+        </b-alert>
+        <b-row align-v="center">
+            <b-col>
+                <!-- type "text" or "password" ? -->
+                <!-- area <bool> presumably for a textarea instead of input -->
+                <!-- readonly <bool> -->
+                <!-- color <str> -->
+                <!-- style <obj?> -->
+                <!-- placeholder <str> -->
+                <!-- datalist -->
+
+                <!-- multiple <bool>
+                     Allow multiple entries to be created?
+                     Seems to use a textarea currently... line separated values?
+                 -->
+
+                <!-- TODO: do we handle style props in a <style scoped> section? -->
+
+                <component
+                    :is="componentName"
+                    :id="id"
+                    :readonly="readonly"
+                    :placeholder="placeholder"
+                    :color="color"
+                    :style="style"
+                    :type="type"
+                    :datalist="datalist"
+                    v-model="currentValue"
+                    @change="onInputChange"
+                />
+            </b-col>
+        </b-row>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            // String or Array for multiple
+            required: false,
+            default: "",
+        },
+        id: {
+            type: String,
+            required: false,
+        },
+        type: {
+            type: String,
+            required: true,
+            validator: (prop) => ["text", "password"].includes(prop.toLowerCase()),
+        },
+        area: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        placeholder: {
+            type: String,
+            required: false,
+        },
+        color: {
+            type: String,
+            required: false,
+        },
+        style: {
+            type: Object, // Or String?
+            required: false,
+        },
+        datalist: {
+            // Display list of suggestions in autocomplete dialog
+            type: Array,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            dismissSecs: 5,
+            dismissCountDown: 0,
+            errorMessage: "",
+        };
+    },
+    computed: {
+        currentValue: {
+            get() {
+                // TODO: is silent fail on non-strings appropriate?
+                v = this.value || "";
+                if (typeof v === "array") {
+                    return this.multiple ? v.map((i) => String(i)).join("\n") : String(v[0]);
+                }
+                return typeof v === "string" ? v : "";
+            },
+            // TODO: handle the emmitted "input"
+            set(newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    this.$emit("input", newVal);
+                }
+            },
+        },
+        componentName() {
+            return this.area ? "b-form-textarea" : "b-form-input";
+        },
+    },
+    methods: {
+        onInputChange(value) {
+            this.resetAlert();
+            // Some validation?
+            if (cond) {
+                // Show some info alert
+            }
+        },
+        showAlert(error) {
+            if (error) {
+                this.errorMessage = error;
+                this.dismissCountDown = this.dismissSecs;
+            }
+        },
+        resetAlert() {
+            this.dismissCountDown = 0;
+        },
+    },
+};
+</script>
+
+<style></style>
diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 40ad903c675..63629dec42a 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -15,8 +15,6 @@ import DataPicker from "mvc/ui/ui-data-picker";
 export default Backbone.View.extend({
     /** Available parameter types */
     types: {
-        text: "_fieldText",
-        password: "_fieldText",
         select: "_fieldSelect",
         data_column: "_fieldSelect",
         genomebuild: "_fieldSelect",
@@ -128,46 +126,6 @@ export default Backbone.View.extend({
         });
     },
 
-    /** Text input field */
-    _fieldText: function (input_def) {
-        // field replaces e.g. a select field
-        const inputClass = input_def.optional && input_def.type === "select" ? Ui.NullableText : Ui.Input;
-        if (
-            ["SelectTagParameter", "ColumnListParameter"].includes(input_def.model_class) ||
-            (input_def.options && input_def.data)
-        ) {
-            input_def.area = input_def.multiple;
-            if (Utils.isEmpty(input_def.value)) {
-                input_def.value = null;
-            } else {
-                if (Array.isArray(input_def.value)) {
-                    var str_value = "";
-                    for (var i in input_def.value) {
-                        str_value += String(input_def.value[i]);
-                        if (!input_def.multiple) {
-                            break;
-                        }
-                        str_value += "\n";
-                    }
-                    input_def.value = str_value;
-                }
-            }
-        }
-        // create input element
-        return new inputClass({
-            id: input_def.id,
-            type: input_def.type,
-            area: input_def.area,
-            readonly: input_def.readonly,
-            color: input_def.color,
-            style: input_def.style,
-            placeholder: input_def.placeholder,
-            datalist: input_def.datalist,
-            onchange: input_def.onchange,
-            value: input_def.value,
-        });
-    },
-
     /** Data dialog picker field */
     _fieldDialog: function (input_def) {
         return new DataPicker({
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index c1c387f5fea..ff9329b275b 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -31,6 +31,16 @@
                 :min="attrs.min"
                 :type="type"
                 :workflow-building-mode="workflowBuildingMode" />
+            <FormText
+                v-else-if="type == 'text' || type == 'password'"
+                :id="id"
+                v-model="currentValue"
+                :readonly="attrs.readonly"
+                :placeholder="attrs.placeholder"
+                :color="attrs.color"
+                :style="attrs.style"
+                :datalist="attrs.datalist"
+                :type="type" />
             <FormColor v-else-if="type == 'color'" :id="id" v-model="currentValue" />
             <FormDirectory v-else-if="type == 'directory_uri'" v-model="currentValue" />
             <FormParameter
@@ -57,6 +67,7 @@ import FormParameter from "./Elements/FormParameter";
 import FormColor from "./Elements/FormColor";
 import FormDirectory from "./Elements/FormDirectory";
 import FormNumber from "./Elements/FormNumber";
+import FormText from "./Elements/FormText";
 
 export default {
     components: {
@@ -64,6 +75,7 @@ export default {
         FormHidden,
         FormInput,
         FormNumber,
+        FormText,
         FormColor,
         FormParameter,
         FormDirectory,

From 5cbcfbcedb85e1559b3ba10ee62c129b23040ac0 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Tue, 15 Feb 2022 13:30:13 +1000
Subject: [PATCH 08/43] FormText pass unit tests

---
 .../components/Form/Elements/FormText.test.js | 70 +++++++++++++++++++
 .../src/components/Form/Elements/FormText.vue | 54 ++++++++------
 2 files changed, 102 insertions(+), 22 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormText.test.js

diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
new file mode 100644
index 00000000000..9650786cce6
--- /dev/null
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -0,0 +1,70 @@
+import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { getLocalVue } from "jest/helpers";
+import FormText from "./FormText";
+
+const localVue = getLocalVue();
+
+describe("FormText", () => {
+    const mountFormText = async (props) =>
+        await mount(FormText, {
+            propsData: props,
+            localVue,
+        });
+
+    // constants
+    const getAlert = async (wrapper) => await wrapper.find("[role='alert']");
+
+    it("should render the appropriate input type", async () => {
+        let wrapper = await mountFormText({});
+        await flushPromises();
+        let el = await wrapper.find("input[type='text']");
+        expect(el.exists()).toBe(true);
+
+        wrapper = await mountFormText({ type: "password" });
+        await flushPromises();
+        el = await wrapper.find("input[type='password']");
+        expect(el.exists()).toBe(true);
+    });
+
+    it("should render the appropriate component", async () => {
+        let wrapper = await mountFormText({ area: true });
+        await flushPromises();
+        let el = await wrapper.find("textarea");
+        expect(el.exists()).toBe(true);
+
+        wrapper = await mountFormText({ multiple: true });
+        await flushPromises();
+        el = await wrapper.find("textarea");
+        expect(el.exists()).toBe(true);
+    });
+
+    it("should be able to render a datalist", async () => {
+        let wrapper = await mountFormText({ datalist: ["one", "two", "three"] });
+        await flushPromises();
+        let el = await wrapper.find("datalist");
+        expect(el.exists()).toBe(true);
+        el = await wrapper.find("option");
+        expect(el.exists()).toBe(true);
+    });
+
+    it("should be able to render style from props", async () => {
+        let wrapper = await mountFormText({ styleObj: { fontSize: "18px" } });
+        await flushPromises();
+        let el = await wrapper.find("input");
+        expect(el.element.style).toMatchObject({ fontSize: "18px" });
+
+        wrapper = await mountFormText({ styleObj: { fontSize: "18px" }, color: 'white' });
+        await flushPromises();
+        el = await wrapper.find("input");
+        expect(el.element.style).toMatchObject({ fontSize: "18px", color: 'white' });
+    });
+
+    it("should be able to accept a default value", async () => {
+        const v = "something";
+        let wrapper = await mountFormText({ value: v });
+        await flushPromises();
+        let el = await wrapper.find("input");
+        expect(el.props('value')).toEqual(v);
+    });
+});
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 4472a305f06..b34755eddf7 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -5,33 +5,32 @@
         </b-alert>
         <b-row align-v="center">
             <b-col>
-                <!-- type "text" or "password" ? -->
-                <!-- area <bool> presumably for a textarea instead of input -->
-                <!-- readonly <bool> -->
-                <!-- color <str> -->
-                <!-- style <obj?> -->
+                <!-- type        <str> "text" or "password" -->
+                <!-- area        <bool> presumably for a textarea instead of input -->
+                <!-- readonly    <bool> -->
+                <!-- color       <str> -->
+                <!-- styleObj    <obj> applied to input element -->
                 <!-- placeholder <str> -->
-                <!-- datalist -->
+                <!-- datalist    <arr> -->
 
                 <!-- multiple <bool>
                      Allow multiple entries to be created?
                      Seems to use a textarea currently... line separated values?
                  -->
 
-                <!-- TODO: do we handle style props in a <style scoped> section? -->
-
                 <component
                     :is="componentName"
                     :id="id"
                     :readonly="readonly"
                     :placeholder="placeholder"
-                    :color="color"
                     :style="style"
                     :type="type"
-                    :datalist="datalist"
                     v-model="currentValue"
-                    @change="onInputChange"
-                />
+                    @change="onInputChange" />
+
+                <datalist v-if="datalist && !area && !multiple" :id="`${id}-datalist`">
+                    <option v-for="d in datalist" value="d"></option>
+                </datalist>
             </b-col>
         </b-row>
     </div>
@@ -51,7 +50,8 @@ export default {
         },
         type: {
             type: String,
-            required: true,
+            required: false,
+            default: "text",
             validator: (prop) => ["text", "password"].includes(prop.toLowerCase()),
         },
         area: {
@@ -59,6 +59,11 @@ export default {
             required: false,
             default: false,
         },
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
         readonly: {
             type: Boolean,
             required: false,
@@ -72,9 +77,10 @@ export default {
             type: String,
             required: false,
         },
-        style: {
-            type: Object, // Or String?
+        styleObj: {
+            type: Object,
             required: false,
+            default: () => {},
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
@@ -93,7 +99,7 @@ export default {
         currentValue: {
             get() {
                 // TODO: is silent fail on non-strings appropriate?
-                v = this.value || "";
+                const v = this.value || "";
                 if (typeof v === "array") {
                     return this.multiple ? v.map((i) => String(i)).join("\n") : String(v[0]);
                 }
@@ -107,16 +113,22 @@ export default {
             },
         },
         componentName() {
-            return this.area ? "b-form-textarea" : "b-form-input";
+            return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
+        },
+        style() {
+            return this.color ? { ...this.styleObj, color: this.color } : this.styleObj;
         },
     },
     methods: {
         onInputChange(value) {
             this.resetAlert();
             // Some validation?
-            if (cond) {
-                // Show some info alert
-            }
+
+            // Could we accept a validation function in props?
+
+            // if (value !== xxx) {
+            //     // Show some info alert
+            // }
         },
         showAlert(error) {
             if (error) {
@@ -130,5 +142,3 @@ export default {
     },
 };
 </script>
-
-<style></style>

From 6ddce14d3587171c91aa1f4a57f385d0a201a645 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 20 Apr 2022 15:56:36 +1000
Subject: [PATCH 09/43] Restore _fieldText component to maintain compatability

---
 .../components/Form/Elements/parameters.js    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
index 63629dec42a..40ad903c675 100644
--- a/client/src/components/Form/Elements/parameters.js
+++ b/client/src/components/Form/Elements/parameters.js
@@ -15,6 +15,8 @@ import DataPicker from "mvc/ui/ui-data-picker";
 export default Backbone.View.extend({
     /** Available parameter types */
     types: {
+        text: "_fieldText",
+        password: "_fieldText",
         select: "_fieldSelect",
         data_column: "_fieldSelect",
         genomebuild: "_fieldSelect",
@@ -126,6 +128,46 @@ export default Backbone.View.extend({
         });
     },
 
+    /** Text input field */
+    _fieldText: function (input_def) {
+        // field replaces e.g. a select field
+        const inputClass = input_def.optional && input_def.type === "select" ? Ui.NullableText : Ui.Input;
+        if (
+            ["SelectTagParameter", "ColumnListParameter"].includes(input_def.model_class) ||
+            (input_def.options && input_def.data)
+        ) {
+            input_def.area = input_def.multiple;
+            if (Utils.isEmpty(input_def.value)) {
+                input_def.value = null;
+            } else {
+                if (Array.isArray(input_def.value)) {
+                    var str_value = "";
+                    for (var i in input_def.value) {
+                        str_value += String(input_def.value[i]);
+                        if (!input_def.multiple) {
+                            break;
+                        }
+                        str_value += "\n";
+                    }
+                    input_def.value = str_value;
+                }
+            }
+        }
+        // create input element
+        return new inputClass({
+            id: input_def.id,
+            type: input_def.type,
+            area: input_def.area,
+            readonly: input_def.readonly,
+            color: input_def.color,
+            style: input_def.style,
+            placeholder: input_def.placeholder,
+            datalist: input_def.datalist,
+            onchange: input_def.onchange,
+            value: input_def.value,
+        });
+    },
+
     /** Data dialog picker field */
     _fieldDialog: function (input_def) {
         return new DataPicker({

From d348c6bbd8cee0a4d9a3bb84fbaf39ebd17b61e5 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 20 Apr 2022 16:04:09 +1000
Subject: [PATCH 10/43] Trying to accomodate special input cases in
 FormText.vue

---
 .../src/components/Form/Elements/FormText.vue | 66 ++++++++++++-------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index b34755eddf7..ac3443ca518 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -5,19 +5,6 @@
         </b-alert>
         <b-row align-v="center">
             <b-col>
-                <!-- type        <str> "text" or "password" -->
-                <!-- area        <bool> presumably for a textarea instead of input -->
-                <!-- readonly    <bool> -->
-                <!-- color       <str> -->
-                <!-- styleObj    <obj> applied to input element -->
-                <!-- placeholder <str> -->
-                <!-- datalist    <arr> -->
-
-                <!-- multiple <bool>
-                     Allow multiple entries to be created?
-                     Seems to use a textarea currently... line separated values?
-                 -->
-
                 <component
                     :is="componentName"
                     :id="id"
@@ -37,10 +24,13 @@
 </template>
 
 <script>
+import Utils from "utils/utils";
+import Ui from "mvc/ui/ui-misc";
+
 export default {
     props: {
         value: {
-            // String or Array for multiple
+            // String; Array for multiple
             required: false,
             default: "",
         },
@@ -52,14 +42,15 @@ export default {
             type: String,
             required: false,
             default: "text",
-            validator: (prop) => ["text", "password"].includes(prop.toLowerCase()),
         },
         area: {
+            // <textarea> instead of <input> element
             type: Boolean,
             required: false,
             default: false,
         },
         multiple: {
+            // Allow multiple entries to be created
             type: Boolean,
             required: false,
             default: false,
@@ -78,6 +69,7 @@ export default {
             required: false,
         },
         styleObj: {
+            // This will be applied to the input element
             type: Object,
             required: false,
             default: () => {},
@@ -87,9 +79,43 @@ export default {
             type: Array,
             required: false,
         },
+
+        // These last three are for handling special input cases only
+
+        optional: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+        model_class: {
+            type: String,
+            required: false,
+        },
+        data: {
+            type: Object,  // ?
+            required: false,
+        },
     },
     data() {
+        if (
+            ["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) ||
+            (this.options && this.data)
+        ) {
+            this.area = this.multiple;
+            if (Utils.isEmpty(this.value)) {
+                this.value = null;
+            } else {
+                if (Array.isArray(this.value)) {
+                    this.value = this.multiple ?
+                        this.value.reduce(
+                            (str_value, v) => str_value + String(v) + '\n',
+                            ''
+                        ) : String(this.value[i]);
+                }
+            }
+        }
         return {
+            isNullable: this.optional && this.type === "select",
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
@@ -113,6 +139,9 @@ export default {
             },
         },
         componentName() {
+            if (this.isNullable) {
+                return Ui.NullableText;
+            }
             return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
         },
         style() {
@@ -122,13 +151,6 @@ export default {
     methods: {
         onInputChange(value) {
             this.resetAlert();
-            // Some validation?
-
-            // Could we accept a validation function in props?
-
-            // if (value !== xxx) {
-            //     // Show some info alert
-            // }
         },
         showAlert(error) {
             if (error) {

From 0e89a87574c039db3adf0ff7e814543ea56cf426 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 20 Apr 2022 16:11:40 +1000
Subject: [PATCH 11/43] Remove redundant lines

---
 client/src/components/Form/Elements/FormText.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index ac3443ca518..1b730104048 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -115,7 +115,6 @@ export default {
             }
         }
         return {
-            isNullable: this.optional && this.type === "select",
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
@@ -139,9 +138,6 @@ export default {
             },
         },
         componentName() {
-            if (this.isNullable) {
-                return Ui.NullableText;
-            }
             return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
         },
         style() {

From be637a68e9f89530e058fd90641eb743223af08c Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Fri, 29 Apr 2022 08:49:33 +1000
Subject: [PATCH 12/43] Remove redundant import

---
 client/src/components/Form/Elements/FormText.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 1b730104048..43fec1879d1 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -25,7 +25,6 @@
 
 <script>
 import Utils from "utils/utils";
-import Ui from "mvc/ui/ui-misc";
 
 export default {
     props: {

From 045ea38493db57d92602a28dafcd991ba9993448 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 22 Aug 2022 13:51:35 -0400
Subject: [PATCH 13/43] Linting/formatting

---
 .../components/Form/Elements/FormText.test.js | 12 ++++++------
 .../src/components/Form/Elements/FormText.vue | 19 +++++++------------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
index 9650786cce6..deca3f1dbab 100644
--- a/client/src/components/Form/Elements/FormText.test.js
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -40,7 +40,7 @@ describe("FormText", () => {
     });
 
     it("should be able to render a datalist", async () => {
-        let wrapper = await mountFormText({ datalist: ["one", "two", "three"] });
+        const wrapper = await mountFormText({ datalist: ["one", "two", "three"] });
         await flushPromises();
         let el = await wrapper.find("datalist");
         expect(el.exists()).toBe(true);
@@ -54,17 +54,17 @@ describe("FormText", () => {
         let el = await wrapper.find("input");
         expect(el.element.style).toMatchObject({ fontSize: "18px" });
 
-        wrapper = await mountFormText({ styleObj: { fontSize: "18px" }, color: 'white' });
+        wrapper = await mountFormText({ styleObj: { fontSize: "18px" }, color: "white" });
         await flushPromises();
         el = await wrapper.find("input");
-        expect(el.element.style).toMatchObject({ fontSize: "18px", color: 'white' });
+        expect(el.element.style).toMatchObject({ fontSize: "18px", color: "white" });
     });
 
     it("should be able to accept a default value", async () => {
         const v = "something";
-        let wrapper = await mountFormText({ value: v });
+        const wrapper = await mountFormText({ value: v });
         await flushPromises();
-        let el = await wrapper.find("input");
-        expect(el.props('value')).toEqual(v);
+        const el = await wrapper.find("input");
+        expect(el.props("value")).toEqual(v);
     });
 });
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 43fec1879d1..40adece3307 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-alert class="mt-2" v-if="errorMessage" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
+        <b-alert v-if="errorMessage" class="mt-2" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
             {{ errorMessage }}
         </b-alert>
         <b-row align-v="center">
@@ -8,11 +8,11 @@
                 <component
                     :is="componentName"
                     :id="id"
+                    v-model="currentValue"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
                     :type="type"
-                    v-model="currentValue"
                     @change="onInputChange" />
 
                 <datalist v-if="datalist && !area && !multiple" :id="`${id}-datalist`">
@@ -91,25 +91,20 @@ export default {
             required: false,
         },
         data: {
-            type: Object,  // ?
+            type: Object, // ?
             required: false,
         },
     },
     data() {
-        if (
-            ["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) ||
-            (this.options && this.data)
-        ) {
+        if (["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) || (this.options && this.data)) {
             this.area = this.multiple;
             if (Utils.isEmpty(this.value)) {
                 this.value = null;
             } else {
                 if (Array.isArray(this.value)) {
-                    this.value = this.multiple ?
-                        this.value.reduce(
-                            (str_value, v) => str_value + String(v) + '\n',
-                            ''
-                        ) : String(this.value[i]);
+                    this.value = this.multiple
+                        ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
+                        : String(this.value[i]);
                 }
             }
         }

From ebcacde0cc14ad07c47b23dec4651eff285b8570 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 26 Oct 2022 11:07:00 +1000
Subject: [PATCH 14/43] Remove redundant declaration

---
 client/src/components/Form/Elements/FormText.test.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
index deca3f1dbab..9b855313b58 100644
--- a/client/src/components/Form/Elements/FormText.test.js
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -12,9 +12,6 @@ describe("FormText", () => {
             localVue,
         });
 
-    // constants
-    const getAlert = async (wrapper) => await wrapper.find("[role='alert']");
-
     it("should render the appropriate input type", async () => {
         let wrapper = await mountFormText({});
         await flushPromises();

From 625fb4dcbfcf3807ea37be50011ba3b0e4550e19 Mon Sep 17 00:00:00 2001
From: Cameron Hyde <chyde@neoformit.com>
Date: Wed, 26 Oct 2022 11:07:12 +1000
Subject: [PATCH 15/43] Fix datalist render

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

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index dcdfee68d10..a77669ab698 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -16,7 +16,7 @@
                     @change="onInputChange" />
 
                 <datalist v-if="datalist && !area && !multiple" :id="`${id}-datalist`">
-                    <option v-for="d in datalist" value="d"></option>
+                    <option v-for="d in datalist" :label="d.label" :value="d.value"></option>
                 </datalist>
             </b-col>
         </b-row>

From cccb2b3e8870e6281275e7d617c267b9281543ad Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 26 Oct 2022 10:18:46 -0400
Subject: [PATCH 16/43] fixing client linting errors

---
 client/src/components/Form/Elements/FormText.vue | 14 ++++++++------
 client/src/components/Form/FormElement.vue       | 10 ----------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index a77669ab698..452145f1be5 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -8,15 +8,15 @@
                 <component
                     :is="componentName"
                     :id="id"
+                    v-model="currentValue"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
                     :type="type"
-                    v-model="currentValue"
                     @change="onInputChange" />
 
                 <datalist v-if="datalist && !area && !multiple" :id="`${id}-datalist`">
-                    <option v-for="d in datalist" :label="d.label" :value="d.value"></option>
+                    <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value"></option>
                 </datalist>
             </b-col>
         </b-row>
@@ -28,7 +28,7 @@ import Utils from "utils/utils";
 
 export default {
     props: {
-        value: {
+        inputValue: {
             // String; Array for multiple
             required: false,
             default: "",
@@ -42,7 +42,7 @@ export default {
             required: false,
             default: "text",
         },
-        area: {
+        inputArea: {
             // <textarea> instead of <input> element
             type: Boolean,
             required: false,
@@ -104,7 +104,7 @@ export default {
                 if (Array.isArray(this.value)) {
                     this.value = this.multiple
                         ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
-                        : String(this.value[i]);
+                        : String(this.value[0]);
                 }
             }
         }
@@ -112,6 +112,8 @@ export default {
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
+            value: this.inputValue,
+            area: this.inputArea,
         };
     },
     computed: {
@@ -119,7 +121,7 @@ export default {
             get() {
                 // TODO: is silent fail on non-strings appropriate?
                 const v = this.value || "";
-                if (typeof v === "array") {
+                if (Array.isArray(v)) {
                     return this.multiple ? v.map((i) => String(i)).join("\n") : String(v[0]);
                 }
                 return typeof v === "string" ? v : "";
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 44b50ab537f..ff9329b275b 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -41,16 +41,6 @@
                 :style="attrs.style"
                 :datalist="attrs.datalist"
                 :type="type" />
-            <FormText
-                v-else-if="type == 'text' || type == 'password'"
-                v-model="currentValue"
-                :readonly="attrs.readonly"
-                :placeholder="attrs.placeholder"
-                :color="attrs.color"
-                :style="attrs.style"
-                :datalist="attrs.datalist"
-                :type="type"
-                :id="id" />
             <FormColor v-else-if="type == 'color'" :id="id" v-model="currentValue" />
             <FormDirectory v-else-if="type == 'directory_uri'" v-model="currentValue" />
             <FormParameter

From ea369bf5c48d92121dc7d8c634f4e950016b41dd Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 26 Oct 2022 14:02:47 -0400
Subject: [PATCH 17/43] fixing client tests that broke with inadequate prop
 mutation fix

---
 .../src/components/Form/Elements/FormText.vue  | 18 ++++++++++--------
 client/src/components/Form/FormElement.test.js |  7 +++++--
 client/src/components/Form/FormElement.vue     |  3 +++
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 452145f1be5..f0c1b180446 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -15,7 +15,7 @@
                     :type="type"
                     @change="onInputChange" />
 
-                <datalist v-if="datalist && !area && !multiple" :id="`${id}-datalist`">
+                <datalist v-if="datalist && !inputArea && !multiple" :id="`${id}-datalist`">
                     <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value"></option>
                 </datalist>
             </b-col>
@@ -28,7 +28,7 @@ import Utils from "utils/utils";
 
 export default {
     props: {
-        inputValue: {
+        value: {
             // String; Array for multiple
             required: false,
             default: "",
@@ -42,7 +42,7 @@ export default {
             required: false,
             default: "text",
         },
-        inputArea: {
+        area: {
             // <textarea> instead of <input> element
             type: Boolean,
             required: false,
@@ -96,13 +96,15 @@ export default {
         },
     },
     data() {
+        let inputArea;
+        let inputValue;
         if (["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) || (this.options && this.data)) {
-            this.area = this.multiple;
+            inputArea = this.multiple;
             if (Utils.isEmpty(this.value)) {
-                this.value = null;
+                inputValue = null;
             } else {
                 if (Array.isArray(this.value)) {
-                    this.value = this.multiple
+                    inputValue = this.multiple
                         ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
                         : String(this.value[0]);
                 }
@@ -112,8 +114,8 @@ export default {
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
-            value: this.inputValue,
-            area: this.inputArea,
+            inputArea: inputArea,
+            inputValue: inputValue,
         };
     },
     computed: {
diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js
index a8589f74ddd..3963f3342cd 100644
--- a/client/src/components/Form/FormElement.test.js
+++ b/client/src/components/Form/FormElement.test.js
@@ -1,6 +1,8 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
 import FormElement from "./FormElement";
+import FormInput from "./Elements/FormInput";
+import FormHidden from "./Elements/FormHidden";
 
 const localVue = getLocalVue();
 
@@ -62,8 +64,9 @@ describe("FormElement", () => {
 
     it("check type matching", async () => {
         await wrapper.setProps({ type: "text" });
-        expect(wrapper.find("div[id='input'").text()).toEqual("form-input");
+        console.log(wrapper.html());
+        expect(wrapper.find("div[id='input']").text()).toEqual("form-input");
         await wrapper.setProps({ attributes: { titleonly: true } });
-        expect(wrapper.find("div[id='input'").text()).toEqual("form-hidden");
+        expect(wrapper.find("div[id='input']").text()).toEqual("form-hidden");
     });
 });
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index ff9329b275b..286b200d4ad 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -36,8 +36,11 @@
                 :id="id"
                 v-model="currentValue"
                 :readonly="attrs.readonly"
+                :value="attrs.value"
+                :area="attrs.area"
                 :placeholder="attrs.placeholder"
                 :color="attrs.color"
+                :multiple="attrs.multiple"
                 :style="attrs.style"
                 :datalist="attrs.datalist"
                 :type="type" />

From ba1e17c972a24bcd1d698c2b3900f68c81fe7a15 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 26 Oct 2022 14:13:32 -0400
Subject: [PATCH 18/43] fixing client test

---
 client/src/components/Form/FormElement.test.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js
index 3963f3342cd..4cacf81d33f 100644
--- a/client/src/components/Form/FormElement.test.js
+++ b/client/src/components/Form/FormElement.test.js
@@ -1,8 +1,6 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
 import FormElement from "./FormElement";
-import FormInput from "./Elements/FormInput";
-import FormHidden from "./Elements/FormHidden";
 
 const localVue = getLocalVue();
 
@@ -22,6 +20,7 @@ describe("FormElement", () => {
             stubs: {
                 FormInput: { template: "<div>form-input</div>" },
                 FormHidden: { template: "<div>form-hidden</div>" },
+                FormText: { template: "<div>form-text</div>" },
             },
         });
     });
@@ -64,8 +63,7 @@ describe("FormElement", () => {
 
     it("check type matching", async () => {
         await wrapper.setProps({ type: "text" });
-        console.log(wrapper.html());
-        expect(wrapper.find("div[id='input']").text()).toEqual("form-input");
+        expect(wrapper.find("div[id='input']").text()).toEqual("form-text");
         await wrapper.setProps({ attributes: { titleonly: true } });
         expect(wrapper.find("div[id='input']").text()).toEqual("form-hidden");
     });

From 3b8192fc78e09c7f94368d540c4b1dbd1128c112 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 26 Oct 2022 15:05:31 -0400
Subject: [PATCH 19/43] fixing Selenium test

---
 lib/galaxy_test/selenium/test_personal_information.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy_test/selenium/test_personal_information.py b/lib/galaxy_test/selenium/test_personal_information.py
index 46aa4cb5989..347d28941f5 100644
--- a/lib/galaxy_test/selenium/test_personal_information.py
+++ b/lib/galaxy_test/selenium/test_personal_information.py
@@ -135,7 +135,7 @@ class TestManageInformation(SeleniumTestCase):
         element.send_keys(new_input_text)
 
     def get_address_input_field(self, address_form, input_field_label):
-        return address_form.find_element(self.by.CSS_SELECTOR, f"[data-label='{input_field_label}'] > input")
+        return address_form.find_element(self.by.CSS_SELECTOR, f"[data-label='{input_field_label}'] > div > div > div > input")
 
 
 class TestDeleteCurrentAccount(SeleniumTestCase):

From 5235756051c3999d785f7dd2eaf01ba70ad23800 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Thu, 27 Oct 2022 15:38:06 -0400
Subject: [PATCH 20/43] python linting, and adding additional conditionals for
 rendering this form input (from FormSelect PR Review)

---
 client/src/components/Form/FormElement.vue            | 9 ++++++++-
 lib/galaxy_test/selenium/test_personal_information.py | 4 +++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 286b200d4ad..ca5309617c0 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -32,7 +32,14 @@
                 :type="type"
                 :workflow-building-mode="workflowBuildingMode" />
             <FormText
-                v-else-if="type == 'text' || type == 'password'"
+                v-else-if="
+                    type === 'text' ||
+                    type === 'password' ||
+                    (type === 'select' && attrs.isWorkflow == true) ||
+                    (type === 'genomebuild' && attrs.isWorkflow == true) ||
+                    (type === 'data_column' && attrs.isWorkflow == true) ||
+                    (type === 'group_tag' && attrs.isWorkflow == true)
+                "
                 :id="id"
                 v-model="currentValue"
                 :readonly="attrs.readonly"
diff --git a/lib/galaxy_test/selenium/test_personal_information.py b/lib/galaxy_test/selenium/test_personal_information.py
index 347d28941f5..328a2206e51 100644
--- a/lib/galaxy_test/selenium/test_personal_information.py
+++ b/lib/galaxy_test/selenium/test_personal_information.py
@@ -135,7 +135,9 @@ class TestManageInformation(SeleniumTestCase):
         element.send_keys(new_input_text)
 
     def get_address_input_field(self, address_form, input_field_label):
-        return address_form.find_element(self.by.CSS_SELECTOR, f"[data-label='{input_field_label}'] > div > div > div > input")
+        return address_form.find_element(
+            self.by.CSS_SELECTOR, f"[data-label='{input_field_label}'] > div > div > div > input"
+        )
 
 
 class TestDeleteCurrentAccount(SeleniumTestCase):

From 14cc12f0b8528c07c4e92aa1c43fdf2dec9ae331 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 31 Oct 2022 09:29:05 -0400
Subject: [PATCH 21/43] adding test case for is_workflow conditional

---
 client/src/components/Form/FormElement.test.js | 5 +++++
 client/src/components/Form/FormElement.vue     | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js
index 4cacf81d33f..b30a51e93be 100644
--- a/client/src/components/Form/FormElement.test.js
+++ b/client/src/components/Form/FormElement.test.js
@@ -67,4 +67,9 @@ describe("FormElement", () => {
         await wrapper.setProps({ attributes: { titleonly: true } });
         expect(wrapper.find("div[id='input']").text()).toEqual("form-hidden");
     });
+
+    it("displays as the correct type if is_workflow is true", async () => {
+        await wrapper.setProps({ type: "data_column", attributes: { is_workflow: true } });
+        expect(wrapper.find("div[id='input']").text()).toEqual("form-text");
+    });
 });
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index ca5309617c0..3861f236984 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -35,10 +35,10 @@
                 v-else-if="
                     type === 'text' ||
                     type === 'password' ||
-                    (type === 'select' && attrs.isWorkflow == true) ||
-                    (type === 'genomebuild' && attrs.isWorkflow == true) ||
-                    (type === 'data_column' && attrs.isWorkflow == true) ||
-                    (type === 'group_tag' && attrs.isWorkflow == true)
+                    (type === 'select' && attrs.is_workflow == true) ||
+                    (type === 'genomebuild' && attrs.is_workflow == true) ||
+                    (type === 'data_column' && attrs.is_workflow == true) ||
+                    (type === 'group_tag' && attrs.is_workflow == true)
                 "
                 :id="id"
                 v-model="currentValue"

From f8bd8615c669cb8015c8c6820e92056f265d23ff Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Thu, 10 Nov 2022 17:52:36 -0500
Subject: [PATCH 22/43] adding optional text form component since it was part
 of logic for FormText and reuses the component

---
 .../Form/Elements/FormOptionalText.vue        | 89 +++++++++++++++++++
 client/src/components/Form/FormElement.vue    | 15 ++++
 .../selenium/test_workflow_editor.py          |  5 +-
 3 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormOptionalText.vue

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
new file mode 100644
index 00000000000..1dd869b7ce5
--- /dev/null
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <b-form-checkbox v-model="status" value="optional_text" unchecked-value="no_optional_text" switch
+            >Set value for this optinonal select field?</b-form-checkbox
+        >
+        <FormText
+            v-if="status == 'optional_text'"
+            :id="id"
+            v-model="currentValue"
+            :readonly="readonly"
+            :value="value"
+            :area="area"
+            :placeholder="placeholder"
+            :color="color"
+            :multiple="multiple"
+            :style="tyle"
+            :datalist="datalist"
+            :type="type" />
+    </div>
+</template>
+
+<script>
+import FormText from "./FormText";
+export default {
+    components: {
+        FormText,
+    },
+    props: {
+        value: {
+            required: false,
+            default: "",
+        },
+        id: {
+            type: String,
+            required: false,
+        },
+        type: {
+            type: String,
+            required: false,
+            default: "text",
+        },
+        area: {
+            // <textarea> instead of <input> element
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        multiple: {
+            // Allow multiple entries to be created
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        placeholder: {
+            type: String,
+            required: false,
+        },
+        color: {
+            type: String,
+            required: false,
+        },
+        datalist: {
+            // Display list of suggestions in autocomplete dialog
+            type: Array,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            status: "no_optional_text",
+        };
+    },
+    computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.setValue(val);
+            },
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 3861f236984..4643bb0bdba 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -31,6 +31,19 @@
                 :min="attrs.min"
                 :type="type"
                 :workflow-building-mode="workflowBuildingMode" />
+            <FormOptionalText
+                v-else-if="type === 'select' && attrs.is_workflow == true && attrs.optional"
+                :id="id"
+                v-model="currentValue"
+                :readonly="attrs.readonly"
+                :value="attrs.value"
+                :area="attrs.area"
+                :placeholder="attrs.placeholder"
+                :color="attrs.color"
+                :multiple="attrs.multiple"
+                :style="attrs.style"
+                :datalist="attrs.datalist"
+                :type="type" />
             <FormText
                 v-else-if="
                     type === 'text' ||
@@ -78,6 +91,7 @@ import FormColor from "./Elements/FormColor";
 import FormDirectory from "./Elements/FormDirectory";
 import FormNumber from "./Elements/FormNumber";
 import FormText from "./Elements/FormText";
+import FormOptionalText from "./Elements/FormOptionalText";
 
 export default {
     components: {
@@ -89,6 +103,7 @@ export default {
         FormColor,
         FormParameter,
         FormDirectory,
+        FormOptionalText,
     },
     props: {
         id: {
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index c4397784f98..2b241c1bd4f 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -102,10 +102,7 @@ class TestWorkflowEditor(SeleniumTestCase, RunsWorkflows):
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
         # External (selenium-side) debounce hack for old backbone input
         # TODO: remove when form elements are all converted.
-        self.components.tool_form.parameter_input(parameter="select_single").wait_for_and_send_keys("parameter valu")
-        self.sleep_for(self.wait_types.UX_RENDER)
-        self.components.tool_form.parameter_input(parameter="select_single").wait_for_and_send_keys("e")
-        self.sleep_for(self.wait_types.UX_RENDER)
+        self.components.tool_form.parameter_input(parameter="select_single").wait_for_and_send_keys("parameter value")
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])

From 8304d636fcfaf4747a6b2abb70e9522bad7a37dc Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Fri, 18 Nov 2022 23:23:35 -0500
Subject: [PATCH 23/43] Selenium test passing now, all logic seemingly in
 place, race condition still exists

---
 .../Form/Elements/FormOptionalText.vue        | 45 ++++++++++++++++---
 .../src/components/Form/Elements/FormText.vue |  1 +
 client/src/utils/navigation/navigation.yml    |  4 +-
 .../selenium/test_workflow_editor.py          |  7 +--
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index 1dd869b7ce5..53e206243f0 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -1,10 +1,15 @@
 <template>
     <div>
-        <b-form-checkbox v-model="status" value="optional_text" unchecked-value="no_optional_text" switch
-            >Set value for this optinonal select field?</b-form-checkbox
+        <b-form-checkbox
+            class="ui-switch"
+            v-model="currentStatus"
+            value="optional_text"
+            unchecked-value="no_optional_text"
+            switch
+            >Set value for this optional select field?</b-form-checkbox
         >
         <FormText
-            v-if="status == 'optional_text'"
+            v-if="textEnabled"
             :id="id"
             v-model="currentValue"
             :readonly="readonly"
@@ -25,6 +30,11 @@ export default {
     components: {
         FormText,
     },
+    data() {
+        return {
+            status: "no_optional_text"
+        }
+    },
     props: {
         value: {
             required: false,
@@ -70,10 +80,8 @@ export default {
             required: false,
         },
     },
-    data() {
-        return {
-            status: "no_optional_text",
-        };
+    created() {
+        this.status = "no_optional_text";
     },
     computed: {
         currentValue: {
@@ -84,6 +92,29 @@ export default {
                 this.setValue(val);
             },
         },
+        currentStatus: {
+            get() {
+                return this.status;
+            },
+            set(val) {
+                this.status = val;
+                if (val == "no_optional_text") {
+                    this.currentValue = null;
+                } else {
+                    this.currentValue = "";
+                }
+            },
+        },
+        textEnabled() {
+            return this.currentStatus == "optional_text";
+        }
+    },
+    methods: {
+        /** Submits a changed value. */
+        setValue(value) {
+            this.$emit("input", value, this.id);
+            this.$emit("change", this.refreshOnChange);
+        },
     },
 };
 </script>
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index f0c1b180446..f5689a88037 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -6,6 +6,7 @@
         <b-row align-v="center">
             <b-col>
                 <component
+                    class="text-input"
                     :is="componentName"
                     :id="id"
                     v-model="currentValue"
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 2603d218e1c..16ccb39856e 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -451,8 +451,8 @@ tool_form:
     options: '.tool-dropdown'
     execute: 'button#execute'
     parameter_div: 'div.ui-form-element[id="form-element-${parameter}"]'
-    parameter_checkbox: 'div.ui-form-element[id="form-element-${parameter}"] .ui-switch div'
-    parameter_input: 'div.ui-form-element[id="form-element-${parameter}"] .ui-input'
+    parameter_checkbox: 'div.ui-form-element[id="form-element-${parameter}"] .ui-switch'
+    parameter_input: 'div.ui-form-element[id="form-element-${parameter}"] .text-input'
     parameter_textarea: 'div.ui-form-element[id="form-element-${parameter}"] textarea'
     reference: '.formatted-reference'
     about: '.tool-footer'
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 2b241c1bd4f..be70a3b5d77 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -1,5 +1,5 @@
 import json
-
+import time
 import yaml
 from selenium.webdriver.common.action_chains import ActionChains
 from selenium.webdriver.common.keys import Keys
@@ -100,21 +100,22 @@ class TestWorkflowEditor(SeleniumTestCase, RunsWorkflows):
         node = editor.node._(label="select_from_dataset_optional")
         node.title.wait_for_and_click()
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
-        # External (selenium-side) debounce hack for old backbone input
-        # TODO: remove when form elements are all converted.
         self.components.tool_form.parameter_input(parameter="select_single").wait_for_and_send_keys("parameter value")
+        time.sleep(5) # TODO: fix the race condition
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])
         assert tool_state["select_single"] == "parameter value"
         # Disable optional button, resets value to null
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
+        time.sleep(5)
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])
         assert tool_state["select_single"] is None
         # Enable button but don't provide a value
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
+        time.sleep(5) # TODO: fix the race condition
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])

From 45ae6658fe438751aac7522b5b9ed80ab57500ca Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Tue, 6 Dec 2022 23:54:08 -0500
Subject: [PATCH 24/43] fixing Selenium test

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

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index f5689a88037..9de7de107de 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -98,25 +98,14 @@ export default {
     },
     data() {
         let inputArea;
-        let inputValue;
         if (["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) || (this.options && this.data)) {
             inputArea = this.multiple;
-            if (Utils.isEmpty(this.value)) {
-                inputValue = null;
-            } else {
-                if (Array.isArray(this.value)) {
-                    inputValue = this.multiple
-                        ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
-                        : String(this.value[0]);
-                }
-            }
         }
         return {
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
             inputArea: inputArea,
-            inputValue: inputValue,
         };
     },
     computed: {
@@ -125,7 +114,9 @@ export default {
                 // TODO: is silent fail on non-strings appropriate?
                 const v = this.value || "";
                 if (Array.isArray(v)) {
-                    return this.multiple ? v.map((i) => String(i)).join("\n") : String(v[0]);
+                    return this.multiple
+                        ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
+                        : String(this.value[0]);
                 }
                 return typeof v === "string" ? v : "";
             },

From eb53a6f86b3ae5c01320bda0b1a1132139ecf464 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 7 Dec 2022 22:14:41 -0500
Subject: [PATCH 25/43] Update client/src/components/Form/FormElement.vue

Co-authored-by: Dannon <dannon.baker@gmail.com>
---
 client/src/components/Form/FormElement.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 1e1ceab3611..e8a83343480 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -294,8 +294,6 @@ library.add(faExclamation, faTimes, faArrowsAltH, faCaretSquareDown, faCaretSqua
                 :style="attrs.style"
                 :datalist="attrs.datalist"
                 :type="type" />
-            <FormColor v-else-if="type == 'color'" :id="id" v-model="currentValue" />
-            <FormDirectory v-else-if="type == 'directory_uri'" v-model="currentValue" />
             <FormSelection
                 v-else-if="props.type == 'select' && attrs.display == 'radio'"
                 :id="id"

From 8978be65225ce838fff9a9fe454120e83680c376 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 7 Dec 2022 22:40:00 -0500
Subject: [PATCH 26/43] fixing client linting, python linting, and client test
 issues

---
 .../Form/Elements/FormOptionalText.vue         | 18 +++++++++---------
 .../components/Form/Elements/FormText.test.js  |  2 +-
 .../src/components/Form/Elements/FormText.vue  |  4 +---
 client/src/components/Form/FormElement.test.js |  2 --
 .../selenium/test_workflow_editor.py           |  4 ++--
 5 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index 53e206243f0..d4432ae5c80 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <b-form-checkbox
-            class="ui-switch"
             v-model="currentStatus"
+            class="ui-switch"
             value="optional_text"
             unchecked-value="no_optional_text"
             switch
@@ -30,11 +30,6 @@ export default {
     components: {
         FormText,
     },
-    data() {
-        return {
-            status: "no_optional_text"
-        }
-    },
     props: {
         value: {
             required: false,
@@ -80,8 +75,10 @@ export default {
             required: false,
         },
     },
-    created() {
-        this.status = "no_optional_text";
+    data() {
+        return {
+            status: "no_optional_text",
+        };
     },
     computed: {
         currentValue: {
@@ -107,7 +104,10 @@ export default {
         },
         textEnabled() {
             return this.currentStatus == "optional_text";
-        }
+        },
+    },
+    created() {
+        this.status = "no_optional_text";
     },
     methods: {
         /** Submits a changed value. */
diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
index 9b855313b58..10dd9ccfc89 100644
--- a/client/src/components/Form/Elements/FormText.test.js
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "jest/helpers";
+import { getLocalVue } from "tests/jest/helpers";
 import FormText from "./FormText";
 
 const localVue = getLocalVue();
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 9de7de107de..eb963728d9e 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -6,10 +6,10 @@
         <b-row align-v="center">
             <b-col>
                 <component
-                    class="text-input"
                     :is="componentName"
                     :id="id"
                     v-model="currentValue"
+                    class="text-input"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
@@ -25,8 +25,6 @@
 </template>
 
 <script>
-import Utils from "utils/utils";
-
 export default {
     props: {
         value: {
diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js
index 1668f4792ed..79a7770442f 100644
--- a/client/src/components/Form/FormElement.test.js
+++ b/client/src/components/Form/FormElement.test.js
@@ -2,7 +2,6 @@ import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 import FormElement from "./FormElement";
 import FormHidden from "./Elements/FormHidden";
-import FormInput from "./Elements/FormInput";
 import FormText from "./Elements/FormText";
 
 const localVue = getLocalVue();
@@ -83,7 +82,6 @@ describe("FormElement", () => {
         await wrapper.setProps({ type: "data_column", attributes: { is_workflow: true } });
         expect(wrapper.findComponent(FormText).exists()).toBe(true);
     });
-        
 
     it("marks required values", async () => {
         await wrapper.setProps({ type: "text", attributes: { optional: false } });
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 8e9813b1296..4a8e99811ef 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -102,7 +102,7 @@ class TestWorkflowEditor(SeleniumTestCase, RunsWorkflows):
         node.title.wait_for_and_click()
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
         self.components.tool_form.parameter_input(parameter="select_single").wait_for_and_send_keys("parameter value")
-        time.sleep(5) # TODO: fix the race condition
+        time.sleep(5)  # TODO: fix the race condition
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])
@@ -116,7 +116,7 @@ class TestWorkflowEditor(SeleniumTestCase, RunsWorkflows):
         assert tool_state["select_single"] is None
         # Enable button but don't provide a value
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
-        time.sleep(5) # TODO: fix the race condition
+        time.sleep(5)  # TODO: fix the race condition
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])

From cdcd92f533eafb25d7641053b5156a9837ec71c8 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Fri, 9 Dec 2022 18:36:16 +0100
Subject: [PATCH 27/43] Wait for post to update editor state, fix props in
 FormText.vue

---
 client/src/components/Form/Elements/FormOptionalText.vue | 1 -
 client/src/components/Form/Elements/FormText.vue         | 9 ++++++++-
 lib/galaxy_test/selenium/test_workflow_editor.py         | 7 +++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index d4432ae5c80..5c192538a72 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -18,7 +18,6 @@
             :placeholder="placeholder"
             :color="color"
             :multiple="multiple"
-            :style="tyle"
             :datalist="datalist"
             :type="type" />
     </div>
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index eb963728d9e..2c5d1381ffb 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -13,7 +13,7 @@
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
-                    :type="type"
+                    :type="localType"
                     @change="onInputChange" />
 
                 <datalist v-if="datalist && !inputArea && !multiple" :id="`${id}-datalist`">
@@ -107,6 +107,13 @@ export default {
         };
     },
     computed: {
+        localType() {
+            // this seems silly, if we're in a component called FormText ... this has to be text??
+            if (this.inputArea) {
+                return "text";
+            }
+            return this.type;
+        },
         currentValue: {
             get() {
                 // TODO: is silent fail on non-strings appropriate?
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 4a8e99811ef..88ef6c9c9ea 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -1,5 +1,5 @@
 import json
-import time
+
 import pytest
 import yaml
 from selenium.webdriver.common.action_chains import ActionChains
@@ -102,21 +102,20 @@ class TestWorkflowEditor(SeleniumTestCase, RunsWorkflows):
         node.title.wait_for_and_click()
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
         self.components.tool_form.parameter_input(parameter="select_single").wait_for_and_send_keys("parameter value")
-        time.sleep(5)  # TODO: fix the race condition
+        # onSetData does an extra POST to build_modules, so we need to wait for that ...
+        self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])
         assert tool_state["select_single"] == "parameter value"
         # Disable optional button, resets value to null
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
-        time.sleep(5)
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])
         assert tool_state["select_single"] is None
         # Enable button but don't provide a value
         self.components.tool_form.parameter_checkbox(parameter="select_single").wait_for_and_click()
-        time.sleep(5)  # TODO: fix the race condition
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(workflow_id)
         tool_state = json.loads(workflow["steps"]["0"]["tool_state"])

From de2d62bb217693d71424fe48f1ea2d9788127ea7 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Mon, 19 Dec 2022 20:10:56 -0500
Subject: [PATCH 28/43] adding extensions to vue imports

---
 client/src/components/Form/FormElement.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index e962c02d17f..3fbfc32081c 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import FormBoolean from "./Elements/FormBoolean";
-import FormHidden from "./Elements/FormHidden";
-import FormInput from "./Elements/FormInput";
-import FormParameter from "./Elements/FormParameter";
-import FormSelection from "./Elements/FormSelection";
-import FormColor from "./Elements/FormColor";
-import FormDirectory from "./Elements/FormDirectory";
-import FormNumber from "./Elements/FormNumber";
-import FormText from "./Elements/FormText";
-import FormOptionalText from "./Elements/FormOptionalText";
-import FormRulesEdit from "./Elements/FormRulesEdit";
+import FormBoolean from "./Elements/FormBoolean.vue";
+import FormHidden from "./Elements/FormHidden.vue";
+import FormInput from "./Elements/FormInput.vue";
+import FormParameter from "./Elements/FormParameter.vue";
+import FormSelection from "./Elements/FormSelection.vue";
+import FormColor from "./Elements/FormColor.vue";
+import FormDirectory from "./Elements/FormDirectory.vue";
+import FormNumber from "./Elements/FormNumber.vue";
+import FormText from "./Elements/FormText.vue";
+import FormOptionalText from "./Elements/FormOptionalText.vue";
+import FormRulesEdit from "./Elements/FormRulesEdit.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, computed, useAttrs } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";

From ac637fe191141c199acf71c9ca1720d5f375cf00 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Fri, 23 Dec 2022 15:44:30 -0500
Subject: [PATCH 29/43] changing status attribute to boolean for clarity

---
 .../components/Form/Elements/FormOptionalText.vue | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index 5c192538a72..af6146bc855 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -1,11 +1,6 @@
 <template>
     <div>
-        <b-form-checkbox
-            v-model="currentStatus"
-            class="ui-switch"
-            value="optional_text"
-            unchecked-value="no_optional_text"
-            switch
+        <b-form-checkbox v-model="currentStatus" class="ui-switch" switch
             >Set value for this optional select field?</b-form-checkbox
         >
         <FormText
@@ -76,7 +71,7 @@ export default {
     },
     data() {
         return {
-            status: "no_optional_text",
+            status: false,
         };
     },
     computed: {
@@ -94,7 +89,7 @@ export default {
             },
             set(val) {
                 this.status = val;
-                if (val == "no_optional_text") {
+                if (val == false) {
                     this.currentValue = null;
                 } else {
                     this.currentValue = "";
@@ -102,11 +97,11 @@ export default {
             },
         },
         textEnabled() {
-            return this.currentStatus == "optional_text";
+            return this.currentStatus == true;
         },
     },
     created() {
-        this.status = "no_optional_text";
+        this.status = false;
     },
     methods: {
         /** Submits a changed value. */

From 086f4946b145d8dcad8c528b58d9164832839ea5 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Fri, 23 Dec 2022 16:31:49 -0500
Subject: [PATCH 30/43] changing props to remove required attttribute and
 explicitly state default attribute instead, clarifying logic of inputArea
 variable

---
 .../src/components/Form/Elements/FormText.vue | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 2c5d1381ffb..bba0c1c1554 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -29,53 +29,47 @@ export default {
     props: {
         value: {
             // String; Array for multiple
-            required: false,
             default: "",
         },
         id: {
             type: String,
-            required: false,
+            default: "",
         },
         type: {
             type: String,
-            required: false,
             default: "text",
         },
         area: {
             // <textarea> instead of <input> element
             type: Boolean,
-            required: false,
             default: false,
         },
         multiple: {
             // Allow multiple entries to be created
             type: Boolean,
-            required: false,
             default: false,
         },
         readonly: {
             type: Boolean,
-            required: false,
             default: false,
         },
         placeholder: {
             type: String,
-            required: false,
+            default: "",
         },
         color: {
             type: String,
-            required: false,
+            default: "",
         },
         styleObj: {
             // This will be applied to the input element
             type: Object,
-            required: false,
             default: () => {},
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
             type: Array,
-            required: false,
+            default: [],
         },
 
         // These last three are for handling special input cases only
@@ -83,22 +77,20 @@ export default {
         optional: {
             type: Boolean,
             default: false,
-            required: false,
         },
         model_class: {
             type: String,
-            required: false,
+            default: "",
         },
         data: {
             type: Object, // ?
-            required: false,
+            default: () => {},
         },
     },
     data() {
-        let inputArea;
-        if (["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) || (this.options && this.data)) {
-            inputArea = this.multiple;
-        }
+        const inputArea =
+            this.multiple &&
+            (["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) || (this.options && this.data));
         return {
             dismissSecs: 5,
             dismissCountDown: 0,

From 8d957a645a2ff668f41a5d5b765c1da63f1cdad4 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Fri, 23 Dec 2022 17:16:47 -0500
Subject: [PATCH 31/43] removing generic components in template in favor of
 specifying the specific bootstrap vue components with conditional logic in
 the template

---
 .../src/components/Form/Elements/FormText.vue | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index bba0c1c1554..15360944933 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -5,17 +5,28 @@
         </b-alert>
         <b-row align-v="center">
             <b-col>
-                <component
-                    :is="componentName"
+                <b-form-textarea
+                    v-if="this.area || this.multiple"
                     :id="id"
                     v-model="currentValue"
                     class="text-input"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
-                    :type="localType"
-                    @change="onInputChange" />
-
+                    :type="type"
+                    @change="onInputChange">
+                </b-form-textarea>
+                <b-form-input
+                    v-else
+                    :id="id"
+                    v-model="currentValue"
+                    class="text-input"
+                    :readonly="readonly"
+                    :placeholder="placeholder"
+                    :style="style"
+                    :type="type"
+                    @change="onInputChange">
+                </b-form-input>
                 <datalist v-if="datalist && !inputArea && !multiple" :id="`${id}-datalist`">
                     <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value"></option>
                 </datalist>
@@ -68,8 +79,8 @@ export default {
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
-            type: Array,
-            default: [],
+            type: Function,
+            default: () => {},
         },
 
         // These last three are for handling special input cases only
@@ -99,13 +110,6 @@ export default {
         };
     },
     computed: {
-        localType() {
-            // this seems silly, if we're in a component called FormText ... this has to be text??
-            if (this.inputArea) {
-                return "text";
-            }
-            return this.type;
-        },
         currentValue: {
             get() {
                 // TODO: is silent fail on non-strings appropriate?
@@ -124,9 +128,6 @@ export default {
                 }
             },
         },
-        componentName() {
-            return this.area || this.multiple ? "b-form-textarea" : "b-form-input";
-        },
         style() {
             return this.color ? { ...this.styleObj, color: this.color } : this.styleObj;
         },

From b0e8e609f58b48be7640ab3f9a7d5f8114b94248 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 26 Dec 2022 04:42:24 -0500
Subject: [PATCH 32/43] Set remaining defaults, fix conflicting datatlist type,
 remove outdated comment

---
 .../Form/Elements/FormOptionalText.vue        | 22 ++++++-------------
 .../src/components/Form/Elements/FormText.vue |  5 ++---
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index af6146bc855..8fcbaae8cae 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <b-form-checkbox v-model="currentStatus" class="ui-switch" switch
-            >Set value for this optional select field?</b-form-checkbox
-        >
+        <b-form-checkbox v-model="currentStatus" class="ui-switch" switch>
+            Set value for this optional select field?
+        </b-form-checkbox>
         <FormText
             v-if="textEnabled"
             :id="id"
@@ -26,47 +26,42 @@ export default {
     },
     props: {
         value: {
-            required: false,
             default: "",
         },
         id: {
             type: String,
-            required: false,
+            default: null,
         },
         type: {
             type: String,
-            required: false,
             default: "text",
         },
         area: {
             // <textarea> instead of <input> element
             type: Boolean,
-            required: false,
             default: false,
         },
         multiple: {
             // Allow multiple entries to be created
             type: Boolean,
-            required: false,
             default: false,
         },
         readonly: {
             type: Boolean,
-            required: false,
             default: false,
         },
         placeholder: {
             type: String,
-            required: false,
+            default: null,
         },
         color: {
             type: String,
-            required: false,
+            default: null,
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
             type: Array,
-            required: false,
+            default: null,
         },
     },
     data() {
@@ -100,9 +95,6 @@ export default {
             return this.currentStatus == true;
         },
     },
-    created() {
-        this.status = false;
-    },
     methods: {
         /** Submits a changed value. */
         setValue(value) {
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 15360944933..7777c955bf7 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -79,8 +79,8 @@ export default {
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
-            type: Function,
-            default: () => {},
+            type: Array,
+            default: null,
         },
 
         // These last three are for handling special input cases only
@@ -121,7 +121,6 @@ export default {
                 }
                 return typeof v === "string" ? v : "";
             },
-            // TODO: handle the emmitted "input"
             set(newVal, oldVal) {
                 if (newVal !== oldVal) {
                     this.$emit("input", newVal);

From face701541cbef3eb4bd439a23cfc7b0d1b89fc5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 26 Dec 2022 05:06:59 -0500
Subject: [PATCH 33/43] Consolidate condition to distinguish between text area
 and text field, remove unused props

---
 .../src/components/Form/Elements/FormText.vue | 27 ++++---------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 7777c955bf7..acd72c36171 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -6,14 +6,13 @@
         <b-row align-v="center">
             <b-col>
                 <b-form-textarea
-                    v-if="this.area || this.multiple"
+                    v-if="inputArea"
                     :id="id"
                     v-model="currentValue"
                     class="text-input"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
-                    :type="type"
                     @change="onInputChange">
                 </b-form-textarea>
                 <b-form-input
@@ -27,7 +26,7 @@
                     :type="type"
                     @change="onInputChange">
                 </b-form-input>
-                <datalist v-if="datalist && !inputArea && !multiple" :id="`${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"></option>
                 </datalist>
             </b-col>
@@ -82,31 +81,12 @@ export default {
             type: Array,
             default: null,
         },
-
-        // These last three are for handling special input cases only
-
-        optional: {
-            type: Boolean,
-            default: false,
-        },
-        model_class: {
-            type: String,
-            default: "",
-        },
-        data: {
-            type: Object, // ?
-            default: () => {},
-        },
     },
     data() {
-        const inputArea =
-            this.multiple &&
-            (["SelectTagParameter", "ColumnListParameter"].includes(this.model_class) || (this.options && this.data));
         return {
             dismissSecs: 5,
             dismissCountDown: 0,
             errorMessage: "",
-            inputArea: inputArea,
         };
     },
     computed: {
@@ -127,6 +107,9 @@ export default {
                 }
             },
         },
+        inputArea() {
+            return this.area || this.multiple;
+        },
         style() {
             return this.color ? { ...this.styleObj, color: this.color } : this.styleObj;
         },

From 4c37df911a6f3d758ed55e8a16ded7160ef0d704 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 26 Dec 2022 23:28:39 -0500
Subject: [PATCH 34/43] Fix prop requirements for tool steps, content id is not
 available for input steps, labels are optional

---
 client/src/components/Workflow/Editor/Forms/FormDefault.vue | 2 +-
 client/src/components/Workflow/Editor/Forms/FormTool.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Forms/FormDefault.vue b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
index 2dba36a8b7b..a247948d5f4 100644
--- a/client/src/components/Workflow/Editor/Forms/FormDefault.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
@@ -78,7 +78,7 @@ export default {
         },
         nodeContentId: {
             type: String,
-            required: true,
+            default: null,
         },
         nodeAnnotation: {
             type: String,
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 0a6d4399522..40ab90861fc 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -84,7 +84,7 @@ export default {
         },
         nodeLabel: {
             type: String,
-            required: true,
+            default: null,
         },
         nodeInputs: {
             type: Array,

From 9206f61c5075e956de2d9e0562e36ffa35718998 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 26 Dec 2022 23:39:17 -0500
Subject: [PATCH 35/43] Fix datalist feature, ensure it is shown to select the
 collection type and format of collection steps

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

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index acd72c36171..965b57c2c0d 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -24,6 +24,7 @@
                     :placeholder="placeholder"
                     :style="style"
                     :type="type"
+                    :list="`${id}-datalist`"
                     @change="onInputChange">
                 </b-form-input>
                 <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">

From 80c04a0450fcc235ffad1fccd543016248e2b7cf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 27 Dec 2022 17:19:23 -0500
Subject: [PATCH 36/43] Align to props usage in form element, use reduce to
 text/password field types only

---
 .../src/components/Form/Elements/FormText.vue   | 12 +++++++-----
 client/src/components/Form/FormElement.vue      | 17 ++++++-----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 965b57c2c0d..3b1371986b1 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -23,7 +23,7 @@
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
-                    :type="type"
+                    :type="acceptedTypes"
                     :list="`${id}-datalist`"
                     @change="onInputChange">
                 </b-form-input>
@@ -91,16 +91,18 @@ export default {
         };
     },
     computed: {
+        acceptedTypes() {
+            return ["text", "password"].includes(this.type) ? this.type : "text";
+        },
         currentValue: {
             get() {
-                // TODO: is silent fail on non-strings appropriate?
-                const v = this.value || "";
-                if (Array.isArray(v)) {
+                const v = this.value ?? "";
+                if (Array.isArray(v) && v.length > 0) {
                     return this.multiple
                         ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
                         : String(this.value[0]);
                 }
-                return typeof v === "string" ? v : "";
+                return String(v);
             },
             set(newVal, oldVal) {
                 if (newVal !== oldVal) {
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 3fbfc32081c..c4b5adf9c60 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -216,7 +216,6 @@ 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']" />
@@ -229,7 +228,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :type="props.type ?? 'float'"
                 :workflow-building-mode="workflowBuildingMode" />
             <FormOptionalText
-                v-else-if="type === 'select' && attrs.is_workflow == true && attrs.optional"
+                v-else-if="props.type === 'select' && attrs.is_workflow && attrs.optional"
                 :id="id"
                 v-model="currentValue"
                 :readonly="attrs.readonly"
@@ -240,15 +239,11 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :multiple="attrs.multiple"
                 :style="attrs.style"
                 :datalist="attrs.datalist"
-                :type="type" />
+                :type="props.type" />
             <FormText
                 v-else-if="
-                    type === 'text' ||
-                    type === 'password' ||
-                    (type === 'select' && attrs.is_workflow == true) ||
-                    (type === 'genomebuild' && attrs.is_workflow == true) ||
-                    (type === 'data_column' && attrs.is_workflow == true) ||
-                    (type === 'group_tag' && attrs.is_workflow == true)
+                    ['text', 'password'].includes(props.type) ||
+                    (attrs.is_workflow && ['select', 'genomebuild', 'data_column', 'group_tag'].includes(props.type))
                 "
                 :id="id"
                 v-model="currentValue"
@@ -260,7 +255,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :multiple="attrs.multiple"
                 :style="attrs.style"
                 :datalist="attrs.datalist"
-                :type="type" />
+                :type="props.type" />
             <FormSelection
                 v-else-if="props.type === 'select' && ['radio', 'checkboxes'].includes(attrs.display)"
                 :id="id"
@@ -272,7 +267,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :multiple="attrs.multiple" />
             <FormColor v-else-if="props.type === 'color'" :id="props.id" v-model="currentValue" />
             <FormDirectory v-else-if="props.type === 'directory_uri'" v-model="currentValue" />
-            <FormRulesEdit v-else-if="type == 'rules'" v-model="currentValue" :target="attrs.target" />
+            <FormRulesEdit v-else-if="props.type == 'rules'" v-model="currentValue" :target="attrs.target" />
             <FormParameter
                 v-else-if="backbonejs"
                 :id="props.id"

From 31913840b124400bb826aca6c10aa52a7334afaf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 27 Dec 2022 17:26:48 -0500
Subject: [PATCH 37/43] Fix condition

---
 client/src/components/Form/Elements/FormText.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 3b1371986b1..47378b08d8e 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -97,7 +97,10 @@ export default {
         currentValue: {
             get() {
                 const v = this.value ?? "";
-                if (Array.isArray(v) && v.length > 0) {
+                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]);

From 9f413b6978906074dfdd29a2b3872cac0a73ae2c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 27 Dec 2022 17:47:21 -0500
Subject: [PATCH 38/43] Add array value tests, test input value, and input type
 fallback

---
 .../components/Form/Elements/FormText.test.js | 66 +++++++++++--------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
index 10dd9ccfc89..ac17871dfc2 100644
--- a/client/src/components/Form/Elements/FormText.test.js
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -1,5 +1,4 @@
 import { mount } from "@vue/test-utils";
-import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 import FormText from "./FormText";
 
@@ -13,55 +12,66 @@ describe("FormText", () => {
         });
 
     it("should render the appropriate input type", async () => {
-        let wrapper = await mountFormText({});
-        await flushPromises();
-        let el = await wrapper.find("input[type='text']");
-        expect(el.exists()).toBe(true);
-
-        wrapper = await mountFormText({ type: "password" });
-        await flushPromises();
-        el = await wrapper.find("input[type='password']");
+        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 () => {
-        let wrapper = await mountFormText({ area: true });
-        await flushPromises();
-        let el = await wrapper.find("textarea");
-        expect(el.exists()).toBe(true);
-
-        wrapper = await mountFormText({ multiple: true });
-        await flushPromises();
-        el = await wrapper.find("textarea");
+        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({ datalist: ["one", "two", "three"] });
-        await flushPromises();
-        let el = await wrapper.find("datalist");
+        const wrapper = await mountFormText({ id: "text-input", datalist: ["one", "two", "three"] });
+        let el = wrapper.find("datalist");
         expect(el.exists()).toBe(true);
-        el = await wrapper.find("option");
+        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 style from props", async () => {
         let wrapper = await mountFormText({ styleObj: { fontSize: "18px" } });
-        await flushPromises();
-        let el = await wrapper.find("input");
+        let el = wrapper.find("input");
         expect(el.element.style).toMatchObject({ fontSize: "18px" });
-
         wrapper = await mountFormText({ styleObj: { fontSize: "18px" }, color: "white" });
-        await flushPromises();
-        el = await wrapper.find("input");
+        el = wrapper.find("input");
         expect(el.element.style).toMatchObject({ fontSize: "18px", color: "white" });
     });
 
     it("should be able to accept a default value", async () => {
         const v = "something";
         const wrapper = await mountFormText({ value: v });
-        await flushPromises();
-        const el = await wrapper.find("input");
+        const el = wrapper.find("input");
         expect(el.props("value")).toEqual(v);
     });
+
+    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");
+    });
+
+    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 3710f5bbb4e53cad3fce22b6cc2532b51f085daa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 27 Dec 2022 22:32:44 -0500
Subject: [PATCH 39/43] Remove unhandled event with unavailable
 refreshOnChange, ensure boolean status value, remove unused id

---
 .../Form/Elements/FormOptionalText.vue        | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index 8fcbaae8cae..f7af555ae81 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -4,7 +4,7 @@
             Set value for this optional select field?
         </b-form-checkbox>
         <FormText
-            v-if="textEnabled"
+            v-if="currentStatus"
             :id="id"
             v-model="currentValue"
             :readonly="readonly"
@@ -75,7 +75,7 @@ export default {
                 return this.value;
             },
             set(val) {
-                this.setValue(val);
+                this.$emit("input", val);
             },
         },
         currentStatus: {
@@ -83,24 +83,14 @@ export default {
                 return this.status;
             },
             set(val) {
-                this.status = val;
-                if (val == false) {
-                    this.currentValue = null;
-                } else {
+                this.status = Boolean(val);
+                if (this.status) {
                     this.currentValue = "";
+                } else {
+                    this.currentValue = null;
                 }
             },
         },
-        textEnabled() {
-            return this.currentStatus == true;
-        },
-    },
-    methods: {
-        /** Submits a changed value. */
-        setValue(value) {
-            this.$emit("input", value, this.id);
-            this.$emit("change", this.refreshOnChange);
-        },
     },
 };
 </script>

From a1a3fb12c1b21b3325151e700ca076c580d1ee6f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 27 Dec 2022 23:48:17 -0500
Subject: [PATCH 40/43] Display entered input value when reloading workflow,
 restore input

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

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index f7af555ae81..eeadd11bd70 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -80,7 +80,7 @@ export default {
         },
         currentStatus: {
             get() {
-                return this.status;
+                return this.status || this.value !== null;
             },
             set(val) {
                 this.status = Boolean(val);

From 8344de8f527782bb2e893800e43e603db14cb40e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 28 Dec 2022 10:29:28 -0500
Subject: [PATCH 41/43] Add first form optional text input jest test

---
 .../Form/Elements/FormOptionalText.test.js    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 client/src/components/Form/Elements/FormOptionalText.test.js

diff --git a/client/src/components/Form/Elements/FormOptionalText.test.js b/client/src/components/Form/Elements/FormOptionalText.test.js
new file mode 100644
index 00000000000..ab859e305bb
--- /dev/null
+++ b/client/src/components/Form/Elements/FormOptionalText.test.js
@@ -0,0 +1,35 @@
+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);
+    });
+});

From 7e4ffb5575469eaae5ded7a40a746910f2af13dc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 28 Dec 2022 12:08:47 -0500
Subject: [PATCH 42/43] Restore workflow parameter highlighting, add basic
 tests, remove unused code

---
 .../Form/Elements/FormOptionalText.vue        |  5 ---
 .../components/Form/Elements/FormText.test.js | 15 ++++-----
 .../src/components/Form/Elements/FormText.vue | 31 ++++++++++++-------
 client/src/components/Form/FormElement.vue    |  4 +--
 client/src/components/Workflow/Run/model.js   |  5 ++-
 5 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Form/Elements/FormOptionalText.vue b/client/src/components/Form/Elements/FormOptionalText.vue
index eeadd11bd70..d399d48af58 100644
--- a/client/src/components/Form/Elements/FormOptionalText.vue
+++ b/client/src/components/Form/Elements/FormOptionalText.vue
@@ -11,7 +11,6 @@
             :value="value"
             :area="area"
             :placeholder="placeholder"
-            :color="color"
             :multiple="multiple"
             :datalist="datalist"
             :type="type" />
@@ -54,10 +53,6 @@ export default {
             type: String,
             default: null,
         },
-        color: {
-            type: String,
-            default: null,
-        },
         datalist: {
             // Display list of suggestions in autocomplete dialog
             type: Array,
diff --git a/client/src/components/Form/Elements/FormText.test.js b/client/src/components/Form/Elements/FormText.test.js
index ac17871dfc2..0a4c2953b06 100644
--- a/client/src/components/Form/Elements/FormText.test.js
+++ b/client/src/components/Form/Elements/FormText.test.js
@@ -42,13 +42,14 @@ describe("FormText", () => {
         expect(el.exists()).toBe(true);
     });
 
-    it("should be able to render style from props", async () => {
-        let wrapper = await mountFormText({ styleObj: { fontSize: "18px" } });
-        let el = wrapper.find("input");
-        expect(el.element.style).toMatchObject({ fontSize: "18px" });
-        wrapper = await mountFormText({ styleObj: { fontSize: "18px" }, color: "white" });
-        el = wrapper.find("input");
-        expect(el.element.style).toMatchObject({ fontSize: "18px", color: "white" });
+    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({});
+        await wrapper.setProps({ color: "green" });
+        expect(el.element.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 () => {
diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 47378b08d8e..9554b292a43 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -9,23 +9,23 @@
                     v-if="inputArea"
                     :id="id"
                     v-model="currentValue"
-                    class="text-input"
+                    :class="['ui-text-area', cls]"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
-                    @change="onInputChange">
+                    @change="resetAlert">
                 </b-form-textarea>
                 <b-form-input
                     v-else
                     :id="id"
                     v-model="currentValue"
-                    class="text-input"
+                    :class="['ui-input', cls]"
                     :readonly="readonly"
                     :placeholder="placeholder"
                     :style="style"
                     :type="acceptedTypes"
                     :list="`${id}-datalist`"
-                    @change="onInputChange">
+                    @change="resetAlert">
                 </b-form-input>
                 <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">
                     <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value"></option>
@@ -72,10 +72,10 @@ export default {
             type: String,
             default: "",
         },
-        styleObj: {
-            // This will be applied to the input element
-            type: Object,
-            default: () => {},
+        cls: {
+            // Refers to an optional custom css class name
+            type: String,
+            default: null,
         },
         datalist: {
             // Display list of suggestions in autocomplete dialog
@@ -117,13 +117,15 @@ export default {
             return this.area || this.multiple;
         },
         style() {
-            return this.color ? { ...this.styleObj, color: this.color } : this.styleObj;
+            return this.color
+                ? {
+                      color: this.color,
+                      "border-color": this.color,
+                  }
+                : null;
         },
     },
     methods: {
-        onInputChange(value) {
-            this.resetAlert();
-        },
         showAlert(error) {
             if (error) {
                 this.errorMessage = error;
@@ -136,3 +138,8 @@ export default {
     },
 };
 </script>
+<style scoped>
+.ui-input-linked {
+    border-left-width: 0.5rem;
+}
+</style>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index c4b5adf9c60..267ab6965bc 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -235,9 +235,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :value="attrs.value"
                 :area="attrs.area"
                 :placeholder="attrs.placeholder"
-                :color="attrs.color"
                 :multiple="attrs.multiple"
-                :style="attrs.style"
                 :datalist="attrs.datalist"
                 :type="props.type" />
             <FormText
@@ -253,7 +251,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :placeholder="attrs.placeholder"
                 :color="attrs.color"
                 :multiple="attrs.multiple"
-                :style="attrs.style"
+                :cls="attrs.cls"
                 :datalist="attrs.datalist"
                 :type="props.type" />
             <FormSelection
diff --git a/client/src/components/Workflow/Run/model.js b/client/src/components/Workflow/Run/model.js
index 9be78546cff..bea7ef083b5 100644
--- a/client/src/components/Workflow/Run/model.js
+++ b/client/src/components/Workflow/Run/model.js
@@ -100,7 +100,7 @@ export class WorkflowRunModel {
                 name: wp_name,
                 type: "text",
                 color: `hsl( ${++wp_count * 100}, 70%, 30% )`,
-                style: "ui-form-wp-source",
+                cls: "ui-input-linked",
                 links: [],
                 optional: true,
             });
@@ -122,8 +122,7 @@ export class WorkflowRunModel {
                     wp_input.links.push(step);
                     input.wp_linked = true;
                     input.type = "text";
-                    input.backdrop = true;
-                    input.style = "ui-form-wp-target";
+                    input.cls = "ui-input-linked";
                 });
             });
             _.each(step.replacement_parameters, (wp_name) => {

From 1c9bed3419d156ed3e4be9f979480d4e1456dce5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 28 Dec 2022 13:00:28 -0500
Subject: [PATCH 43/43] Remove unused code path related to show alert mechanism
 and associated dom objects

---
 .../src/components/Form/Elements/FormText.vue | 79 ++++++-------------
 client/src/utils/navigation/navigation.yml    |  2 +-
 .../selenium/test_personal_information.py     |  2 +-
 3 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Form/Elements/FormText.vue b/client/src/components/Form/Elements/FormText.vue
index 9554b292a43..8a07155ae4f 100644
--- a/client/src/components/Form/Elements/FormText.vue
+++ b/client/src/components/Form/Elements/FormText.vue
@@ -1,38 +1,29 @@
 <template>
-    <div>
-        <b-alert v-if="errorMessage" class="mt-2" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
-            {{ errorMessage }}
-        </b-alert>
-        <b-row align-v="center">
-            <b-col>
-                <b-form-textarea
-                    v-if="inputArea"
-                    :id="id"
-                    v-model="currentValue"
-                    :class="['ui-text-area', cls]"
-                    :readonly="readonly"
-                    :placeholder="placeholder"
-                    :style="style"
-                    @change="resetAlert">
-                </b-form-textarea>
-                <b-form-input
-                    v-else
-                    :id="id"
-                    v-model="currentValue"
-                    :class="['ui-input', cls]"
-                    :readonly="readonly"
-                    :placeholder="placeholder"
-                    :style="style"
-                    :type="acceptedTypes"
-                    :list="`${id}-datalist`"
-                    @change="resetAlert">
-                </b-form-input>
-                <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">
-                    <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value"></option>
-                </datalist>
-            </b-col>
-        </b-row>
-    </div>
+    <b-row align-v="center">
+        <b-col>
+            <b-form-textarea
+                v-if="inputArea"
+                :id="id"
+                v-model="currentValue"
+                :class="['ui-text-area', cls]"
+                :readonly="readonly"
+                :placeholder="placeholder"
+                :style="style" />
+            <b-form-input
+                v-else
+                :id="id"
+                v-model="currentValue"
+                :class="['ui-input', cls]"
+                :readonly="readonly"
+                :placeholder="placeholder"
+                :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>
 </template>
 
 <script>
@@ -70,7 +61,7 @@ export default {
         },
         color: {
             type: String,
-            default: "",
+            default: null,
         },
         cls: {
             // Refers to an optional custom css class name
@@ -83,13 +74,6 @@ export default {
             default: null,
         },
     },
-    data() {
-        return {
-            dismissSecs: 5,
-            dismissCountDown: 0,
-            errorMessage: "",
-        };
-    },
     computed: {
         acceptedTypes() {
             return ["text", "password"].includes(this.type) ? this.type : "text";
@@ -125,17 +109,6 @@ export default {
                 : null;
         },
     },
-    methods: {
-        showAlert(error) {
-            if (error) {
-                this.errorMessage = error;
-                this.dismissCountDown = this.dismissSecs;
-            }
-        },
-        resetAlert() {
-            this.dismissCountDown = 0;
-        },
-    },
 };
 </script>
 <style scoped>
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index cbdfc365b03..869da96d6ae 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -487,7 +487,7 @@ tool_form:
     execute: 'button#execute'
     parameter_div: 'div.ui-form-element[id="form-element-${parameter}"]'
     parameter_checkbox: 'div.ui-form-element[id="form-element-${parameter}"] .ui-switch'
-    parameter_input: 'div.ui-form-element[id="form-element-${parameter}"] .text-input'
+    parameter_input: 'div.ui-form-element[id="form-element-${parameter}"] .ui-input'
     parameter_textarea: 'div.ui-form-element[id="form-element-${parameter}"] textarea'
     reference: '.formatted-reference'
     about: '.tool-footer'
diff --git a/lib/galaxy_test/selenium/test_personal_information.py b/lib/galaxy_test/selenium/test_personal_information.py
index dfc14479609..74fdcb7e99b 100644
--- a/lib/galaxy_test/selenium/test_personal_information.py
+++ b/lib/galaxy_test/selenium/test_personal_information.py
@@ -136,7 +136,7 @@ class TestManageInformation(SeleniumTestCase):
 
     def get_address_input_field(self, address_form, input_field_label):
         return address_form.find_element(
-            self.by.CSS_SELECTOR, f"[data-label='{input_field_label}'] > div > div > div > input"
+            self.by.CSS_SELECTOR, f"[data-label='{input_field_label}'] > div > div > input"
         )