From 00bebc349501366f7f6e95de4fab15a44548d6f1 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Mon, 30 Jan 2023 09:03:27 +0100
Subject: [PATCH 1/4] wup

---
 .../StreamTestingPanel/StreamSelector.tsx     |  9 ++--
 .../StreamTestingPanel/StreamTestButton.tsx   |  6 +++
 .../StreamTester.module.scss                  | 10 ++++-
 .../StreamTestingPanel/StreamTester.tsx       | 41 +++++++++++++++++--
 .../StreamTestingPanel.module.scss            | 12 ------
 .../StreamTestingPanel/StreamTestingPanel.tsx | 26 +-----------
 .../connectorBuilder/useBuilderErrors.ts      |  8 +++-
 airbyte-webapp/src/locales/en.json            |  4 +-
 .../ConnectorBuilderStateService.tsx          |  3 ++
 9 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
index 9e27979c035d2..a1ed4e8eefe83 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
@@ -33,8 +33,11 @@ const ControlButton: React.FC<ListBoxControlButtonProps<string>> = ({ selectedOp
 export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) => {
   const analyticsService = useAnalyticsService();
   const { formatMessage } = useIntl();
-  const { selectedView, setSelectedView } = useConnectorBuilderFormState();
-  const { streams, testStreamIndex, setTestStreamIndex } = useConnectorBuilderTestState();
+  const { selectedView, setSelectedView, builderFormValues, editorView } = useConnectorBuilderFormState();
+  const { streams: testStreams, testStreamIndex, setTestStreamIndex } = useConnectorBuilderTestState();
+
+  const streams = editorView === "ui" ? builderFormValues.streams : testStreams;
+
   const options = streams.map((stream) => {
     const label =
       stream.name && stream.name.trim() ? capitalize(stream.name) : formatMessage({ id: "connectorBuilder.emptyName" });
@@ -60,7 +63,7 @@ export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) =>
     <ListBox
       className={classNames(className, styles.container)}
       options={options}
-      selectedValue={streams[testStreamIndex]?.name}
+      selectedValue={streams[testStreamIndex]?.name ?? formatMessage({ id: "connectorBuilder.noStreamSelected" })}
       onSelect={handleStreamSelect}
       buttonClassName={styles.button}
       controlButton={ControlButton}
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx
index d0c8d16960d2e..d9a83795c38b6 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx
@@ -15,12 +15,14 @@ import { useBuilderErrors } from "../useBuilderErrors";
 interface StreamTestButtonProps {
   readStream: () => void;
   hasTestInputJsonErrors: boolean;
+  hasStreamListErrors: boolean;
   setTestInputOpen: (open: boolean) => void;
 }
 
 export const StreamTestButton: React.FC<StreamTestButtonProps> = ({
   readStream,
   hasTestInputJsonErrors,
+  hasStreamListErrors,
   setTestInputOpen,
 }) => {
   const { editorView, yamlIsValid } = useConnectorBuilderFormState();
@@ -54,6 +56,10 @@ export const StreamTestButton: React.FC<StreamTestButtonProps> = ({
     tooltipContent = <FormattedMessage id="connectorBuilder.configErrorsTest" />;
   }
 
+  if (hasStreamListErrors) {
+    buttonDisabled = true;
+  }
+
   const testButton = (
     <Button
       className={styles.testButton}
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.module.scss b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.module.scss
index 7cbf936ac5369..cfdbf363650f4 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.module.scss
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.module.scss
@@ -5,7 +5,6 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: variables.$spacing-lg;
   min-height: 0;
   width: 100%;
@@ -31,3 +30,12 @@
 .fetchingSpinner {
   margin: auto;
 }
+
+.listErrorDisplay {
+  padding: variables.$spacing-lg;
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+  background-color: colors.$blue-50;
+  border-radius: variables.$border-radius-sm;
+}
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
index a2459150e457e..f13f8037c3538 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { ResizablePanels } from "components/ui/ResizablePanels";
 import { Spinner } from "components/ui/Spinner";
 import { Text } from "components/ui/Text";
 
 import { Action, Namespace } from "core/analytics";
+import { StreamsListReadStreamsItem } from "core/request/ConnectorBuilderClient";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useConnectorBuilderTestState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { links } from "utils/links";
 
 import { LogsDisplay } from "./LogsDisplay";
 import { ResultDisplay } from "./ResultDisplay";
@@ -22,6 +24,8 @@ export const StreamTester: React.FC<{
   const {
     streams,
     testStreamIndex,
+    isFetchingStreamList,
+    streamListErrorMessage,
     streamRead: {
       data: streamReadData,
       refetch: readStream,
@@ -78,11 +82,19 @@ export const StreamTester: React.FC<{
     }
   }, [analyticsService, errorMessage, isFetchedAfterMount, streamName, dataUpdatedAt, errorUpdatedAt]);
 
+  const currentStream = streams[testStreamIndex] as StreamsListReadStreamsItem | undefined;
   return (
     <div className={styles.container}>
-      <Text className={styles.url} size="lg">
-        {streams[testStreamIndex]?.url}
-      </Text>
+      {currentStream && (
+        <Text className={styles.url} centered size="lg">
+          {currentStream.url}
+        </Text>
+      )}
+      {!currentStream && isFetchingStreamList && (
+        <Text size="lg" centered>
+          <FormattedMessage id="connectorBuilder.loadingStreamList" />
+        </Text>
+      )}
 
       <StreamTestButton
         readStream={() => {
@@ -93,9 +105,30 @@ export const StreamTester: React.FC<{
           });
         }}
         hasTestInputJsonErrors={hasTestInputJsonErrors}
+        hasStreamListErrors={Boolean(streamListErrorMessage)}
         setTestInputOpen={setTestInputOpen}
       />
 
+      {streamListErrorMessage !== undefined && (
+        <div className={styles.listErrorDisplay}>
+          <Text>
+            <FormattedMessage id="connectorBuilder.couldNotDetectStreams" />
+          </Text>
+          <Text bold>{streamListErrorMessage}</Text>
+          <Text>
+            <FormattedMessage
+              id="connectorBuilder.ensureProperYaml"
+              values={{
+                a: (node: React.ReactNode) => (
+                  <a href={links.lowCodeYamlDescription} target="_blank" rel="noreferrer">
+                    {node}
+                  </a>
+                ),
+              }}
+            />
+          </Text>
+        </div>
+      )}
       {isFetching && (
         <div className={styles.fetchingSpinner}>
           <Spinner />
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.module.scss b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.module.scss
index cee48821b1af2..68ba2cfe7972e 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.module.scss
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.module.scss
@@ -30,18 +30,6 @@ $buttonHeight: 36px;
   align-items: center;
 }
 
-.listErrorDisplay {
-  padding: variables.$spacing-lg;
-  display: flex;
-  flex-direction: column;
-  gap: variables.$spacing-md;
-  background-color: colors.$blue-50;
-  border-radius: variables.$border-radius-sm;
-
-  // leave room for config button
-  margin-top: 50px;
-}
-
 .loadingSpinner {
   height: 100%;
   width: 100%;
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
index 69bfc96573fcb..d947808ac285c 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
@@ -4,7 +4,6 @@ import { ValidationError } from "yup";
 
 import { Heading } from "components/ui/Heading";
 import { Spinner } from "components/ui/Spinner";
-import { Text } from "components/ui/Text";
 
 import { jsonSchemaToFormBlock } from "core/form/schemaToFormBlock";
 import { buildYupFormForJsonSchema } from "core/form/schemaToYup";
@@ -14,7 +13,6 @@ import {
   useConnectorBuilderTestState,
   useConnectorBuilderFormState,
 } from "services/connectorBuilder/ConnectorBuilderStateService";
-import { links } from "utils/links";
 
 import { ConfigMenu } from "./ConfigMenu";
 import { StreamSelector } from "./StreamSelector";
@@ -43,7 +41,7 @@ function useTestInputJsonErrors(testInputJson: StreamReadRequestBodyConfig, spec
 export const StreamTestingPanel: React.FC<unknown> = () => {
   const [isTestInputOpen, setTestInputOpen] = useState(false);
   const { jsonManifest, yamlEditorIsMounted } = useConnectorBuilderFormState();
-  const { testInputJson, streamListErrorMessage } = useConnectorBuilderTestState();
+  const { testInputJson } = useConnectorBuilderTestState();
 
   const testInputJsonErrors = useTestInputJsonErrors(testInputJson, jsonManifest.spec);
 
@@ -73,32 +71,12 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
           <img className={styles.logo} alt="" src="/images/octavia/pointing.svg" width={102} />
         </div>
       )}
-      {hasStreams && streamListErrorMessage === undefined && (
+      {hasStreams && (
         <div className={styles.selectAndTestContainer}>
           <StreamSelector className={styles.streamSelector} />
           <StreamTester hasTestInputJsonErrors={testInputJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
         </div>
       )}
-      {hasStreams && streamListErrorMessage !== undefined && (
-        <div className={styles.listErrorDisplay}>
-          <Text>
-            <FormattedMessage id="connectorBuilder.couldNotDetectStreams" />
-          </Text>
-          <Text bold>{streamListErrorMessage}</Text>
-          <Text>
-            <FormattedMessage
-              id="connectorBuilder.ensureProperYaml"
-              values={{
-                a: (node: React.ReactNode) => (
-                  <a href={links.lowCodeYamlDescription} target="_blank" rel="noreferrer">
-                    {node}
-                  </a>
-                ),
-              }}
-            />
-          </Text>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/airbyte-webapp/src/components/connectorBuilder/useBuilderErrors.ts b/airbyte-webapp/src/components/connectorBuilder/useBuilderErrors.ts
index 5ee008f51c81e..843b3ab205c5f 100644
--- a/airbyte-webapp/src/components/connectorBuilder/useBuilderErrors.ts
+++ b/airbyte-webapp/src/components/connectorBuilder/useBuilderErrors.ts
@@ -14,7 +14,9 @@ export const useBuilderErrors = () => {
   const invalidViews = useCallback(
     (ignoreUntouched: boolean, limitToViews?: BuilderView[], inputErrors?: FormikErrors<BuilderFormValues>) => {
       const errorsToCheck = inputErrors !== undefined ? inputErrors : errors;
-      const errorKeys = Object.keys(errorsToCheck);
+      const errorKeys = Object.keys(errorsToCheck).filter((errorKey) =>
+        Boolean(errorsToCheck[errorKey as keyof BuilderFormValues])
+      );
 
       const invalidViews: BuilderView[] = [];
 
@@ -33,7 +35,9 @@ export const useBuilderErrors = () => {
       }
 
       if (errorKeys.includes("streams")) {
-        const errorStreamNums = Object.keys(errorsToCheck.streams ?? {});
+        const errorStreamNums = Object.keys(errorsToCheck.streams ?? {}).filter((errorKey) =>
+          Boolean(errorsToCheck.streams?.[Number(errorKey)])
+        );
 
         if (ignoreUntouched) {
           if (errorsToCheck.streams && touched.streams) {
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 4b7240a3f3566..cf0c30681a7dd 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -664,7 +664,7 @@
   "connectorBuilder.invalidYamlTest": "Cannot test stream while YAML content is invalid.",
   "connectorBuilder.unknownError": "An unknown error has occurred",
   "connectorBuilder.testConnector": "TEST YOUR CONNECTOR",
-  "connectorBuilder.couldNotDetectStreams": "Could not detect streams in the YAML editor:",
+  "connectorBuilder.couldNotDetectStreams": "Could not verify streams:",
   "connectorBuilder.ensureProperYaml": "In order to test a stream, ensure that the YAML is structured as described in <a>the docs</a>.",
   "connectorBuilder.addStreamModal.title": "New stream",
   "connectorBuilder.addStreamModal.streamNameLabel": "Stream name",
@@ -743,6 +743,8 @@
   "connectorBuilder.copyFromSlicerTitle": "Import slicing settings from...",
   "connectorBuilder.inputsButton": "Inputs",
   "connectorBuilder.interUserInputValue": "Insert a user input value",
+  "connectorBuilder.loadingStreamList": "Loading",
+  "connectorBuilder.noStreamSelected": "No stream selected",
 
   "jobs.noAttemptsFailure": "Failed to start job.",
 
diff --git a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
index 8df08d9eb2621..7a6b54b372510 100644
--- a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
+++ b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
@@ -53,6 +53,7 @@ interface TestStateContext {
   setTestStreamIndex: (streamIndex: number) => void;
   testStreamIndex: number;
   streamRead: UseQueryResult<StreamRead, unknown>;
+  isFetchingStreamList: boolean;
 }
 
 export const ConnectorBuilderFormStateContext = React.createContext<FormStateContext | null>(null);
@@ -173,6 +174,7 @@ export const ConnectorBuilderTestStateProvider: React.FC<React.PropsWithChildren
     data: streamListRead,
     isError: isStreamListError,
     error: streamListError,
+    isFetching: isFetchingStreamList,
   } = useListStreams({ manifest, config: testInputJson });
   const unknownErrorMessage = formatMessage({ id: "connectorBuilder.unknownError" });
   const streamListErrorMessage = isStreamListError
@@ -205,6 +207,7 @@ export const ConnectorBuilderTestStateProvider: React.FC<React.PropsWithChildren
     testStreamIndex,
     setTestStreamIndex,
     streamRead,
+    isFetchingStreamList,
   };
 
   return <ConnectorBuilderTestStateContext.Provider value={ctx}>{children}</ConnectorBuilderTestStateContext.Provider>;

From 8651bed8e0d9071e3c55352021afac6053cf3de3 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Tue, 31 Jan 2023 13:13:21 +0100
Subject: [PATCH 2/4] fix builder field

---
 .../src/components/connectorBuilder/Builder/BuilderField.tsx | 1 +
 .../connectorBuilder/StreamTestingPanel/StreamTestButton.tsx | 5 ++---
 .../src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx  | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
index ae7bf7fa1909b..6a529c71730f5 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
@@ -117,6 +117,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps & FastFieldProps<unknown>> =
           readOnly={readOnly}
           adornment={adornment}
           onBlur={(e) => {
+            field.onBlur(e);
             props.onBlur?.(e.target.value);
           }}
         />
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx
index d9a83795c38b6..fc1536bf37ef7 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestButton.tsx
@@ -54,9 +54,8 @@ export const StreamTestButton: React.FC<StreamTestButtonProps> = ({
   if ((editorView === "ui" && hasErrors(false)) || hasTestInputJsonErrors) {
     showWarningIcon = true;
     tooltipContent = <FormattedMessage id="connectorBuilder.configErrorsTest" />;
-  }
-
-  if (hasStreamListErrors) {
+  } else if (hasStreamListErrors) {
+    // only disable the button on stream list errors if there are no user-fixable errors
     buttonDisabled = true;
   }
 
diff --git a/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx b/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx
index 41e1931f0118f..7777194d67952 100644
--- a/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx
+++ b/airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx
@@ -36,6 +36,7 @@ const ConnectorBuilderPageInner: React.FC = React.memo(() => {
   const switchToYaml = useCallback(() => setEditorView("yaml"), [setEditorView]);
 
   const initialFormValues = useRef(builderFormValues);
+
   return useMemo(
     () => (
       <Formik

From eb472b30d1f6af118bc719a831f84674a98e2119 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Tue, 31 Jan 2023 14:04:25 +0100
Subject: [PATCH 3/4] use stream list response if available

---
 .../StreamTestingPanel/StreamSelector.tsx     | 21 ++++++++++++++++---
 .../ConnectorBuilderStateService.tsx          |  5 +++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
index a1ed4e8eefe83..411716fa9c252 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
@@ -33,10 +33,10 @@ const ControlButton: React.FC<ListBoxControlButtonProps<string>> = ({ selectedOp
 export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) => {
   const analyticsService = useAnalyticsService();
   const { formatMessage } = useIntl();
-  const { selectedView, setSelectedView, builderFormValues, editorView } = useConnectorBuilderFormState();
-  const { streams: testStreams, testStreamIndex, setTestStreamIndex } = useConnectorBuilderTestState();
+  const { selectedView, setSelectedView } = useConnectorBuilderFormState();
+  const { testStreamIndex, setTestStreamIndex } = useConnectorBuilderTestState();
 
-  const streams = editorView === "ui" ? builderFormValues.streams : testStreams;
+  const streams = useStreamNames();
 
   const options = streams.map((stream) => {
     const label =
@@ -70,3 +70,18 @@ export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) =>
     />
   );
 };
+
+function useStreamNames() {
+  const { builderFormValues, editorView, formValuesValid } = useConnectorBuilderFormState();
+  const { streams: testStreams, isFetchingStreamList, streamListErrorMessage } = useConnectorBuilderTestState();
+
+  let streams: Array<{ name: string }> = editorView === "ui" ? builderFormValues.streams : testStreams;
+
+  const testStreamListUpToDate = formValuesValid && !isFetchingStreamList && !streamListErrorMessage;
+
+  if (editorView === "ui" && testStreamListUpToDate) {
+    streams = streams.map((stream, index) => ({ name: testStreams[index]?.name || stream.name }));
+  }
+
+  return streams;
+}
diff --git a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
index 7a6b54b372510..851599266403d 100644
--- a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
+++ b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
@@ -30,6 +30,7 @@ export type BuilderView = "global" | "inputs" | number;
 
 interface FormStateContext {
   builderFormValues: BuilderFormValues;
+  formValuesValid: boolean;
   jsonManifest: ConnectorManifest;
   lastValidJsonManifest: DeclarativeComponentSchema | undefined;
   yamlManifest: string;
@@ -66,6 +67,8 @@ export const ConnectorBuilderFormStateProvider: React.FC<React.PropsWithChildren
     DEFAULT_BUILDER_FORM_VALUES
   );
 
+  const [formValuesValid, setFormValuesValid] = useState(true);
+
   const lastValidBuilderFormValuesRef = useRef<BuilderFormValues>(storedBuilderFormValues as BuilderFormValues);
   const currentBuilderFormValuesRef = useRef<BuilderFormValues>(storedBuilderFormValues as BuilderFormValues);
 
@@ -76,6 +79,7 @@ export const ConnectorBuilderFormStateProvider: React.FC<React.PropsWithChildren
         lastValidBuilderFormValuesRef.current = values;
       }
       currentBuilderFormValuesRef.current = values;
+      setFormValuesValid(isValid);
       setStoredBuilderFormValues(values);
     },
     [setStoredBuilderFormValues]
@@ -142,6 +146,7 @@ export const ConnectorBuilderFormStateProvider: React.FC<React.PropsWithChildren
 
   const ctx = {
     builderFormValues,
+    formValuesValid,
     jsonManifest: derivedJsonManifest,
     lastValidJsonManifest,
     yamlManifest,

From 4f206fe7c5b04f03994833fa215b66955c5b7ace Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Tue, 31 Jan 2023 14:24:02 +0100
Subject: [PATCH 4/4] error message for URL

---
 .../connectorBuilder/StreamTestingPanel/StreamTester.tsx     | 5 +++++
 airbyte-webapp/src/locales/en.json                           | 1 +
 2 files changed, 6 insertions(+)

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
index f13f8037c3538..cdfdc04a132b9 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
@@ -95,6 +95,11 @@ export const StreamTester: React.FC<{
           <FormattedMessage id="connectorBuilder.loadingStreamList" />
         </Text>
       )}
+      {!currentStream && streamListErrorMessage && (
+        <Text size="lg" centered>
+          <FormattedMessage id="connectorBuilder.streamListUrlError" />
+        </Text>
+      )}
 
       <StreamTestButton
         readStream={() => {
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 22e9e4403e106..060e2e2177854 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -750,6 +750,7 @@
   "connectorBuilder.interUserInputValue": "Insert a user input value",
   "connectorBuilder.loadingStreamList": "Loading",
   "connectorBuilder.noStreamSelected": "No stream selected",
+  "connectorBuilder.streamListUrlError": "Could not load URL",
 
   "jobs.noAttemptsFailure": "Failed to start job.",