From 19add642cbcc79407083ad7983b432932b470167 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 29 Aug 2023 11:57:47 +0700
Subject: [PATCH 1/4] feat: json schema nullable

---
 CHANGELOG.md                                  |   1 +
 src/lib/components/fund/index.tsx             |   4 +-
 .../json-schema/form/fields/ArrayField.tsx    | 884 ++++++++++++++++++
 .../json-schema/form/fields/BooleanField.tsx  |  12 +-
 .../json-schema/form/fields/index.ts          |   2 +
 .../form/templates/ArrayFieldTemplate.tsx     |   5 +-
 .../form/templates/BaseInputTemplate.tsx      | 101 +-
 .../form/templates/FieldTemplate.tsx          |  13 -
 src/lib/components/json-schema/form/utils.ts  |   7 +
 .../json-schema/form/widgets/SelectWidget.tsx |  10 +-
 .../components/schema-execute/ExecuteBox.tsx  |   9 +-
 .../query/components/SchemaQueryComponent.tsx |  48 +-
 12 files changed, 1025 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/components/json-schema/form/fields/ArrayField.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83a363368..f89fd5f23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#510](https://github.com/alleslabs/celatone-frontend/pull/510) Support optional fields for array, boolean, and string
 - [#505](https://github.com/alleslabs/celatone-frontend/pull/505) Adjust attach funds form label and icon styling for schema section
 - [#501](https://github.com/alleslabs/celatone-frontend/pull/501) Add more JSON Schema state, e.g. empty object state, boolean field
 - [#502](https://github.com/alleslabs/celatone-frontend/pull/502) Display queried time and add json/schema output switch
diff --git a/src/lib/components/fund/index.tsx b/src/lib/components/fund/index.tsx
index be066af8f..9e273104c 100644
--- a/src/lib/components/fund/index.tsx
+++ b/src/lib/components/fund/index.tsx
@@ -72,6 +72,7 @@ interface AttachFundProps {
   attachFundsOption: AttachFundsType;
   labelBgColor?: string;
   setValue: UseFormSetValue<AttachFundsState>;
+  showLabel?: boolean;
 }
 
 export const AttachFund = ({
@@ -79,11 +80,12 @@ export const AttachFund = ({
   attachFundsOption,
   labelBgColor,
   setValue,
+  showLabel = true,
 }: AttachFundProps) => (
   <>
     <Flex mb={5}>
       <SelectInput
-        formLabel="Attach Funds"
+        formLabel={showLabel ? "Attach Funds" : undefined}
         options={attachFundsOptions}
         onChange={(value: AttachFundsType) =>
           setValue(ATTACH_FUNDS_OPTION, value)
diff --git a/src/lib/components/json-schema/form/fields/ArrayField.tsx b/src/lib/components/json-schema/form/fields/ArrayField.tsx
new file mode 100644
index 000000000..35730c15d
--- /dev/null
+++ b/src/lib/components/json-schema/form/fields/ArrayField.tsx
@@ -0,0 +1,884 @@
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Checkbox, Flex, Text } from "@chakra-ui/react";
+import type {
+  ArrayFieldTemplateProps,
+  ErrorSchema,
+  Field,
+  FieldProps,
+  IdSchema,
+  RJSFSchema,
+  UiSchema,
+} from "@rjsf/utils";
+import {
+  getTemplate,
+  getWidget,
+  getUiOptions,
+  isFixedItems,
+  allowAdditionalItems,
+  isCustomWidget,
+  optionsList,
+  ITEMS_KEY,
+} from "@rjsf/utils";
+import isObject from "lodash/isObject";
+import set from "lodash/set";
+import { Component } from "react";
+import type React from "react";
+import * as uuid from "uuid";
+
+import { isNullFormData } from "../utils";
+
+/** Type used to represent the keyed form data used in the state */
+type KeyedFormDataType<T> = { key: string; item: T };
+
+/** Type used for the state of the `ArrayField` component */
+type ArrayFieldState<T> = {
+  /** The keyed form data elements */
+  keyedFormData: KeyedFormDataType<T>[];
+};
+
+/** Used to generate a unique ID for an element in a row */
+function generateRowId() {
+  return uuid.v4();
+}
+
+/** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
+ *
+ * @param formData - The data for the form
+ * @returns - The `formData` converted into a `KeyedFormDataType` element
+ */
+function generateKeyedFormData<T>(formData: T[]): KeyedFormDataType<T>[] {
+  return !Array.isArray(formData)
+    ? []
+    : formData.map((item) => {
+        return {
+          key: generateRowId(),
+          item,
+        };
+      });
+}
+
+/** Converts `KeyedFormDataType` data into the inner `formData`
+ *
+ * @param keyedFormData - The `KeyedFormDataType` to be converted
+ * @returns - The inner `formData` item(s) in the `keyedFormData`
+ */
+function keyedToPlainFormData<T>(
+  keyedFormData: KeyedFormDataType<T> | KeyedFormDataType<T>[]
+): T[] {
+  if (Array.isArray(keyedFormData)) {
+    return keyedFormData.map((keyedItem) => keyedItem.item);
+  }
+  return [];
+}
+
+/** The `ArrayField` component is used to render a field in the schema that is of type `array`. It supports both normal
+ * and fixed array, allowing user to add and remove elements from the array data.
+ */
+class ArrayField<T = any, F = any> extends Component<
+  FieldProps<T[], F>,
+  ArrayFieldState<T>
+> {
+  /** React lifecycle method that is called when the props are about to change allowing the state to be updated. It
+   * regenerates the keyed form data and returns it
+   *
+   * @param nextProps - The next set of props data
+   * @param prevState - The previous set of state data
+   */
+  static getDerivedStateFromProps<T = any, F = any>(
+    nextProps: Readonly<FieldProps<T[], F>>,
+    prevState: Readonly<ArrayFieldState<T>>
+  ) {
+    // Don't call getDerivedStateFromProps if keyed formdata was just updated.
+    // if (prevState.updatedKeyedFormData) {
+    //   return {
+    //     updatedKeyedFormData: false,
+    //   };
+    // }
+    const nextFormData = Array.isArray(nextProps.formData)
+      ? nextProps.formData
+      : [];
+    const previousKeyedFormData = prevState.keyedFormData || [];
+    const newKeyedFormData =
+      nextFormData.length === previousKeyedFormData.length
+        ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
+            return {
+              key: previousKeyedFormDatum.key,
+              item: nextFormData[index],
+            };
+          })
+        : generateKeyedFormData<T>(nextFormData);
+    return {
+      keyedFormData: newKeyedFormData,
+    };
+  }
+
+  /** Determines whether the item described in the schema is always required, which is determined by whether any item
+   * may be null.
+   *
+   * @param itemSchema - The schema for the item
+   * @return - True if the item schema type does not contain the "null" type
+   */
+  static isItemRequired(itemSchema: RJSFSchema) {
+    if (Array.isArray(itemSchema.type)) {
+      // While we don't yet support composite/nullable jsonschema types, it's
+      // future-proof to check for requirement against these.
+      return !itemSchema.type.includes("null");
+    }
+    // All non-null array item types are inherently required by design
+    return itemSchema.type !== "null";
+  }
+
+  /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
+   *
+   * @param props - The `FieldProps` for this template
+   */
+  constructor(props: FieldProps<T[], F>) {
+    super(props);
+    const { formData = [] } = props;
+    const keyedFormData = generateKeyedFormData<T>(formData);
+    this.state = {
+      keyedFormData,
+    };
+  }
+
+  componentDidMount(): void {
+    const { formData } = this.props;
+    if (formData === undefined) this.onSelectChange([]);
+  }
+
+  /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+   * that the schema is fixed and allows additional items.
+   */
+  getNewFormDataRow = (): T => {
+    const { schema, registry } = this.props;
+    const { schemaUtils } = registry;
+    let itemSchema = schema.items as RJSFSchema;
+    if (isFixedItems(schema) && allowAdditionalItems(schema)) {
+      itemSchema = schema.additionalItems as RJSFSchema;
+    }
+    // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], F> call on the class
+    return schemaUtils.getDefaultFormState(itemSchema) as unknown as T;
+  };
+
+  /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+   * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+   * keyed data
+   *
+   * @param event - The event for the click
+   */
+  onAddClick = (event: MouseEvent) => {
+    if (event) {
+      event.preventDefault();
+    }
+
+    const { onChange } = this.props;
+    const { keyedFormData } = this.state;
+    const newKeyedFormDataRow: KeyedFormDataType<T> = {
+      key: generateRowId(),
+      item: this.getNewFormDataRow(),
+    };
+    const newKeyedFormData = [...keyedFormData, newKeyedFormDataRow];
+    this.setState(
+      {
+        keyedFormData: newKeyedFormData,
+      },
+      () => onChange(keyedToPlainFormData(newKeyedFormData))
+    );
+  };
+
+  /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
+   * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
+   * form data converted from the keyed data
+   *
+   * @param index - The index at which the add button is clicked
+   */
+  onAddIndexClick = (index: number) => {
+    return (event: MouseEvent) => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange } = this.props;
+      const { keyedFormData } = this.state;
+      const newKeyedFormDataRow: KeyedFormDataType<T> = {
+        key: generateRowId(),
+        item: this.getNewFormDataRow(),
+      };
+      const newKeyedFormData = [...keyedFormData];
+      newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
+
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData))
+      );
+    };
+  };
+
+  /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
+   * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
+   * from the keyed data
+   *
+   * @param index - The index at which the remove button is clicked
+   */
+  onDropIndexClick = (index: number) => {
+    return (event: MouseEvent) => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange, errorSchema } = this.props;
+      const { keyedFormData } = this.state;
+      // refs #195: revalidate to ensure properly reindexing errors
+      let newErrorSchema: ErrorSchema<T>;
+      if (errorSchema) {
+        newErrorSchema = {};
+        Object.keys(errorSchema).forEach((_, idx) => {
+          if (idx < index) {
+            set(newErrorSchema, [idx], errorSchema[idx]);
+          } else if (idx > index) {
+            set(newErrorSchema, [idx - 1], errorSchema[idx]);
+          }
+        });
+      }
+      const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () =>
+          onChange(
+            keyedToPlainFormData(newKeyedFormData),
+            newErrorSchema as ErrorSchema<T[]>
+          )
+      );
+    };
+  };
+
+  /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
+   * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
+   * plain form data converted from the keyed data
+   *
+   * @param index - The index of the item to move
+   * @param newIndex - The index to where the item is to be moved
+   */
+  onReorderClick = (index: number, newIndex: number) => {
+    return (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (event) {
+        event.preventDefault();
+        event.currentTarget.blur();
+      }
+      const { onChange, errorSchema } = this.props;
+      let newErrorSchema: ErrorSchema<T>;
+      if (errorSchema) {
+        newErrorSchema = {};
+        Object.keys(errorSchema).forEach((_, idx) => {
+          if (idx === index) {
+            set(newErrorSchema, [newIndex], errorSchema[index]);
+          } else if (idx === newIndex) {
+            set(newErrorSchema, [index], errorSchema[newIndex]);
+          } else {
+            set(newErrorSchema, [idx], errorSchema[idx]);
+          }
+        });
+      }
+
+      const { keyedFormData } = this.state;
+      function reOrderArray() {
+        // Copy item
+        const newKeyedFormData = keyedFormData.slice();
+
+        // Moves item from index to newIndex
+        newKeyedFormData.splice(index, 1);
+        newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+
+        return newKeyedFormData;
+      }
+      const newKeyedFormData = reOrderArray();
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () =>
+          onChange(
+            keyedToPlainFormData(newKeyedFormData),
+            newErrorSchema as ErrorSchema<T[]>
+          )
+      );
+    };
+  };
+
+  /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
+   * `onChange` callback with the updated form data
+   *
+   * @param index - The index of the item being changed
+   */
+  onChangeForIndex = (index: number) => {
+    return (value: any, newErrorSchema?: ErrorSchema<T>) => {
+      const { formData, onChange, errorSchema } = this.props;
+      const arrayData = Array.isArray(formData) ? formData : [];
+      const newFormData = arrayData.map((item: T, i: number) => {
+        // We need to treat undefined items as nulls to have validation.
+        // See https://github.com/tdegrunt/jsonschema/issues/206
+        const jsonValue = typeof value === "undefined" ? null : value;
+        return index === i ? jsonValue : item;
+      });
+      onChange(
+        newFormData,
+        errorSchema && {
+          ...errorSchema,
+          [index]: newErrorSchema,
+        }
+      );
+    };
+  };
+
+  /** Callback handler used to change the value for a checkbox */
+  onSelectChange = (value: any) => {
+    const { onChange } = this.props;
+    onChange(value);
+  };
+
+  /** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
+   * then false is returned. Otherwise, if the schema indicates that there are a maximum number of items and the
+   * `formData` matches that value, then false is returned, otherwise true is returned.
+   *
+   * @param formItems - The list of items in the form
+   * @returns - True if the item is addable otherwise false
+   */
+  canAddItem(formItems: any[]) {
+    const { schema, uiSchema } = this.props;
+    let { addable } = getUiOptions<T[], F>(uiSchema);
+    if (addable !== false) {
+      // if ui:options.addable was not explicitly set to false, we can add
+      // another item if we have not exceeded maxItems yet
+      if (schema.maxItems !== undefined) {
+        addable = formItems.length < schema.maxItems;
+      } else {
+        addable = true;
+      }
+    }
+    return addable;
+  }
+
+  /** Renders a normal array without any limitations of length
+   */
+  renderNormalArray() {
+    const {
+      schema,
+      uiSchema = {},
+      errorSchema,
+      idSchema,
+      name,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      registry,
+      onBlur,
+      onFocus,
+      idPrefix,
+      idSeparator = "_",
+      rawErrors,
+      formData: rawFormData,
+    } = this.props;
+
+    const { keyedFormData } = this.state;
+
+    const title = schema.title === undefined ? name : schema.title;
+    const { schemaUtils, formContext } = registry;
+    const uiOptions = getUiOptions<T[], F>(uiSchema);
+    const schemaItems = isObject(schema.items)
+      ? (schema.items as RJSFSchema)
+      : {};
+    const itemsSchema = schemaUtils.retrieveSchema(schemaItems);
+    const formData = keyedToPlainFormData(keyedFormData);
+    const arrayProps: ArrayFieldTemplateProps<T[], F> = {
+      canAdd: this.canAddItem(formData),
+      items: keyedFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
+        // While we are actually dealing with a single item of type T, the types require a T[], so cast
+        const itemCast = item as unknown as T[];
+        const itemSchema = schemaUtils.retrieveSchema(schemaItems, itemCast);
+        const itemErrorSchema = errorSchema
+          ? (errorSchema[index] as ErrorSchema<T[]>)
+          : undefined;
+        const itemIdPrefix = idSchema.$id + idSeparator + index;
+        const itemIdSchema = schemaUtils.toIdSchema(
+          itemSchema,
+          itemIdPrefix,
+          itemCast,
+          idPrefix,
+          idSeparator
+        );
+        return this.renderArrayFieldItem({
+          key,
+          index,
+          name: name && `${name}-${index}`,
+          canMoveUp: index > 0,
+          canMoveDown: index < formData.length - 1,
+          itemSchema,
+          itemIdSchema,
+          itemErrorSchema,
+          itemData: itemCast,
+          itemUiSchema: uiSchema.items,
+          autofocus: autofocus && index === 0,
+          onBlur,
+          onFocus,
+          rawErrors,
+        });
+      }),
+      className: `field field-array field-array-of-${itemsSchema.type}`,
+      disabled: disabled || isNullFormData(rawFormData),
+      idSchema,
+      uiSchema,
+      onAddClick: this.onAddClick,
+      readonly,
+      required,
+      schema,
+      title,
+      formContext,
+      formData:
+        isNullFormData(rawFormData) && formData.length === 0
+          ? rawFormData
+          : formData,
+      rawErrors,
+      registry,
+    };
+
+    const Template = getTemplate<"ArrayFieldTemplate", T[], F>(
+      "ArrayFieldTemplate",
+      registry,
+      uiOptions
+    );
+    return (
+      <Flex direction="column">
+        <Template {...arrayProps} />
+        {!required && !readonly && (
+          <Checkbox
+            pl={2}
+            isChecked={isNullFormData(rawFormData)}
+            onChange={(e) => {
+              if (e.target.checked) this.onSelectChange(null);
+              else this.onSelectChange([]);
+            }}
+            isDisabled={formData.length > 0}
+          >
+            <Text variant="body3">Send as null</Text>
+          </Checkbox>
+        )}
+      </Flex>
+    );
+  }
+
+  /** Renders an array using the custom widget provided by the user in the `uiSchema`
+   */
+  renderCustomWidget() {
+    const {
+      schema,
+      idSchema,
+      uiSchema,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      hideError,
+      placeholder,
+      onBlur,
+      onFocus,
+      formData: items = [],
+      registry,
+      rawErrors,
+      name,
+    } = this.props;
+    const { widgets, formContext } = registry;
+    const title = schema.title || name;
+
+    const { widget, ...options } = getUiOptions<T[], F>(uiSchema);
+    const Widget = getWidget<T[], F>(schema, widget, widgets);
+    return (
+      <Widget
+        id={idSchema && idSchema.$id}
+        multiple
+        onChange={this.onSelectChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        options={options}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+        value={items}
+        disabled={disabled}
+        readonly={readonly}
+        hideError={hideError}
+        required={required}
+        label={title}
+        placeholder={placeholder}
+        formContext={formContext}
+        autofocus={autofocus}
+        rawErrors={rawErrors}
+      />
+    );
+  }
+
+  /** Renders an array as a set of checkboxes
+   */
+  renderMultiSelect() {
+    const {
+      schema,
+      idSchema,
+      uiSchema,
+      formData: items = [],
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      placeholder,
+      onBlur,
+      onFocus,
+      registry,
+      rawErrors,
+      name,
+    } = this.props;
+    const { widgets, schemaUtils, formContext } = registry;
+    const itemsSchema = schemaUtils.retrieveSchema(
+      schema.items as RJSFSchema,
+      items
+    );
+    const title = schema.title || name;
+    const enumOptions = optionsList(itemsSchema);
+    const { widget = "select", ...options } = getUiOptions<T[], F>(uiSchema);
+    const Widget = getWidget<T[], F>(schema, widget, widgets);
+    return (
+      <Widget
+        id={idSchema && idSchema.$id}
+        multiple
+        onChange={this.onSelectChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        options={{ ...options, enumOptions }}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+        value={items}
+        disabled={disabled}
+        readonly={readonly}
+        required={required}
+        label={title}
+        placeholder={placeholder}
+        formContext={formContext}
+        autofocus={autofocus}
+        rawErrors={rawErrors}
+      />
+    );
+  }
+
+  /** Renders an array of files using the `FileWidget`
+   */
+  renderFiles() {
+    const {
+      schema,
+      uiSchema,
+      idSchema,
+      name,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      onBlur,
+      onFocus,
+      registry,
+      formData: items = [],
+      rawErrors,
+    } = this.props;
+    const title = schema.title || name;
+    const { widgets, formContext } = registry;
+    const { widget = "files", ...options } = getUiOptions<T[], F>(uiSchema);
+    const Widget = getWidget<T[], F>(schema, widget, widgets);
+    return (
+      <Widget
+        options={options}
+        id={idSchema && idSchema.$id}
+        multiple
+        onChange={this.onSelectChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        schema={schema}
+        uiSchema={uiSchema}
+        title={title}
+        value={items}
+        disabled={disabled}
+        readonly={readonly}
+        required={required}
+        registry={registry}
+        formContext={formContext}
+        autofocus={autofocus}
+        rawErrors={rawErrors}
+        label=""
+      />
+    );
+  }
+
+  /** Renders an array that has a maximum limit of items
+   */
+  renderFixedArray() {
+    const {
+      schema,
+      uiSchema = {},
+      formData = [],
+      errorSchema,
+      idPrefix,
+      idSeparator = "_",
+      idSchema,
+      name,
+      disabled = false,
+      readonly = false,
+      autofocus = false,
+      required = false,
+      registry,
+      onBlur,
+      onFocus,
+      rawErrors,
+    } = this.props;
+    const { keyedFormData } = this.state;
+    let { formData: items = [] } = this.props;
+    const title = schema.title || name;
+    const uiOptions = getUiOptions<T[], F>(uiSchema);
+    const { schemaUtils, formContext } = registry;
+    const schemaItems = isObject(schema.items)
+      ? (schema.items as RJSFSchema[])
+      : [];
+    const itemSchemas = schemaItems.map((item: RJSFSchema, index: number) =>
+      schemaUtils.retrieveSchema(item, formData[index] as unknown as T[])
+    );
+    const additionalSchema = isObject(schema.additionalItems)
+      ? schemaUtils.retrieveSchema(schema.additionalItems, formData)
+      : null;
+
+    if (!items || items.length < itemSchemas.length) {
+      // to make sure at least all fixed items are generated
+      items = items || [];
+      items = items.concat(new Array(itemSchemas.length - items.length));
+    }
+
+    // These are the props passed into the render function
+    const arrayProps: ArrayFieldTemplateProps<T[], F> = {
+      canAdd: this.canAddItem(items) && !!additionalSchema,
+      className: "field field-array field-array-fixed-items",
+      disabled,
+      idSchema,
+      formData,
+      items: keyedFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
+        // While we are actually dealing with a single item of type T, the types require a T[], so cast
+        const itemCast = item as unknown as T[];
+        const additional = index >= itemSchemas.length;
+        const itemSchema =
+          additional && isObject(schema.additionalItems)
+            ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast)
+            : itemSchemas[index];
+        const itemIdPrefix = idSchema.$id + idSeparator + index;
+        const itemIdSchema = schemaUtils.toIdSchema(
+          itemSchema,
+          itemIdPrefix,
+          itemCast,
+          idPrefix,
+          idSeparator
+        );
+        const itemUiSchema = additional
+          ? uiSchema.additionalItems || {}
+          : Array.isArray(uiSchema.items)
+          ? uiSchema.items[index]
+          : uiSchema.items || {};
+        const itemErrorSchema = errorSchema
+          ? (errorSchema[index] as ErrorSchema<T[]>)
+          : undefined;
+
+        return this.renderArrayFieldItem({
+          key,
+          index,
+          name: name && `${name}-${index}`,
+          canRemove: additional,
+          canMoveUp: index >= itemSchemas.length + 1,
+          canMoveDown: additional && index < items.length - 1,
+          itemSchema,
+          itemData: itemCast,
+          itemUiSchema,
+          itemIdSchema,
+          itemErrorSchema,
+          autofocus: autofocus && index === 0,
+          onBlur,
+          onFocus,
+          rawErrors,
+        });
+      }),
+      onAddClick: this.onAddClick,
+      readonly,
+      required,
+      registry,
+      schema,
+      uiSchema,
+      title,
+      formContext,
+      rawErrors,
+    };
+
+    const Template = getTemplate<"ArrayFieldTemplate", T[], F>(
+      "ArrayFieldTemplate",
+      registry,
+      uiOptions
+    );
+    return <Template {...arrayProps} />;
+  }
+
+  /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
+   * back to the `ArrayFieldItemTemplate`.
+   *
+   * @param props - The props for the individual array item to be rendered
+   */
+  renderArrayFieldItem(props: {
+    key: string;
+    index: number;
+    name: string;
+    canRemove?: boolean;
+    canMoveUp?: boolean;
+    canMoveDown?: boolean;
+    itemSchema: RJSFSchema;
+    itemData: T[];
+    itemUiSchema: UiSchema<T[], F>;
+    itemIdSchema: IdSchema<T[]>;
+    itemErrorSchema?: ErrorSchema<T[]>;
+    autofocus?: boolean;
+    onBlur: FieldProps<T[], F>["onBlur"];
+    onFocus: FieldProps<T[], F>["onFocus"];
+    rawErrors?: string[];
+  }) {
+    const {
+      key,
+      index,
+      name,
+      canRemove = true,
+      canMoveUp = true,
+      canMoveDown = true,
+      itemSchema,
+      itemData,
+      itemUiSchema,
+      itemIdSchema,
+      itemErrorSchema,
+      autofocus,
+      onBlur,
+      onFocus,
+      rawErrors,
+    } = props;
+    const {
+      disabled,
+      hideError,
+      idPrefix,
+      idSeparator,
+      readonly,
+      uiSchema,
+      registry,
+      formContext,
+    } = this.props;
+    const {
+      fields: { ArraySchemaField, SchemaField },
+    } = registry;
+    const ItemSchemaField = ArraySchemaField || SchemaField;
+    const { orderable = true, removable = true } = getUiOptions<T[], F>(
+      uiSchema
+    );
+    const has: { [key: string]: boolean } = {
+      moveUp: orderable && canMoveUp,
+      moveDown: orderable && canMoveDown,
+      remove: removable && canRemove,
+      toolbar: false,
+    };
+    has.toolbar = Object.keys(has).some((k: keyof typeof has) => has[k]);
+
+    return {
+      children: (
+        <ItemSchemaField
+          name={name}
+          index={index}
+          schema={itemSchema}
+          uiSchema={itemUiSchema}
+          formData={itemData}
+          formContext={formContext}
+          errorSchema={itemErrorSchema}
+          idPrefix={idPrefix}
+          idSeparator={idSeparator}
+          idSchema={itemIdSchema}
+          required={ArrayField.isItemRequired(itemSchema)}
+          onChange={this.onChangeForIndex(index)}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          registry={registry}
+          disabled={disabled}
+          readonly={readonly}
+          hideError={hideError}
+          autofocus={autofocus}
+          rawErrors={rawErrors}
+        />
+      ),
+      className: "array-item",
+      disabled,
+      hasToolbar: has.toolbar,
+      hasMoveUp: has.moveUp,
+      hasMoveDown: has.moveDown,
+      hasRemove: has.remove,
+      index,
+      key,
+      onAddIndexClick: this.onAddIndexClick,
+      onDropIndexClick: this.onDropIndexClick,
+      onReorderClick: this.onReorderClick,
+      readonly,
+      registry,
+      uiSchema: itemUiSchema,
+    };
+  }
+
+  /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
+   */
+  render() {
+    const { schema, uiSchema, idSchema, registry } = this.props;
+    const { schemaUtils } = registry;
+    if (!(ITEMS_KEY in schema)) {
+      const uiOptions = getUiOptions<T[], F>(uiSchema);
+      const UnsupportedFieldTemplate = getTemplate<
+        "UnsupportedFieldTemplate",
+        T[],
+        F
+      >("UnsupportedFieldTemplate", registry, uiOptions);
+
+      return (
+        <UnsupportedFieldTemplate
+          schema={schema}
+          idSchema={idSchema}
+          reason="Missing items definition"
+          registry={registry}
+        />
+      );
+    }
+    if (schemaUtils.isMultiSelect(schema)) {
+      // If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
+      return this.renderMultiSelect();
+    }
+    if (isCustomWidget<T[], F>(uiSchema)) {
+      return this.renderCustomWidget();
+    }
+    if (isFixedItems(schema)) {
+      return this.renderFixedArray();
+    }
+    if (schemaUtils.isFilesArray(schema, uiSchema)) {
+      return this.renderFiles();
+    }
+    return this.renderNormalArray();
+  }
+}
+
+/** `ArrayField` is `React.ComponentType<FieldProps<T[], F>>` (necessarily) but the `registry` requires things to be a
+ * `Field` which is defined as `React.ComponentType<FieldProps<T, F>>`, so cast it to make `registry` happy.
+ */
+export default ArrayField as unknown as Field;
diff --git a/src/lib/components/json-schema/form/fields/BooleanField.tsx b/src/lib/components/json-schema/form/fields/BooleanField.tsx
index 3567fffb1..3e2155926 100644
--- a/src/lib/components/json-schema/form/fields/BooleanField.tsx
+++ b/src/lib/components/json-schema/form/fields/BooleanField.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type {
   FieldProps,
@@ -7,6 +8,7 @@ import type {
 } from "@rjsf/utils";
 import { getWidget, getUiOptions, optionsList } from "@rjsf/utils";
 import isObject from "lodash/isObject";
+import { useEffect } from "react";
 
 /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
  * two boolean values based on the various alternatives in the schema.
@@ -35,6 +37,11 @@ function BooleanField<T = any, F = any>(props: FieldProps<T, F>) {
   const { widget = "select", ...options } = getUiOptions<T, F>(uiSchema);
   const Widget = getWidget(schema, widget, widgets);
 
+  useEffect(() => {
+    if (formData === undefined) onChange(false as T);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(formData), onChange]);
+
   let enumOptions: EnumOptionsType[] | undefined;
 
   if (Array.isArray(schema.oneOf)) {
@@ -54,7 +61,7 @@ function BooleanField<T = any, F = any>(props: FieldProps<T, F>) {
   } else {
     // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
     const schemaWithEnumNames = schema as RJSFSchema & { enumNames?: string[] };
-    const enums = schema.enum ?? [true, false];
+    const enums = schema.enum ?? [false, true];
     if (
       !schemaWithEnumNames.enumNames &&
       enums &&
@@ -80,6 +87,9 @@ function BooleanField<T = any, F = any>(props: FieldProps<T, F>) {
     }
   }
 
+  if (!required)
+    enumOptions = [...(enumOptions ?? []), { value: null, label: "null" }];
+
   return (
     <Widget
       options={{ ...options, enumOptions }}
diff --git a/src/lib/components/json-schema/form/fields/index.ts b/src/lib/components/json-schema/form/fields/index.ts
index 465dee69e..afda66292 100644
--- a/src/lib/components/json-schema/form/fields/index.ts
+++ b/src/lib/components/json-schema/form/fields/index.ts
@@ -1,8 +1,10 @@
+import ArrayField from "./ArrayField";
 import BooleanField from "./BooleanField";
 import MultiSchemaField from "./MultiSchemaField";
 import NullField from "./NullField";
 
 export const Fields = {
+  ArrayField,
   BooleanField,
   OneOfField: MultiSchemaField,
   AnyOfField: MultiSchemaField,
diff --git a/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
index 5a8ed7eb5..a836e5a6e 100644
--- a/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
@@ -6,12 +6,15 @@ import type {
 } from "@rjsf/utils";
 import { getTemplate, getUiOptions } from "@rjsf/utils";
 
+import { isNullFormData } from "../utils";
+
 import { FieldTypeTag } from "./FieldTypeTag";
 
 export default function ArrayFieldTemplate<T = any, F = any>(
   props: ArrayFieldTemplateProps<T, F>
 ) {
   const {
+    formData,
     canAdd,
     disabled,
     idSchema,
@@ -74,7 +77,7 @@ export default function ArrayFieldTemplate<T = any, F = any>(
           bgColor="gray.700"
           borderRadius="8px"
         >
-          Empty
+          {isNullFormData(formData) ? "NULL" : "Empty"}
         </Text>
       ) : (
         <Grid
diff --git a/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx b/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
index d90fd0fed..b4c549fcf 100644
--- a/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
@@ -3,17 +3,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Box,
+  Checkbox,
   Flex,
   FormControl,
   FormLabel,
   Input,
   InputGroup,
+  Text,
 } from "@chakra-ui/react";
 // import { fromBase64, fromUtf8, toBase64, toUtf8 } from "@cosmjs/encoding";
 import type { WidgetProps } from "@rjsf/utils";
 import { getInputProps, getTemplate, getUiOptions } from "@rjsf/utils";
 import type { ChangeEvent, FocusEvent } from "react";
 
+import { isSchemaTypeString } from "../utils";
+
 import { FieldTypeTag } from "./FieldTypeTag";
 
 // const PLACEHOLDERS = {
@@ -61,6 +65,17 @@ import { FieldTypeTag } from "./FieldTypeTag";
 //   return null;
 // };
 
+const getBaseInputPlaceholder = (
+  value: any,
+  readonly: boolean,
+  required: boolean,
+  isString: boolean
+) => {
+  if (isString && value === "") return "empty string";
+  if (required || value === "") return "";
+  return `${readonly ? "" : "left empty to send as "}null`;
+};
+
 const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
   const {
     id,
@@ -73,7 +88,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
     onBlur,
     onFocus,
     options,
-    required,
+    required = false,
     readonly,
     rawErrors,
     autofocus,
@@ -97,7 +112,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
     (!!label || !!schema.title);
 
   const handleOnChange = ({ target }: ChangeEvent<HTMLInputElement>) =>
-    onChange(target.value);
+    onChange(target.value === "" ? options.emptyValue : target.value);
   const handleOnBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, target.value);
   const handleOnFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
@@ -111,6 +126,8 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
   //   formContext
   // );
 
+  const isStringType = isSchemaTypeString(schema.type);
+
   return (
     <FormControl
       isDisabled={disabled || readonly}
@@ -135,36 +152,56 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
           <FieldTypeTag type={schema.type} format={schema.format} />
         </Flex>
       )}
-      <InputGroup>
-        <Input
-          id={id}
-          name={id}
-          value={value || value === 0 ? value : ""}
-          onChange={handleOnChange}
-          onBlur={handleOnBlur}
-          onFocus={handleOnFocus}
-          autoFocus={autofocus}
-          // placeholder={
-          //   placeholder ||
-          //   Object.entries(PLACEHOLDERS).find(([key]) =>
-          //     label.includes(key)
-          //   )?.[1]
-          // }
-          {...inputProps}
-          list={schema.examples ? `examples_${id}` : undefined}
-          _disabled={{
-            color: "text.main",
-            cursor: "not-allowed",
-            _hover: {
-              borderColor: "gray.700",
-            },
-            _active: {
-              border: "1px solid var(--chakra-colors-gray-700)",
-            },
-          }}
-        />
-        {/* {rightAddon && <InputRightAddon>{rightAddon}</InputRightAddon>} */}
-      </InputGroup>
+      <Flex direction="column" gap={2} mb={4}>
+        <InputGroup>
+          <Input
+            id={id}
+            name={id}
+            value={value || value === 0 ? value : ""}
+            onChange={handleOnChange}
+            onBlur={handleOnBlur}
+            onFocus={handleOnFocus}
+            autoFocus={autofocus}
+            placeholder={
+              getBaseInputPlaceholder(
+                value,
+                readonly ?? false,
+                required,
+                isStringType
+              )
+              // placeholder || Object.entries(PLACEHOLDERS).find(([key]) =>
+              //   label.includes(key)
+              // )?.[1]
+            }
+            {...inputProps}
+            list={schema.examples ? `examples_${id}` : undefined}
+            isDisabled={isStringType && value === ""}
+            _disabled={{
+              color: "text.main",
+              cursor: "not-allowed",
+              _hover: {
+                borderColor: "gray.700",
+              },
+              _active: {
+                border: "1px solid var(--chakra-colors-gray-700)",
+              },
+            }}
+          />
+          {/* {rightAddon && <InputRightAddon>{rightAddon}</InputRightAddon>} */}
+        </InputGroup>
+        {!readonly && isStringType && (
+          <Checkbox
+            pl={2}
+            isChecked={value === ""}
+            onChange={(e) => {
+              if (e.target.checked) onChange("" as T);
+              else onChange(null as T);
+            }}
+          >
+            <Text variant="body3">Send as empty string</Text>
+          </Checkbox>
+        )}
+      </Flex>
       {Array.isArray(schema.examples) ? (
         <datalist id={`examples_${id}`}>
           {(schema.examples as string[])
diff --git a/src/lib/components/json-schema/form/templates/FieldTemplate.tsx b/src/lib/components/json-schema/form/templates/FieldTemplate.tsx
index 14117479a..8399b4713 100644
--- a/src/lib/components/json-schema/form/templates/FieldTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/FieldTemplate.tsx
@@ -2,7 +2,6 @@
 import { FormControl } from "@chakra-ui/react";
 import type { FieldTemplateProps } from "@rjsf/utils";
 import { getTemplate, getUiOptions } from "@rjsf/utils";
-import { useEffect } from "react";
 
 export default function FieldTemplate<T = any, F = any>(
   props: FieldTemplateProps<T, F>
@@ -24,8 +23,6 @@ export default function FieldTemplate<T = any, F = any>(
     help,
     schema,
     uiSchema,
-    formData,
-    onChange,
   } = props;
   const uiOptions = getUiOptions<T, F>(uiSchema);
   const WrapIfAdditionalTemplate = getTemplate<
@@ -34,16 +31,6 @@ export default function FieldTemplate<T = any, F = any>(
     F
   >("WrapIfAdditionalTemplate", registry, uiOptions);
 
-  useEffect(() => {
-    if (formData === undefined) {
-      if (required) {
-        if (schema.type === "array") onChange([] as T);
-        else if (schema.type === "boolean") onChange(false as T);
-      } else onChange(null as T);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(formData), onChange, required, schema.type]);
-
   return hidden ? (
     <div style={{ display: "none" }}>{children}</div>
   ) : (
diff --git a/src/lib/components/json-schema/form/utils.ts b/src/lib/components/json-schema/form/utils.ts
index 5b5867425..a03723043 100644
--- a/src/lib/components/json-schema/form/utils.ts
+++ b/src/lib/components/json-schema/form/utils.ts
@@ -138,3 +138,10 @@ export function getMatchingOptionFixed<T = any>(
     return validator.isValid(option, formData, rootSchema);
   });
 }
+
+export const isNullFormData = <T = any>(formData: T): boolean =>
+  formData === undefined || formData === null;
+
+export const isSchemaTypeString = (type: RJSFSchema["type"]) =>
+  (typeof type === "string" && type === "string") ||
+  (Array.isArray(type) && type.includes("string"));
diff --git a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
index c467c2427..2e2f4469b 100644
--- a/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
+++ b/src/lib/components/json-schema/form/widgets/SelectWidget.tsx
@@ -34,7 +34,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
     schema,
     id,
     options,
-    placeholder,
+    placeholder = "",
     multiple,
     required,
     disabled,
@@ -118,7 +118,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
 
   return (
     <FormControl
-      mb={2}
+      my={2}
       isDisabled={disabled || readonly}
       isRequired={required && !readonly}
       isReadOnly={readonly}
@@ -137,13 +137,15 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
         name={id}
         isMulti={isMultiple}
         options={displayEnumOptions}
-        placeholder={placeholder}
+        placeholder={
+          placeholder.length > 0 || readonly ? placeholder : "Select option"
+        }
         closeMenuOnSelect={!isMultiple}
         onBlur={handleOnBlur}
         onChange={isMultiple ? handleOnMultiChange : handleOnChange}
         onFocus={handleOnFocus}
         autoFocus={autofocus}
-        value={formValue}
+        value={selectedIndex === undefined ? undefined : formValue}
         menuPosition="fixed"
         chakraStyles={{
           control: (provided) => ({
diff --git a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
index 397312054..5affac249 100644
--- a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
+++ b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
@@ -307,6 +307,9 @@ export const ExecuteBox = ({
       <AccordionPanel mx={2}>
         <Grid templateColumns="1fr 1fr" templateRows="auto auto" columnGap={6}>
           <GridItem>
+            <Text variant="body2" color="text.dark" fontWeight={700}>
+              Execute Input
+            </Text>
             <JsonSchemaForm
               formId={`execute-${msgSchema.title}`}
               schema={msgSchema.schema}
@@ -321,12 +324,16 @@ export const ExecuteBox = ({
               </Alert>
             )}
           </GridItem>
-          <GridItem pt={5}>
+          <GridItem>
+            <Text variant="body2" color="text.dark" fontWeight={700} pb={3}>
+              Attach Funds
+            </Text>
             <AttachFund
               control={control}
               setValue={setValue}
               attachFundsOption={attachFundsOption}
               labelBgColor="gray.900"
+              showLabel={false}
             />
           </GridItem>
           <GridItem>
diff --git a/src/lib/pages/query/components/SchemaQueryComponent.tsx b/src/lib/pages/query/components/SchemaQueryComponent.tsx
index 259663400..1e74d0deb 100644
--- a/src/lib/pages/query/components/SchemaQueryComponent.tsx
+++ b/src/lib/pages/query/components/SchemaQueryComponent.tsx
@@ -171,6 +171,9 @@ export const SchemaQueryComponent = ({
         >
           {msgSchema.inputRequired && (
             <GridItem>
+              <Text variant="body2" color="text.dark" fontWeight={700}>
+                Query Input
+              </Text>
               <JsonSchemaForm
                 formId={`query-${msgSchema.title}`}
                 schema={msgSchema.schema}
@@ -206,13 +209,12 @@ export const SchemaQueryComponent = ({
           <GridItem>
             <Flex justify="space-between" mb={4}>
               <Flex direction="column">
-                <Text variant="body1" fontWeight={700}>
+                <Text variant="body2" color="text.dark" fontWeight={700}>
                   Return Output
                 </Text>
                 <Text variant="body3" textColor="text.dark">
                   {resSchema.description}
                 </Text>
-                <TimestampText timestamp={timestamp} />
               </Flex>
               <MessageInputSwitch
                 currentTab={resTab}
@@ -228,23 +230,26 @@ export const SchemaQueryComponent = ({
                 </AlertDescription>
               </Alert>
             )}
-            {resTab === OutputMessageTabs.JSON_OUTPUT ? (
-              <JsonReadOnly
-                topic="Return Output"
-                labelBgColor="gray.900"
-                text={res}
-                canCopy={res !== ""}
-              />
-            ) : (
-              <Box bg="gray.800" p={4} borderRadius="8px">
-                <JsonSchemaForm
-                  formId={`response-${msgSchema.title}`}
-                  schema={resSchema.schema}
-                  initialFormData={parseSchemaInitialData(res)}
+            <Flex direction="column" gap={2}>
+              {resTab === OutputMessageTabs.JSON_OUTPUT ? (
+                <JsonReadOnly
+                  topic="Return Output"
+                  labelBgColor="gray.900"
+                  text={res}
+                  canCopy={res !== ""}
                 />
-              </Box>
-            )}
-            {!msgSchema.inputRequired && (
+              ) : (
+                <Box bg="gray.800" p={4} borderRadius="8px">
+                  <JsonSchemaForm
+                    formId={`response-${msgSchema.title}`}
+                    schema={resSchema.schema}
+                    initialFormData={parseSchemaInitialData(res)}
+                  />
+                </Box>
+              )}
+              <TimestampText timestamp={timestamp} />
+            </Flex>
+            {!msgSchema.inputRequired ? (
               <Flex gap={2} justify="flex-start" mt={3}>
                 <CopyButton
                   isDisable={msg === ""}
@@ -277,6 +282,13 @@ export const SchemaQueryComponent = ({
                   </Button>
                 </Flex>
               </Flex>
+            ) : (
+              <CopyButton
+                isDisable={res === "" || Boolean(queryError)}
+                value={res}
+                amptrackSection="query_response"
+                buttonText="Copy Output"
+              />
             )}
           </GridItem>
         </Grid>

From c27111b54ae7726412036d41ea65704ad52d60e1 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 29 Aug 2023 18:50:06 +0700
Subject: [PATCH 2/4] fix: schema state

---
 .../json-schema/form/fields/ArrayField.tsx    | 70 +++++++++++--------
 .../json-schema/form/fields/BooleanField.tsx  |  7 +-
 .../form/templates/ArrayFieldTemplate.tsx     | 67 +++++++++++-------
 .../form/templates/BaseInputTemplate.tsx      | 11 ++-
 4 files changed, 88 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/json-schema/form/fields/ArrayField.tsx b/src/lib/components/json-schema/form/fields/ArrayField.tsx
index 35730c15d..e1c5b2df4 100644
--- a/src/lib/components/json-schema/form/fields/ArrayField.tsx
+++ b/src/lib/components/json-schema/form/fields/ArrayField.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Checkbox, Flex, Text } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 import type {
   ArrayFieldTemplateProps,
   ErrorSchema,
@@ -29,6 +29,7 @@ import type React from "react";
 import * as uuid from "uuid";
 
 import { isNullFormData } from "../utils";
+import { CustomIcon } from "lib/components/icon";
 
 /** Type used to represent the keyed form data used in the state */
 type KeyedFormDataType<T> = { key: string; item: T };
@@ -37,6 +38,8 @@ type KeyedFormDataType<T> = { key: string; item: T };
 type ArrayFieldState<T> = {
   /** The keyed form data elements */
   keyedFormData: KeyedFormDataType<T>[];
+  /** Flag indicating whether any of the keyed form data has been updated */
+  updatedKeyedFormData: boolean;
 };
 
 /** Used to generate a unique ID for an element in a row */
@@ -92,11 +95,11 @@ class ArrayField<T = any, F = any> extends Component<
     prevState: Readonly<ArrayFieldState<T>>
   ) {
     // Don't call getDerivedStateFromProps if keyed formdata was just updated.
-    // if (prevState.updatedKeyedFormData) {
-    //   return {
-    //     updatedKeyedFormData: false,
-    //   };
-    // }
+    if (prevState.updatedKeyedFormData) {
+      return {
+        updatedKeyedFormData: false,
+      };
+    }
     const nextFormData = Array.isArray(nextProps.formData)
       ? nextProps.formData
       : [];
@@ -141,14 +144,10 @@ class ArrayField<T = any, F = any> extends Component<
     const keyedFormData = generateKeyedFormData<T>(formData);
     this.state = {
       keyedFormData,
+      updatedKeyedFormData: false,
     };
   }
 
-  componentDidMount(): void {
-    const { formData } = this.props;
-    if (formData === undefined) this.onSelectChange([]);
-  }
-
   /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
    * that the schema is fixed and allows additional items.
    */
@@ -184,6 +183,7 @@ class ArrayField<T = any, F = any> extends Component<
     this.setState(
       {
         keyedFormData: newKeyedFormData,
+        updatedKeyedFormData: true,
       },
       () => onChange(keyedToPlainFormData(newKeyedFormData))
     );
@@ -212,6 +212,7 @@ class ArrayField<T = any, F = any> extends Component<
       this.setState(
         {
           keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true,
         },
         () => onChange(keyedToPlainFormData(newKeyedFormData))
       );
@@ -247,6 +248,7 @@ class ArrayField<T = any, F = any> extends Component<
       this.setState(
         {
           keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true,
         },
         () =>
           onChange(
@@ -377,6 +379,7 @@ class ArrayField<T = any, F = any> extends Component<
       autofocus = false,
       required = false,
       registry,
+      onChange,
       onBlur,
       onFocus,
       idPrefix,
@@ -431,7 +434,7 @@ class ArrayField<T = any, F = any> extends Component<
         });
       }),
       className: `field field-array field-array-of-${itemsSchema.type}`,
-      disabled: disabled || isNullFormData(rawFormData),
+      disabled,
       idSchema,
       uiSchema,
       onAddClick: this.onAddClick,
@@ -440,10 +443,7 @@ class ArrayField<T = any, F = any> extends Component<
       schema,
       title,
       formContext,
-      formData:
-        isNullFormData(rawFormData) && formData.length === 0
-          ? rawFormData
-          : formData,
+      formData: rawFormData,
       rawErrors,
       registry,
     };
@@ -456,19 +456,31 @@ class ArrayField<T = any, F = any> extends Component<
     return (
       <Flex direction="column">
         <Template {...arrayProps} />
-        {!required && !readonly && (
-          <Checkbox
-            pl={2}
-            isChecked={isNullFormData(rawFormData)}
-            onChange={(e) => {
-              if (e.target.checked) this.onSelectChange(null);
-              else this.onSelectChange([]);
-            }}
-            isDisabled={formData.length > 0}
-          >
-            <Text variant="body3">Send as null</Text>
-          </Checkbox>
-        )}
+        {!readonly &&
+          (isNullFormData(rawFormData) ? (
+            <Button
+              mt={3}
+              variant="outline-primary"
+              onClick={() => onChange([])}
+              leftIcon={<CustomIcon name="plus" />}
+            >
+              Create an empty array
+            </Button>
+          ) : (
+            <Button
+              py={0}
+              height="fit-content"
+              alignSelf="start"
+              variant="outline"
+              size="sm"
+              onClick={() => onChange(null as any)}
+            >
+              <Flex gap={1} alignItems="center" h="fit-content">
+                <CustomIcon name="delete" boxSize={3} color="error.main" />
+                <Text color="error.main">Delete array</Text>
+              </Flex>
+            </Button>
+          ))}
       </Flex>
     );
   }
diff --git a/src/lib/components/json-schema/form/fields/BooleanField.tsx b/src/lib/components/json-schema/form/fields/BooleanField.tsx
index 3e2155926..721553f63 100644
--- a/src/lib/components/json-schema/form/fields/BooleanField.tsx
+++ b/src/lib/components/json-schema/form/fields/BooleanField.tsx
@@ -8,7 +8,6 @@ import type {
 } from "@rjsf/utils";
 import { getWidget, getUiOptions, optionsList } from "@rjsf/utils";
 import isObject from "lodash/isObject";
-import { useEffect } from "react";
 
 /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
  * two boolean values based on the various alternatives in the schema.
@@ -37,11 +36,6 @@ function BooleanField<T = any, F = any>(props: FieldProps<T, F>) {
   const { widget = "select", ...options } = getUiOptions<T, F>(uiSchema);
   const Widget = getWidget(schema, widget, widgets);
 
-  useEffect(() => {
-    if (formData === undefined) onChange(false as T);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(formData), onChange]);
-
   let enumOptions: EnumOptionsType[] | undefined;
 
   if (Array.isArray(schema.oneOf)) {
@@ -93,6 +87,7 @@ function BooleanField<T = any, F = any>(props: FieldProps<T, F>) {
   return (
     <Widget
       options={{ ...options, enumOptions }}
+      placeholder={readonly ? undefined : "Select boolean option"}
       schema={schema}
       uiSchema={uiSchema}
       id={idSchema && idSchema.$id}
diff --git a/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
index a836e5a6e..888a5090b 100644
--- a/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
@@ -21,7 +21,7 @@ export default function ArrayFieldTemplate<T = any, F = any>(
     uiSchema,
     items,
     onAddClick,
-    readonly,
+    readonly = false,
     registry,
     required,
     schema,
@@ -80,32 +80,47 @@ export default function ArrayFieldTemplate<T = any, F = any>(
           {isNullFormData(formData) ? "NULL" : "Empty"}
         </Text>
       ) : (
-        <Grid
-          key={`array-item-list-${idSchema.$id}`}
-          my={2}
-          gap={4}
-          bgColor="gray.800"
-          borderRadius="8px"
-          p={4}
-        >
-          {items.map(
-            ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, F>) => (
-              <GridItem key={key}>
-                <ArrayFieldItemTemplate key={key} {...itemProps} />
-              </GridItem>
-            )
-          )}
-          {canAdd && !readonly && (
-            <GridItem display="flex" justifyContent="center">
-              <AddButton
-                className="array-item-add"
-                onClick={onAddClick}
-                disabled={disabled || readonly}
-                uiSchema={uiSchema}
-              />
-            </GridItem>
+        <>
+          {isNullFormData(formData) ? null : (
+            <Grid
+              key={`array-item-list-${idSchema.$id}`}
+              my={2}
+              gap={4}
+              bgColor="gray.800"
+              borderRadius="8px"
+              p={4}
+            >
+              {items.length === 0 ? (
+                <Text
+                  textAlign="center"
+                  variant="body2"
+                  fontWeight={700}
+                  color="text.dark"
+                >
+                  Empty array
+                </Text>
+              ) : (
+                items.map(
+                  ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, F>) => (
+                    <GridItem key={key}>
+                      <ArrayFieldItemTemplate key={key} {...itemProps} />
+                    </GridItem>
+                  )
+                )
+              )}
+              {canAdd && !readonly && (
+                <GridItem display="flex" justifyContent="center">
+                  <AddButton
+                    className="array-item-add"
+                    onClick={onAddClick}
+                    disabled={disabled || readonly}
+                    uiSchema={uiSchema}
+                  />
+                </GridItem>
+              )}
+            </Grid>
           )}
-        </Grid>
+        </>
       )}
     </Box>
   );
diff --git a/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx b/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
index b4c549fcf..67b0adf56 100644
--- a/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx
@@ -14,7 +14,7 @@ import {
 // import { fromBase64, fromUtf8, toBase64, toUtf8 } from "@cosmjs/encoding";
 import type { WidgetProps } from "@rjsf/utils";
 import { getInputProps, getTemplate, getUiOptions } from "@rjsf/utils";
-import type { ChangeEvent, FocusEvent } from "react";
+import { type ChangeEvent, type FocusEvent } from "react";
 
 import { isSchemaTypeString } from "../utils";
 
@@ -71,9 +71,9 @@ const getBaseInputPlaceholder = (
   required: boolean,
   isString: boolean
 ) => {
-  if (isString && value === "") return "empty string";
-  if (required || value === "") return "";
-  return `${readonly ? "" : "left empty to send as "}null`;
+  if (isString && value === "") return "Empty string";
+  if (required) return "";
+  return `${readonly ? "" : "Left blank to send as "}null`;
 };
 
 const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
@@ -175,7 +175,6 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
             }
             {...inputProps}
             list={schema.examples ? `examples_${id}` : undefined}
-            isDisabled={isStringType && value === ""}
             _disabled={{
               color: "text.main",
               cursor: "not-allowed",
@@ -195,7 +194,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
             isChecked={value === ""}
             onChange={(e) => {
               if (e.target.checked) onChange("" as T);
-              else onChange(null as T);
+              else onChange(undefined as T);
             }}
           >
             <Text variant="body3">Send as empty string</Text>

From c83407c8ac6d306671af26cc5abdc37825c7a11f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 29 Aug 2023 18:55:53 +0700
Subject: [PATCH 3/4] fix: remove unnecessary files

---
 .../json-schema/form/fields/NullField.tsx     |  8 +---
 .../widgets/useDefaultChakraSelectStyle.ts    | 42 -------------------
 2 files changed, 1 insertion(+), 49 deletions(-)
 delete mode 100644 src/lib/components/json-schema/form/widgets/useDefaultChakraSelectStyle.ts

diff --git a/src/lib/components/json-schema/form/fields/NullField.tsx b/src/lib/components/json-schema/form/fields/NullField.tsx
index 19aaab1c1..3a2a08207 100644
--- a/src/lib/components/json-schema/form/fields/NullField.tsx
+++ b/src/lib/components/json-schema/form/fields/NullField.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Text } from "@chakra-ui/react";
 import type { FieldProps } from "@rjsf/utils";
-import { useEffect } from "react";
 
 /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
  * also set to null if it has no value.
@@ -9,12 +8,7 @@ import { useEffect } from "react";
  * @param props - The `FieldProps` for this template
  */
 function NullField<T = any, F = any>(props: FieldProps<T, F>) {
-  const { idSchema, formData, onChange } = props;
-  useEffect(() => {
-    if (formData === undefined) {
-      onChange(null as unknown as T);
-    }
-  }, [formData, onChange]);
+  const { idSchema } = props;
   return idSchema.$id === "root" ? (
     <Text
       variant="body3"
diff --git a/src/lib/components/json-schema/form/widgets/useDefaultChakraSelectStyle.ts b/src/lib/components/json-schema/form/widgets/useDefaultChakraSelectStyle.ts
deleted file mode 100644
index 473fffec1..000000000
--- a/src/lib/components/json-schema/form/widgets/useDefaultChakraSelectStyle.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useColorModeValue } from "@chakra-ui/react";
-import type { Props as SelectProps } from "chakra-react-select";
-import type { GroupBase } from "react-select/dist/declarations/src/types";
-
-/**
- * Hook to return the default chakra select styling.
- * @todo border in dark mode!
- */
-export function useDefaultChakraSelectStyle<
-  Option = unknown,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>
->({
-  ...customStyles
-}: Partial<SelectProps<Option, IsMulti, Group>["chakraStyles"]> = {}): Partial<
-  SelectProps<Option, IsMulti, Group>
-> {
-  const menuListBg = useColorModeValue(undefined, "navy.700");
-
-  const chakraStyles: SelectProps<Option, IsMulti, Group>["chakraStyles"] = {
-    control: (provided) => ({
-      ...provided,
-      bg: menuListBg || provided.bg,
-    }),
-    menuList: (provided) => ({
-      ...provided,
-      bg: menuListBg || provided.bg,
-    }),
-    dropdownIndicator: (provided) => ({
-      ...provided,
-      bg: "transparent",
-      px: 2,
-      cursor: "inherit",
-    }),
-    indicatorSeparator: (provided) => ({
-      ...provided,
-      display: "none",
-    }),
-    ...customStyles,
-  };
-  return { chakraStyles };
-}

From 3cd49e3e92aa6e8722590104dd7ac3f76295a6aa Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:18:49 +0700
Subject: [PATCH 4/4] fix: text

---
 .../json-schema/form/fields/ArrayField.tsx    |  4 +-
 .../form/templates/ArrayFieldTemplate.tsx     | 74 +++++++++----------
 2 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/json-schema/form/fields/ArrayField.tsx b/src/lib/components/json-schema/form/fields/ArrayField.tsx
index e1c5b2df4..c6372a038 100644
--- a/src/lib/components/json-schema/form/fields/ArrayField.tsx
+++ b/src/lib/components/json-schema/form/fields/ArrayField.tsx
@@ -459,10 +459,10 @@ class ArrayField<T = any, F = any> extends Component<
         {!readonly &&
           (isNullFormData(rawFormData) ? (
             <Button
-              mt={3}
+              fontSize="12px"
               variant="outline-primary"
               onClick={() => onChange([])}
-              leftIcon={<CustomIcon name="plus" />}
+              leftIcon={<CustomIcon name="plus" boxSize={3} />}
             >
               Create an empty array
             </Button>
diff --git a/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
index 888a5090b..e885af863 100644
--- a/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
+++ b/src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx
@@ -66,7 +66,7 @@ export default function ArrayFieldTemplate<T = any, F = any>(
         uiSchema={uiSchema}
         registry={registry}
       />
-      {readonly && items.length === 0 ? (
+      {isNullFormData(formData) || (readonly && items.length === 0) ? (
         <Text
           variant="body3"
           fontWeight={700}
@@ -80,47 +80,43 @@ export default function ArrayFieldTemplate<T = any, F = any>(
           {isNullFormData(formData) ? "NULL" : "Empty"}
         </Text>
       ) : (
-        <>
-          {isNullFormData(formData) ? null : (
-            <Grid
-              key={`array-item-list-${idSchema.$id}`}
-              my={2}
-              gap={4}
-              bgColor="gray.800"
-              borderRadius="8px"
-              p={4}
+        <Grid
+          key={`array-item-list-${idSchema.$id}`}
+          my={2}
+          gap={4}
+          bgColor="gray.800"
+          borderRadius="8px"
+          p={4}
+        >
+          {items.length === 0 ? (
+            <Text
+              textAlign="center"
+              variant="body2"
+              fontWeight={700}
+              color="text.dark"
             >
-              {items.length === 0 ? (
-                <Text
-                  textAlign="center"
-                  variant="body2"
-                  fontWeight={700}
-                  color="text.dark"
-                >
-                  Empty array
-                </Text>
-              ) : (
-                items.map(
-                  ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, F>) => (
-                    <GridItem key={key}>
-                      <ArrayFieldItemTemplate key={key} {...itemProps} />
-                    </GridItem>
-                  )
-                )
-              )}
-              {canAdd && !readonly && (
-                <GridItem display="flex" justifyContent="center">
-                  <AddButton
-                    className="array-item-add"
-                    onClick={onAddClick}
-                    disabled={disabled || readonly}
-                    uiSchema={uiSchema}
-                  />
+              Empty array
+            </Text>
+          ) : (
+            items.map(
+              ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, F>) => (
+                <GridItem key={key}>
+                  <ArrayFieldItemTemplate key={key} {...itemProps} />
                 </GridItem>
-              )}
-            </Grid>
+              )
+            )
+          )}
+          {canAdd && !readonly && (
+            <GridItem display="flex" justifyContent="center">
+              <AddButton
+                className="array-item-add"
+                onClick={onAddClick}
+                disabled={disabled || readonly}
+                uiSchema={uiSchema}
+              />
+            </GridItem>
           )}
-        </>
+        </Grid>
       )}
     </Box>
   );