🪟 🧹 Cleanup CatalogTree components (#18089)

* Update ConnectionForm Headings to be consistent Move styles in SyncCatalogField from styled-components to SCSS * Move CatalogTree related components from ConnectionForm to CatalogTree * Extract header and subheader from CatalogTree component, fix minor styling issues * Disable Refresh schema button on submit * Update test snapshots * CatalogTreeRows -> CatalogTreeBody * Cleanup StreamHeader implementation in CatalogSection * Fix provider and hook names in BulkEdit service
airbytehq · Oct 19, 2022 · 141e085 · 141e085
1 parent 444f060
commit 141e085
Show file tree

Hide file tree

Showing 23 changed files with 439 additions and 408 deletions.
diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -71,11 +71,11 @@ exports[`CreateConnectionForm should render 1`] = `
             <div
               class="<removed-for-snapshot-test>"
             >
-              <h5
+              <h2
                 class="<removed-for-snapshot-test>"
               >
                 Transfer
-              </h5>
+              </h2>
               <div
                 class="<removed-for-snapshot-test>"
               >
@@ -192,11 +192,11 @@ exports[`CreateConnectionForm should render 1`] = `
             <div
               class="<removed-for-snapshot-test>"
             >
-              <h5
+              <h2
                 class="<removed-for-snapshot-test>"
               >
                 Streams
-              </h5>
+              </h2>
               <span
                 class=""
               >
@@ -362,40 +362,40 @@ exports[`CreateConnectionForm should render 1`] = `
               <div
                 class="<removed-for-snapshot-test>"
               >
-                <div
+                <h2
                   class="<removed-for-snapshot-test>"
                 >
-                  <h5
-                    class="<removed-for-snapshot-test>"
-                  >
-                    Activate the streams you want to sync
-                  </h5>
-                  <button
+                  Activate the streams you want to sync
+                </h2>
+                <button
+                  class="<removed-for-snapshot-test>"
+                  type="button"
+                >
+                  <div
                     class="<removed-for-snapshot-test>"
-                    type="button"
                   >
-                    <div
+                    <svg
+                      aria-hidden="true"
                       class="<removed-for-snapshot-test>"
+                      data-icon="rotate"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="<removed-for-snapshot-test>"
-                        data-icon="rotate"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 512 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M449.9 39.96l-48.5 48.53C362.5 53.19 311.4 32 256 32C161.5 32 78.59 92.34 49.58 182.2c-5.438 16.81 3.797 34.88 20.61 40.28c16.97 5.5 34.86-3.812 40.3-20.59C130.9 138.5 189.4 96 256 96c37.96 0 73 14.18 100.2 37.8L311.1 178C295.1 194.8 306.8 223.4 330.4 224h146.9C487.7 223.7 496 215.3 496 204.9V59.04C496 34.99 466.9 22.95 449.9 39.96zM441.8 289.6c-16.94-5.438-34.88 3.812-40.3 20.59C381.1 373.5 322.6 416 256 416c-37.96 0-73-14.18-100.2-37.8L200 334C216.9 317.2 205.2 288.6 181.6 288H34.66C24.32 288.3 16 296.7 16 307.1v145.9c0 24.04 29.07 36.08 46.07 19.07l48.5-48.53C149.5 458.8 200.6 480 255.1 480c94.45 0 177.4-60.34 206.4-150.2C467.9 313 458.6 294.1 441.8 289.6z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      Refresh source schema
-                    </div>
-                  </button>
-                </div>
+                      <path
+                        d="M449.9 39.96l-48.5 48.53C362.5 53.19 311.4 32 256 32C161.5 32 78.59 92.34 49.58 182.2c-5.438 16.81 3.797 34.88 20.61 40.28c16.97 5.5 34.86-3.812 40.3-20.59C130.9 138.5 189.4 96 256 96c37.96 0 73 14.18 100.2 37.8L311.1 178C295.1 194.8 306.8 223.4 330.4 224h146.9C487.7 223.7 496 215.3 496 204.9V59.04C496 34.99 466.9 22.95 449.9 39.96zM441.8 289.6c-16.94-5.438-34.88 3.812-40.3 20.59C381.1 373.5 322.6 416 256 416c-37.96 0-73-14.18-100.2-37.8L200 334C216.9 317.2 205.2 288.6 181.6 288H34.66C24.32 288.3 16 296.7 16 307.1v145.9c0 24.04 29.07 36.08 46.07 19.07l48.5-48.53C149.5 458.8 200.6 480 255.1 480c94.45 0 177.4-60.34 206.4-150.2C467.9 313 458.6 294.1 441.8 289.6z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    Refresh source schema
+                  </div>
+                </button>
+              </div>
+              <div
+                class="<removed-for-snapshot-test>"
+              >
                 <div
                   class="<removed-for-snapshot-test>"
                 >

diff --git a/airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx b/airbyte-webapp/src/hooks/services/BulkEdit/BulkEditService.tsx
@@ -5,9 +5,9 @@ import { useSet } from "react-use";
 import { SyncSchemaStream } from "core/domain/catalog";
 import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 
-const Context = React.createContext<BatchContext | null>(null);
+const Context = React.createContext<BulkEditServiceContext | null>(null);
 
-interface BatchContext {
+export interface BulkEditServiceContext {
   isActive: boolean;
   toggleNode: (id: string | undefined) => void;
   onCheckAll: () => void;
@@ -28,7 +28,7 @@ const defaultOptions: Partial<AirbyteStreamConfiguration> = {
   selected: false,
 };
 
-const BatchEditProvider: React.FC<
+export const BulkEditServiceProvider: React.FC<
   React.PropsWithChildren<{
     nodes: SyncSchemaStream[];
     update: (streams: SyncSchemaStream[]) => void;
@@ -59,7 +59,7 @@ const BatchEditProvider: React.FC<
   const isActive = selectedBatchNodes.size > 0;
   const allChecked = selectedBatchNodes.size === nodes.length;
 
-  const ctx: BatchContext = {
+  const ctx: BulkEditServiceContext = {
     isActive,
     toggleNode: toggle,
     onCheckAll: () => (allChecked ? reset() : nodes.forEach((n) => add(n.id))),
@@ -75,7 +75,7 @@ const BatchEditProvider: React.FC<
   return <Context.Provider value={ctx}>{children}</Context.Provider>;
 };
 
-const useBulkEdit = (): BatchContext => {
+export const useBulkEditService = (): BulkEditServiceContext => {
   const ctx = useContext(Context);
 
   if (!ctx) {
@@ -85,12 +85,9 @@ const useBulkEdit = (): BatchContext => {
   return ctx;
 };
 
-const useBulkEditSelect = (id: string | undefined): [boolean, () => void] => {
-  const { selectedBatchNodeIds, toggleNode } = useBulkEdit();
+export const useBulkEditSelect = (id: string | undefined): [boolean, () => void] => {
+  const { selectedBatchNodeIds, toggleNode } = useBulkEditService();
   const isIncluded = id !== undefined && selectedBatchNodeIds.includes(id);
 
   return useMemo(() => [isIncluded, () => toggleNode(id)], [isIncluded, toggleNode, id]);
 };
-
-export type { BatchContext };
-export { useBulkEditSelect, useBulkEdit, BatchEditProvider };
diff --git a/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
@@ -18,11 +18,11 @@ exports[`ConnectionReplicationTab should render 1`] = `
             <div
               class="<removed-for-snapshot-test>"
             >
-              <h5
+              <h2
                 class="<removed-for-snapshot-test>"
               >
                 Transfer
-              </h5>
+              </h2>
               <div
                 class="<removed-for-snapshot-test>"
               >
@@ -139,11 +139,11 @@ exports[`ConnectionReplicationTab should render 1`] = `
             <div
               class="<removed-for-snapshot-test>"
             >
-              <h5
+              <h2
                 class="<removed-for-snapshot-test>"
               >
                 Streams
-              </h5>
+              </h2>
               <span
                 class=""
               >
@@ -309,40 +309,40 @@ exports[`ConnectionReplicationTab should render 1`] = `
               <div
                 class="<removed-for-snapshot-test>"
               >
-                <div
+                <h2
                   class="<removed-for-snapshot-test>"
                 >
-                  <h5
-                    class="<removed-for-snapshot-test>"
-                  >
-                    Activate the streams you want to sync
-                  </h5>
-                  <button
+                  Activate the streams you want to sync
+                </h2>
+                <button
+                  class="<removed-for-snapshot-test>"
+                  type="button"
+                >
+                  <div
                     class="<removed-for-snapshot-test>"
-                    type="button"
                   >
-                    <div
+                    <svg
+                      aria-hidden="true"
                       class="<removed-for-snapshot-test>"
+                      data-icon="rotate"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="<removed-for-snapshot-test>"
-                        data-icon="rotate"
-                        data-prefix="fas"
-                        focusable="false"
-                        role="img"
-                        viewBox="0 0 512 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M449.9 39.96l-48.5 48.53C362.5 53.19 311.4 32 256 32C161.5 32 78.59 92.34 49.58 182.2c-5.438 16.81 3.797 34.88 20.61 40.28c16.97 5.5 34.86-3.812 40.3-20.59C130.9 138.5 189.4 96 256 96c37.96 0 73 14.18 100.2 37.8L311.1 178C295.1 194.8 306.8 223.4 330.4 224h146.9C487.7 223.7 496 215.3 496 204.9V59.04C496 34.99 466.9 22.95 449.9 39.96zM441.8 289.6c-16.94-5.438-34.88 3.812-40.3 20.59C381.1 373.5 322.6 416 256 416c-37.96 0-73-14.18-100.2-37.8L200 334C216.9 317.2 205.2 288.6 181.6 288H34.66C24.32 288.3 16 296.7 16 307.1v145.9c0 24.04 29.07 36.08 46.07 19.07l48.5-48.53C149.5 458.8 200.6 480 255.1 480c94.45 0 177.4-60.34 206.4-150.2C467.9 313 458.6 294.1 441.8 289.6z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      Refresh source schema
-                    </div>
-                  </button>
-                </div>
+                      <path
+                        d="M449.9 39.96l-48.5 48.53C362.5 53.19 311.4 32 256 32C161.5 32 78.59 92.34 49.58 182.2c-5.438 16.81 3.797 34.88 20.61 40.28c16.97 5.5 34.86-3.812 40.3-20.59C130.9 138.5 189.4 96 256 96c37.96 0 73 14.18 100.2 37.8L311.1 178C295.1 194.8 306.8 223.4 330.4 224h146.9C487.7 223.7 496 215.3 496 204.9V59.04C496 34.99 466.9 22.95 449.9 39.96zM441.8 289.6c-16.94-5.438-34.88 3.812-40.3 20.59C381.1 373.5 322.6 416 256 416c-37.96 0-73-14.18-100.2-37.8L200 334C216.9 317.2 205.2 288.6 181.6 288H34.66C24.32 288.3 16 296.7 16 307.1v145.9c0 24.04 29.07 36.08 46.07 19.07l48.5-48.53C149.5 458.8 200.6 480 255.1 480c94.45 0 177.4-60.34 206.4-150.2C467.9 313 458.6 294.1 441.8 289.6z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                    Refresh source schema
+                  </div>
+                </button>
+              </div>
+              <div
+                class="<removed-for-snapshot-test>"
+              >
                 <div
                   class="<removed-for-snapshot-test>"
                 >

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.module.scss
@@ -1,7 +1,7 @@
 @use "../../../scss/colors";
 
 .streamFieldTableContainer {
-  margin-left: 83px;
+  margin-left: 85px;
   background: colors.$grey-50;
 }
 

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx
@@ -44,6 +44,7 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
   const {
     destDefinition: { supportedDestinationSyncModes },
   } = useConnectionFormService();
+  const { mode } = useConnectionFormService();
 
   const [isRowExpanded, onExpand] = useToggle(false);
   const { stream, config } = streamNode;
@@ -107,10 +108,11 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
     [stream?.supportedSyncModes, supportedDestinationSyncModes]
   );
 
