🪟🧹 Connector builder: Fast fields performance improvements

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

@@ -1,4 +1,4 @@
-import { useField } from "formik";
+import { FastField } from "formik";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -64,17 +64,19 @@ 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 & { field: any; helpers: any; meta: any }> = ({
   path,
   label,
   tooltip,
   optional = false,
   readOnly,
   pattern,
+  field,
+  meta,
+  helpers,
   adornment,
   ...props
 }) => {
-  const [field, meta, helpers] = useField(path);
   const hasError = !!meta.error && meta.touched;
 
   if (props.type === "boolean") {
@@ -133,3 +135,11 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
     </ControlLabels>
   );
 };
+
+export const BuilderField: React.FC<BuilderFieldProps> = (props) => {
+  return (
+    <FastField name={props.path}>
+      {({ field, helpers, meta }: any) => <InnerBuilderField {...props} field={field} helpers={helpers} 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,3 +1,4 @@
+import { FastField } from "formik";
 import { useField } from "formik";
 import React from "react";
 
@@ -25,38 +26,46 @@ 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 value = typePathField.value;
+const InnerBuilderOneOf: React.FC<BuilderOneOfProps & { field: any; helpers: any }> = React.memo(
+  ({ options, label, tooltip, field: typePathField, helpers: oneOfPathHelpers }) => {
+    const value = typePathField.value;
 
-  const selectedOption = options.find((option) => option.typeValue === value);
+    const selectedOption = options.find((option) => option.typeValue === value);
 
+    return (
+      <GroupControls
+        label={<ControlLabels label={label} infoTooltipContent={tooltip} />}
+        control={
+          <DropDown
+            {...typePathField}
+            options={options.map((option) => {
+              return { label: option.label, value: option.typeValue, default: option.default };
+            })}
+            value={value ?? options[0].typeValue}
+            onChange={(selectedOption: Option) => {
+              if (selectedOption.value === value) {
+                return;
+              }
+              // clear all values for this oneOf and set selected option and default values
+              oneOfPathHelpers.setValue({
+                type: selectedOption.value,
+                ...selectedOption.default,
+              });
+            }}
+          />
+        }
+      >
+        {selectedOption?.children}
+      </GroupControls>
+    );
+  }
+);
+
+export const BuilderOneOf: React.FC<BuilderOneOfProps> = (props) => {
+  const [, , helpers] = useField(props.path);
   return (
-    <GroupControls
-      label={<ControlLabels label={label} infoTooltipContent={tooltip} />}
-      control={
-        <DropDown
-          {...typePathField}
-          options={options.map((option) => {
-            return { label: option.label, value: option.typeValue, default: option.default };
-          })}
-          value={value ?? options[0].typeValue}
-          onChange={(selectedOption: Option) => {
-            if (selectedOption.value === value) {
-              return;
-            }
-            // clear all values for this oneOf and set selected option and default values
-            oneOfPathHelpers.setValue({
-              type: selectedOption.value,
-              ...selectedOption.default,
-            });
-          }}
-        />
-      }
-    >
-      {selectedOption?.children}
-    </GroupControls>
+    <FastField name={`${props.path}.type`}>
+      {({ field }: any) => <InnerBuilderOneOf {...props} field={field} helpers={helpers} />}
+    </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/GlobalConfigView.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useIntl } from "react-intl";
 
 import { AuthenticationSection } from "./AuthenticationSection";

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,6 +61,10 @@ 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} />}
@@ -69,20 +74,36 @@ export const KeyValueListField: React.FC<KeyValueListFieldProps> = ({ path, labe
         </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);
-          }}
-        />
-      ))}
+      <KeyValueList keyValueList={keyValueList} setKeyValueList={setKeyValueListRef} />
     </GroupControls>
   );
 };
+
+const KeyValueList = React.memo(
+  ({
+    keyValueList,
+    setKeyValueList,
+  }: {
+    keyValueList: Array<[string, string]>;
+    setKeyValueList: React.MutableRefObject<(val: Array<[string, string]>) => void>;
+  }) => {
+    return (
+      <>
+        {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);
+            }}
+          />
+        ))}
+      </>
+    );
+  }
+);