Revert "🪟 🎨 Streams table design pass (#18908)" (#19397)

This reverts commit a72deb1.

Author: teallarson

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

@@ -27,12 +27,9 @@ export const Cell = styled.div<{
   light?: boolean;
   lighter?: boolean;
   ellipsis?: boolean;
-  flush?: boolean;
 }>`
   flex: ${({ flex }) => flex || 1} 0 0;
-  padding-right: ${({ flush }) => (flush ? 0 : 10)}px;
-  min-width: 0;
-
+  padding-right: 10px;
   word-break: break-word;
   color: ${({ theme, light, lighter }) => (light ? theme.greyColor40 : lighter ? theme.greyColor60 : "inherit")};
   font-weight: ${({ light, lighter }) => (light || lighter ? "normal" : "inherit")};

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

@@ -1,13 +1,10 @@
-@use "scss/_variables";
-
 .searchInput {
   padding: 10px 8px 9px;
 }
 
 .searchContent {
   position: relative;
   width: 100%;
-  padding: 0 variables.$spacing-xl;
 
   &::before {
     content: attr(data-content);

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

@@ -1,77 +1,70 @@
-import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Cell, Header } from "components/SimpleTableComponents";
 import { CheckBox } from "components/ui/CheckBox";
-import { Text } from "components/ui/Text";
 import { InfoTooltip, TooltipLearnMoreLink } from "components/ui/Tooltip";
 
 import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { links } from "utils/links";
 
-import styles from "./CatalogTreeTableHeader.module.scss";
-
-const TextCell: React.FC<React.PropsWithChildren<{ flex?: number }>> = ({ flex, children }) => {
-  return (
-    <Cell flex={flex}>
-      <Text size="sm" className={styles.cellText}>
-        {children}
-      </Text>
-    </Cell>
-  );
-};
-
 export const CatalogTreeTableHeader: React.FC = () => {
   const { mode } = useConnectionFormService();
   const { onCheckAll, selectedBatchNodeIds, allChecked } = useBulkEditService();
 
   return (
-    <Header className={styles.headerContainer}>
-      <div className={styles.checkboxCell}>
+    <Header>
+      <Cell>
         {mode !== "readonly" && (
           <CheckBox
             onChange={onCheckAll}
             indeterminate={selectedBatchNodeIds.length > 0 && !allChecked}
             checked={allChecked}
           />
         )}
-      </div>
-      <TextCell flex={0.5}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="sources.sync" />
-      </TextCell>
-      {/* <TextCell>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.fields" />
-      </TextCell> */}
-      <TextCell flex={1}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.namespace" />
-      </TextCell>
-      <TextCell flex={1}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.streamName" />
-      </TextCell>
-      <TextCell flex={2}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.syncMode" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.syncType.info" />
           <TooltipLearnMoreLink url={links.syncModeLink} />
         </InfoTooltip>
-      </TextCell>
-      <TextCell flex={1}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.cursorField" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.cursor.info" />
         </InfoTooltip>
-      </TextCell>
-      <TextCell flex={1}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.primaryKey" />
-      </TextCell>
-      <div className={styles.arrowPlaceholder} />
-      <TextCell flex={1}>
+      </Cell>
+      <Cell />
+      <Cell>
         <FormattedMessage id="form.namespace" />
-      </TextCell>
-      <TextCell flex={1}>
+      </Cell>
+      <Cell>
         <FormattedMessage id="form.streamName" />
-      </TextCell>
+      </Cell>
+      <Cell>
+        <FormattedMessage id="form.syncMode" />
+        <InfoTooltip>
+          <FormattedMessage id="connectionForm.syncType.info" />
+          <TooltipLearnMoreLink url={links.syncModeLink} />
+        </InfoTooltip>
+      </Cell>
     </Header>
   );
 };

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

@@ -17,15 +17,6 @@
 .streamHeaderContent {
   background: colors.$white;
   border-bottom: 1px solid colors.$grey-50;
-  padding-right: variables.$spacing-md;
-  padding-left: variables.$spacing-sm;
-  margin-bottom: 1px;
-  gap: variables.$spacing-sm;
-  min-height: 50px;
-  height: 50px;
-  align-items: center;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
 
   &:hover {
     background: colors.$grey-30;
@@ -47,35 +38,11 @@
   &.selected {
     background-color: colors.$blue-transparent;
   }
-
-  &.disabled {
-    background-color: colors.$grey-50;
-  }
 }
 
 .streamRowCheckboxCell {
-  margin-right: variables.$spacing-sm;
-  max-width: 43px;
-  text-align: center;
-  font-size: 10px;
-  line-height: 13px;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding-left: calc(#{variables.$spacing-xl} + #{variables.$spacing-sm});
-}
-
-.arrowCell {
-  width: 20px;
-}
-
-.cellText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.syncModeCell {
-  width: variables.$width-wide-menu;
-  min-width: variables.$width-wide-menu;
+  padding-left: 27px;
 }

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

@@ -7,14 +7,15 @@ import { FormattedMessage } from "react-intl";
 import { Cell, Row } from "components/SimpleTableComponents";
 import { CheckBox } from "components/ui/CheckBox";
 import { Switch } from "components/ui/Switch";
-import { Text } from "components/ui/Text";
 
 import { useBulkEditSelect } from "hooks/services/BulkEdit/BulkEditService";
 
 import { StreamHeaderProps } from "../StreamHeader";
+import { HeaderCell } from "../styles";
 import styles from "./CatalogTreeTableRow.module.scss";
 import { StreamPathSelect } from "./StreamPathSelect";
 import { SyncModeSelect } from "./SyncModeSelect";
+
 export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   stream,
   destName,
@@ -34,7 +35,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   hasError,
   disabled,
 }) => {
-  const { primaryKey, cursorField, syncMode, destinationSyncMode } = stream.config ?? {};
+  const { primaryKey, syncMode, cursorField, destinationSyncMode } = stream.config ?? {};
   const isStreamEnabled = stream.config?.selected;
 
   const { defaultCursorField } = stream.stream ?? {};
@@ -62,13 +63,14 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
     [styles.disabledChange]: changedSelected && !isStreamEnabled,
     [styles.selected]: isSelected,
     [styles.error]: hasError,
-    [styles.disabled]: !changedSelected && !isStreamEnabled,
   });
 
+  const checkboxCellCustomStyle = classnames(styles.checkboxCell, styles.streamRowCheckboxCell);
+
   return (
     <Row onClick={onRowClick} className={streamHeaderContentStyle}>
       {!disabled && (
-        <div className={styles.streamRowCheckboxCell}>
+        <div className={checkboxCellCustomStyle}>
           {changedSelected && (
             <div>
               {isStreamEnabled ? (
@@ -81,33 +83,24 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           <CheckBox checked={isSelected} onChange={selectForBulkEdit} />
         </div>
       )}
-      <Cell flex={0.5} flush>
+      <Cell>
         <Switch small checked={stream.config?.selected} onChange={onSelectStream} disabled={disabled} />
       </Cell>
-      {/* <Cell>{fieldCount}</Cell> */}
-      <Cell flex={1} title={stream.stream?.namespace || ""}>
-        <Text size="md" className={styles.cellText}>
-          {stream.stream?.namespace || <FormattedMessage id="form.noNamespace" />}
-        </Text>
-      </Cell>
-      <Cell flex={1} title={stream.stream?.name || ""}>
-        <Text size="md" className={styles.cellText}>
-          {stream.stream?.name}
-        </Text>
-      </Cell>
-      <div className={styles.syncModeCell}>
+      <Cell>{fieldCount}</Cell>
+      <HeaderCell ellipsis title={stream.stream?.namespace || ""}>
+        {stream.stream?.namespace || <FormattedMessage id="form.noNamespace" />}
+      </HeaderCell>
+      <Cell>{stream.stream?.name}</Cell>
+      <Cell>
         {disabled ? (
-          <Cell title={syncSchema.syncMode}>
-            <Text size="md" className={styles.cellText}>
-              {syncSchema.syncMode}
-            </Text>
-          </Cell>
+          <HeaderCell ellipsis title={syncSchema.syncMode}>
+            {syncSchema.syncMode}
+          </HeaderCell>
         ) : (
-          // todo: SyncModeSelect should probably have a Tooltip, append/dedupe ends up ellipsing
           <SyncModeSelect options={availableSyncModes} onChange={onSelectSyncMode} value={syncSchema} />
         )}
-      </div>
-      <Cell flex={1}>
+      </Cell>
+      <HeaderCell>
         {cursorType && (
           <StreamPathSelect
             pathType={cursorType}
@@ -116,8 +109,8 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
             onPathChange={onCursorChange}
           />
         )}
-      </Cell>
-      <Cell flex={1}>
+      </HeaderCell>
+      <HeaderCell ellipsis>
         {pkType && (
           <StreamPathSelect
             pathType={pkType}
@@ -127,17 +120,25 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
             onPathChange={onPrimaryKeyChange}
           />
         )}
+      </HeaderCell>
+      <Cell>
+        <FontAwesomeIcon icon={faArrowRight} />
       </Cell>
-      <FontAwesomeIcon icon={faArrowRight} className={styles.arrowCell} />
-      <Cell flex={1} title={destNamespace}>
-        <Text size="md" className={styles.cellText}>
-          {destNamespace}
-        </Text>
-      </Cell>
-      <Cell flex={1} title={destName}>
-        <Text size="md" className={styles.cellText}>
-          {destName}
-        </Text>
+      <HeaderCell ellipsis title={destNamespace}>
+        {destNamespace}
+      </HeaderCell>
+      <HeaderCell ellipsis title={destName}>
+        {destName}
+      </HeaderCell>
+      <Cell>
+        {disabled ? (
+          <HeaderCell ellipsis title={syncSchema.destinationSyncMode}>
+            {syncSchema.destinationSyncMode}
+          </HeaderCell>
+        ) : (
+          // TODO: Replace with Dropdown/Popout
+          syncSchema.destinationSyncMode
+        )}
       </Cell>
     </Row>
   );

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

@@ -5,37 +5,16 @@ $icon-size: 15px;
 .container {
   display: flex;
   flex-direction: row;
-  padding: variables.$spacing-xl calc(#{variables.$spacing-lg} * 2) 0;
-  height: 43px;
-  align-items: center;
-  overflow: hidden;
-  scrollbar-gutter: stable;
+  justify-content: space-between;
+  padding: variables.$spacing-lg calc(variables.$spacing-lg * 2);
 }
 
 .connector {
   display: flex;
   flex-direction: row;
-  flex: none;
-  align-self: stretch;
-  align-items: center;
-  gap: variables.$spacing-sm;
-}
-
-.source {
-  flex: 7.3 0 0;
-  min-width: 0;
-}
-
-.destination {
-  flex: 2 0 0;
-  min-width: 0;
 }
 
 .icon {
-  width: $icon-size;
   height: $icon-size;
-}
-
-.arrowContainer {
-  width: 20px;
+  width: $icon-size;
 }