From 3743a4fe24575451a31475473ec695edca8190b0 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Thu, 11 May 2023 19:15:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=94=A7=20Connector=20builder:?=
 =?UTF-8?q?=20Prevent=20initial=20400=20listing=20request=20(#6391)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: maxi297 <maxi297@users.noreply.github.com>
Co-authored-by: maxi297 <maxime@airbyte.io>
---
 .../StreamTestingPanel/StreamSelector.tsx         | 11 +++++++++++
 .../StreamTestingPanel/StreamTestingPanel.tsx     | 15 +++++++--------
 .../ConnectorBuilderApiService.ts                 |  3 ++-
 .../ConnectorBuilderStateService.tsx              |  5 ++++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
index 5dab51024a0..ac21f3460d2 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import capitalize from "lodash/capitalize";
 import { useIntl } from "react-intl";
 
+import { Box } from "components/ui/Box";
 import { Heading } from "components/ui/Heading";
 import { ListBox, ListBoxControlButtonProps } from "components/ui/ListBox";
 
@@ -40,6 +41,16 @@ export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) =>
 
   const streams = useStreamNames();
 
+  if (streams.length === 0) {
+    return (
+      <Box py="md">
+        <Heading className={styles.label} as="h1" size="sm">
+          -
+        </Heading>
+      </Box>
+    );
+  }
+
   const options = streams.map((stream) => {
     const label =
       stream.name && stream.name.trim() ? capitalize(stream.name) : formatMessage({ id: "connectorBuilder.emptyName" });
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
index d6d1695eb6c..918f2cfa358 100644
--- a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
@@ -42,7 +42,7 @@ function useTestInputJsonErrors(testInputJson: ConnectorConfig | undefined, spec
 
 export const StreamTestingPanel: React.FC<unknown> = () => {
   const { isTestInputOpen, setTestInputOpen } = useConnectorBuilderFormManagementState();
-  const { jsonManifest, yamlEditorIsMounted } = useConnectorBuilderFormState();
+  const { jsonManifest, yamlEditorIsMounted, editorView } = useConnectorBuilderFormState();
   const { testInputJson } = useConnectorBuilderTestInputState();
 
   const testInputJsonErrors = useTestInputJsonErrors(testInputJson, jsonManifest.spec);
@@ -60,7 +60,12 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
   return (
     <div className={styles.container}>
       <ConfigMenu testInputJsonErrors={testInputJsonErrors} isOpen={isTestInputOpen} setIsOpen={setTestInputOpen} />
-      {!hasStreams && (
+      {hasStreams || editorView === "yaml" ? (
+        <>
+          <StreamSelector className={styles.streamSelector} />
+          <StreamTester hasTestInputJsonErrors={testInputJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
+        </>
+      ) : (
         <div className={styles.addStreamMessage}>
           <img className={styles.logo} alt="" src={addButtonScreenshot} width={320} />
           <Heading as="h2" className={styles.addStreamHeading}>
@@ -68,12 +73,6 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
           </Heading>
         </div>
       )}
-      {hasStreams && (
-        <>
-          <StreamSelector className={styles.streamSelector} />
-          <StreamTester hasTestInputJsonErrors={testInputJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
-        </>
-      )}
     </div>
   );
 };
diff --git a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderApiService.ts b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderApiService.ts
index 51fd2bbfacd..258645c9e20 100644
--- a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderApiService.ts
+++ b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderApiService.ts
@@ -43,13 +43,14 @@ export const useReadStream = (projectId: string, params: StreamReadRequestBody)
   });
 };
 
-export const useListStreams = (params: StreamsListRequestBody) => {
+export const useListStreams = (params: StreamsListRequestBody, enabled = true) => {
   const service = useConnectorBuilderService();
 
   return useQuery(connectorBuilderKeys.list(params.manifest, params.config), () => service.listStreams(params), {
     keepPreviousData: true,
     cacheTime: 0,
     retry: false,
+    enabled,
   });
 };
 
diff --git a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
index a6bc8ebf0e7..6c5afec90d5 100644
--- a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
+++ b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
@@ -404,7 +404,10 @@ export const ConnectorBuilderTestReadProvider: React.FC<React.PropsWithChildren<
     isError: isStreamListError,
     error: streamListError,
     isFetching: isFetchingStreamList,
-  } = useListStreams({ manifest, config: testInputWithDefaults });
+  } = useListStreams(
+    { manifest, config: testInputWithDefaults },
+    Boolean(editorView === "yaml" || manifest.streams?.length)
+  );
   const unknownErrorMessage = formatMessage({ id: "connectorBuilder.unknownError" });
   const streamListErrorMessage = isStreamListError
     ? streamListError instanceof Error