Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: path for nested fields #6130

Merged
merged 5 commits into from
Sep 16, 2021
Merged

feat: path for nested fields #6130

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1554440
feat: path for nested fields
isalikov Sep 16, 2021
56ced74
fix: rm console.log
isalikov Sep 16, 2021
34b17a6
fix: clipRule error
isalikov Sep 16, 2021
b7d5e2d
fix: remove field name
isalikov Sep 16, 2021
83ce120
fix: name in FieldRow
isalikov Sep 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions airbyte-webapp/src/core/domain/catalog/fieldUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 [];
Expand All @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion airbyte-webapp/src/core/domain/catalog/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export type SyncSchemaField = {
name: string;
cleanedName: string;
type: string;
key: string;
path: string[];

fields?: SyncSchemaField[];
};
Expand Down
33 changes: 17 additions & 16 deletions airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[][];
Expand Down Expand Up @@ -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>
Expand All @@ -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
}
Expand All @@ -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)
}
Expand Down
29 changes: 14 additions & 15 deletions airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -35,21 +36,16 @@ 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}>
<NameContainer depth={props.depth} title={props.name}>
<NameContainer depth={props.depth} title={path.join(".")}>
isalikov marked this conversation as resolved.
Show resolved Hide resolved
{props.name}
</NameContainer>
</FirstCell>
Expand All @@ -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>
)}
Expand Down
7 changes: 4 additions & 3 deletions airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { SyncSettingsCell } from "./components/SyncSettingsCell";
import {
DestinationSyncMode,
SyncMode,
SyncSchemaField,
SyncSchemaStream,
} from "core/domain/catalog";
import { Popout } from "components/base/Popout";
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions airbyte-webapp/src/views/layout/SideBar/components/ConnectionsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down