Repository: appsmithorg/appsmith
File: app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigToolField.tsx (TypeScript)

Code before:
  return (
    <ConfigItemRoot>
      <ConfigItemRow>
        <Text isBold renderAs="p">
          Function
        </Text>
        <Button
          isIconButton
          kind="tertiary"
          onClick={handleRemoveButtonClick}
          startIcon="trash"
        />
      </ConfigItemRow>
      <ConfigItemRow>
        <ConfigItemSelectWrapper>
          <FormControl
            config={{
              controlType: "DROP_DOWN",
              configProperty: `${props.fieldPath}.entityId`,
              formName: props.formName,
              id: props.fieldPath,
              label: "",
              isValid: true,
              // FormControl component has incomplete TypeScript definitions for some valid properties
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-expect-error
              isSearchable: true,
              options: [
                ...entityOptions.Query,
                ...entityOptions.JSFunction,
                ...entityOptions.SystemFunction,
              ],
              optionGroupConfig: {
                Query: {
                  label: "Queries",
                  children: [],
                },
                JSFunction: {
                  label: "JS Functions",
                  children: [],
                },
                SystemFunction: {
                  label: "System Functions",
                  children: [],
                },
              } satisfies Record<
                FunctionCallingEntityType,
                DropDownGroupedOptions
              >,
            }}
            formName={props.formName}

Review comment (suggestion):
(nit) You don't have to use `ban-ts-comment`. You can just add a comment like this `// @ts-expect-error FormControl component has incomplete TypeScript definitions for some valid properties`

Code after:
  return (
    <ConfigItemRoot>
      <ConfigItemRow>
        <Text isBold renderAs="p">
          Function
        </Text>
        <Button
          isIconButton
          kind="tertiary"
          onClick={handleRemoveButtonClick}
          startIcon="trash"
        />
      </ConfigItemRow>
      <ConfigItemRow>
        <ConfigItemSelectWrapper>
          <FormControl
            config={{
              controlType: "DROP_DOWN",
              configProperty: `${props.fieldPath}.entityId`,
              formName: props.formName,
              id: props.fieldPath,
              label: "",
              isValid: true,
              // @ts-expect-error FormControl component has incomplete TypeScript definitions for some valid properties
              isSearchable: true,
              options: [
                ...entityOptions.Query,
                ...entityOptions.JSFunction,
                ...entityOptions.SystemFunction,
              ],
              optionGroupConfig: {
                Query: {
                  label: "Queries",
                  children: [],
                },
                JSFunction: {
                  label: "JS Functions",
                  children: [],
                },
                SystemFunction: {
                  label: "System Functions",
                  children: [],
                },
              } satisfies Record<
                FunctionCallingEntityType,
                DropDownGroupedOptions
              >,
            }}
            formName={props.formName}
          />
        </ConfigItemSelectWrapper>