🪟🧹 Connector builder: Fast fields performance improvements

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx

@@ -1,4 +1,4 @@
-import { useField } from "formik";
+import { FastField, FastFieldProps, FieldInputProps } from "formik";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -64,24 +64,26 @@ const ArrayField: React.FC<ArrayFieldProps> = ({ name, value, setValue, error })
   return <TagInput name={name} fieldValue={value} onChange={(value) => setValue(value)} error={error} />;
 };
 
-export const BuilderField: React.FC<BuilderFieldProps> = ({
+const InnerBuilderField: React.FC<BuilderFieldProps & FastFieldProps<unknown>> = ({
   path,
   label,
   tooltip,
   optional = false,
   readOnly,
   pattern,
+  field,
+  meta,
+  form,
   adornment,
   ...props
 }) => {
-  const [field, meta, helpers] = useField(path);
   const hasError = !!meta.error && meta.touched;
 
   if (props.type === "boolean") {
     return (
       <LabeledSwitch
-        {...field}
-        checked={field.value}
+        {...(field as FieldInputProps<string>)}
+        checked={field.value as boolean}
         label={
           <>
             {label} {tooltip && <InfoTooltip placement="top-start">{tooltip}</InfoTooltip>}
@@ -93,7 +95,7 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
 
   const setValue = (newValue: unknown) => {
     props.onChange?.(newValue as string & string[]);
-    helpers.setValue(newValue);
+    form.setFieldValue(path, newValue);
   };
 
   return (
@@ -104,23 +106,28 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
           onChange={(e) => {
             field.onChange(e);
             if (e.target.value === "") {
-              helpers.setValue(undefined);
+              form.setFieldValue(path, undefined);
             }
             props.onChange?.(e.target.value);
           }}
           className={props.className}
           type={props.type}
-          value={field.value ?? ""}
+          value={(field.value as string | number | undefined) ?? ""}
           error={hasError}
           readOnly={readOnly}
           adornment={adornment}
         />
       )}
       {props.type === "array" && (
-        <ArrayField name={path} value={field.value ?? []} setValue={setValue} error={hasError} />
+        <ArrayField
+          name={path}
+          value={(field.value as string[] | undefined) ?? []}
+          setValue={setValue}
+          error={hasError}
+        />
       )}
       {props.type === "enum" && (
-        <EnumField options={props.options} value={field.value} setValue={setValue} error={hasError} />
+        <EnumField options={props.options} value={field.value as string} setValue={setValue} error={hasError} />
       )}
       {hasError && (
         <Text className={styles.error}>
@@ -133,3 +140,13 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
     </ControlLabels>
   );
 };
+
+export const BuilderField: React.FC<BuilderFieldProps> = (props) => {
+  return (
+    <FastField name={props.path}>
+      {({ field, form, meta }: FastFieldProps<unknown>) => (
+        <InnerBuilderField {...props} field={field} form={form} meta={meta} />
+      )}
+    </FastField>
+  );
+};

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.tsx

@@ -2,6 +2,7 @@ import { faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useField } from "formik";
 import { useMemo, useState } from "react";
+import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ListBox, ListBoxControlButtonProps, Option } from "components/ui/ListBox";
@@ -26,20 +27,18 @@ export const BuilderFieldWithInputs: React.FC<BuilderFieldProps> = (props) => {
   );
 };
 
-export const UserInputHelper = ({
-  setValue,
-  currentValue,
-}: {
+interface UserInputHelperProps {
   setValue: (value: string) => void;
   currentValue: string;
-}) => {
+}
+
+export const UserInputHelper = (props: UserInputHelperProps) => {
   const { formatMessage } = useIntl();
-  const [modalOpen, setModalOpen] = useState(false);
   const { builderFormValues } = useConnectorBuilderFormState();
   const listOptions = useMemo(() => {
     const options: Array<Option<string | undefined>> = [
       ...builderFormValues.inputs,
-      ...getInferredInputs(builderFormValues),
+      ...getInferredInputs(builderFormValues.global, builderFormValues.inferredInputOverrides),
     ].map((input) => ({
       label: input.definition.title || input.key,
       value: input.key,
@@ -50,45 +49,56 @@ export const UserInputHelper = ({
       icon: <FontAwesomeIcon icon={faPlus} />,
     });
     return options;
-  }, [builderFormValues, formatMessage]);
-  return (
-    <>
-      <ListBox<string | undefined>
-        buttonClassName={styles.button}
-        optionClassName={styles.option}
-        className={styles.container}
-        selectedOptionClassName={styles.selectedOption}
-        controlButton={UserInputHelperControlButton}
-        selectedValue={undefined}
-        onSelect={(selectedValue) => {
-          if (selectedValue) {
-            setValue(`${currentValue || ""}{{ config['${selectedValue}'] }}`);
-          } else {
-            // This hack is necessary because listbox will put the focus back when the option list gets hidden, which conflicts with the auto-focus setting of the modal.
-            // As it's not possible to prevent listbox from forcing the focus back on the button component, this will wait until the focus went to the button, then opens the modal
-            // so it can move it to the first input
-            setTimeout(() => {
-              setModalOpen(true);
-            }, 50);
-          }
-        }}
-        options={listOptions}
-      />
-      {modalOpen && (
-        <InputForm
-          inputInEditing={newInputInEditing()}
-          onClose={(newInput) => {
-            setModalOpen(false);
-            if (!newInput) {
-              return;
+  }, [builderFormValues.global, builderFormValues.inferredInputOverrides, builderFormValues.inputs, formatMessage]);
+  return <InnerUserInputHelper {...props} listOptions={listOptions} />;
+};
+
+const InnerUserInputHelper = React.memo(
+  ({
+    setValue,
+    currentValue,
+    listOptions,
+  }: UserInputHelperProps & { listOptions: Array<Option<string | undefined>> }) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    return (
+      <>
+        <ListBox<string | undefined>
+          buttonClassName={styles.button}
+          optionClassName={styles.option}
+          className={styles.container}
+          selectedOptionClassName={styles.selectedOption}
+          controlButton={UserInputHelperControlButton}
+          selectedValue={undefined}
+          onSelect={(selectedValue) => {
+            if (selectedValue) {
+              setValue(`${currentValue || ""}{{ config['${selectedValue}'] }}`);
+            } else {
+              // This hack is necessary because listbox will put the focus back when the option list gets hidden, which conflicts with the auto-focus setting of the modal.
+              // As it's not possible to prevent listbox from forcing the focus back on the button component, this will wait until the focus went to the button, then opens the modal
+              // so it can move it to the first input
+              setTimeout(() => {
+                setModalOpen(true);
+              }, 50);
             }
-            setValue(`${currentValue}{{ config['${newInput.key}'] }}`);
           }}
+          options={listOptions}
         />
-      )}
-    </>
-  );
-};
+        {modalOpen && (
+          <InputForm
+            inputInEditing={newInputInEditing()}
+            onClose={(newInput) => {
+              setModalOpen(false);
+              if (!newInput) {
+                return;
+              }
+              setValue(`${currentValue}{{ config['${newInput.key}'] }}`);
+            }}
+          />
+        )}
+      </>
+    );
+  }
+);
 
 const UserInputHelperControlButton: React.FC<ListBoxControlButtonProps<string | undefined>> = () => {
   return (

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderOneOf.tsx

@@ -1,4 +1,4 @@
-import { useField } from "formik";
+import { FastField, FastFieldProps } from "formik";
 import React from "react";
 
 import GroupControls from "components/GroupControls";
@@ -25,10 +25,14 @@ interface BuilderOneOfProps {
   tooltip: string;
 }
 
-export const BuilderOneOf: React.FC<BuilderOneOfProps> = ({ options, path, label, tooltip }) => {
-  const [, , oneOfPathHelpers] = useField(path);
-  const typePath = `${path}.type`;
-  const [typePathField] = useField(typePath);
+const InnerBuilderOneOf: React.FC<BuilderOneOfProps & FastFieldProps<string>> = ({
+  options,
+  label,
+  tooltip,
+  field: typePathField,
+  path,
+  form,
+}) => {
   const value = typePathField.value;
 
   const selectedOption = options.find((option) => option.typeValue === value);
@@ -48,7 +52,7 @@ export const BuilderOneOf: React.FC<BuilderOneOfProps> = ({ options, path, label
               return;
             }
             // clear all values for this oneOf and set selected option and default values
-            oneOfPathHelpers.setValue({
+            form.setFieldValue(path, {
               type: selectedOption.value,
               ...selectedOption.default,
             });
@@ -60,3 +64,10 @@ export const BuilderOneOf: React.FC<BuilderOneOfProps> = ({ options, path, label
     </GroupControls>
   );
 };
+export const BuilderOneOf: React.FC<BuilderOneOfProps> = (props) => {
+  return (
+    <FastField name={`${props.path}.type`}>
+      {(fastFieldProps: FastFieldProps<string>) => <InnerBuilderOneOf {...props} {...fastFieldProps} />}
+    </FastField>
+  );
+};

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx

@@ -111,7 +111,9 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = React.memo(({ class
         <FontAwesomeIcon icon={faUser} />
         <FormattedMessage
           id="connectorBuilder.userInputs"
-          values={{ number: values.inputs.length + getInferredInputs(values).length }}
+          values={{
+            number: values.inputs.length + getInferredInputs(values.global, values.inferredInputOverrides).length,
+          }}
         />
       </ViewSelectButton>
 

airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx

@@ -70,7 +70,10 @@ export const InputForm = ({
 }) => {
   const { values, setFieldValue } = useFormikContext<BuilderFormValues>();
   const [inputs, , helpers] = useField<BuilderFormInput[]>("inputs");
-  const inferredInputs = useMemo(() => getInferredInputs(values), [values]);
+  const inferredInputs = useMemo(
+    () => getInferredInputs(values.global, values.inferredInputOverrides),
+    [values.global, values.inferredInputOverrides]
+  );
   const usedKeys = useMemo(
     () => [...inputs.value, ...inferredInputs].map((input) => input.key),
     [inputs.value, inferredInputs]

airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx

@@ -19,7 +19,10 @@ export const InputsView: React.FC = () => {
   const { formatMessage } = useIntl();
   const { values } = useFormikContext<BuilderFormValues>();
   const [inputInEditing, setInputInEditing] = useState<InputInEditing | undefined>(undefined);
-  const inferredInputs = useMemo(() => getInferredInputs(values), [values]);
+  const inferredInputs = useMemo(
+    () => getInferredInputs(values.global, values.inferredInputOverrides),
+    [values.global, values.inferredInputOverrides]
+  );
 
   return (
     <BuilderConfigView heading={formatMessage({ id: "connectorBuilder.inputsTitle" })}>

airbyte-webapp/src/components/connectorBuilder/Builder/KeyValueListField.tsx

@@ -1,4 +1,5 @@
 import { useField } from "formik";
+import React, { useRef } from "react";
 import { FormattedMessage } from "react-intl";
 
 import GroupControls from "components/GroupControls";
@@ -60,29 +61,53 @@ interface KeyValueListFieldProps {
 export const KeyValueListField: React.FC<KeyValueListFieldProps> = ({ path, label, tooltip }) => {
   const [{ value: keyValueList }, , { setValue: setKeyValueList }] = useField<Array<[string, string]>>(path);
 
+  // need to wrap the setter into a ref because it will be a new function on every formik state update
+  const setKeyValueListRef = useRef(setKeyValueList);
+  setKeyValueListRef.current = setKeyValueList;
+
   return (
-    <GroupControls
-      label={<ControlLabels label={label} infoTooltipContent={tooltip} />}
-      control={
-        <Button type="button" variant="secondary" onClick={() => setKeyValueList([...keyValueList, ["", ""]])}>
-          <FormattedMessage id="connectorBuilder.addKeyValue" />
-        </Button>
-      }
-    >
-      {keyValueList.map((keyValue, keyValueIndex) => (
-        <KeyValueInput
-          key={keyValueIndex}
-          keyValue={keyValue}
-          onChange={(newKeyValue) => {
-            const updatedList = keyValueList.map((entry, index) => (index === keyValueIndex ? newKeyValue : entry));
-            setKeyValueList(updatedList);
-          }}
-          onRemove={() => {
-            const updatedList = keyValueList.filter((_, index) => index !== keyValueIndex);
-            setKeyValueList(updatedList);
-          }}
-        />
-      ))}
-    </GroupControls>
+    <KeyValueList label={label} tooltip={tooltip} keyValueList={keyValueList} setKeyValueList={setKeyValueListRef} />
   );
 };
+
+const KeyValueList = React.memo(
+  ({
+    keyValueList,
+    setKeyValueList,
+    label,
+    tooltip,
+  }: Omit<KeyValueListFieldProps, "path"> & {
+    keyValueList: Array<[string, string]>;
+    setKeyValueList: React.MutableRefObject<(val: Array<[string, string]>) => void>;
+  }) => {
+    return (
+      <GroupControls
+        label={<ControlLabels label={label} infoTooltipContent={tooltip} />}
+        control={
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => setKeyValueList.current([...keyValueList, ["", ""]])}
+          >
+            <FormattedMessage id="connectorBuilder.addKeyValue" />
+          </Button>
+        }
+      >
+        {keyValueList.map((keyValue, keyValueIndex) => (
+          <KeyValueInput
+            key={keyValueIndex}
+            keyValue={keyValue}
+            onChange={(newKeyValue) => {
+              const updatedList = keyValueList.map((entry, index) => (index === keyValueIndex ? newKeyValue : entry));
+              setKeyValueList.current(updatedList);
+            }}
+            onRemove={() => {
+              const updatedList = keyValueList.filter((_, index) => index !== keyValueIndex);
+              setKeyValueList.current(updatedList);
+            }}
+          />
+        ))}
+      </GroupControls>
+    );
+  }
+);