Address PR comments

Author: VIHANGAGIT

.changeset/lovely-poems-do.md

@@ -1,7 +1,7 @@
 ---
-"@wso2is/admin.connections.v1": patch
-"@wso2is/forms": patch
+"@wso2is/admin.connections.v1": minor
+"@wso2is/forms": minor
 "@wso2is/i18n": patch
 ---
 
-Add support for `select`/`dropdown` fields in connection create and edittemplates, including a `useDynamicFieldOptions` hook that resolves fieldoptions from existing connections declared via `optionsSource` metadata.
+Add support for `select`/`dropdown` fields in connection create and edit templates, including a `useDynamicFieldOptions` hook that resolves field options from existing connections declared via `optionsSource` metadata.

features/admin.connections.v1/hooks/use-dynamic-field-options.ts

@@ -68,6 +68,32 @@ interface DynamicFieldOptionsSourceInterface {
     labelField?: string;
 }
 
+/**
+ * Attributes of a dynamic form field this hook reads or rewrites.
+ */
+interface DynamicFieldInterface {
+    /**
+     * Name of the field, also the key its value is persisted under.
+     */
+    name?: string;
+    /**
+     * Placeholder of the field, replaced while the options are being resolved.
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Declaration of where the options of the field come from, if any.
+     */
+    optionsSource?: DynamicFieldOptionsSourceInterface;
+    /**
+     * Renderer specific attributes declared by the connector metadata.
+     */
+    [ key: string ]: unknown;
+}
+
 /**
  * Context of the form the fields are rendered in.
  */
@@ -79,7 +105,7 @@ interface DynamicFieldOptionsContextInterface {
     /**
      * Values the form was initialized with, keyed by field name.
      */
-    currentValues?: Record<string, any>;
+    currentValues?: Record<string, unknown>;
 }
 
 /**
@@ -89,7 +115,7 @@ interface DynamicFieldOptionsResultInterface {
     /**
      * The given fields, with the options of every `optionsSource` backed field resolved.
      */
-    fields: Record<string, any>[];
+    fields: DynamicFieldInterface[];
     /**
      * Whether the options are still being resolved.
      */
@@ -113,7 +139,7 @@ interface DynamicFieldOptionsResultInterface {
  * @returns The fields with resolved options and the resolution status.
  */
 const useDynamicFieldOptions = (
-    fields: Record<string, any>[],
+    fields: DynamicFieldInterface[],
     context?: DynamicFieldOptionsContextInterface
 ): DynamicFieldOptionsResultInterface => {
 
@@ -131,7 +157,7 @@ const useDynamicFieldOptions = (
         }
 
         return fields
-            .map((field: Record<string, any>) => field?.optionsSource)
+            .map((field: DynamicFieldInterface) => field?.optionsSource)
             .filter((source: DynamicFieldOptionsSourceInterface) =>
                 source?.type === DynamicFieldOptionsSourceTypes.CONNECTIONS);
     }, [ fields ]);
@@ -242,12 +268,12 @@ const useDynamicFieldOptions = (
 
     const isLoading: boolean = isConnectionListLoading || isResolvingTemplateIds;
 
-    const resolvedFields: Record<string, any>[] = useMemo(() => {
+    const resolvedFields: DynamicFieldInterface[] = useMemo(() => {
         if (!Array.isArray(fields)) {
             return fields;
         }
 
-        return fields.map((field: Record<string, any>) => {
+        return fields.map((field: DynamicFieldInterface) => {
             const source: DynamicFieldOptionsSourceInterface = field?.optionsSource;
 
             if (source?.type !== DynamicFieldOptionsSourceTypes.CONNECTIONS) {
@@ -277,7 +303,10 @@ const useDynamicFieldOptions = (
             /*
              * Keep an already persisted value selectable even when it is not part of the resolved options.
              */
-            const persistedValue: string = context?.currentValues?.[ field?.name ];
+            const currentValue: unknown = field?.name
+                ? context?.currentValues?.[ field.name ]
+                : undefined;
+            const persistedValue: string = typeof currentValue === "string" ? currentValue : "";
 
             if (!isEmpty(persistedValue)
                 && !options.some((option: { value: string }) => option.value === persistedValue)) {

modules/forms/src/legacy/dynamic-forms/components/field-select.tsx

@@ -20,15 +20,15 @@ import FormGroup from "@oxygen-ui/react/FormGroup";
 import { IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import { Hint } from "@wso2is/react-components";
 import { FieldState } from "final-form";
-import React, { ReactElement, ReactNode } from "react";
+import React, { FunctionComponent, ReactElement, ReactNode } from "react";
 import { FieldProps, FieldRenderProps, Field as FinalFormField } from "react-final-form";
 import SelectFieldAdapter from "../../../components/adapters/select-field-adapter";
 import { getValidation } from "../utils/validate";
 
 /**
  * Option of a dynamic select field.
  */
-export interface DynamicFieldOptionInterface {
+interface DynamicFieldOptionInterface {
     /**
      * Text displayed for the option.
      */
@@ -39,7 +39,13 @@ export interface DynamicFieldOptionInterface {
     value: string;
 }
 
-export interface FieldSelectPropsInterface extends Omit<FieldProps<any, any, any>, "component">,
+/**
+ * Value a dynamic select field holds. Multiple selection is not supported.
+ */
+type DynamicSelectFieldValueType = string;
+
+interface FieldSelectPropsInterface
+    extends Omit<FieldProps<DynamicSelectFieldValueType, FieldRenderProps<DynamicSelectFieldValueType>>, "component">,
     IdentifiableComponentInterface, TestableComponentInterface {
 
     /**
@@ -63,17 +69,22 @@ export interface FieldSelectPropsInterface extends Omit<FieldProps<any, any, any
      */
     readOnly?: boolean;
     /**
-     * Validation of the field.
+     * Validation of the field. Resolves to the error message, or to `undefined` when the value is valid.
      */
-    validation?: (value: string | number | any, allValues: Record<string, unknown>) => any;
+    validation?: (
+        value: DynamicSelectFieldValueType,
+        allValues: Record<string, unknown>
+    ) => string | undefined | Promise<string | undefined>;
 }
 
 /**
  * Implementation of the Select Field component of the dynamic form.
  *
  * @param props - Props injected to the component.
  */
-export const FieldSelect = (props: FieldSelectPropsInterface): ReactElement => {
+export const FieldSelect: FunctionComponent<FieldSelectPropsInterface> = (
+    props: FieldSelectPropsInterface
+): ReactElement => {
 
     const {
         hint,
@@ -93,12 +104,14 @@ export const FieldSelect = (props: FieldSelectPropsInterface): ReactElement => {
         <FormGroup>
             <FinalFormField
                 name={ name }
-                parse={ (value: any) => value }
+                parse={ (value: DynamicSelectFieldValueType) => value }
                 initialValue={ initialValue }
-                validate={ (value: any, allValues: Record<string, unknown>, meta: FieldState<any>) =>
-                    getValidation(value, allValues, meta, required, validation)
-                }
-                render={ ({ input, meta }: FieldRenderProps<any>) => (
+                validate={ (
+                    value: DynamicSelectFieldValueType,
+                    allValues: Record<string, unknown>,
+                    meta: FieldState<DynamicSelectFieldValueType>
+                ) => getValidation(value, allValues, meta, required, validation) }
+                render={ ({ input, meta }: FieldRenderProps<DynamicSelectFieldValueType>) => (
                     <SelectFieldAdapter
                         input={ input }
                         meta={ meta }