🪟🔧 Connector builder: Performance improvements

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

@@ -2,7 +2,7 @@ import { Form } from "formik";
 import debounce from "lodash/debounce";
 import { useEffect, useMemo } from "react";
 
-import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { BuilderView, useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { builderFormValidationSchema, BuilderFormValues } from "../types";
 import styles from "./Builder.module.scss";
@@ -29,7 +29,7 @@ function getView(selectedView: BuilderView) {
 }
 
 export const Builder: React.FC<BuilderProps> = ({ values, toggleYamlEditor, validateForm }) => {
-  const { setBuilderFormValues, selectedView } = useConnectorBuilderState();
+  const { setBuilderFormValues, selectedView } = useConnectorBuilderFormState();
   const debouncedSetBuilderFormValues = useMemo(
     () =>
       debounce((values) => {

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

@@ -2,6 +2,7 @@ import { faSliders, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import { useFormikContext } from "formik";
+import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Indicator from "components/Indicator";
@@ -10,7 +11,7 @@ import { Heading } from "components/ui/Heading";
 import { Text } from "components/ui/Text";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { BuilderView, useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { DownloadYamlButton } from "../DownloadYamlButton";
 import { BuilderFormValues, DEFAULT_BUILDER_FORM_VALUES, getInferredInputs } from "../types";
@@ -52,11 +53,11 @@ interface BuilderSidebarProps {
   toggleYamlEditor: () => void;
 }
 
-export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ className, toggleYamlEditor }) => {
+export const BuilderSidebar: React.FC<BuilderSidebarProps> = React.memo(({ className, toggleYamlEditor }) => {
   const { formatMessage } = useIntl();
   const { hasErrors } = useBuilderErrors();
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
-  const { yamlManifest, selectedView, setSelectedView, setTestStreamIndex } = useConnectorBuilderState();
+  const { yamlManifest, selectedView, setSelectedView, setTestStreamIndex } = useConnectorBuilderFormState();
   const { values, setValues } = useFormikContext<BuilderFormValues>();
   const handleResetForm = () => {
     openConfirmationModal({
@@ -150,4 +151,4 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = ({ className, toggl
       </Button>
     </div>
   );
-};
+});

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

@@ -5,7 +5,7 @@ import { useField } from "formik";
 import { useIntl } from "react-intl";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { BuilderView, useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { BuilderStream } from "../types";
 import { AddStreamButton } from "./AddStreamButton";
@@ -26,7 +26,7 @@ export const StreamConfigView: React.FC<StreamConfigViewProps> = ({ streamNum })
   const { formatMessage } = useIntl();
   const [field, , helpers] = useField<BuilderStream[]>("streams");
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
-  const { setSelectedView, setTestStreamIndex } = useConnectorBuilderState();
+  const { setSelectedView, setTestStreamIndex } = useConnectorBuilderFormState();
 
   const streamPath = `streams[${streamNum}]`;
   const streamFieldPath = (fieldPath: string) => `${streamPath}.${fieldPath}`;

airbyte-webapp/src/components/connectorBuilder/DownloadYamlButton.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from "react-intl";
 import { Button } from "components/ui/Button";
 import { Tooltip } from "components/ui/Tooltip";
 
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 import { downloadFile } from "utils/file";
 
 import styles from "./DownloadYamlButton.module.scss";
@@ -18,7 +18,7 @@ interface DownloadYamlButtonProps {
 }
 
 export const DownloadYamlButton: React.FC<DownloadYamlButtonProps> = ({ className, yaml, yamlIsValid }) => {
-  const { editorView } = useConnectorBuilderState();
+  const { editorView } = useConnectorBuilderFormState();
   const { hasErrors, validateAndTouch } = useBuilderErrors();
 
   const downloadYaml = () => {

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx

@@ -12,22 +12,25 @@ import { Tooltip } from "components/ui/Tooltip";
 
 import { SourceDefinitionSpecificationDraft } from "core/domain/connector";
 import { StreamReadRequestBodyConfig } from "core/request/ConnectorBuilderClient";
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { useConnectorBuilderTestState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 import { ConnectorForm } from "views/Connector/ConnectorForm";
 
 import styles from "./ConfigMenu.module.scss";
 import { ConfigMenuErrorBoundaryComponent } from "./ConfigMenuErrorBoundary";
 
 interface ConfigMenuProps {
   className?: string;
-  configJsonErrors: number;
+  testInputJsonErrors: number;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
 }
 
-export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, configJsonErrors, isOpen, setIsOpen }) => {
+export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, testInputJsonErrors, isOpen, setIsOpen }) => {
   const { formatMessage } = useIntl();
-  const { configJson, setConfigJson, jsonManifest, editorView, setEditorView } = useConnectorBuilderState();
+  const { jsonManifest, editorView, setEditorView } = useConnectorBuilderFormState();
+
+  const { testInputJson, setTestInputJson } = useConnectorBuilderTestState();
 
   const [showInputsWarning, setShowInputsWarning] = useLocalStorage<boolean>("connectorBuilderInputsWarning", true);
 
@@ -61,8 +64,8 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, configJsonErr
             >
               <FormattedMessage id="connectorBuilder.inputsButton" />
             </Button>
-            {configJsonErrors > 0 && (
-              <NumberBadge className={styles.inputsErrorBadge} value={configJsonErrors} color="red" />
+            {testInputJsonErrors > 0 && (
+              <NumberBadge className={styles.inputsErrorBadge} value={testInputJsonErrors} color="red" />
             )}
           </>
         }
@@ -107,16 +110,16 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, configJsonErr
                   bodyClassName={styles.formContent}
                   footerClassName={styles.inputFormModalFooter}
                   selectedConnectorDefinitionSpecification={connectorDefinitionSpecification}
-                  formValues={{ connectionConfiguration: configJson }}
+                  formValues={{ connectionConfiguration: testInputJson }}
                   onSubmit={async (values) => {
-                    setConfigJson(values.connectionConfiguration as StreamReadRequestBodyConfig);
+                    setTestInputJson(values.connectionConfiguration as StreamReadRequestBodyConfig);
                     setIsOpen(false);
                   }}
                   onCancel={() => {
                     setIsOpen(false);
                   }}
                   onReset={() => {
-                    setConfigJson({});
+                    setTestInputJson({});
                   }}
                   submitLabel={formatMessage({ id: "connectorBuilder.saveInputsForm" })}
                 />

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx

@@ -5,7 +5,10 @@ import { useIntl } from "react-intl";
 import { Heading } from "components/ui/Heading";
 import { ListBox, ListBoxControlButtonProps } from "components/ui/ListBox";
 
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import {
+  useConnectorBuilderTestState,
+  useConnectorBuilderFormState,
+} from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { ReactComponent as CaretDownIcon } from "../../ui/ListBox/CaretDownIcon.svg";
 import styles from "./StreamSelector.module.scss";
@@ -27,7 +30,8 @@ const ControlButton: React.FC<ListBoxControlButtonProps<string>> = ({ selectedOp
 
 export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) => {
   const { formatMessage } = useIntl();
-  const { streams, selectedView, testStreamIndex, setSelectedView, setTestStreamIndex } = useConnectorBuilderState();
+  const { selectedView, testStreamIndex, setSelectedView, setTestStreamIndex } = useConnectorBuilderFormState();
+  const { streams } = useConnectorBuilderTestState();
   const options = streams.map((stream) => {
     const label =
       stream.name && stream.name.trim() ? capitalize(stream.name) : formatMessage({ id: "connectorBuilder.emptyName" });

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx

@@ -7,27 +7,27 @@ import { Button } from "components/ui/Button";
 import { Text } from "components/ui/Text";
 import { Tooltip } from "components/ui/Tooltip";
 
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { useBuilderErrors } from "../useBuilderErrors";
 import styles from "./StreamTestButton.module.scss";
 
 interface StreamTestButtonProps {
   readStream: () => void;
-  hasConfigJsonErrors: boolean;
+  hasTestInputJsonErrors: boolean;
   setTestInputOpen: (open: boolean) => void;
 }
 
 export const StreamTestButton: React.FC<StreamTestButtonProps> = ({
   readStream,
-  hasConfigJsonErrors,
+  hasTestInputJsonErrors,
   setTestInputOpen,
 }) => {
-  const { editorView, yamlIsValid } = useConnectorBuilderState();
+  const { editorView, yamlIsValid } = useConnectorBuilderFormState();
   const { hasErrors, validateAndTouch } = useBuilderErrors();
 
   const handleClick = () => {
-    if (hasConfigJsonErrors) {
+    if (hasTestInputJsonErrors) {
       setTestInputOpen(true);
       return;
     }
@@ -49,7 +49,7 @@ export const StreamTestButton: React.FC<StreamTestButtonProps> = ({
     tooltipContent = <FormattedMessage id="connectorBuilder.invalidYamlTest" />;
   }
 
-  if ((editorView === "ui" && hasErrors(false)) || hasConfigJsonErrors) {
+  if ((editorView === "ui" && hasErrors(false)) || hasTestInputJsonErrors) {
     showWarningIcon = true;
     tooltipContent = <FormattedMessage id="connectorBuilder.configErrorsTest" />;
   }

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx

@@ -6,19 +6,23 @@ import { Spinner } from "components/ui/Spinner";
 import { Text } from "components/ui/Text";
 
 import { useReadStream } from "services/connectorBuilder/ConnectorBuilderApiService";
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import {
+  useConnectorBuilderTestState,
+  useConnectorBuilderFormState,
+} from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { LogsDisplay } from "./LogsDisplay";
 import { ResultDisplay } from "./ResultDisplay";
 import { StreamTestButton } from "./StreamTestButton";
 import styles from "./StreamTester.module.scss";
 
 export const StreamTester: React.FC<{
-  hasConfigJsonErrors: boolean;
+  hasTestInputJsonErrors: boolean;
   setTestInputOpen: (open: boolean) => void;
-}> = ({ hasConfigJsonErrors, setTestInputOpen }) => {
+}> = ({ hasTestInputJsonErrors, setTestInputOpen }) => {
   const { formatMessage } = useIntl();
-  const { jsonManifest, configJson, streams, testStreamIndex } = useConnectorBuilderState();
+  const { jsonManifest, testStreamIndex } = useConnectorBuilderFormState();
+  const { streams, testInputJson } = useConnectorBuilderTestState();
   const {
     data: streamReadData,
     refetch: readStream,
@@ -28,7 +32,7 @@ export const StreamTester: React.FC<{
   } = useReadStream({
     manifest: jsonManifest,
     stream: streams[testStreamIndex]?.name,
-    config: configJson,
+    config: testInputJson,
   });
 
   const [logsFlex, setLogsFlex] = useState(0);
@@ -60,7 +64,7 @@ export const StreamTester: React.FC<{
 
       <StreamTestButton
         readStream={readStream}
-        hasConfigJsonErrors={hasConfigJsonErrors}
+        hasTestInputJsonErrors={hasTestInputJsonErrors}
         setTestInputOpen={setTestInputOpen}
       />
 

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx

@@ -10,7 +10,10 @@ import { jsonSchemaToFormBlock } from "core/form/schemaToFormBlock";
 import { buildYupFormForJsonSchema } from "core/form/schemaToYup";
 import { StreamReadRequestBodyConfig } from "core/request/ConnectorBuilderClient";
 import { Spec } from "core/request/ConnectorManifest";
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import {
+  useConnectorBuilderTestState,
+  useConnectorBuilderFormState,
+} from "services/connectorBuilder/ConnectorBuilderStateService";
 import { links } from "utils/links";
 
 import { ConfigMenu } from "./ConfigMenu";
@@ -20,28 +23,29 @@ import styles from "./StreamTestingPanel.module.scss";
 
 const EMPTY_SCHEMA = {};
 
-function useConfigJsonErrors(configJson: StreamReadRequestBodyConfig, spec?: Spec): number {
+function useTestInputJsonErrors(testInputJson: StreamReadRequestBodyConfig, spec?: Spec): number {
   return useMemo(() => {
     try {
       const jsonSchema = spec && spec.connection_specification ? spec.connection_specification : EMPTY_SCHEMA;
       const formFields = jsonSchemaToFormBlock(jsonSchema);
       const validationSchema = buildYupFormForJsonSchema(jsonSchema, formFields);
-      validationSchema.validateSync(configJson, { abortEarly: false });
+      validationSchema.validateSync(testInputJson, { abortEarly: false });
       return 0;
     } catch (e) {
       if (ValidationError.isError(e)) {
         return e.errors.length;
       }
       return 1;
     }
-  }, [configJson, spec]);
+  }, [testInputJson, spec]);
 }
 
 export const StreamTestingPanel: React.FC<unknown> = () => {
   const [isTestInputOpen, setTestInputOpen] = useState(false);
-  const { jsonManifest, configJson, streamListErrorMessage, yamlEditorIsMounted } = useConnectorBuilderState();
+  const { jsonManifest, yamlEditorIsMounted } = useConnectorBuilderFormState();
+  const { testInputJson, streamListErrorMessage } = useConnectorBuilderTestState();
 
-  const configJsonErrors = useConfigJsonErrors(configJson, jsonManifest.spec);
+  const testInputJsonErrors = useTestInputJsonErrors(testInputJson, jsonManifest.spec);
 
   if (!yamlEditorIsMounted) {
     return (
@@ -67,13 +71,13 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
         <>
           <ConfigMenu
             className={styles.configButton}
-            configJsonErrors={configJsonErrors}
+            testInputJsonErrors={testInputJsonErrors}
             isOpen={isTestInputOpen}
             setIsOpen={setTestInputOpen}
           />
           <div className={styles.selectAndTestContainer}>
             <StreamSelector className={styles.streamSelector} />
-            <StreamTester hasConfigJsonErrors={configJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
+            <StreamTester hasTestInputJsonErrors={testInputJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
           </div>
         </>
       )}

airbyte-webapp/src/components/connectorBuilder/YamlEditor/YamlEditor.tsx

@@ -9,7 +9,7 @@ import { CodeEditor } from "components/ui/CodeEditor";
 
 import { ConnectorManifest } from "core/request/ConnectorManifest";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { UiYamlToggleButton } from "../Builder/UiYamlToggleButton";
 import { DownloadYamlButton } from "../DownloadYamlButton";
@@ -31,7 +31,7 @@ export const YamlEditor: React.FC<YamlEditorProps> = ({ toggleYamlEditor }) => {
     setYamlEditorIsMounted,
     setYamlIsValid,
     setJsonManifest,
-  } = useConnectorBuilderState();
+  } = useConnectorBuilderFormState();
   const [yamlValue, setYamlValue] = useState(yamlManifest);
 
   // debounce the setJsonManifest calls so that it doesnt result in a network call for every keystroke

airbyte-webapp/src/components/connectorBuilder/useBuilderErrors.ts

@@ -3,13 +3,13 @@ import { FormikErrors, useFormikContext } from "formik";
 import intersection from "lodash/intersection";
 import { useCallback } from "react";
 
-import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { BuilderView, useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { BuilderFormValues } from "./types";
 
 export const useBuilderErrors = () => {
   const { touched, errors, validateForm, setFieldTouched } = useFormikContext<BuilderFormValues>();
-  const { setSelectedView, setTestStreamIndex } = useConnectorBuilderState();
+  const { setSelectedView, setTestStreamIndex } = useConnectorBuilderFormState();
 
   const invalidViews = useCallback(
     (ignoreUntouched: boolean, limitToViews?: BuilderView[], inputErrors?: FormikErrors<BuilderFormValues>) => {