Fix margin and padding issues with CatalogTree table

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;
 }
 

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;
+}

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<React.PropsWithChildren<CatalogTreeProps>>
     <BulkEditServiceProvider nodes={streams} update={onStreamsChanged}>
       <LoadingBackdrop loading={isLoading}>
         {mode !== "readonly" && <CatalogTreeSearch onSearch={setSearchString} />}
-        {isNewStreamsTableEnabled ? (
-          <>
-            <StreamConnectionHeader />
-            <CatalogTreeTableHeader />
-          </>
-        ) : (
-          <>
-            <CatalogTreeHeader />
-            <CatalogTreeSubheader />
-            <BulkHeader />
-          </>
-        )}
-        <CatalogTreeBody
-          streams={filteredStreams}
-          changedStreams={changedStreams}
-          onStreamChanged={onSingleStreamChanged}
-        />
+        <div className={isNewStreamsTableEnabled ? undefined : styles.catalogTreeTable}>
+          {isNewStreamsTableEnabled ? (
+            <>
+              <StreamConnectionHeader />
+              <CatalogTreeTableHeader />
+            </>
+          ) : (
+            <>
+              <CatalogTreeHeader />
+              <CatalogTreeSubheader />
+              <BulkHeader />
+            </>
+          )}
+          <CatalogTreeBody
+            streams={filteredStreams}
+            changedStreams={changedStreams}
+            onStreamChanged={onSingleStreamChanged}
+          />
+        </div>
       </LoadingBackdrop>
       {isNewStreamsTableEnabled && <BulkEditPanel />}
     </BulkEditServiceProvider>

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;

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<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={searchStyles}>
+    <div className={styles.searchContent}>
       <Input
         className={styles.searchInput}
         placeholder={formatMessage({

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

@@ -1,8 +1,15 @@
 @use "scss/colors";
 @use "scss/variables";
 
+.container {
+  padding-bottom: variables.$spacing-md;
+
+  // HACK: Hot-fixes an issue in StreamHeader SCSS where the .catalogSectionRow margin-top is creating a spacing between rows
+  margin-bottom: -9px;
+}
+
 .rowsContainer {
   background: colors.$white;
   border-radius: variables.$border-radius-md;
-  margin: 0 10px 5px;
+  margin: 0 variables.$spacing-md;
 }

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

@@ -20,7 +20,7 @@ interface StreamFieldTableProps {
 
 export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
   return (
-    <>
+    <div className={styles.container}>
       <TreeRowWrapper noBorder>
         <FieldHeader />
       </TreeRowWrapper>
@@ -38,6 +38,6 @@ export const StreamFieldTable: React.FC<StreamFieldTableProps> = (props) => {
           </TreeRowWrapper>
         ))}
       </div>
-    </>
+    </div>
   );
 };

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx

@@ -46,8 +46,6 @@ export const ConnectionFormFields: React.FC<ConnectionFormFieldsProps> = ({ 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<ConnectionFormFieldsProps> = ({ valu
             )}
           </Field>
         </Section>
-        <Section className={isNewStreamsTableEnabled ? styles.flush : undefined}>
+        <Section className={styles.flush}>
           <Field
             name="syncCatalog.streams"
             component={SyncCatalogField}