feat: path for nested fields (#6130)

* feat: path for nested fields

* fix: clipRule error

* fix: remove field name

Author: isalikov

airbyte-webapp/src/core/domain/catalog/fieldUtil.ts

@@ -34,8 +34,7 @@ const traverseSchemaToField = (
 const traverseJsonSchemaProperties = (
   jsonSchema: JSONSchema7Definition,
   key: string,
-  path: string = key,
-  depth = 0
+  path: string[] = []
 ): SyncSchemaField[] => {
   if (typeof jsonSchema === "boolean") {
     return [];
@@ -45,20 +44,15 @@ const traverseJsonSchemaProperties = (
   if (jsonSchema.properties) {
     fields = Object.entries(jsonSchema.properties)
       .flatMap(([k, schema]) =>
-        traverseJsonSchemaProperties(
-          schema,
-          k,
-          depth === 0 ? k : `${path}.${k}`,
-          depth + 1
-        )
+        traverseJsonSchemaProperties(schema, k, [...path, k])
       )
       .flat(2);
   }
 
   return [
     {
       cleanedName: key,
-      name: path,
+      path,
       key,
       fields,
       type:

airbyte-webapp/src/core/domain/catalog/models.ts

@@ -1,8 +1,8 @@
 export type SyncSchemaField = {
-  name: string;
   cleanedName: string;
   type: string;
   key: string;
+  path: string[];
 
   fields?: SyncSchemaField[];
 };

airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx

@@ -97,11 +97,6 @@ const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
     [config, updateStreamWithConfig]
   );
 
-  const pkPaths = useMemo(
-    () => new Set(config.primaryKey.map((pkPath) => pkPath.join("."))),
-    [config.primaryKey]
-  );
-
   const onPkSelect = useCallback(
     (pkPath: string[]) => {
       let newPrimaryKey: string[][];
@@ -163,19 +158,24 @@ const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
 
   const flattenedFields = useMemo(() => flatten(fields), [fields]);
 
-  const primitiveFieldNames = useMemo(
-    () =>
-      flattenedFields
-        .filter(SyncSchemaFieldObject.isPrimitive)
-        .map((field) => field.name),
+  const primitiveFields = useMemo<SyncSchemaField[]>(
+    () => flattenedFields.filter(SyncSchemaFieldObject.isPrimitive),
     [flattenedFields]
   );
 
-  const selectedCursorPath = config.cursorField.join(".");
   const configErrors = getIn(errors, `schema.streams[${streamNode.id}].config`);
   const hasError = configErrors && Object.keys(configErrors).length > 0;
   const hasChildren = fields && fields.length > 0;
 
+  const isCursor = (field: SyncSchemaField): boolean =>
+    equal(config.cursorField, field.path);
+
+  const isPrimaryKey = (field: SyncSchemaField): boolean => {
+    const existIndex = config.primaryKey.findIndex((p) => equal(p, field.path));
+
+    return existIndex !== -1;
+  };
+
   return (
     <Section error={hasError}>
       <TreeRowWrapper>
@@ -187,7 +187,7 @@ const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
           onSelectStream={onSelectStream}
           onSelectSyncMode={onSelectSyncMode}
           isRowExpanded={isRowExpanded}
-          primitiveFields={primitiveFieldNames}
+          primitiveFields={primitiveFields}
           pkType={
             pkRequired ? (shouldDefinePk ? "required" : "sourceDefined") : null
           }
@@ -211,14 +211,15 @@ const CatalogSectionInner: React.FC<TreeViewRowProps> = ({
           </TreeRowWrapper>
           <RowsContainer depth={1}>
             {flattenedFields.map((field) => (
-              <TreeRowWrapper depth={1} key={field.name}>
+              <TreeRowWrapper depth={1} key={field.key}>
                 <FieldRow
                   depth={1}
-                  name={field.name}
+                  path={field.path}
+                  name={field.path.join(".")}
                   type={field.type}
                   destinationName={field.cleanedName}
-                  isCursor={field.name === selectedCursorPath}
-                  isPrimaryKey={pkPaths.has(field.name)}
+                  isCursor={isCursor(field)}
+                  isPrimaryKey={isPrimaryKey(field)}
                   isPrimaryKeyEnabled={
                     shouldDefinePk && SyncSchemaFieldObject.isPrimitive(field)
                   }

airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx

@@ -1,11 +1,12 @@
-import React, { memo, useCallback } from "react";
+import React, { memo } from "react";
 import styled from "styled-components";
 import { Cell } from "components/SimpleTableComponents";
 import { CheckBox, RadioButton } from "components";
 import DataTypeCell from "./components/DataTypeCell";
 
 interface FieldRowProps {
   name: string;
+  path: string[];
   type: string;
   nullable?: boolean;
   destinationName: string;
@@ -35,17 +36,12 @@ const RadiobuttonContainer = styled.div<{ depth?: number }>`
   padding-right: ${({ depth }) => (depth ? depth * 38 : 0)}px;
 `;
 
-const FieldRowInner: React.FC<FieldRowProps> = (props) => {
-  const { name: fieldName, onPrimaryKeyChange, onCursorChange } = props;
-  const handlePkChange = useCallback(
-    () => onPrimaryKeyChange(fieldName.split(".")),
-    [fieldName, onPrimaryKeyChange]
-  );
-
-  const handleCursorChange = useCallback(
-    () => onCursorChange(fieldName.split(".")),
-    [fieldName, onCursorChange]
-  );
+const FieldRowInner: React.FC<FieldRowProps> = ({
+  onPrimaryKeyChange,
+  onCursorChange,
+  path,
+  ...props
+}) => {
   return (
     <>
       <FirstCell ellipsis depth={props.depth} flex={1.5}>
@@ -61,15 +57,18 @@ const FieldRowInner: React.FC<FieldRowProps> = (props) => {
       <Cell flex={1.5} />
       <Cell>
         {props.isPrimaryKeyEnabled && (
-          <CheckBox checked={props.isPrimaryKey} onChange={handlePkChange} />
+          <CheckBox
+            checked={props.isPrimaryKey}
+            onChange={() => onPrimaryKeyChange(path)}
+          />
         )}
       </Cell>
       <LastCell depth={props.depth}>
         {props.isCursorEnabled && (
           <RadiobuttonContainer depth={props.depth}>
             <RadioButton
               checked={props.isCursor}
-              onChange={handleCursorChange}
+              onChange={() => onCursorChange(path)}
             />
           </RadiobuttonContainer>
         )}

airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx

@@ -10,6 +10,7 @@ import { SyncSettingsCell } from "./components/SyncSettingsCell";
 import {
   DestinationSyncMode,
   SyncMode,
+  SyncSchemaField,
   SyncSchemaStream,
 } from "core/domain/catalog";
 import { Popout } from "components/base/Popout";
@@ -44,7 +45,7 @@ interface StreamHeaderProps {
   onSelectSyncMode: (selectedMode: DropDownRow.IDataItem) => void;
   onSelectStream: () => void;
 
-  primitiveFields: string[];
+  primitiveFields: SyncSchemaField[];
 
   pkType: null | "required" | "sourceDefined";
   onPrimaryKeyChange: (pkPath: string[][]) => void;
@@ -89,8 +90,8 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
   );
 
   const dropdownFields = primitiveFields.map((field) => ({
-    value: field.split("."),
-    label: field,
+    value: field.path,
+    label: field.path.join("."),
   }));
 
   return (

airbyte-webapp/src/views/layout/SideBar/components/ConnectionsIcon.tsx

@@ -5,8 +5,8 @@ const ConnectionsIcon = ({
 }): JSX.Element => (
   <svg width="30" height="18" viewBox="0 0 30 18" fill="none">
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M10.6161 12.8183C11.0154 13.3414 11.5756 13.7187 12.2105 13.8922C12.4696 13.2386 12.95 12.6966 13.5679 12.361C14.0212 12.1148 14.5275 11.9911 15.0373 11.9973C15.5222 12.0032 16.0018 12.1266 16.4334 12.361C17.0513 12.6967 17.5317 13.2386 17.7908 13.8922C18.4256 13.7188 18.9859 13.3414 19.3852 12.8183C19.7845 12.2952 20.0008 11.6553 20.0008 10.9972V6.99722C20.0009 5.81919 20.4168 4.67901 21.1753 3.77765C21.9338 2.87629 22.9861 2.27162 24.1468 2.07022C24.3682 1.39152 24.8244 0.813981 25.4333 0.441321C26.0422 0.0686605 26.7641 -0.0747113 27.4692 0.0369475C28.1743 0.148606 28.8165 0.507982 29.2805 1.05054C29.7445 1.5931 29.9999 2.28331 30.0008 2.99722C30.0013 3.69569 29.7582 4.37246 29.3132 4.91082C28.8682 5.44919 28.2493 5.81542 27.5632 5.94636C26.8771 6.0773 26.1668 5.96473 25.5549 5.62808C24.9429 5.29143 24.4675 4.7518 24.2108 4.10222C23.576 4.27568 23.0158 4.65302 22.6164 5.17613C22.2171 5.69924 22.0008 6.33911 22.0008 6.99722V10.9972C22.0024 12.0793 21.6513 13.1325 21.0008 13.9972H24.1708C24.4067 13.3297 24.871 12.7671 25.4816 12.4089C26.0922 12.0506 26.8098 11.9197 27.5076 12.0394C28.2054 12.1591 28.8383 12.5216 29.2947 13.0628C29.751 13.6041 30.0013 14.2893 30.0013 14.9972C30.0013 15.7052 29.751 16.3903 29.2947 16.9316C28.8383 17.4729 28.2054 17.8354 27.5076 17.955C26.8098 18.0747 26.0922 17.9438 25.4816 17.5856C24.871 17.2273 24.4067 16.6647 24.1708 15.9972H17.8308C17.5967 16.6602 17.1372 17.22 16.5326 17.5789C16.057 17.8611 15.5154 18.0049 14.968 17.9989C14.443 17.9933 13.9254 17.8499 13.4687 17.5789C12.864 17.22 12.4046 16.6602 12.1705 15.9972H5.83049C5.59458 16.6647 5.13029 17.2273 4.51968 17.5856C3.90907 17.9438 3.19146 18.0747 2.4937 17.955C1.79593 17.8353 1.16295 17.4728 0.706615 16.9316C0.250286 16.3903 0 15.7052 0 14.9972C0 14.2893 0.250286 13.6041 0.706615 13.0628C1.16295 12.5216 1.79593 12.1591 2.4937 12.0394C3.19146 11.9197 3.90907 12.0506 4.51968 12.4089C5.13029 12.7671 5.59458 13.3297 5.83049 13.9972H9.00049C8.34995 13.1325 7.99889 12.0793 8.00049 10.9972V6.99721C8.00051 6.3391 7.78421 5.69923 7.38487 5.17612C6.98554 4.65301 6.42533 4.27568 5.79049 4.10221C5.53376 4.75179 5.05842 5.29143 4.44644 5.62808C3.83445 5.96473 3.12418 6.07729 2.4381 5.94635C1.75201 5.81541 1.13312 5.44919 0.688127 4.91082C0.243138 4.37245 -5.29041e-05 3.69568 0.000488102 2.99721C0.00139076 2.2833 0.25677 1.5931 0.72077 1.05054C1.18477 0.507974 1.82699 0.148599 2.53211 0.0369399C3.23724 -0.0747189 3.95907 0.0686529 4.568 0.441313C5.17693 0.813973 5.63306 1.39151 5.85449 2.07021C7.01517 2.27161 8.0675 2.87629 8.82598 3.77765C9.58446 4.67901 10.0004 5.81919 10.0005 6.99721V10.9972C10.0005 11.6553 10.2168 12.2952 10.6161 12.8183ZM15.0224 13.9975C15.2797 14.0031 15.5252 14.1077 15.7076 14.2901C15.8951 14.4776 16.0005 14.732 16.0005 14.9972C16.0005 15.2624 15.8951 15.5168 15.7076 15.7043C15.5201 15.8919 15.2657 15.9972 15.0005 15.9972C14.9933 15.9972 14.9861 15.9971 14.9789 15.997C14.7216 15.9914 14.4761 15.8867 14.2937 15.7043C14.1062 15.5168 14.0008 15.2624 14.0008 14.9972C14.0008 14.732 14.1062 14.4776 14.2937 14.2901C14.4812 14.1026 14.7356 13.9972 15.0008 13.9972C15.008 13.9972 15.0152 13.9973 15.0224 13.9975ZM2.29338 14.2901C2.10584 14.4776 2.00049 14.732 2.00049 14.9972C2.00049 15.2624 2.10584 15.5168 2.29338 15.7043C2.48092 15.8919 2.73527 15.9972 3.00049 15.9972C3.2657 15.9972 3.52006 15.8919 3.70759 15.7043C3.89513 15.5168 4.00049 15.2624 4.00049 14.9972C4.00049 14.732 3.89513 14.4776 3.70759 14.2901C3.52006 14.1026 3.2657 13.9972 3.00049 13.9972C2.73527 13.9972 2.48092 14.1026 2.29338 14.2901ZM2.29338 2.29011C2.10584 2.47764 2.00049 2.732 2.00049 2.99721C2.00049 3.26243 2.10584 3.51678 2.29338 3.70432C2.48092 3.89186 2.73527 3.99721 3.00049 3.99721C3.2657 3.99721 3.52006 3.89186 3.70759 3.70432C3.89513 3.51678 4.00049 3.26243 4.00049 2.99721C4.00049 2.732 3.89513 2.47764 3.70759 2.29011C3.52006 2.10257 3.2657 1.99721 3.00049 1.99721C2.73527 1.99721 2.48092 2.10257 2.29338 2.29011ZM27.7079 14.2901C27.8954 14.4776 28.0008 14.732 28.0008 14.9972C28.0008 15.2624 27.8954 15.5168 27.7079 15.7043C27.5204 15.8919 27.266 15.9972 27.0008 15.9972C26.7356 15.9972 26.4812 15.8919 26.2937 15.7043C26.1062 15.5168 26.0008 15.2624 26.0008 14.9972C26.0008 14.732 26.1062 14.4776 26.2937 14.2901C26.4812 14.1026 26.7356 13.9972 27.0008 13.9972C27.266 13.9972 27.5204 14.1026 27.7079 14.2901ZM27.7079 2.29011C27.8954 2.47765 28.0008 2.732 28.0008 2.99722C28.0008 3.26244 27.8954 3.51679 27.7079 3.70433C27.5204 3.89186 27.266 3.99722 27.0008 3.99722C26.7356 3.99722 26.4812 3.89186 26.2937 3.70433C26.1062 3.51679 26.0008 3.26244 26.0008 2.99722C26.0008 2.732 26.1062 2.47765 26.2937 2.29011C26.4812 2.10258 26.7356 1.99722 27.0008 1.99722C27.266 1.99722 27.5204 2.10258 27.7079 2.29011Z"
       fill={color}
     />