🪟 🎨 Streams table design pass [with fix] (#19431)

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

This reverts commit ebbe5a9.

* remove min-width 0 that broke the table

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

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* fix styling for master table with (padding)

* fix alignment somewhat on master view

* fix padding differences between old/new tables

* fix icon alignment in new table rows

* update snapshots

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

Author: 2 people

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

@@ -583,6 +583,9 @@ exports[`CreateConnectionForm should render 1`] = `
                 <div
                   class="<removed-for-snapshot-test>"
                 >
+                  <div
+                    class="<removed-for-snapshot-test>"
+                  />
                   <div
                     class="<removed-for-snapshot-test>"
                   >

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

@@ -27,9 +27,11 @@ export const Cell = styled.div<{
   light?: boolean;
   lighter?: boolean;
   ellipsis?: boolean;
+  flush?: boolean;
 }>`
   flex: ${({ flex }) => flex || 1} 0 0;
-  padding-right: 10px;
+  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")};

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

@@ -31,7 +31,7 @@ export const CatalogTreeHeader: React.FC = () => {
           />
         </Cell>
       )}
-      {mode !== "readonly" && <Cell flex={0.2} />}
+      {mode !== "readonly" && <Cell flex={0.1} />}
       <Cell lighter flex={0.4}>
         <FormattedMessage id="sources.sync" />
       </Cell>

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

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

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

@@ -1,3 +1,4 @@
+import classnames from "classnames";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -10,10 +11,17 @@ interface CatalogTreeSearchProps {
 }
 
 export const CatalogTreeSearch: React.FC<CatalogTreeSearchProps> = ({ onSearch }) => {
+  const isNewStreamsTableEnabled = process.env.REACT_APP_NEW_STREAMS_TABLE ?? false;
+
   const { formatMessage } = useIntl();
 
+  const searchStyles = classnames({
+    [styles.searchContentNew]: isNewStreamsTableEnabled,
+    [styles.searchContent]: !isNewStreamsTableEnabled,
+  });
+
   return (
-    <div className={styles.searchContent}>
+    <div className={searchStyles}>
       <Input
         className={styles.searchInput}
         placeholder={formatMessage({

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

@@ -8,7 +8,6 @@
   @extend %catalogHeader;
 
   padding-top: 10px;
-  margin-left: 155px;
 }
 
 .readonlyCatalogSubheader {

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

@@ -30,6 +30,7 @@ export const CatalogTreeSubheader: React.FC = () => {
 
   return (
     <Header className={catalogSubheaderStyle}>
+      <Cell flex={0.8} />
       <SubtitleCell>
         <FormattedMessage id="form.namespace" />
       </SubtitleCell>

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

@@ -0,0 +1,29 @@
+@use "scss/_colors";
+@use "scss/_variables";
+
+.cellText {
+  color: colors.$grey;
+}
+
+.headerContainer {
+  margin: variables.$spacing-md variables.$spacing-md variables.$spacing-sm variables.$spacing-md;
+  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});
+}
+
+.arrowPlaceholder {
+  width: 20px;
+}

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

@@ -1,70 +1,77 @@
+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>
-      <Cell>
+    <Header className={styles.headerContainer}>
+      <div className={styles.checkboxCell}>
         {mode !== "readonly" && (
           <CheckBox
             onChange={onCheckAll}
             indeterminate={selectedBatchNodeIds.length > 0 && !allChecked}
             checked={allChecked}
           />
         )}
-      </Cell>
-      <Cell>
+      </div>
+      <TextCell flex={0.5}>
         <FormattedMessage id="sources.sync" />
-      </Cell>
-      <Cell>
+      </TextCell>
+      {/* <TextCell>
         <FormattedMessage id="form.fields" />
-      </Cell>
-      <Cell>
+      </TextCell> */}
+      <TextCell flex={1}>
         <FormattedMessage id="form.namespace" />
-      </Cell>
-      <Cell>
+      </TextCell>
+      <TextCell flex={1}>
         <FormattedMessage id="form.streamName" />
-      </Cell>
-      <Cell>
+      </TextCell>
+      <TextCell flex={2}>
         <FormattedMessage id="form.syncMode" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.syncType.info" />
           <TooltipLearnMoreLink url={links.syncModeLink} />
         </InfoTooltip>
-      </Cell>
-      <Cell>
+      </TextCell>
+      <TextCell flex={1}>
         <FormattedMessage id="form.cursorField" />
         <InfoTooltip>
           <FormattedMessage id="connectionForm.cursor.info" />
         </InfoTooltip>
-      </Cell>
-      <Cell>
+      </TextCell>
+      <TextCell flex={1}>
         <FormattedMessage id="form.primaryKey" />
-      </Cell>
-      <Cell />
-      <Cell>
+      </TextCell>
+      <div className={styles.arrowPlaceholder} />
+      <TextCell flex={1}>
         <FormattedMessage id="form.namespace" />
-      </Cell>
-      <Cell>
+      </TextCell>
+      <TextCell flex={1}>
         <FormattedMessage id="form.streamName" />
-      </Cell>
-      <Cell>
-        <FormattedMessage id="form.syncMode" />
-        <InfoTooltip>
-          <FormattedMessage id="connectionForm.syncType.info" />
-          <TooltipLearnMoreLink url={links.syncModeLink} />
-        </InfoTooltip>
-      </Cell>
+      </TextCell>
     </Header>
   );
 };

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

@@ -17,6 +17,14 @@
 .streamHeaderContent {
   background: colors.$white;
   border-bottom: 1px solid colors.$grey-50;
+  padding: 0 variables.$spacing-md;
+  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;
@@ -38,11 +46,35 @@
   &.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: 27px;
+  padding-left: 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;
 }