🪟 🎉 Add yaml validation to Connector Builder and disable buttons when invalid

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

@@ -0,0 +1,29 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.container {
+  padding-top: variables.$spacing-sm;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.header {
+  background-color: colors.$grey-50;
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-md;
+  padding: variables.$spacing-sm variables.$spacing-md;
+}
+
+.numLogsDisplay {
+  border-radius: variables.$border-radius-md;
+  background-color: colors.$blue;
+  padding: 1px variables.$spacing-sm;
+  color: colors.$white;
+}
+
+.logsDisplay {
+  overflow-y: auto;
+  height: 100%;
+}

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

@@ -0,0 +1,29 @@
+import { FormattedMessage } from "react-intl";
+
+import { Text } from "components/ui/Text";
+
+import { StreamReadLogsItem } from "core/request/ConnectorBuilderClient";
+
+import styles from "./LogsDisplay.module.scss";
+
+interface LogsDisplayProps {
+  logs: StreamReadLogsItem[];
+}
+
+export const LogsDisplay: React.FC<LogsDisplayProps> = ({ logs }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <Text size="sm" bold>
+          <FormattedMessage id="connectorBuilder.connectorLogs" />
+        </Text>
+        <Text className={styles.numLogsDisplay} size="xs" bold>
+          {logs.length}
+        </Text>
+      </div>
+      <div className={styles.logsDisplay}>
+        <pre>{JSON.stringify(logs, null, 2)}</pre>
+      </div>
+    </div>
+  );
+};

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

