New Streams Table Column Sizing Fix

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

@@ -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/connection/CatalogTree/CatalogTree.module.scss

@@ -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.tsx

@@ -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/CatalogTreeBody.module.scss

@@ -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.tsx

@@ -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/CatalogTreeHeader.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/CatalogTreeSubheader.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/FieldHeader.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/next/CatalogTreeTableCell.module.scss

@@ -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.tsx

@@ -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/CatalogTreeTableHeader.module.scss

@@ -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;
 }