New Streams Table Column Sizing Fix (#20141)

* Better flex handling

* flex scaling off

* flex!

* Added comment

* Cleanup Cell props

* Re-adding the padding for most use cases. This "fixes" the old table.

* Fixing bold table header

* Move scrolling to the correct level

* Further styling fixes

* Everything is working

* Added new table cell so we don't use the old one

* cleanup

* Everything is working on the new table???

* Fixing header

* Snapshots

* Consolidate checkbox styles

* Cleanup

* Fixing old table

* Don't want padding on new table

* Overflow and padding changes

Author: krishnaglick

airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap

@@ -25,15 +25,14 @@ export const Header = styled(Row)`
 export const Cell = styled.div<{
   flex?: number;
   light?: boolean;
-  lighter?: boolean;
   ellipsis?: boolean;
   flush?: boolean;
 }>`
   flex: ${({ flex }) => (flex !== undefined ? flex : 1)} 0 0;
   padding-right: ${({ flush }) => (flush ? 0 : 10)}px;
   word-break: break-word;
-  color: ${({ theme, light, lighter }) => (light ? theme.greyColor40 : lighter ? theme.greyColor60 : "inherit")};
-  font-weight: ${({ light, lighter }) => (light || lighter ? "normal" : "inherit")};
+  color: ${({ theme, light }) => (light ? theme.greyColor60 : "inherit")};
+  font-weight: ${({ light }) => (light ? "normal" : "inherit")};
 
   overflow: ${({ ellipsis }) => (ellipsis ? "hidden" : "inherit")};
   text-overflow: ${({ ellipsis }) => (ellipsis ? "ellipsis" : "inherit")};

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

@@ -2,4 +2,11 @@
 
 .catalogTreeTable {
   padding: variables.$spacing-lg variables.$spacing-xl 0;
+  overflow: auto;
+  border-radius: 10px;
+  margin-bottom: 29px;
+
+  &.newCatalogTreeTable {
+    padding: 0;
+  }
 }

airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.module.scss

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React, { useCallback, useMemo, useState } from "react";
 
 import { LoadingBackdrop } from "components/ui/LoadingBackdrop";
@@ -7,15 +8,10 @@ import { BulkEditServiceProvider } from "hooks/services/BulkEdit/BulkEditService
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { naturalComparatorBy } from "utils/objects";
 
-import { BulkHeader } from "./BulkHeader";
 import styles from "./CatalogTree.module.scss";
 import { CatalogTreeBody } from "./CatalogTreeBody";
-import { CatalogTreeHeader } from "./CatalogTreeHeader";
 import { CatalogTreeSearch } from "./CatalogTreeSearch";
-import { CatalogTreeSubheader } from "./CatalogTreeSubheader";
 import { BulkEditPanel } from "./next/BulkEditPanel";
-import { CatalogTreeTableHeader } from "./next/CatalogTreeTableHeader";
-import { StreamConnectionHeader } from "./next/StreamConnectionHeader";
 
 interface CatalogTreeProps {
   streams: SyncSchemaStream[];
@@ -76,19 +72,9 @@ const CatalogTreeComponent: React.FC<React.PropsWithChildren<CatalogTreeProps>>
     <BulkEditServiceProvider nodes={streams} update={onStreamsChanged}>
       <LoadingBackdrop loading={isLoading}>
         {mode !== "readonly" && <CatalogTreeSearch onSearch={setSearchString} />}
-        <div className={isNewStreamsTableEnabled ? undefined : styles.catalogTreeTable}>
-          {isNewStreamsTableEnabled ? (
-            <>
-              <StreamConnectionHeader />
-              <CatalogTreeTableHeader />
-            </>
-          ) : (
-            <>
-              <CatalogTreeHeader />
-              <CatalogTreeSubheader />
-              <BulkHeader />
-            </>
-          )}
+        <div
+          className={classNames(styles.catalogTreeTable, { [styles.newCatalogTreeTable]: isNewStreamsTableEnabled })}
+        >
           <CatalogTreeBody
             streams={filteredStreams}
             changedStreams={changedStreams}

airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx

@@ -1,9 +1,7 @@
 .container {
-  margin-bottom: 29px;
   max-height: 600px;
-  overflow-y: auto;
+  overflow: unset;
+  min-width: fit-content;
 
   --webkit-overlay: true;
-
-  width: 100%;
 }

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.module.scss

@@ -6,15 +6,22 @@ import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
+import { BulkHeader } from "./BulkHeader";
 import { CatalogSection } from "./CatalogSection";
 import styles from "./CatalogTreeBody.module.scss";
+import { CatalogTreeHeader } from "./CatalogTreeHeader";
+import { CatalogTreeSubheader } from "./CatalogTreeSubheader";
+import { CatalogTreeTableHeader } from "./next/CatalogTreeTableHeader";
+import { StreamConnectionHeader } from "./next/StreamConnectionHeader";
 
 interface CatalogTreeBodyProps {
   streams: SyncSchemaStream[];
   changedStreams: SyncSchemaStream[];
   onStreamChanged: (stream: SyncSchemaStream) => void;
 }
 
+const isNewStreamsTableEnabled = process.env.REACT_APP_NEW_STREAMS_TABLE ?? false;
+
 export const CatalogTreeBody: React.FC<CatalogTreeBodyProps> = ({ streams, changedStreams, onStreamChanged }) => {
   const { mode } = useConnectionFormService();
 
@@ -33,6 +40,18 @@ export const CatalogTreeBody: React.FC<CatalogTreeBodyProps> = ({ streams, chang
 
   return (
     <div className={styles.container}>
+      {isNewStreamsTableEnabled ? (
+        <>
+          <StreamConnectionHeader />
+          <CatalogTreeTableHeader />
+        </>
+      ) : (
+        <>
+          <CatalogTreeHeader />
+          <CatalogTreeSubheader />
+          <BulkHeader />
+        </>
+      )}
       {streams.map((streamNode) => (
         <Field key={`schema.streams[${streamNode.id}].config`} name={`schema.streams[${streamNode.id}].config`}>
           {({ form }: FieldProps<FormikConnectionFormValues>) => (

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx

@@ -32,36 +32,36 @@ export const CatalogTreeHeader: React.FC = () => {
         </Cell>
       )}
       {mode !== "readonly" && <Cell flex={0.1} />}
-      <Cell lighter flex={0.4}>
+      <Cell light flex={0.4}>
         <FormattedMessage id="sources.sync" />
       </Cell>
-      <Cell lighter>
+      <Cell light>
         <FormattedMessage id="sources.source" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.source.info" />
         </InfoTooltip>
       </Cell>
       <Cell />
-      <Cell lighter flex={1.5}>
+      <Cell light flex={1.5}>
         <FormattedMessage id="form.syncMode" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.syncType.info" />
           <TooltipLearnMoreLink url={links.syncModeLink} />
         </InfoTooltip>
       </Cell>
-      <Cell lighter>
+      <Cell light>
         <FormattedMessage id="form.cursorField" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.cursor.info" />
         </InfoTooltip>
       </Cell>
-      <Cell lighter>
+      <Cell light>
         <FormattedMessage id="form.primaryKey" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.primaryKey.info" />
         </InfoTooltip>
       </Cell>
-      <Cell lighter>
+      <Cell light>
         <FormattedMessage id="connector.destination" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.destinationName.info" />

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.tsx

@@ -9,7 +9,7 @@ import { useConnectionFormService } from "hooks/services/ConnectionForm/Connecti
 
 import styles from "./CatalogTreeSubheader.module.scss";
 
-const SubtitleCell = styled(Cell).attrs(() => ({ lighter: true }))`
+const SubtitleCell = styled(Cell).attrs(() => ({ light: true }))`
   font-size: 10px;
   line-height: 12px;
   border-top: 1px solid ${({ theme }) => theme.greyColor0};

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSubheader.tsx

@@ -11,36 +11,34 @@ const FieldHeaderInner: React.FC = () => {
   return (
     <>
       {isColumnSelectionEnabled && (
-        <HeaderCell lighter flex={0}>
+        <HeaderCell light flex={0}>
           <SyncHeaderContainer>
             <FormattedMessage id="form.field.sync" />
           </SyncHeaderContainer>
         </HeaderCell>
       )}
-      <HeaderCell lighter flex={1.5}>
+      <HeaderCell light flex={1.5}>
         {!isColumnSelectionEnabled && (
           <NameContainer>
             <FormattedMessage id="form.field.name" />
           </NameContainer>
         )}
         {isColumnSelectionEnabled && <FormattedMessage id="form.field.name" />}
       </HeaderCell>
-      <HeaderCell lighter>
+      <HeaderCell light>
         <FormattedMessage id="form.field.dataType" />
       </HeaderCell>
-      <HeaderCell lighter>
+      <HeaderCell light>
         <FormattedMessage id="form.field.cursorField" />
       </HeaderCell>
-      <HeaderCell lighter>
+      <HeaderCell light>
         <FormattedMessage id="form.field.primaryKey" />
       </HeaderCell>
-      <HeaderCell lighter flex={1.5}>
+      <HeaderCell light flex={1.5}>
         <FormattedMessage id="form.field.destinationName" />
       </HeaderCell>
     </>
   );
 };
 
-const FieldHeader = memo(FieldHeaderInner);
-
-export { FieldHeader };
+export const FieldHeader = memo(FieldHeaderInner);

airbyte-webapp/src/components/connection/CatalogTree/FieldHeader.tsx

@@ -0,0 +1,27 @@
+$xsmall: 20px;
+$small: 50px;
+$medium: 120px;
+$large: 200px;
+
+.tableCell {
+  flex: 1 0 $medium;
+  min-width: $medium;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.xsmall {
+    flex-basis: $xsmall;
+    min-width: $xsmall;
+  }
+
+  &.small {
+    flex-basis: $small;
+    min-width: $small;
+  }
+
+  &.large {
+    flex-basis: $large;
+    min-width: $large;
+  }
+}

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.module.scss

@@ -0,0 +1,27 @@
+import classNames from "classnames";
+import React from "react";
+
+import styles from "./CatalogTreeTableCell.module.scss";
+
+type Sizes = "xsmall" | "small" | "medium" | "large";
+
+interface CatalogTreeTableCellProps {
+  size?: Sizes;
+  className?: string;
+}
+
+// This lets us avoid the eslint complaint about unused styles
+const sizeMap: Record<Sizes, string> = {
+  xsmall: styles.xsmall,
+  small: styles.small,
+  medium: styles.medium,
+  large: styles.large,
+};
+
+export const CatalogTreeTableCell: React.FC<React.PropsWithChildren<CatalogTreeTableCellProps>> = ({
+  size = "medium",
+  className,
+  children,
+}) => {
+  return <div className={classNames(styles.tableCell, className, sizeMap[size])}>{children}</div>;
+};

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx

@@ -1,29 +1,23 @@
 @use "scss/_colors";
 @use "scss/_variables";
+@forward "./CatalogTreeTableRow.module.scss";
 
 .cellText {
   color: colors.$grey;
 }
 
 .headerContainer {
-  margin: variables.$spacing-md variables.$spacing-md variables.$spacing-sm variables.$spacing-md;
+  margin: variables.$spacing-md 0 variables.$spacing-sm 0;
   gap: variables.$spacing-sm;
   overflow: hidden;
   scrollbar-gutter: stable;
   min-height: 33px;
-}
 
-.checkboxCell {
-  margin-right: variables.$spacing-sm;
-  max-width: 43px;
-  font-size: 10px;
-  line-height: 13px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding-left: calc(#{variables.$spacing-xl} + #{variables.$spacing-sm});
+  &.newTable {
+    overflow: unset;
+  }
 }
 
-.arrowPlaceholder {
-  width: 20px;
+.checkboxCell {
+  @extend %streamRowCheckboxCell;
 }