[Connector Builder] Display server errors and handle empty streams list (#19461)

* save error handling progress

* display error from stream read

* rearrange components in stream testing panel

* fix state/requests/error handling and properly handle empty streams list

* remove commented code, unused components, and console logs

* use unknown error in the case of empty error message

* don't override numberbadge style

* move 'No streams detected' into en.json

* handle list streams error better

* add loading states for yaml editor and side panel

* add state service changes to support loading states

* fix manifest template

* fix promise

* fix api override

* undo change to apiOverride

Author: lmossman

airbyte-webapp/src/components/StreamTestingPanel/LogsDisplay.module.scss

@@ -22,4 +22,9 @@
 .logsDisplay {
   overflow-y: auto;
   height: 100%;
+  padding: variables.$spacing-md;
+}
+
+.error {
+  color: colors.$red;
 }

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

@@ -11,10 +11,11 @@ import { formatJson } from "./utils";
 
 interface LogsDisplayProps {
   logs: StreamReadLogsItem[];
+  error?: string;
   onTitleClick: () => void;
 }
 
-export const LogsDisplay: React.FC<LogsDisplayProps> = ({ logs, onTitleClick }) => {
+export const LogsDisplay: React.FC<LogsDisplayProps> = ({ logs, error, onTitleClick }) => {
   const formattedLogs = useMemo(() => formatJson(logs), [logs]);
 
   return (
@@ -23,10 +24,10 @@ export const LogsDisplay: React.FC<LogsDisplayProps> = ({ logs, onTitleClick })
         <Text size="sm" bold>
           <FormattedMessage id="connectorBuilder.connectorLogs" />
         </Text>
-        <NumberBadge value={logs.length} color="blue" />
+        {error !== undefined && <NumberBadge value={1} color="red" />}
       </button>
       <div className={styles.logsDisplay}>
-        <pre>{formattedLogs}</pre>
+        {error !== undefined ? <Text className={styles.error}>{error}</Text> : <pre>{formattedLogs}</pre>}
       </div>
     </div>
   );

airbyte-webapp/src/components/StreamTestingPanel/ResultDisplay.module.scss

@@ -30,6 +30,7 @@
   margin-top: auto;
   margin-bottom: 0;
   flex: 0 0 auto;
+  background-color: colors.$white;
 }
 
 .pageLabel {

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

@@ -4,7 +4,7 @@ import { Paginator } from "components/ui/Paginator";
 import { Text } from "components/ui/Text";
 
 import { StreamReadSlicesItem } from "core/request/ConnectorBuilderClient";
-import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+import { useSelectedPageAndSlice } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { PageDisplay } from "./PageDisplay";
 import styles from "./ResultDisplay.module.scss";
@@ -16,7 +16,7 @@ interface ResultDisplayProps {
 }
 
 export const ResultDisplay: React.FC<ResultDisplayProps> = ({ slices, className }) => {
-  const { selectedSlice, selectedPage, setSelectedSlice, setSelectedPage } = useConnectorBuilderState();
+  const { selectedSlice, selectedPage, setSelectedSlice, setSelectedPage } = useSelectedPageAndSlice();
 
   const slice = slices[selectedSlice];
   const numPages = slice.pages.length;

airbyte-webapp/src/components/StreamTestingPanel/StreamSelector.module.scss

@@ -4,7 +4,7 @@
 .centered {
   margin-left: auto;
   margin-right: auto;
-  width: 90%;
+  width: 75%;
   max-width: 320px;
 }
 

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

@@ -6,12 +6,15 @@ import { capitalize } from "lodash";
 import { Heading } from "components/ui/Heading";
 import { ListBox, ListBoxControlButtonProps } from "components/ui/ListBox";
 
+import { StreamsListReadStreamsItem } from "core/request/ConnectorBuilderClient";
 import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import styles from "./StreamSelector.module.scss";
 
 interface StreamSelectorProps {
   className?: string;
+  streams: StreamsListReadStreamsItem[];
+  selectedStream: StreamsListReadStreamsItem;
 }
 
 const ControlButton: React.FC<ListBoxControlButtonProps<string>> = ({ selectedOption }) => {
@@ -25,8 +28,8 @@ const ControlButton: React.FC<ListBoxControlButtonProps<string>> = ({ selectedOp
   );
 };
 
-export const StreamSelector: React.FC<StreamSelectorProps> = ({ className }) => {
-  const { streams, selectedStream, setSelectedStream } = useConnectorBuilderState();
+export const StreamSelector: React.FC<StreamSelectorProps> = ({ className, streams, selectedStream }) => {
+  const { setSelectedStream } = useConnectorBuilderState();
   const options = streams.map((stream) => {
     return { label: capitalize(stream.name), value: stream.name };
   });

airbyte-webapp/src/components/StreamTestingPanel/StreamTester.module.scss

@@ -0,0 +1,43 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: variables.$spacing-lg;
+}
+
+.resizablePanelsContainer {
+  flex: 1;
+  min-height: 0;
+
+  // required to hide the connector logs splitter underneath the resizable panel overlay
+  z-index: 0;
+}
+
+.testButton {
+  width: 100%;
+}
+
+.testButtonTooltipContainer {
+  width: 100%;
+}
+
+.testButtonText {
+  color: colors.$white;
+}
+
+.url {
+  color: colors.$blue;
+  font-weight: 400;
+}
+
+:export {
+  testIconHeight: 17px;
+}
+
+.fetchingSpinner {
+  margin: auto;
+}

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

@@ -0,0 +1,129 @@
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { RotateIcon } from "components/icons/RotateIcon";
+import { Button } from "components/ui/Button";
+import { ResizablePanels } from "components/ui/ResizablePanels";
+import { Spinner } from "components/ui/Spinner";
+import { Text } from "components/ui/Text";
+import { Tooltip } from "components/ui/Tooltip";
+
+import { StreamsListReadStreamsItem } from "core/request/ConnectorBuilderClient";
+import { useReadStream } from "services/connectorBuilder/ConnectorBuilderApiService";
+import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
+
+import { LogsDisplay } from "./LogsDisplay";
+import { ResultDisplay } from "./ResultDisplay";
+import styles from "./StreamTester.module.scss";
+
+interface StreamTesterProps {
+  selectedStream: StreamsListReadStreamsItem;
+}
+
+export const StreamTester: React.FC<StreamTesterProps> = ({ selectedStream }) => {
+  const { formatMessage } = useIntl();
+  const { jsonManifest, configJson, yamlIsValid } = useConnectorBuilderState();
+  const {
+    data: streamReadData,
+    refetch: readStream,
+    isError,
+    error,
+    isFetching,
+  } = useReadStream({
+    manifest: jsonManifest,
+    stream: selectedStream.name,
+    config: configJson,
+  });
+
+  const [logsFlex, setLogsFlex] = useState(0);
+  const handleLogsTitleClick = () => {
+    // expand to 50% if it is currently minimized, otherwise minimize it
+    setLogsFlex((prevFlex) => (prevFlex < 0.06 ? 0.5 : 0));
+  };
+
+  const unknownErrorMessage = formatMessage({ id: "connectorBuilder.unknownError" });
+  const errorMessage = isError
+    ? error instanceof Error
+      ? error.message || unknownErrorMessage
+      : unknownErrorMessage
+    : undefined;
+
+  useEffect(() => {
+    if (isError) {
+      setLogsFlex(1);
+    } else {
+      setLogsFlex(0);
+    }
+  }, [isError]);
+
+  const testButton = (
+    <Button
+      className={styles.testButton}
+      size="sm"
+      onClick={() => {
+        readStream();
+      }}
+      disabled={!yamlIsValid}
+      icon={
+        yamlIsValid ? (
+          <div>
+            <RotateIcon width={styles.testIconHeight} height={styles.testIconHeight} />
+          </div>
+        ) : (
+          <FontAwesomeIcon icon={faWarning} />
+        )
+      }
+    >
+      <Text className={styles.testButtonText} size="sm" bold>
+        <FormattedMessage id="connectorBuilder.testButton" />
+      </Text>
+    </Button>
+  );
+
+  return (
+    <div className={styles.container}>
+      <Text className={styles.url} size="lg">
+        {selectedStream.url}
+      </Text>
+      {yamlIsValid ? (
+        testButton
+      ) : (
+        <Tooltip control={testButton} containerClassName={styles.testButtonTooltipContainer}>
+          <FormattedMessage id="connectorBuilder.invalidYamlTest" />
+        </Tooltip>
+      )}
+      {isFetching && (
+        <div className={styles.fetchingSpinner}>
+          <Spinner />
+        </div>
+      )}
+      {!isFetching && (streamReadData !== undefined || errorMessage !== undefined) && (
+        <ResizablePanels
+          className={styles.resizablePanelsContainer}
+          orientation="horizontal"
+          firstPanel={{
+            children: (
+              <>{streamReadData !== undefined && !isError && <ResultDisplay slices={streamReadData.slices} />}</>
+            ),
+            minWidth: 80,
+          }}
+          secondPanel={{
+            className: styles.logsContainer,
+            children: (
+              <LogsDisplay logs={streamReadData?.logs ?? []} error={errorMessage} onTitleClick={handleLogsTitleClick} />
+            ),
+            minWidth: 30,
+            flex: logsFlex,
+            onStopResize: (newFlex) => {
+              if (newFlex) {
+                setLogsFlex(newFlex);
+              }
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+};

airbyte-webapp/src/components/StreamTestingPanel/StreamTestingPanel.module.scss

@@ -1,30 +1,50 @@
 @use "scss/variables";
+@use "scss/colors";
+
+$buttonHeight: 36px;
 
 .container {
-  padding: variables.$spacing-xl variables.$spacing-md variables.$spacing-md variables.$spacing-md;
+  padding: variables.$spacing-lg;
+  height: 100%;
+  position: relative;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  gap: variables.$spacing-lg;
 }
 
-.streamSelector {
-  flex: 0 0 auto;
+.configButton {
+  position: absolute;
+  top: variables.$spacing-lg;
+  left: variables.$spacing-lg;
+  height: $buttonHeight;
+  width: $buttonHeight;
 }
 
-.testControls {
+.streamSelector {
   flex: 0 0 auto;
+  height: $buttonHeight;
 }
 
-.resizablePanelsContainer {
-  flex: 1;
-  min-height: 0;
+.selectAndTestContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-lg;
+}
 
-  // required to hide the connector logs splitter underneath the resizable panel overlay
-  z-index: 0;
+.listErrorDisplay {
+  margin: calc(variables.$spacing-lg + $buttonHeight) auto auto;
+  padding: variables.$spacing-lg;
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+  background-color: colors.$blue-50;
+  border-radius: variables.$border-radius-sm;
 }
 
-.placeholder {
-  margin-left: auto;
-  margin-right: auto;
+.loadingSpinner {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }