🪟 🎨 Streams table design pass (#18908)

* typography * wip * continued progress * merge cleanup * table item alignment * row styling * remove extra item * continued styling * alignment works with scrollbar * headings align with or without scrollbars * stream connection header alignment * cleanup * pill-select justify * cleanup * fix ternary logic for disabled streams rows * streams table design tweaks * make table rows flush with card edge * review cleanup, fix scroll overflow for firefox * use gap not padding * add scrollbar-gutter to rows too * use ellipsis for cell text, not wrap * fix alignment of syncCatalogField * fix text ellipses and syncmode cell width * use a div to make this col static 200px * remove debug border * scss variables cleanup
airbytehq · Nov 14, 2022 · a72deb1 · a72deb1
1 parent bfa3b5c
commit a72deb1
Show file tree

Hide file tree

Showing 16 changed files with 233 additions and 94 deletions.
diff --git a/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx b/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx
@@ -27,9 +27,12 @@ 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;
+  min-width: 0;
+
   word-break: break-word;
   color: ${({ theme, light, lighter }) => (light ? theme.greyColor40 : lighter ? theme.greyColor60 : "inherit")};
   font-weight: ${({ light, lighter }) => (light || lighter ? "normal" : "inherit")};

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss
@@ -1,10 +1,13 @@
+@use "scss/_variables";
+
 .searchInput {
   padding: 10px 8px 9px;
 }
 
 .searchContent {
   position: relative;
   width: 100%;
+  padding: 0 variables.$spacing-xl;
 
   &::before {
     content: attr(data-content);

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.module.scss b/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-sm;
+  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;
+}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx b/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>
   );
 };
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss
@@ -17,6 +17,15 @@
 .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;
@@ -38,11 +47,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: 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;
 }
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
@@ -7,15 +7,14 @@ 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,
@@ -35,7 +34,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   hasError,
   disabled,
 }) => {
-  const { primaryKey, syncMode, cursorField, destinationSyncMode } = stream.config ?? {};
+  const { primaryKey, cursorField, syncMode, destinationSyncMode } = stream.config ?? {};
   const isStreamEnabled = stream.config?.selected;
 
   const { defaultCursorField } = stream.stream ?? {};
@@ -63,14 +62,13 @@ 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={checkboxCellCustomStyle}>
+        <div className={styles.streamRowCheckboxCell}>
           {changedSelected && (
             <div>
               {isStreamEnabled ? (
@@ -83,24 +81,33 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           <CheckBox checked={isSelected} onChange={selectForBulkEdit} />
         </div>
       )}
-      <Cell>
+      <Cell flex={0.5} flush>
         <Switch small checked={stream.config?.selected} onChange={onSelectStream} disabled={disabled} />
       </Cell>
-      <Cell>{fieldCount}</Cell>
-      <HeaderCell ellipsis title={stream.stream?.namespace || ""}>
-        {stream.stream?.namespace || <FormattedMessage id="form.noNamespace" />}
-      </HeaderCell>
-      <Cell>{stream.stream?.name}</Cell>
-      <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}>
         {disabled ? (
-          <HeaderCell ellipsis title={syncSchema.syncMode}>
-            {syncSchema.syncMode}
-          </HeaderCell>
+          <Cell title={syncSchema.syncMode}>
+            <Text size="md" className={styles.cellText}>
+              {syncSchema.syncMode}
+            </Text>
+          </Cell>
         ) : (
+          // todo: SyncModeSelect should probably have a Tooltip, append/dedupe ends up ellipsing
           <SyncModeSelect options={availableSyncModes} onChange={onSelectSyncMode} value={syncSchema} />
         )}
-      </Cell>
-      <HeaderCell>
+      </div>
+      <Cell flex={1}>
         {cursorType && (
           <StreamPathSelect
             pathType={cursorType}
@@ -109,8 +116,8 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
             onPathChange={onCursorChange}
           />
         )}
-      </HeaderCell>
-      <HeaderCell ellipsis>
+      </Cell>
+      <Cell flex={1}>
         {pkType && (
           <StreamPathSelect
             pathType={pkType}
@@ -120,25 +127,17 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
             onPathChange={onPrimaryKeyChange}
           />
         )}
-      </HeaderCell>
-      <Cell>
-        <FontAwesomeIcon icon={faArrowRight} />
       </Cell>
-      <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
-        )}
+      <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>
       </Cell>
     </Row>
   );

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.module.scss
@@ -5,16 +5,37 @@ $icon-size: 15px;
 .container {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  padding: variables.$spacing-lg calc(variables.$spacing-lg * 2);
+  padding: variables.$spacing-xl calc(#{variables.$spacing-lg} * 2) 0;
+  height: 43px;
+  align-items: center;
+  overflow: hidden;
+  scrollbar-gutter: stable;
 }
 
 .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 {
-  height: $icon-size;
   width: $icon-size;
+  height: $icon-size;
+}
+
+.arrowContainer {
+  width: 20px;
 }