draft commit, rebase and adjust when PR

Author: ahmedhamidawan

client/src/components/Form/FormElement.vue

@@ -9,7 +9,7 @@ import { computed, ref, useAttrs } from "vue";
 
 import { linkify } from "@/utils/utils";
 
-import type { FormParameterAttributes, FormParameterTypes, FormParameterValue } from "./parameterTypes";
+import type { FormParameterAttributes, FormParameterTypeMap, FormParameterTypes } from "./parameterTypes";
 
 import FormBoolean from "./Elements/FormBoolean.vue";
 import FormColor from "./Elements/FormColor.vue";
@@ -36,10 +36,10 @@ const TYPE_TO_PLACEHOLDER: Record<string, string> = {
     float: "a floating point number",
 };
 
-interface FormElementProps {
+interface FormElementProps<T extends FormParameterTypes> {
     id?: string;
-    type?: FormParameterTypes;
-    value?: FormParameterValue;
+    type?: T;
+    value?: FormParameterTypeMap[T];
     title?: string;
     refreshOnChange?: boolean;
     help?: string;
@@ -48,7 +48,7 @@ interface FormElementProps {
     warning?: string;
     disabled?: boolean;
     loading?: boolean;
-    attributes?: FormParameterAttributes;
+    attributes?: FormParameterAttributes<T>;
     collapsedEnableText?: string;
     collapsedDisableText?: string;
     collapsedEnableIcon?: string;
@@ -62,7 +62,9 @@ interface FormElementProps {
     workflowRun?: boolean;
 }
 
-const props = withDefaults(defineProps<FormElementProps>(), {
+const props = withDefaults(defineProps<FormElementProps<FormParameterTypes>>(), {
+    attributes: undefined,
+    error: undefined,
     id: "identifier",
     refreshOnChange: false,
     disabled: false,
@@ -74,13 +76,18 @@ const props = withDefaults(defineProps<FormElementProps>(), {
     connectedDisableText: "Add connection to module.",
     connectedEnableIcon: "fa fa-times",
     connectedDisableIcon: "fa fa-arrows-alt-h",
+    help: undefined,
     helpFormat: "html",
+    title: undefined,
+    type: undefined,
+    value: undefined,
+    warning: undefined,
     workflowBuildingMode: false,
     workflowRun: false,
 });
 
 const emit = defineEmits<{
-    (e: "input", value: FormParameterValue, id: string): void;
+    (e: "input", value: FormParameterTypeMap[FormParameterTypes], id: string): void;
     (e: "change", shouldRefresh: boolean): void;
 }>();
 
@@ -91,10 +98,14 @@ library.add(faExclamation, faTimes, faArrowsAltH, faCaretSquareDown, faCaretSqua
  It is present for compatibility with the legacy "FormParameter" component,
  but should be removed as soon as that component is removed.
  */
-const attrs: ComputedRef<FormParameterAttributes> = computed(() => props.attributes || useAttrs());
-const collapsibleValue: ComputedRef<FormParameterValue> = computed(() => attrs.value["collapsible_value"]);
-const defaultValue: ComputedRef<FormParameterValue> = computed(() => attrs.value["default_value"]);
-const connectedValue: FormParameterValue = { __class__: "ConnectedValue" };
+const attrs: ComputedRef<FormParameterAttributes<FormParameterTypes>> = computed(() => props.attributes || useAttrs());
+const collapsibleValue: ComputedRef<FormParameterTypeMap[FormParameterTypes]> = computed(
+    () => attrs.value["collapsible_value"]
+);
+const defaultValue: ComputedRef<FormParameterTypeMap[FormParameterTypes]> = computed(
+    () => attrs.value["default_value"]
+);
+const connectedValue: FormParameterTypeMap[FormParameterTypes] = { __class__: "ConnectedValue" };
 
 const computedPlaceholder = computed(() => {
     if (!props.workflowRun) {
@@ -132,7 +143,7 @@ const connectable = computed(() => collapsible.value && Boolean(attrs.value["con
 }
 
 /** Submits a changed value. */
-function setValue(value: FormParameterValue) {
+function setValue(value: FormParameterTypeMap[FormParameterTypes]) {
     emit("input", value, props.id);
     emit("change", props.refreshOnChange);
 }
@@ -171,7 +182,7 @@ const formDataField = computed(() =>
 );
 const isUriDataField = computed(() => {
     const dataField = props.type == "data";
-    if (dataField && props.value && "src" in props.value) {
+    if (dataField && props.value && typeof props.value === "object" && "src" in props.value) {
         const src = props.value.src;
         return src == "url";
     }
@@ -193,7 +204,7 @@ const nonMdHelp = computed(() =>
         : ""
 );
 
-const currentValue = computed({
+const currentValue = computed<FormParameterTypeMap[FormParameterTypes]>({
     get() {
         return props.value;
     },

client/src/components/Form/parameterTypes.d.ts

@@ -1,9 +1,3 @@
-// TODO: stricter types
-export type FormParameterValue = any;
-export type FormParameterAttributes = {
-    [attribute: string]: any;
-};
-
 export type FormParameterTypes =
     | "boolean"
     | "hidden"
@@ -27,3 +21,107 @@ export type FormParameterTypes =
     | "upload"
     | "rules"
     | "tags";
+
+export type FormParameterTypeMap = {
+    boolean: boolean | string;
+    hidden: string;
+    hidden_data: string | undefined;
+    baseurl: string | undefined;
+    integer: number | string;
+    float: number | string;
+    radio: string;
+    color: string;
+    directory_uri: string;
+    text: string | number | string[];
+    password: string | number | string[];
+    select: string;
+    data_column: string;
+    genomebuild: string;
+    data: FormParameterDataOption;
+    data_collection: FormParameterDataOption;
+    drill_down: string;
+    group_tag: string;
+    ftpfile: string;
+    upload: string;
+    rules: string;
+    data_dialog: string | string[];
+    tags: string;
+};
+
+type FormParameterDataOption =
+    | {
+          src: "dce" | "hda" | "hdca" | "ldda" | "url";
+          id: string;
+          hid: number;
+          name: string;
+          tags?: string[];
+          keep?: boolean;
+          map_over_type?: string;
+      }
+    | {
+          __class__: string;
+      };
+export type FormParameterAttributes<T extends FormParameterTypes> = {
+    area?: boolean;
+    argument?: string | null;
+    collapsible_preview?: boolean;
+    collapsible_value?: FormParameterTypeMap[T];
+    color?: string;
+    cls?: string;
+    collection_types?: string[];
+    connectable?: boolean;
+    data?: FormParameterTypeMap[T][];
+    datalist?: FormParameterTypeMap[T][];
+    default_value?: FormParameterTypeMap[T];
+    display?: string;
+    edam?: {
+        edam_data: string[];
+        edam_formats: string[];
+    };
+    error?: string | null;
+    extensions?: string[];
+    flavor?: string;
+    help?: string;
+    help_format?: string;
+    hidden?: boolean;
+    info?: string;
+    is_dynamic?: boolean;
+    is_workflow?: boolean;
+    label?: string;
+    max?: string | number;
+    min?: string | number;
+    model_class?:
+        | "ColorToolParameter"
+        | "DirectoryUriToolParameter"
+        | "BaseDataToolParameter"
+        | "BooleanToolParameter"
+        | "DataCollectionToolParameter"
+        | "DataToolParameter"
+        | "FloatToolParameter"
+        | "HiddenToolParameter"
+        | "IntegerToolParameter"
+        | "SelectToolParameter"
+        | "TextToolParameter";
+    multiple?: boolean | string;
+    name?: string;
+    optional?: boolean;
+    options?:
+        | FormParameterTypeMap[T][]
+        | {
+              dce: FormParameterDataOption[];
+              hda: FormParameterDataOption[];
+              hdca: FormParameterDataOption[];
+              ldda: FormParameterDataOption[];
+          };
+    placeholder?: string;
+    readonly?: boolean;
+    refresh_on_change?: boolean;
+    tag?: string;
+    target?: Record<string, unknown>;
+    textable?: boolean;
+    text_value?: string;
+    titleonly?: boolean;
+    truevalue?: FormParameterTypeMap[T];
+    type?: FormParameterTypes;
+    value?: FormParameterTypeMap[T];
+};