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 b46ae78f9d69af..c2406dfd0cd756 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/components/connection/CatalogTree/CatalogSection.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss index 5c4731091cc5cb..4ca8d2b24c29fb 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 00000000000000..e8eeb1d0bd4b88 --- /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 b3b3dc37f90f3a..ad8340e0745a9e 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 115404633f4a6d..11c394072b8db9 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 05759fa6142123..2c416ac94a9cf5 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/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap index e86cbec86e76c0..a15c78337bce87 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 +
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx index 58e0b7c1aa74f5..4b042987cca1d4 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 )} -
+