feat(wes-create-run.ts): added a dropdown to lit-wes

added a dropdown in design and made a function in ecc-client-lit-ga4gh-wes which set the options for
the workflow type and workflow version but the function is having trouble in accessing the form-data
so commented please check the function

fix elixir-cloud-aai#180

packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts

@@ -21,14 +21,16 @@ interface Field {
     | "array"
     | "switch"
     | "file"
-    | "group";
+    | "group"
+    | "select";
   fieldOptions?: {
     required?: boolean;
     default?: string | boolean;
     multiple?: boolean;
     accept?: string;
     returnIfEmpty?: string;
     tooltip?: string;
+    options?: Array<{ label: string; value: string }>;
   };
   arrayOptions?: {
     defaultInstances?: number;
@@ -62,21 +64,23 @@ export class WESCreateRun extends LitElement {
     {
       key: "workflow_type",
       label: "Type",
-      type: "text",
+      type: "select",
       fieldOptions: {
         required: true,
         tooltip:
           "The type of workflow language and must be CWL or WDL currently.",
+        options: [],
       },
     },
     {
       key: "workflow_type_version",
       label: "Type version",
-      type: "text",
+      type: "select",
       fieldOptions: {
         required: true,
         tooltip:
           "The version of the workflow language submitted and must be one supported by this WES instance.",
+        options: [],
       },
     },
     {
@@ -129,6 +133,73 @@ export class WESCreateRun extends LitElement {
     },
   ];
 
+  // async connectedCallback() {
+  //   super.connectedCallback();
+  //   await this.updateDropdownOptions();
+  // }
+
+  // async updateDropdownOptions() {
+  //   try {
+  //     const serviceInfoResponse = await fetch(`${this.baseURL}/service-info`);
+  //     if (!serviceInfoResponse.ok) {
+  //       throw new Error(
+  //         `Error fetching service info: ${serviceInfoResponse.statusText}`
+  //       );
+  //     }
+
+  //     const serviceInfo = await serviceInfoResponse.json();
+
+  //     const workflowTypeDropdown = this.fields.find(
+  //       (field) => field.key === "workflow_type"
+  //     );
+  //     if (
+  //       workflowTypeDropdown &&
+  //       workflowTypeDropdown.fieldOptions &&
+  //       serviceInfo &&
+  //       serviceInfo.workflow_type_versions
+  //     ) {
+  //       const workflowTypeOptions = Object.keys(
+  //         serviceInfo.workflow_type_versions
+  //       ).map((key) => ({
+  //         label: key,
+  //         value: key,
+  //       }));
+  //       workflowTypeDropdown.fieldOptions.options = workflowTypeOptions;
+  //     }
+
+  //     const selectedWorkflowType = this.fields
+  //       .find((field) => field.key === "workflow_type")
+  //       ?.toString();
+  //     console.log(selectedWorkflowType);
+  //     const workflowTypeVersionDropdown = this.fields.find(
+  //       (field) => field.key === "workflow_type_version"
+  //     );
+
+  //     if (
+  //       selectedWorkflowType &&
+  //       workflowTypeVersionDropdown &&
+  //       workflowTypeVersionDropdown.fieldOptions &&
+  //       serviceInfo &&
+  //       serviceInfo.workflow_type_versions &&
+  //       serviceInfo.workflow_type_versions[selectedWorkflowType]
+  //     ) {
+  //       const versionsObject =
+  //         serviceInfo.workflow_type_versions[selectedWorkflowType];
+  //       const dynamicKeys = Object.keys(versionsObject);
+
+  //       const firstVersionSet = versionsObject[dynamicKeys[0]];
+
+  //       workflowTypeVersionDropdown.fieldOptions.options =
+  //         firstVersionSet.workflow_type_version.map((version: string) => ({
+  //           label: version,
+  //           value: version,
+  //         }));
+  //     }
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // }
+
   async submitForm(form: any) {
     Object.keys(form).forEach((key) => {
       this.form.append(key, form[key]);

packages/ecc-utils-design/src/components/form/form.styles.ts

@@ -12,6 +12,10 @@ const styles = css`
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }
+  form sl-dropdown {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
   form sl-switch {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;

packages/ecc-utils-design/src/components/form/form.ts

@@ -1,5 +1,8 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
+import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
+import "@shoelace-style/shoelace/dist/components/menu/menu.js";
+import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
 import "@shoelace-style/shoelace/dist/components/input/input.js";
 import "@shoelace-style/shoelace/dist/components/button/button.js";
 import "@shoelace-style/shoelace/dist/components/switch/switch.js";
@@ -29,14 +32,16 @@ interface Field {
     | "array"
     | "switch"
     | "file"
-    | "group";
+    | "group"
+    | "select";
   fieldOptions?: {
     required?: boolean;
     default?: string | boolean;
     multiple?: boolean;
     accept?: string;
     returnIfEmpty?: string;
     tooltip?: string;
+    options?: Array<{ label: string; value: string }>;
   };
   arrayOptions?: {
     defaultInstances?: number;
@@ -201,6 +206,46 @@ export default class EccUtilsDesignForm extends LitElement {
       `;
     }
 
+    if (field.type === "select" && field.fieldOptions?.options) {
+      if (!_.get(this.form, path) && !this.hasUpdated) {
+        _.set(
+          this.form,
+          path,
+          field.fieldOptions?.default ||
+            field.fieldOptions?.options[0]?.value ||
+            ""
+        );
+      }
+
+      return html`
+        <sl-dropdown>
+          <sl-button slot="trigger" caret>${field.label}</sl-button>
+          <sl-menu>
+            ${field.fieldOptions?.options.map(
+              (option) => html`
+                <sl-menu-item
+                  value="${option.value}"
+                  ?selected="${option.value === _.get(this.form, path)}"
+                  ?required="${field.fieldOptions?.required ? "*" : ""}"
+                  @click="${(e: Event) => {
+                    const { value } = e.target as HTMLSelectElement;
+                    if (!value) {
+                      _.unset(this.form, path);
+                    } else {
+                      _.set(this.form, path, value);
+                    }
+                    this.requestUpdate();
+                  }}"
+                >
+                  ${option.label}
+                </sl-menu-item>
+              `
+            )}
+          </sl-menu>
+        </sl-dropdown>
+      `;
+    }
+
     if (!_.get(this.form, path)) {
       if (field.fieldOptions?.default && !this.hasUpdated) {
         _.set(this.form, path, field.fieldOptions.default);