Restore workflow parameter highlighting, add basic tests, remove unused code

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,

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 () => {

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>

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

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) => {