[Connector Builder] Add ability to click on logs to expand them

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

@@ -14,6 +14,9 @@
   align-items: center;
   gap: variables.$spacing-md;
   padding: variables.$spacing-sm variables.$spacing-md;
+  border: none;
+  cursor: pointer;
+  flex: 0 0 25px;
 }
 
 .numLogsDisplay {

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

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

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

@@ -35,3 +35,16 @@
   max-height: 100%;
   overflow-y: auto;
 }
+
+// add a fade at the bottom of the tabPanel
+.tabPanel::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, colors.$transparentColor, colors.$white 100%);
+  width: 100%;
+  height: 2vh;
+}

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

@@ -1,17 +1,14 @@
 import { Tab } from "@headlessui/react";
 import classNames from "classnames";
+import { useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import { Text } from "components/ui/Text";
 
-import {
-  HttpRequest,
-  HttpResponse,
-  StreamReadSlicesItemPagesItem,
-  StreamReadSlicesItemPagesItemRecordsItem,
-} from "core/request/ConnectorBuilderClient";
+import { StreamReadSlicesItemPagesItem } from "core/request/ConnectorBuilderClient";
 
 import styles from "./PageDisplay.module.scss";
+import { formatJson } from "./utils";
 
 interface PageDisplayProps {
   page: StreamReadSlicesItemPagesItem;
@@ -21,26 +18,35 @@ interface PageDisplayProps {
 interface TabData {
   title: string;
   key: string;
-  content: StreamReadSlicesItemPagesItemRecordsItem[] | HttpRequest | HttpResponse;
+  content: string;
 }
 
 export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className }) => {
   const { formatMessage } = useIntl();
+
+  const formattedRecords = useMemo(() => formatJson(page.records), [page.records]);
+  const formattedRequest = useMemo(() => formatJson(page.request), [page.request]);
+  const formattedResponse = useMemo(() => formatJson(page.response), [page.response]);
+
   const tabs: TabData[] = [
     {
       title: `${formatMessage({ id: "connectorBuilder.recordsTab" })} (${page.records.length})`,
       key: "records",
-      content: page.records,
+      content: formattedRecords,
     },
   ];
   if (page.request) {
-    tabs.push({ title: formatMessage({ id: "connectorBuilder.requestTab" }), key: "request", content: page.request });
+    tabs.push({
+      title: formatMessage({ id: "connectorBuilder.requestTab" }),
+      key: "request",
+      content: formattedRequest,
+    });
   }
   if (page.response) {
     tabs.push({
       title: formatMessage({ id: "connectorBuilder.responseTab" }),
       key: "response",
-      content: page.response,
+      content: formattedResponse,
     });
   }
 
@@ -59,7 +65,7 @@ export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className }) =>
         <Tab.Panels className={styles.tabPanelContainer}>
           {tabs.map((tab) => (
             <Tab.Panel className={styles.tabPanel} key={tab.key}>
-              <pre>{JSON.stringify(tab.content, null, 2)}</pre>
+              <pre>{tab.content}</pre>
             </Tab.Panel>
           ))}
         </Tab.Panels>

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

@@ -19,6 +19,7 @@
   display: flex;
   flex-direction: column;
   gap: variables.$spacing-sm;
+  position: relative;
 }
 
 .paginator {

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

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useIntl } from "react-intl";
 
 import { ResizablePanels } from "components/ui/ResizablePanels";
@@ -19,6 +20,12 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
     stream: selectedStream.name,
     config: configJson,
   });
+  const [logsFlex, setLogsFlex] = useState(0);
+
+  const handleLogsTitleClick = () => {
+    // expand to 50% if it is currently less than 50%, otherwise minimize it
+    setLogsFlex((prevFlex) => (prevFlex < 0.5 ? 0.5 : 0));
+  };
 
   return (
     <div className={styles.container}>
@@ -39,9 +46,14 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
           }}
           secondPanel={{
             className: styles.logsContainer,
-            children: <LogsDisplay logs={streamReadData.logs} />,
+            children: <LogsDisplay logs={streamReadData.logs} onTitleClick={handleLogsTitleClick} />,
             minWidth: 30,
-            flex: 0,
+            flex: logsFlex,
+            onStopResize: (newFlex) => {
+              if (newFlex) {
+                setLogsFlex(newFlex);
+              }
+            },
           }}
           hideSecondPanel={streamReadData.logs.length === 0}
         />

airbyte-webapp/src/components/StreamTestingPanel/utils.ts

@@ -0,0 +1,5 @@
+// Take in any, because that is what JSON.stringify() takes in
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function formatJson(json: any): string {
+  return JSON.stringify(json, null, 2);
+}

airbyte-webapp/src/components/ui/ResizablePanels/ResizablePanels.tsx

@@ -20,6 +20,7 @@ interface PanelProps {
   className?: string;
   flex?: number;
   overlay?: Overlay;
+  onStopResize?: (newFlex: number | undefined) => void;
 }
 
 interface Overlay {
@@ -78,6 +79,11 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
         propagateDimensions
         minSize={firstPanel.minWidth}
         flex={firstPanel.flex}
+        onStopResize={(args) => {
+          if (firstPanel.onStopResize) {
+            firstPanel.onStopResize(args.component.props.flex);
+          }
+        }}
       >
         <PanelContainer className={firstPanel.className} overlay={firstPanel.overlay}>
           {firstPanel.children}
@@ -107,6 +113,11 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
           propagateDimensions
           minSize={secondPanel.minWidth}
           flex={secondPanel.flex}
+          onStopResize={(args) => {
+            if (secondPanel.onStopResize) {
+              secondPanel.onStopResize(args.component.props.flex);
+            }
+          }}
         >
           <PanelContainer className={secondPanel.className} overlay={secondPanel.overlay}>
             {secondPanel.children}

airbyte-webapp/src/pages/ConnectorBuilderPage/ConnectorBuilderPage.tsx

@@ -20,7 +20,7 @@ const ConnectorBuilderPageInner: React.FC = () => {
       firstPanel={{
         children: <YamlEditor />,
         className: styles.leftPanel,
-        minWidth: 400,
+        minWidth: 100,
       }}
       secondPanel={{
         children: <StreamTestingPanel />,