🪟🔧 Connector builder: Prevent initial 400 listing request (#6391)

Co-authored-by: maxi297 <maxi297@users.noreply.github.com> Co-authored-by: maxi297 <maxime@airbyte.io>
airbytehq · May 11, 2023 · 3743a4f · 3743a4f
1 parent d424dc4
commit 3743a4f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git 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
@@ -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,20 +60,19 @@ 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}>
             <FormattedMessage id="connectorBuilder.noStreamsMessage" />
           </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
@@ -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
@@ -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