From 7dda4f29073e19a158803c4647f651430fd86536 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 30 Nov 2022 16:56:18 -0500 Subject: [PATCH 1/2] Fix margin and padding issues with CatalogTree table Update to use padding over the margin Fix fields table offset left margin Fix fields table padding and bottom margin --- .../CatalogTree/CatalogSection.module.scss | 2 +- .../CatalogTree/CatalogTree.module.scss | 5 +++ .../connection/CatalogTree/CatalogTree.tsx | 37 ++++++++++--------- .../CatalogTree/CatalogTreeSearch.module.scss | 10 ----- .../CatalogTree/CatalogTreeSearch.tsx | 10 +---- .../CatalogTree/StreamFieldTable.module.scss | 9 ++++- .../CatalogTree/StreamFieldTable.tsx | 4 +- .../ConnectionForm/ConnectionFormFields.tsx | 4 +- 8 files changed, 38 insertions(+), 43 deletions(-) create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.module.scss diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss index 5c4731091cc5c..4ca8d2b24c29f 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss @@ -2,7 +2,7 @@ @use "scss/variables"; .streamFieldTableContainer { - margin-left: 85px; + margin-left: 83px; background: colors.$grey-50; } diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.module.scss new file mode 100644 index 0000000000000..e8eeb1d0bd4b8 --- /dev/null +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.module.scss @@ -0,0 +1,5 @@ +@use "scss/variables"; + +.catalogTreeTable { + padding: variables.$spacing-lg variables.$spacing-xl 0; +} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx index b3b3dc37f90f3..ad8340e0745a9 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx @@ -8,6 +8,7 @@ import { useConnectionFormService } from "hooks/services/ConnectionForm/Connecti 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"; @@ -65,23 +66,25 @@ const CatalogTreeComponent: React.FC> {mode !== "readonly" && } - {isNewStreamsTableEnabled ? ( - <> - - - - ) : ( - <> - - - - - )} - +
+ {isNewStreamsTableEnabled ? ( + <> + + + + ) : ( + <> + + + + + )} + +
{isNewStreamsTableEnabled && } diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss index 115404633f4a6..11c394072b8db 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss @@ -5,16 +5,6 @@ } .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; diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx index 05759fa614212..2c416ac94a9cf 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx @@ -1,4 +1,3 @@ -import classnames from "classnames"; import React from "react"; import { useIntl } from "react-intl"; @@ -11,17 +10,10 @@ interface CatalogTreeSearchProps { } export const CatalogTreeSearch: React.FC = ({ onSearch }) => { - const isNewStreamsTableEnabled = process.env.REACT_APP_NEW_STREAMS_TABLE ?? false; - const { formatMessage } = useIntl(); - const searchStyles = classnames({ - [styles.searchContentNew]: isNewStreamsTableEnabled, - [styles.searchContent]: !isNewStreamsTableEnabled, - }); - return ( -
+
= (props) => { return ( - <> +
@@ -38,6 +38,6 @@ export const StreamFieldTable: React.FC = (props) => { ))}
- +
); }; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx index 58e0b7c1aa74f..4b042987cca1d 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx @@ -46,8 +46,6 @@ export const ConnectionFormFields: React.FC = ({ valu clearFormChange(formId); }); - const isNewStreamsTableEnabled = process.env.REACT_APP_NEW_STREAMS_TABLE ?? false; - return ( <> {/* FormChangeTracker is here as it has access to everything it needs without being repeated */} @@ -118,7 +116,7 @@ export const ConnectionFormFields: React.FC = ({ valu )} -
+
Date: Thu, 1 Dec 2022 11:56:12 -0500 Subject: [PATCH 2/2] Update snapshots --- .../CreateConnectionForm.test.tsx.snap | 492 +++++++++--------- .../ConnectionReplicationTab.test.tsx.snap | 492 +++++++++--------- 2 files changed, 496 insertions(+), 488 deletions(-) diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap index b46ae78f9d69a..c2406dfd0cd75 100644 --- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap +++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap @@ -417,252 +417,217 @@ exports[`CreateConnectionForm should render 1`] = `
- -
-
-
- Sync -
-
- Source + > + + +
+
+
+ Sync +
+ Source
- - - + + + +
-
-
-
- Sync mode +
+ Sync mode
- - - + + + +
-
-
- Cursor field
+ Cursor field
- - - + + + +
-
-
- Primary key
+ Primary key
- - - + + + +
-
-
- Destination
+ Destination
- - - + + + +
- -
-
-
-
-
- Namespace -
-
- Stream name -
-
- Source | Destination -
-
-
-
- Namespace +
- Stream name +
+
+ Namespace +
+
+ Stream name +
+
+ Source | Destination +
+
+
+
+ Namespace +
+
+ Stream name +
-
-
-
- -
-
- - - -
@@ -673,54 +638,89 @@ exports[`CreateConnectionForm should render 1`] = ` class="" > -
- No namespace +
-
- pokemon -
- + > + + + +
+
+ > + No namespace + +
+
+ pokemon +
+
+ +
@@ -730,76 +730,80 @@ exports[`CreateConnectionForm should render 1`] = `
-
- Full refresh -
- | -
-
- Overwrite +
+ Full refresh +
+
+ | +
+
+ Overwrite +
+
- -
-
-
-
-
-
- '<source schema> -
-
- pokemon +
+
+
+ '<source schema> +
+
+ pokemon +
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap index e86cbec86e76c..a15c78337bce8 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap @@ -364,252 +364,217 @@ exports[`ConnectionReplicationTab should render 1`] = `
- -
-
-
- Sync -
-
- Source + > + + +
+
+
+ Sync +
+ Source
- - - + + + +
-
-
-
- Sync mode +
+ Sync mode
- - - + + + +
-
-
- Cursor field
+ Cursor field
- - - + + + +
-
-
- Primary key
+ Primary key
- - - + + + +
-
-
- Destination
+ Destination
- - - + + + +
-
-
-
-
-
-
- Namespace -
-
- Stream name -
-
- Source | Destination -
-
-
-
- Namespace +
- Stream name +
+
+ Namespace +
+
+ Stream name +
+
+ Source | Destination +
+
+
+
+ Namespace +
+
+ Stream name +
-
-
-
- -
-
- - - -
@@ -620,54 +585,89 @@ exports[`ConnectionReplicationTab should render 1`] = ` class="" > -
- No namespace +
-
- pokemon -
- + > + + + +
+
+ > + No namespace + +
+
+ pokemon +
+
+ +
@@ -677,76 +677,80 @@ exports[`ConnectionReplicationTab should render 1`] = `
-
- Full refresh -
- | -
-
- Append +
+ Full refresh +
+
+ | +
+
+ Append +
+
- -
-
-
-
-
-
- '<source schema> -
-
- pokemon +
+
+
+ '<source schema> +
+
+ pokemon +