@@ -20,25 +20,36 @@ interface PageDisplayProps {
 
 interface TabData {
   title: string;
+  key: string;
   content: StreamReadSlicesItemPagesItemRecordsItem[] | HttpRequest | HttpResponse;
 }
 
 export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className }) => {
   const { formatMessage } = useIntl();
-  const tabs: TabData[] = [{ title: formatMessage({ id: "connectorBuilder.recordsTab" }), content: page.records }];
+  const tabs: TabData[] = [
+    {
+      title: `${formatMessage({ id: "connectorBuilder.recordsTab" })} (${page.records.length})`,
+      key: "records",
+      content: page.records,
+    },
+  ];
   if (page.request) {
-    tabs.push({ title: formatMessage({ id: "connectorBuilder.requestTab" }), content: page.request });
+    tabs.push({ title: formatMessage({ id: "connectorBuilder.requestTab" }), key: "request", content: page.request });
   }
   if (page.response) {
-    tabs.push({ title: formatMessage({ id: "connectorBuilder.responseTab" }), content: page.response });
+    tabs.push({
+      title: formatMessage({ id: "connectorBuilder.responseTab" }),
+      key: "response",
+      content: page.response,
+    });
   }
 
   return (
     <div className={classNames(className)}>
       <Tab.Group>
         <Tab.List className={styles.tabList}>
           {tabs.map((tab) => (
-            <Tab className={styles.tab}>
+            <Tab className={styles.tab} key={tab.key}>
               {({ selected }) => (
                 <Text className={classNames(styles.tabTitle, { [styles.selected]: selected })}>{tab.title}</Text>
               )}
@@ -47,7 +58,7 @@ export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className }) =>
         </Tab.List>
         <Tab.Panels className={styles.tabPanelContainer}>
           {tabs.map((tab) => (
-            <Tab.Panel className={styles.tabPanel}>
+            <Tab.Panel className={styles.tabPanel} key={tab.key}>
               <pre>{JSON.stringify(tab.content, null, 2)}</pre>
             </Tab.Panel>
           ))}

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

@@ -5,6 +5,8 @@
   display: flex;
   flex-direction: column;
   gap: variables.$spacing-lg;
+  padding-bottom: variables.$spacing-md;
+  height: 100%;
 }
 
 .sliceSelector {
@@ -21,7 +23,7 @@
 
 .paginator {
   display: flex;
-  gap: variables.$spacing-sm;
+  gap: 2px;
   align-self: center;
   justify-self: flex-end;
   margin-top: auto;

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

@@ -1,45 +1,44 @@
 import classNames from "classnames";
-import { useState } from "react";
 
 import { Paginator } from "components/ui/Paginator";
 import { Text } from "components/ui/Text";
 
-import { StreamRead } from "core/request/ConnectorBuilderClient";
+import { StreamReadSlicesItem } from "core/request/ConnectorBuilderClient";
+import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { PageDisplay } from "./PageDisplay";
 import styles from "./ResultDisplay.module.scss";
 import { SliceSelector } from "./SliceSelector";
 
 interface ResultDisplayProps {
-  streamRead: StreamRead;
+  slices: StreamReadSlicesItem[];
   className?: string;
 }
 
-export const ResultDisplay: React.FC<ResultDisplayProps> = ({ streamRead, className }) => {
-  const [selectedSliceIndex, setSelectedSliceIndex] = useState(0);
-  const [selectedPage, setSelectedPage] = useState(0);
+export const ResultDisplay: React.FC<ResultDisplayProps> = ({ slices, className }) => {
+  const { selectedSlice, selectedPage, setSelectedSlice, setSelectedPage } = useConnectorBuilderState();
 
-  const handlePageChange = (selectedPageIndex: number) => {
-    setSelectedPage(selectedPageIndex);
-  };
-
-  const slice = streamRead.slices[selectedSliceIndex];
+  const slice = slices[selectedSlice];
   const numPages = slice.pages.length;
   const page = slice.pages[selectedPage];
 
   return (
     <div className={classNames(className, styles.container)}>
-      <SliceSelector
-        className={styles.sliceSelector}
-        slices={streamRead.slices}
-        selectedSliceIndex={selectedSliceIndex}
-        onSelect={setSelectedSliceIndex}
-      />
+      {slices.length > 1 && (
+        <SliceSelector
+          className={styles.sliceSelector}
+          slices={slices}
+          selectedSliceIndex={selectedSlice}
+          onSelect={setSelectedSlice}
+        />
+      )}
       <PageDisplay className={styles.pageDisplay} page={page} />
-      <div className={styles.paginator}>
-        <Text className={styles.pageLabel}>Page:</Text>
-        <Paginator numPages={numPages} onPageChange={handlePageChange} selectedPage={selectedPage} />
-      </div>
+      {slice.pages.length > 1 && (
+        <div className={styles.paginator}>
+          <Text className={styles.pageLabel}>Page:</Text>
+          <Paginator numPages={numPages} onPageChange={setSelectedPage} selectedPage={selectedPage} />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,11 +1,11 @@
 @use "scss/variables";
 
 .container {
-  padding: variables.$spacing-xl;
+  padding: variables.$spacing-xl variables.$spacing-md variables.$spacing-md variables.$spacing-md;
   display: flex;
   flex-direction: column;
   height: 100%;
-  gap: variables.$spacing-xl;
+  gap: variables.$spacing-lg;
 }
 
 .streamSelector {
@@ -16,9 +16,12 @@
   flex: 0 0 auto;
 }
 
-.resultDisplay {
+.resizablePanelsContainer {
   flex: 1;
   min-height: 0;
+
+  // required to hide the connector logs splitter underneath the resizable panel overlay
+  z-index: 0;
 }
 
 .placeholder {

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

@@ -1,8 +1,11 @@
 import { useIntl } from "react-intl";
 
+import { ResizablePanels } from "components/ui/ResizablePanels";
+
 import { useReadStream } from "services/connectorBuilder/ConnectorBuilderApiService";
 import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
+import { LogsDisplay } from "./LogsDisplay";
 import { ResultDisplay } from "./ResultDisplay";
 import { StreamSelector } from "./StreamSelector";
 import styles from "./StreamTestingPanel.module.scss";
@@ -27,7 +30,21 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
         }}
       />
       {streamReadData && streamReadData.slices.length !== 0 ? (
-        <ResultDisplay className={styles.resultDisplay} streamRead={streamReadData} />
+        <ResizablePanels
+          className={styles.resizablePanelsContainer}
+          orientation="horizontal"
+          firstPanel={{
+            children: <ResultDisplay slices={streamReadData.slices} />,
+            minWidth: 120,
+          }}
+          secondPanel={{
+            className: styles.logsContainer,
+            children: <LogsDisplay logs={streamReadData.logs} />,
+            minWidth: 30,
+            flex: 0,
+          }}
+          hideSecondPanel={streamReadData.logs.length === 0}
+        />
       ) : (
         <div className={styles.placeholder}>{formatMessage({ id: "connectorBuilder.resultsPlaceholder" })}</div>
       )}

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

@@ -4,7 +4,6 @@
 $testIconHeight: 17px;
 
 .container {
-  margin: variables.$spacing-lg 0;
   display: flex;
   gap: variables.$spacing-md;
   height: 36px;
@@ -29,6 +28,7 @@ $testIconHeight: 17px;
 .testButton {
   margin-right: 0;
   flex: 0 0 100px;
+  width: 100px;
 }
 
 .testButtonText {

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

@@ -1,9 +1,12 @@
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { FormattedMessage } from "react-intl";
 
 import { RotateIcon } from "components/icons/RotateIcon";
 import { Button } from "components/ui/Button";
 import { Text } from "components/ui/Text";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
@@ -16,28 +19,43 @@ interface TestControlsProps {
 }
 
 export const TestControls: React.FC<TestControlsProps> = ({ onClickTest, className }) => {
-  const { selectedStream } = useConnectorBuilderState();
+  const { selectedStream, yamlIsValid } = useConnectorBuilderState();
+
+  const testButton = (
+    <Button
+      className={styles.testButton}
+      size="sm"
+      onClick={onClickTest}
+      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={classNames(className, styles.container)}>
       <ConfigMenu />
       <div className={styles.urlDisplay}>
-        <Text size="lg">{selectedStream.url}</Text>
+        <Tooltip control={<Text size="lg">{selectedStream.url}</Text>}>{selectedStream.url}</Tooltip>
       </div>
-      <Button
-        className={styles.testButton}
-        size="sm"
-        onClick={onClickTest}
-        icon={
-          <div>
-            <RotateIcon width={styles.testIconHeight} height={styles.testIconHeight} />
-          </div>
-        }
-      >
-        <Text className={styles.testButtonText} size="sm" bold>
-          <FormattedMessage id="connectorBuilder.testButton" />
-        </Text>
-      </Button>
+      {yamlIsValid ? (
+        testButton
+      ) : (
+        <Tooltip control={testButton}>
+          <FormattedMessage id="connectorBuilder.invalidYamlTest" />
+        </Tooltip>
+      )}
     </div>
   );
 };

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

@@ -1,24 +1,41 @@
+import { faDownload, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { downloadFile } from "utils/file";
 
 interface DownloadYamlButtonProps {
-  yaml: string;
   className?: string;
+  yaml: string;
+  yamlIsValid: boolean;
 }
 
-export const DownloadYamlButton: React.FC<DownloadYamlButtonProps> = ({ yaml, className }) => {
+export const DownloadYamlButton: React.FC<DownloadYamlButtonProps> = ({ className, yaml, yamlIsValid }) => {
   const downloadYaml = () => {
     const file = new Blob([yaml], { type: "text/plain;charset=utf-8" });
     // TODO: pull name from connector name input or generate from yaml contents
     downloadFile(file, "connector_builder.yaml");
   };
 
-  return (
-    <Button className={className} onClick={downloadYaml}>
+  const downloadButton = (
+    <Button
+      className={className}
+      onClick={downloadYaml}
+      disabled={!yamlIsValid}
+      icon={yamlIsValid ? <FontAwesomeIcon icon={faDownload} /> : <FontAwesomeIcon icon={faWarning} />}
+    >
       <FormattedMessage id="connectorBuilder.downloadYaml" />
     </Button>
   );
+
+  return yamlIsValid ? (
+    downloadButton
+  ) : (
+    <Tooltip control={downloadButton} placement="left">
+      <FormattedMessage id="connectorBuilder.invalidYamlDownload" />
+    </Tooltip>
+  );
 };