-  const destNamespace = useDestinationNamespace({
-    namespaceDefinition,
-    namespaceFormat,
-  });
+  const destNamespace =
+    useDestinationNamespace({
+      namespaceDefinition,
+      namespaceFormat,
+    }) ?? "";
 
   const fields = useMemo(() => {
     const traversedFields = traverseSchemaToField(stream?.jsonSchema, stream?.name);
@@ -125,31 +127,36 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
     [flattenedFields]
   );
 
+  const destName = prefix + (streamNode.stream?.name ?? "");
   const configErrors = getIn(errors, `schema.streams[${streamNode.id}].config`);
   const hasError = configErrors && Object.keys(configErrors).length > 0;
-  const hasChildren = fields && fields.length > 0;
+  const pkType = getPathType(pkRequired, shouldDefinePk);
+  const cursorType = getPathType(cursorRequired, shouldDefineCursor);
+  const hasFields = fields?.length > 0;
+  const disabled = mode === "readonly";
 
   return (
     <div className={styles.catalogSection}>
       <StreamHeader
         stream={streamNode}
-        destNamespace={destNamespace ?? ""}
-        destName={prefix + (streamNode.stream?.name ?? "")}
+        destNamespace={destNamespace}
+        destName={destName}
         availableSyncModes={availableSyncModes}
         onSelectStream={onSelectStream}
         onSelectSyncMode={onSelectSyncMode}
         isRowExpanded={isRowExpanded}
         primitiveFields={primitiveFields}
-        pkType={getPathType(pkRequired, shouldDefinePk)}
+        pkType={pkType}
         onPrimaryKeyChange={onPkUpdate}
-        cursorType={getPathType(cursorRequired, shouldDefineCursor)}
+        cursorType={cursorType}
         onCursorChange={onCursorSelect}
-        hasFields={hasChildren}
+        fields={fields}
         onExpand={onExpand}
         changedSelected={changedSelected}
         hasError={hasError}
+        disabled={disabled}
       />
-      {isRowExpanded && hasChildren && (
+      {isRowExpanded && hasFields && (
         <div className={styles.streamFieldTableContainer}>
           <StreamFieldTable
             config={config}

diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.module.scss b/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.module.scss