From 721fec00794eb46230c114444419b3e921b38044 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 14 Nov 2022 16:24:20 -0500 Subject: [PATCH] =?UTF-8?q?Revert=20"=F0=9F=AA=9F=20=F0=9F=8E=A8=20Streams?= =?UTF-8?q?=20table=20design=20pass=20(#18908)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit a72deb14a6abc028cf972665456f86fbf063b28c. --- .../SimpleTableComponents.tsx | 5 +- .../CatalogTree/CatalogTreeSearch.module.scss | 3 - .../next/CatalogTreeTableHeader.module.scss | 29 ------- .../next/CatalogTreeTableHeader.tsx | 65 +++++++--------- .../next/CatalogTreeTableRow.module.scss | 35 +-------- .../CatalogTree/next/CatalogTreeTableRow.tsx | 75 ++++++++++--------- .../next/StreamConnectionHeader.module.scss | 27 +------ .../next/StreamConnectionHeader.tsx | 25 +------ .../next/StreamPathSelect.module.scss | 5 -- .../CatalogTree/next/StreamPathSelect.tsx | 11 +-- .../next/SyncModeSelect.module.scss | 5 +- airbyte-webapp/src/scss/_variables.scss | 1 - .../ConnectionFormFields.module.scss | 5 -- .../ConnectionForm/ConnectionFormFields.tsx | 2 +- .../ConnectionForm/components/Section.tsx | 29 +++---- .../components/SyncCatalogField.module.scss | 5 +- 16 files changed, 94 insertions(+), 233 deletions(-) delete mode 100644 airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.module.scss delete mode 100644 airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss diff --git a/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx b/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx index 0d48be623415..041c8fa5a51f 100644 --- a/airbyte-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx +++ b/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")}; diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss index 11c394072b8d..769dd3277747 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss @@ -1,5 +1,3 @@ -@use "scss/_variables"; - .searchInput { padding: 10px 8px 9px; } @@ -7,7 +5,6 @@ .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 deleted file mode 100644 index 6becb2f758c4..000000000000 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@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 index 9d7991df24fa..2d3f11682aab 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx @@ -1,34 +1,20 @@ -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> = ({ flex, children }) => { - return ( - - - {children} - - - ); -}; - export const CatalogTreeTableHeader: React.FC = () => { const { mode } = useConnectionFormService(); const { onCheckAll, selectedBatchNodeIds, allChecked } = useBulkEditService(); return ( -
-
+
+ {mode !== "readonly" && ( { checked={allChecked} /> )} -
- + + - - {/* + + - */} - + + - - + + - - + + - - + + - - + + - -
- + + + - - + + - + + + + + + + +
); }; diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss index 0531cbaa8be5..557907278af4 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss @@ -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; } diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx index 16708cd44184..def9f02938b2 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx @@ -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 = ({ stream, destName, @@ -34,7 +35,7 @@ export const CatalogTreeTableRow: React.FC = ({ 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 = ({ [styles.disabledChange]: changedSelected && !isStreamEnabled, [styles.selected]: isSelected, [styles.error]: hasError, - [styles.disabled]: !changedSelected && !isStreamEnabled, }); + const checkboxCellCustomStyle = classnames(styles.checkboxCell, styles.streamRowCheckboxCell); + return ( {!disabled && ( -
+
{changedSelected && (
{isStreamEnabled ? ( @@ -81,33 +83,24 @@ export const CatalogTreeTableRow: React.FC = ({
)} - + - {/* {fieldCount} */} - - - {stream.stream?.namespace || } - - - - - {stream.stream?.name} - - -
+ {fieldCount} + + {stream.stream?.namespace || } + + {stream.stream?.name} + {disabled ? ( - - - {syncSchema.syncMode} - - + + {syncSchema.syncMode} + ) : ( - // todo: SyncModeSelect should probably have a Tooltip, append/dedupe ends up ellipsing )} -
- + + {cursorType && ( = ({ onPathChange={onCursorChange} /> )} - - + + {pkType && ( = ({ onPathChange={onPrimaryKeyChange} /> )} + + + - - - - {destNamespace} - - - - - {destName} - + + {destNamespace} + + + {destName} + + + {disabled ? ( + + {syncSchema.destinationSyncMode} + + ) : ( + // TODO: Replace with Dropdown/Popout + syncSchema.destinationSyncMode + )} ); diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.module.scss index abf136af16af..c2a9085a9b8e 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.module.scss @@ -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; } diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx index b19b924b7cc8..cb65e0ca8f92 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx @@ -1,9 +1,5 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classnames from "classnames"; -import { FormattedMessage } from "react-intl"; - -import { Heading } from "components/ui/Heading"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; import { useDestinationDefinition } from "services/connector/DestinationDefinitionService"; @@ -20,25 +16,12 @@ export const StreamConnectionHeader: React.FC = () => { } = useConnectionEditService(); const sourceDefinition = useSourceDefinition(source.sourceDefinitionId); const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId); - const sourceStyles = classnames(styles.connector, styles.source); - const destinationStyles = classnames(styles.connector, styles.destination); + return (
-
- {renderIcon(sourceDefinition.icon)}{" "} - - - -
-
- -
-
- {renderIcon(destinationDefinition.icon)}{" "} - - - -
+
{renderIcon(sourceDefinition.icon)} Source
+ +
{renderIcon(destinationDefinition.icon)} Destination
); }; diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss deleted file mode 100644 index 95e4d17efdee..000000000000 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx index 86c006c9e31f..1e35e3adae49 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx @@ -2,13 +2,10 @@ import React from "react"; import { FormattedMessage } from "react-intl"; import { PillSelect } from "components/ui/PillSelect"; -import { Text } from "components/ui/Text"; import { Tooltip } from "components/ui/Tooltip"; import { Path } from "core/domain/catalog"; -import styles from "./StreamPathSelect.module.scss"; - export const pathDisplayName = (path: Path): string => path.join("."); export type IndexerType = null | "required" | "sourceDefined"; @@ -39,11 +36,9 @@ export const StreamPathSelect: React.FC = (props) => { const text = props.isMulti ? props.path.map(pathDisplayName).join(", ") : pathDisplayName(props.path); return ( - - - {text} - - + + {text} + ); } diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.module.scss index cc50a51fd525..af40c11fd767 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.module.scss @@ -1,6 +1,3 @@ -@use "scss/variables"; - .pillSelect { - width: variables.$width-wide-menu; - justify-content: space-between; + width: 100%; } diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss index 13d753a91050..09703db06320 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -18,7 +18,6 @@ $spacing-page-bottom: 150px; $main-page-content-min-width: 960px; $width-size-menu: 93px; -$width-wide-menu: 200px; $width-modal-sm: 492px; $width-modal-md: 585px; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss index dfd8ac1afa22..98bdfdb34a7e 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss @@ -42,8 +42,3 @@ // used to control svg size font-size: 14px; } - -.flush { - padding: 0; - gap: 0; -} diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx index e704f24ec299..ed798f7a2fef 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx @@ -116,7 +116,7 @@ export const ConnectionFormFields: React.FC = ({ valu )} -
+
> = ({ title, children, className }) => { - return ( - -
- {title && ( - - {title} - - )} - {children} -
- - ); -}; +export const Section: React.FC> = ({ title, children }) => ( + +
+ {title && ( + + {title} + + )} + {children} +
+ +); diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.module.scss index 1f766a1cbbb0..c9d8c72bec06 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.module.scss +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.module.scss @@ -1,7 +1,5 @@ -@use "scss/_variables"; - .header { - margin: variables.$spacing-md 0 0; + margin: 10px 0 6px; display: flex; justify-content: space-between; align-items: center; @@ -9,5 +7,4 @@ font-weight: 500; font-size: 14px; line-height: 17px; - padding: variables.$spacing-md variables.$spacing-xl; }