From c6fd5015da263170ad6a59ad2e7fc5d6e3367e64 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 21 Jun 2022 17:20:55 -0400 Subject: [PATCH 01/48] WIP - types, props, components --- .../CatalogDiffModal/CatalogDiffModal.tsx | 28 +++++++++++++++++ .../components/CatalogDiffModalAccordion.tsx | 29 +++++++++++++++++ .../components/CatalogDiffModalRow.tsx | 15 +++++++++ .../components/CatalogDiffModalSection.tsx | 31 +++++++++++++++++++ .../CatalogDiffModal/CatalogDiffModal.tsx | 26 ++++++++++++++++ .../components/CatalogDiffAccordion.tsx | 29 +++++++++++++++++ .../components/CatalogDiffRow.tsx | 15 +++++++++ .../components/CatalogDiffSection.tsx | 22 +++++++++++++ 8 files changed, 195 insertions(+) create mode 100644 airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx create mode 100644 airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx create mode 100644 airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx create mode 100644 airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx diff --git a/airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx new file mode 100644 index 0000000000000..d0c8c78398907 --- /dev/null +++ b/airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx @@ -0,0 +1,28 @@ +import { FormattedMessage } from "react-intl"; + +import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; + +import { Modal } from "../Modal"; +import { CatalogDiffModalSection } from "./components/CatalogDiffModalSection"; + +interface CatalogDiffModalProps { + catalogDiff: CatalogDiff; + catalog: AirbyteCatalog; +} + +export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog }) => { + const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); + const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); + + const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + + return ( + <> + }> + {addedStreams.length > 1 && } + {removedStreams.length > 1 && } + {updatedStreams.length > 1 && } + + + ); +}; diff --git a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx new file mode 100644 index 0000000000000..e76d94f3dd8ad --- /dev/null +++ b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx @@ -0,0 +1,29 @@ +import { AirbyteCatalog, FieldTransform } from "core/request/AirbyteClient"; + +import { CatalogDiffModalSection } from "./CatalogDiffModalSection"; + +interface CatalogDiffModalAccordionProps { + data: FieldTransform[]; + catalog: AirbyteCatalog; +} + +export const CatalogDiffModalAccordion: React.FC = ({ data, catalog }) => { + //do we already have a reusable accordion that accepts children? if so use that... + + //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? + const addedFields = data.filter((item) => item.transformType === "add_field"); + const removedFields = data.filter((item) => item.transformType === "remove_field"); + const updatedFields = data.filter((item) => item.transformType === "update_field_schema"); + + // /* TODO: 1. if we already have an accordion use that and add custom classes + // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... + // 3. probably a smarter way to pass those props? + // */ + return ( + + {addedFields.length > 1 && } + {removedFields.length > 1 && } + {updatedFields.length > 1 && } + + ); +}; diff --git a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx new file mode 100644 index 0000000000000..0107257f66e34 --- /dev/null +++ b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx @@ -0,0 +1,15 @@ +import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; + +interface CatalogDiffModalRow { + item: FieldTransform | StreamTransform; + catalog: AirbyteCatalog; + children?: React.ReactChild; +} + +export const CatalogDiffModalRow: React.FC = ({ item }) => { + // if it's a stream, get the catalog data + // if it's a field, get the field type + + // render the row! + return <>; +}; diff --git a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx new file mode 100644 index 0000000000000..0dc689d018e25 --- /dev/null +++ b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx @@ -0,0 +1,31 @@ +import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; + +import { CatalogDiffModalAccordion } from "./CatalogDiffModalAccordion"; +import { CatalogDiffModalRow } from "./CatalogDiffModalRow"; + +interface CatalogDiffModalSectionProps { + data: StreamTransform[] | FieldTransform[]; + catalog: AirbyteCatalog; + isChild?: boolean; +} + +export const CatalogDiffModalSection: React.FC = ({ data, catalog, isChild }) => { + //note: do we have to send the catalog along for a field? + //isChild will be used to demote headings within the accordion + + return ( + <> + {data.map((item) => { + Array.isArray(item) ? ( + //if the item is an array, this is a section of field transformations and we should create + //the accordion. + + ) : ( + // otherwise just generate the normal row for this item + //`item` may be a stream or a field here. + + ); + })} + + ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx new file mode 100644 index 0000000000000..a95301306987c --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -0,0 +1,26 @@ +import { FormattedMessage } from "react-intl"; + +import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; + +import { Modal } from "../../../components/Modal"; +import { CatalogDiffAccordion } from "./components/CatalogDiffAccordion"; +import { CatalogDiffSection } from "./components/CatalogDiffSection"; + +interface CatalogDiffModalProps { + catalogDiff: CatalogDiff; + catalog: AirbyteCatalog; +} + +export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog }) => { + const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); + const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); + const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + + return ( + }> + {addedStreams.length > 1 && } + {removedStreams.length > 1 && } + {updatedStreams.length > 1 && } + + ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx new file mode 100644 index 0000000000000..32b48380ba243 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -0,0 +1,29 @@ +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; + +import { CatalogDiffSection } from "./CatalogDiffSection"; + +interface CatalogDiffAccordionProps { + data: StreamTransform[]; // stream transforms with type 'update_stream' + catalog: AirbyteCatalog; +} + +export const CatalogDiffAccordion: React.FC = ({ data, catalog }) => { + //do we already have a reusable accordion that accepts children? if so use that... + + //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? + const addedFields = data.filter((item) => item.transformType === "add_field"); + const removedFields = data.filter((item) => item.transformType === "remove_field"); + const updatedFields = data.filter((item) => item.transformType === "update_field_schema"); + + // /* TODO: 1. if we already have an accordion use that and add custom classes + // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... + // 3. probably a smarter way to pass those props? + // */ + return ( + + {addedFields.length > 1 && } + {removedFields.length > 1 && } + {updatedFields.length > 1 && } + + ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx new file mode 100644 index 0000000000000..5277b7267e622 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx @@ -0,0 +1,15 @@ +import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; + +interface CatalogDiffRow { + item: FieldTransform | StreamTransform; + catalog: AirbyteCatalog; + children?: React.ReactChild; +} + +export const CatalogDiffRow: React.FC = ({ item }) => { + // if it's a stream, get the catalog data + // if it's a field, get the field type + + // render the row! + return <>; +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx new file mode 100644 index 0000000000000..c528cfdd752ac --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -0,0 +1,22 @@ +import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; + +import { CatalogDiffRow } from "./CatalogDiffRow"; + +interface CatalogDiffSectionProps { + data: StreamTransform[] | FieldTransform[]; + catalog: AirbyteCatalog; + isChild?: boolean; +} + +export const CatalogDiffSection: React.FC = ({ data, catalog, isChild }) => { + //note: do we have to send the catalog along for a field? + //isChild will be used to demote headings within the accordion + + return ( + <> + {data.map((item) => { + return ; + })} + + ); +}; From 371b2f13cf5497dcc72ecb00ee34eed08d314123 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 23 Jun 2022 11:10:04 -0400 Subject: [PATCH 02/48] logic tweaks --- .../CatalogDiffModal/CatalogDiffModal.tsx | 3 +-- .../components/CatalogDiffAccordion.tsx | 14 +++++++------- .../components/CatalogDiffRow.tsx | 7 ++++++- .../components/CatalogDiffSection.tsx | 17 ++++++++++++----- 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index a95301306987c..ce2d66cfa5c61 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -3,7 +3,6 @@ import { FormattedMessage } from "react-intl"; import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; import { Modal } from "../../../components/Modal"; -import { CatalogDiffAccordion } from "./components/CatalogDiffAccordion"; import { CatalogDiffSection } from "./components/CatalogDiffSection"; interface CatalogDiffModalProps { @@ -20,7 +19,7 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, }> {addedStreams.length > 1 && } {removedStreams.length > 1 && } - {updatedStreams.length > 1 && } + {updatedStreams.length > 1 && } ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 32b48380ba243..7cdf3fb550cb5 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -1,9 +1,9 @@ -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { AirbyteCatalog, FieldTransform } from "core/request/AirbyteClient"; import { CatalogDiffSection } from "./CatalogDiffSection"; interface CatalogDiffAccordionProps { - data: StreamTransform[]; // stream transforms with type 'update_stream' + data?: FieldTransform[]; // stream transforms with type 'update_stream' catalog: AirbyteCatalog; } @@ -15,15 +15,15 @@ export const CatalogDiffAccordion: React.FC = ({ data const removedFields = data.filter((item) => item.transformType === "remove_field"); const updatedFields = data.filter((item) => item.transformType === "update_field_schema"); - // /* TODO: 1. if we already have an accordion use that and add custom classes + // /* TODO: 1. Timebox trying out a Headless UI accordion here, otherwise can implement our own // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... - // 3. probably a smarter way to pass those props? + // 3. maybe a cimpler way to pass those props? // */ return ( - {addedFields.length > 1 && } - {removedFields.length > 1 && } - {updatedFields.length > 1 && } + {addedFields.length > 1 && } + {removedFields.length > 1 && } + {updatedFields.length > 1 && } ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx index 5277b7267e622..d61c71e1ceebb 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx @@ -11,5 +11,10 @@ export const CatalogDiffRow: React.FC = ({ item }) => { // if it's a field, get the field type // render the row! - return <>; + // use the transformType to use classnames to apply condiitonal styling + return ( +
+ {/* {tableName} {item.transformType === "add_stream" ? syncMode : item.transformType.includes("field") ? fieldType ?? null} */} +
+ ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index c528cfdd752ac..7803bf767c1cd 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -1,21 +1,28 @@ -import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { CatalogDiffAccordion } from "./CatalogDiffAccordion"; import { CatalogDiffRow } from "./CatalogDiffRow"; interface CatalogDiffSectionProps { - data: StreamTransform[] | FieldTransform[]; + data: StreamTransform[]; catalog: AirbyteCatalog; - isChild?: boolean; } -export const CatalogDiffSection: React.FC = ({ data, catalog, isChild }) => { +export const CatalogDiffSection: React.FC = ({ data, catalog }) => { //note: do we have to send the catalog along for a field? //isChild will be used to demote headings within the accordion return ( <> + {/* generic header */} +
{/* {data.length} {unit} {action} */}
+ {/* update stream should make an accordion, others should make a row */} {data.map((item) => { - return ; + return item.transformType === "update_stream" ? ( + + ) : ( + + ); })} ); From 48bb1c05a8fd77848f468fb14ebfc9b09f5d527e Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 23 Jun 2022 11:42:10 -0400 Subject: [PATCH 03/48] moving around --- .../CatalogDiffModal/CatalogDiffModal.tsx | 28 ----------------- .../components/CatalogDiffModalAccordion.tsx | 29 ----------------- .../components/CatalogDiffModalRow.tsx | 15 --------- .../components/CatalogDiffModalSection.tsx | 31 ------------------- .../components/CatalogDiffAccordion.tsx | 21 ++++++------- .../components/CatalogDiffRow.tsx | 1 + 6 files changed, 11 insertions(+), 114 deletions(-) delete mode 100644 airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx delete mode 100644 airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx delete mode 100644 airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx delete mode 100644 airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx diff --git a/airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx deleted file mode 100644 index d0c8c78398907..0000000000000 --- a/airbyte-webapp/src/components/CatalogDiffModal/CatalogDiffModal.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { FormattedMessage } from "react-intl"; - -import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; - -import { Modal } from "../Modal"; -import { CatalogDiffModalSection } from "./components/CatalogDiffModalSection"; - -interface CatalogDiffModalProps { - catalogDiff: CatalogDiff; - catalog: AirbyteCatalog; -} - -export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog }) => { - const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); - const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); - - const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); - - return ( - <> - }> - {addedStreams.length > 1 && } - {removedStreams.length > 1 && } - {updatedStreams.length > 1 && } - - - ); -}; diff --git a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx deleted file mode 100644 index e76d94f3dd8ad..0000000000000 --- a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalAccordion.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { AirbyteCatalog, FieldTransform } from "core/request/AirbyteClient"; - -import { CatalogDiffModalSection } from "./CatalogDiffModalSection"; - -interface CatalogDiffModalAccordionProps { - data: FieldTransform[]; - catalog: AirbyteCatalog; -} - -export const CatalogDiffModalAccordion: React.FC = ({ data, catalog }) => { - //do we already have a reusable accordion that accepts children? if so use that... - - //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? - const addedFields = data.filter((item) => item.transformType === "add_field"); - const removedFields = data.filter((item) => item.transformType === "remove_field"); - const updatedFields = data.filter((item) => item.transformType === "update_field_schema"); - - // /* TODO: 1. if we already have an accordion use that and add custom classes - // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... - // 3. probably a smarter way to pass those props? - // */ - return ( - - {addedFields.length > 1 && } - {removedFields.length > 1 && } - {updatedFields.length > 1 && } - - ); -}; diff --git a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx deleted file mode 100644 index 0107257f66e34..0000000000000 --- a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalRow.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; - -interface CatalogDiffModalRow { - item: FieldTransform | StreamTransform; - catalog: AirbyteCatalog; - children?: React.ReactChild; -} - -export const CatalogDiffModalRow: React.FC = ({ item }) => { - // if it's a stream, get the catalog data - // if it's a field, get the field type - - // render the row! - return <>; -}; diff --git a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx b/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx deleted file mode 100644 index 0dc689d018e25..0000000000000 --- a/airbyte-webapp/src/components/CatalogDiffModal/components/CatalogDiffModalSection.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; - -import { CatalogDiffModalAccordion } from "./CatalogDiffModalAccordion"; -import { CatalogDiffModalRow } from "./CatalogDiffModalRow"; - -interface CatalogDiffModalSectionProps { - data: StreamTransform[] | FieldTransform[]; - catalog: AirbyteCatalog; - isChild?: boolean; -} - -export const CatalogDiffModalSection: React.FC = ({ data, catalog, isChild }) => { - //note: do we have to send the catalog along for a field? - //isChild will be used to demote headings within the accordion - - return ( - <> - {data.map((item) => { - Array.isArray(item) ? ( - //if the item is an array, this is a section of field transformations and we should create - //the accordion. - - ) : ( - // otherwise just generate the normal row for this item - //`item` may be a stream or a field here. - - ); - })} - - ); -}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 7cdf3fb550cb5..94c1aa895c822 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -1,29 +1,28 @@ import { AirbyteCatalog, FieldTransform } from "core/request/AirbyteClient"; -import { CatalogDiffSection } from "./CatalogDiffSection"; - interface CatalogDiffAccordionProps { data?: FieldTransform[]; // stream transforms with type 'update_stream' catalog: AirbyteCatalog; } -export const CatalogDiffAccordion: React.FC = ({ data, catalog }) => { +export const CatalogDiffAccordion: React.FC = ({ data }) => { //do we already have a reusable accordion that accepts children? if so use that... //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? - const addedFields = data.filter((item) => item.transformType === "add_field"); - const removedFields = data.filter((item) => item.transformType === "remove_field"); - const updatedFields = data.filter((item) => item.transformType === "update_field_schema"); + const addedFields = data?.filter((item) => item.transformType === "add_field"); + const removedFields = data?.filter((item) => item.transformType === "remove_field"); + const updatedFields = data?.filter((item) => item.transformType === "update_field_schema"); // /* TODO: 1. Timebox trying out a Headless UI accordion here, otherwise can implement our own // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... // 3. maybe a cimpler way to pass those props? // */ return ( - - {addedFields.length > 1 && } - {removedFields.length > 1 && } - {updatedFields.length > 1 && } - +
{addedFields || removedFields || updatedFields}
+ // + // {addedFields.length > 1 && } + // {removedFields.length > 1 && } + // {updatedFields.length > 1 && } + // ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx index d61c71e1ceebb..a91c4073687dd 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx @@ -14,6 +14,7 @@ export const CatalogDiffRow: React.FC = ({ item }) => { // use the transformType to use classnames to apply condiitonal styling return (
+ {item} {/* {tableName} {item.transformType === "add_stream" ? syncMode : item.transformType.includes("field") ? fieldType ?? null} */}
); From 6ae438f11762931bb050e41aa5d594d17a0e8e3a Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 28 Jun 2022 09:15:37 -0400 Subject: [PATCH 04/48] begin styling and content --- airbyte-webapp/src/locales/en.json | 7 +++ .../components/ReplicationView.tsx | 49 ++++++++++++------- .../CatalogDiffModal.module.scss | 4 ++ .../CatalogDiffModal/CatalogDiffModal.tsx | 20 ++++++-- .../CatalogDiffAccordion.module.scss | 0 .../components/CatalogDiffRow.module.scss | 0 .../components/CatalogDiffSection.module.scss | 4 ++ .../components/CatalogDiffSection.tsx | 28 +++++++++-- 8 files changed, 83 insertions(+), 29 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 93c417d86ee2f..94bee7e7df8d9 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -330,6 +330,13 @@ "connection.sourceTestAgain": "Test source connection again", "connection.resetData": "Reset your data", "connection.updateSchema": "Refresh source schema", + "connection.updateSchema.completed": "Refreshed source schema", + "connection.updateSchema.confirm": "Confirm", + "connection.updateSchema.new": "new {item}", + "connection.updateSchema.removed": "removed {item}", + "connection.updateSchema.changed": "{item} with changes", + "connection.updateSchema.tableCount": "{count, plural, one {table} other {tables}}", + "connection.updateSchema.fieldCount": "{count, plural, one {field} other {fields}}", "connection.newConnection": "+ New connection", "connection.newConnectionTitle": "New connection", "connection.noConnections": "Connection list is empty", diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index 81a6ac9605312..e78a44c212f26 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -18,6 +18,7 @@ import { ValuesProps, } from "hooks/services/useConnectionHook"; import { equal } from "utils/objects"; +import { CatalogDiffModal } from "views/Connection/CatalogDiffModal/CatalogDiffModal"; import ConnectionForm from "views/Connection/ConnectionForm"; import { ConnectionFormSubmitResult } from "views/Connection/ConnectionForm/ConnectionForm"; import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig"; @@ -87,6 +88,7 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch const [saved, setSaved] = useState(false); const [connectionFormValues, setConnectionFormValues] = useState(); const connectionService = useConnectionService(); + const [diffAcknowledged, setDiffAcknowledged] = useState(false); const { mutateAsync: updateConnection } = useUpdateConnection(); @@ -187,25 +189,34 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch return ( - {!isRefreshingCatalog && connection ? ( - } - onCancel={onCancelConnectionFormEdit} - canSubmitUntouchedForm={activeUpdatingSchemaMode} - additionalSchemaControl={ - - } - onChangeValues={setConnectionFormValues} - /> - ) : ( - - )} + + {!isRefreshingCatalog && connection.catalogDiff && !diffAcknowledged && ( + + )} + {connection ? ( + } + onCancel={onCancelConnectionFormEdit} + canSubmitUntouchedForm={activeUpdatingSchemaMode} + additionalSchemaControl={ + + } + onChangeValues={setConnectionFormValues} + /> + ) : ( + + )} + ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss new file mode 100644 index 0000000000000..a3084b6cf777e --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss @@ -0,0 +1,4 @@ +.modalContent { + display: flex; + flex-direction: column; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index ce2d66cfa5c61..535f52d28b59c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -1,25 +1,35 @@ +import { Dispatch, SetStateAction } from "react"; import { FormattedMessage } from "react-intl"; +import { LoadingButton } from "components"; + import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; import { Modal } from "../../../components/Modal"; +import styles from "./CatalogDiffModal.module.scss"; import { CatalogDiffSection } from "./components/CatalogDiffSection"; interface CatalogDiffModalProps { catalogDiff: CatalogDiff; catalog: AirbyteCatalog; + setDiffAcknowledged: Dispatch>; } -export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog }) => { +export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); return ( - }> - {addedStreams.length > 1 && } - {removedStreams.length > 1 && } - {updatedStreams.length > 1 && } + } onClose={() => null}> +
+ {addedStreams.length > 1 && } + {removedStreams.length > 1 && } + {updatedStreams.length > 1 && } +
+ setDiffAcknowledged(true)}> + + ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.module.scss new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss new file mode 100644 index 0000000000000..733f9f6eb5439 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss @@ -0,0 +1,4 @@ +.sectionContainer { + display: flex; + flex-direction: column; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index 7803bf767c1cd..8252f15e2c7bc 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -1,7 +1,10 @@ +import { FormattedMessage } from "react-intl"; + import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import { CatalogDiffAccordion } from "./CatalogDiffAccordion"; import { CatalogDiffRow } from "./CatalogDiffRow"; +import styles from "./CatalogDiffSection.module.scss"; interface CatalogDiffSectionProps { data: StreamTransform[]; @@ -12,18 +15,33 @@ export const CatalogDiffSection: React.FC = ({ data, ca //note: do we have to send the catalog along for a field? //isChild will be used to demote headings within the accordion + const diffVerb = data[0].transformType.includes("add") + ? "new" + : data[0].transformType.includes("remove") + ? "removed" + : data[0].transformType.includes("update") + ? "changed" + : undefined; + + const diffObject = data[0].transformType.includes("stream") + ? "stream" + : data[0].transformType.includes("field") + ? "field" + : undefined; return ( - <> +
{/* generic header */} -
{/* {data.length} {unit} {action} */}
+
+ +
{/* update stream should make an accordion, others should make a row */} {data.map((item) => { return item.transformType === "update_stream" ? ( - - ) : ( + ) : ( + ); })} - +
); }; From 837e649aaa8c30e30652f075daece79f3123318a Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 28 Jun 2022 13:39:57 -0400 Subject: [PATCH 05/48] modal formatting, section header --- airbyte-webapp/src/locales/en.json | 5 +++-- .../CatalogDiffModal.module.scss | 8 ++++++++ .../CatalogDiffModal/CatalogDiffModal.tsx | 14 ++++++++------ .../components/CatalogDiffRow.tsx | 6 ++---- .../components/CatalogDiffSection.module.scss | 7 +++++++ .../components/CatalogDiffSection.tsx | 16 +++++++++++----- 6 files changed, 39 insertions(+), 17 deletions(-) diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 94bee7e7df8d9..450229bc98e20 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -335,8 +335,9 @@ "connection.updateSchema.new": "new {item}", "connection.updateSchema.removed": "removed {item}", "connection.updateSchema.changed": "{item} with changes", - "connection.updateSchema.tableCount": "{count, plural, one {table} other {tables}}", - "connection.updateSchema.fieldCount": "{count, plural, one {field} other {fields}}", + "connection.updateSchema.stream": "{count, plural, one {table} other {tables}}", + "connection.updateSchema.field": "{count, plural, one {field} other {fields}}", + "connection.newConnection": "+ New connection", "connection.newConnectionTitle": "New connection", "connection.noConnections": "Connection list is empty", diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss index a3084b6cf777e..c7fffb93ed009 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss @@ -1,4 +1,12 @@ .modalContent { display: flex; flex-direction: column; + width: 596px; +} + +.buttonContainer { + display: flex; + flex-direction: row; + justify-content: end; + margin: 20px 15px 20px 15px; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 535f52d28b59c..82c5c651d3dea 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -23,13 +23,15 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, return ( } onClose={() => null}>
- {addedStreams.length > 1 && } - {removedStreams.length > 1 && } - {updatedStreams.length > 1 && } + {addedStreams.length > 0 && } + {removedStreams.length > 0 && } + {updatedStreams.length > 0 && } +
+
+ setDiffAcknowledged(true)}> + +
- setDiffAcknowledged(true)}> - - ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx index a91c4073687dd..3cf7230ca0881 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx @@ -1,12 +1,11 @@ import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; -interface CatalogDiffRow { +interface CatalogDiffRowProps { item: FieldTransform | StreamTransform; catalog: AirbyteCatalog; - children?: React.ReactChild; } -export const CatalogDiffRow: React.FC = ({ item }) => { +export const CatalogDiffRow: React.FC = ({}) => { // if it's a stream, get the catalog data // if it's a field, get the field type @@ -14,7 +13,6 @@ export const CatalogDiffRow: React.FC = ({ item }) => { // use the transformType to use classnames to apply condiitonal styling return (
- {item} {/* {tableName} {item.transformType === "add_stream" ? syncMode : item.transformType.includes("field") ? fieldType ?? null} */}
); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss index 733f9f6eb5439..7b8e50e6fe8b1 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss @@ -2,3 +2,10 @@ display: flex; flex-direction: column; } + +.sectionHeader { + font-size: 14px; + font-weight: 500; + line-height: 17px; + padding: 20px 15px 0px 15px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index 8252f15e2c7bc..bb7e4c70c69f8 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -14,7 +14,7 @@ interface CatalogDiffSectionProps { export const CatalogDiffSection: React.FC = ({ data, catalog }) => { //note: do we have to send the catalog along for a field? //isChild will be used to demote headings within the accordion - + console.log("section"); const diffVerb = data[0].transformType.includes("add") ? "new" : data[0].transformType.includes("remove") @@ -23,16 +23,22 @@ export const CatalogDiffSection: React.FC = ({ data, ca ? "changed" : undefined; - const diffObject = data[0].transformType.includes("stream") + const diffType = data[0].transformType.includes("stream") ? "stream" : data[0].transformType.includes("field") ? "field" : undefined; return (
- {/* generic header */} -
- + {/* header: {number} {descriptor} {object} */} +
+ {data.length}{" "} + , + }} + />
{/* update stream should make an accordion, others should make a row */} {data.map((item) => { From a30247b7f5b0fb56417be65c6d86c104ab02a229 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 28 Jun 2022 16:14:51 -0400 Subject: [PATCH 06/48] client update, add/removed streams works --- .../components/ReplicationView.tsx | 1 + .../CatalogDiffModal/CatalogDiffModal.tsx | 2 +- .../components/CatalogDiffRow.module.scss | 0 .../components/CatalogDiffRow.tsx | 19 ------ .../components/CatalogDiffSection.module.scss | 2 +- .../components/CatalogDiffSection.tsx | 4 +- .../components/StreamRow.module.scss | 47 ++++++++++++++ .../CatalogDiffModal/components/StreamRow.tsx | 65 +++++++++++++++++++ 8 files changed, 117 insertions(+), 23 deletions(-) delete mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.module.scss delete mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index e78a44c212f26..aa60cf1d33f8c 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -89,6 +89,7 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch const [connectionFormValues, setConnectionFormValues] = useState(); const connectionService = useConnectionService(); const [diffAcknowledged, setDiffAcknowledged] = useState(false); + console.log(diffAcknowledged, setDiffAcknowledged); const { mutateAsync: updateConnection } = useUpdateConnection(); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 82c5c651d3dea..bd2441a8668c2 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -14,8 +14,8 @@ interface CatalogDiffModalProps { catalog: AirbyteCatalog; setDiffAcknowledged: Dispatch>; } - export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { + console.log(catalogDiff); const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.module.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx deleted file mode 100644 index 3cf7230ca0881..0000000000000 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffRow.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; - -interface CatalogDiffRowProps { - item: FieldTransform | StreamTransform; - catalog: AirbyteCatalog; -} - -export const CatalogDiffRow: React.FC = ({}) => { - // if it's a stream, get the catalog data - // if it's a field, get the field type - - // render the row! - // use the transformType to use classnames to apply condiitonal styling - return ( -
- {/* {tableName} {item.transformType === "add_stream" ? syncMode : item.transformType.includes("field") ? fieldType ?? null} */} -
- ); -}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss index 7b8e50e6fe8b1..5f786cbf6a755 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss @@ -7,5 +7,5 @@ font-size: 14px; font-weight: 500; line-height: 17px; - padding: 20px 15px 0px 15px; + padding: 15px 20px 15px 20px; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index bb7e4c70c69f8..230e6aa795e66 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -3,8 +3,8 @@ import { FormattedMessage } from "react-intl"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import { CatalogDiffAccordion } from "./CatalogDiffAccordion"; -import { CatalogDiffRow } from "./CatalogDiffRow"; import styles from "./CatalogDiffSection.module.scss"; +import { StreamRow } from "./StreamRow"; interface CatalogDiffSectionProps { data: StreamTransform[]; @@ -45,7 +45,7 @@ export const CatalogDiffSection: React.FC = ({ data, ca return item.transformType === "update_stream" ? ( ) : ( - + ); })}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss new file mode 100644 index 0000000000000..d93c63d0901f8 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -0,0 +1,47 @@ +@use "../../../../scss/colors"; +// @use "../../../../views/Connection/CatalogTree/StreamHeader"; do this instead of copy/pasting the icon stuff below once import chaos mastered + +.row { + display: flex; + flex-direction: row; + height: 40px; + align-items: center; + padding: 5px 20px 5px 20px; + gap: 10px; + border-bottom: 1px solid colors.$white; + width: 100%; + + &.add { + background-color: colors.$green-50; //todo: this probably doesn't match the theme either + } + &.remove { + background-color: #ffe4e8; //todo: this doesn't match the red-50 in the theme? + } +} + +.icon { + margin-top: -1px; + &.plus { + color: colors.$green; + } + &.minus { + color: colors.$red; + } +} + +.syncModeBox { + font-size: 11px; + line-height: 12px; + border-radius: 5px; + background: colors.$grey-100; + padding: 5px 9px 5px 9px; + width: 276px; + opacity: 50%; + &.remove { + background: colors.$red-100; + } +} + +.name { + width: 230px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx new file mode 100644 index 0000000000000..6a521ce44351a --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -0,0 +1,65 @@ +import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classnames from "classnames"; + +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; + +import styles from "./StreamRow.module.scss"; + +interface StreamRowProps { + item: StreamTransform; + catalog: AirbyteCatalog; +} + +export const SyncModeBox: React.FC<{ syncModeString: string; mode: "remove" | "update" }> = ({ + syncModeString, + mode, +}) => { + const syncModeBoxStyle = classnames(styles.syncModeBox, { + [styles.remove]: mode === "remove", + }); + return
{syncModeString}
; +}; + +export const StreamRow: React.FC = ({ item, catalog }) => { + // if it's a stream, get the catalog data + // if it's a field, get the field type + + // render the row! + // use the transformType to use classnames to apply condiitonal styling + + // const itemType = item.transformType.includes("stream") ? "stream" : "field"; + + const diffType = item.transformType.includes("add") ? "remove" : "add"; + const rowStyle = classnames(styles.row, { + [styles.add]: diffType === "add", + [styles.remove]: diffType === "remove", + }); + + const iconStyle = classnames(styles.icon, { + [styles.plus]: diffType === "add", + [styles.minus]: diffType === "remove", + }); + + const streamConfig = catalog.streams.find( + (stream) => + stream.stream?.namespace === item.streamDescriptor.namespace && stream.stream?.name === item.streamDescriptor.name + )?.config; + + const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; + + return ( +
+ {diffType === "add" ? ( + + ) : ( + + )} +
{item.streamDescriptor.name}
+ {diffType === "remove" && ( + // streamConfig?.selected && + + )} +
+ ); +}; From 93a4c21e7ae5fcc9fd719b0571a15aa383178147 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 29 Jun 2022 14:50:41 -0400 Subject: [PATCH 07/48] theme tweaks --- airbyte-webapp/src/scss/_colors.scss | 2 +- .../CatalogDiffModal/components/StreamRow.module.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/scss/_colors.scss b/airbyte-webapp/src/scss/_colors.scss index 4477d2db49089..bd86228b9c8cb 100644 --- a/airbyte-webapp/src/scss/_colors.scss +++ b/airbyte-webapp/src/scss/_colors.scss @@ -60,7 +60,7 @@ $green-800: #007c84; $green-900: #005959; $green: $green-200; -$red-50: #ffbac6; +$red-50: #ffe4e8; $red-100: #ffbac6; $red-200: #ff8da1; $red-300: #ff5e7b; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index d93c63d0901f8..c68ace162ac9e 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -12,10 +12,10 @@ width: 100%; &.add { - background-color: colors.$green-50; //todo: this probably doesn't match the theme either + background-color: colors.$green-50; } &.remove { - background-color: #ffe4e8; //todo: this doesn't match the red-50 in the theme? + background-color: colors.$red-50; } } From 9fda9f8c725808f15d55b08abaa3b83415ec1178 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 29 Jun 2022 17:19:42 -0400 Subject: [PATCH 08/48] WIP -- adding accordion --- airbyte-webapp/package-lock.json | 19 ++++++++++ airbyte-webapp/package.json | 1 + .../CatalogDiffModal/CatalogDiffModal.tsx | 26 ++++++++++++- .../CatalogDiffAccordion.module.scss | 15 ++++++++ .../components/CatalogDiffAccordion.tsx | 37 +++++++++++++++---- .../components/CatalogDiffSection.tsx | 2 +- .../components/ModificationIcon.tsx | 18 +++++++++ 7 files changed, 108 insertions(+), 10 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json index 0b5dbbe30d21a..5d305e831ac66 100644 --- a/airbyte-webapp/package-lock.json +++ b/airbyte-webapp/package-lock.json @@ -14,6 +14,7 @@ "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", "@fullstory/browser": "^1.5.1", + "@headlessui/react": "^1.6.5", "@monaco-editor/react": "^4.4.5", "@sentry/react": "^6.19.6", "@sentry/tracing": "^6.19.6", @@ -3548,6 +3549,18 @@ "node": ">=6" } }, + "node_modules/@headlessui/react": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.6.5.tgz", + "integrity": "sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.3", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz", @@ -49252,6 +49265,12 @@ "yargs": "^16.2.0" } }, + "@headlessui/react": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.6.5.tgz", + "integrity": "sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.9.3", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz", diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json index 47683c2b2cd9d..da0d0695f6578 100644 --- a/airbyte-webapp/package.json +++ b/airbyte-webapp/package.json @@ -28,6 +28,7 @@ "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", "@fullstory/browser": "^1.5.1", + "@headlessui/react": "^1.6.5", "@monaco-editor/react": "^4.4.5", "@sentry/react": "^6.19.6", "@sentry/tracing": "^6.19.6", diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index bd2441a8668c2..7ef0564ca069f 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -18,14 +18,36 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, console.log(catalogDiff); const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); - const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + + if (!updatedStreams.length) { + updatedStreams = [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + updateStream: [ + { transformType: "add_field", fieldName: ["users", "phone"] }, + { transformType: "add_field", fieldName: ["users", "email"] }, + { transformType: "remove_field", fieldName: ["users", "lastName"] }, + + { + transformType: "update_field_schema", + fieldName: ["users", "address"], + updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + }, + ], + }, + ]; + } return ( } onClose={() => null}>
{addedStreams.length > 0 && } {removedStreams.length > 0 && } - {updatedStreams.length > 0 && } + {/* {updatedStreams.length > 0 && */} + + {/* } */}
setDiffAcknowledged(true)}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss index e69de29bb2d1d..83a49434b1c00 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss @@ -0,0 +1,15 @@ +.accordionContainer { + width: 100%; +} + +.accordionButton { + width: 100%; + background: none; + border: none; + height: 40px; + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; + padding: 5px 30px 5px 20px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 94c1aa895c822..1253bacb66217 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -1,24 +1,47 @@ -import { AirbyteCatalog, FieldTransform } from "core/request/AirbyteClient"; +import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Disclosure as Accordion } from "@headlessui/react"; + +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; + +import styles from "./CatalogDiffAccordion.module.scss"; +import { ModificationIcon } from "./ModificationIcon"; interface CatalogDiffAccordionProps { - data?: FieldTransform[]; // stream transforms with type 'update_stream' + data: StreamTransform; // stream transforms with type 'update_stream' catalog: AirbyteCatalog; } export const CatalogDiffAccordion: React.FC = ({ data }) => { //do we already have a reusable accordion that accepts children? if so use that... - + console.log(data); //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? - const addedFields = data?.filter((item) => item.transformType === "add_field"); - const removedFields = data?.filter((item) => item.transformType === "remove_field"); - const updatedFields = data?.filter((item) => item.transformType === "update_field_schema"); + // const addedFields = data?.filter((item) => item.transformType === "add_field"); + // const removedFields = data?.filter((item) => item.transformType === "remove_field"); + // const updatedFields = data?.filter((item) => item.transformType === "update_field_schema"); // /* TODO: 1. Timebox trying out a Headless UI accordion here, otherwise can implement our own // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... // 3. maybe a cimpler way to pass those props? // */ + + const updatedFields = data.updateStream; + return ( -
{addedFields || removedFields || updatedFields}
+
+ + {({ open }) => ( + <> + + {" "} + {open ? : } +
+ + This is the panel + + )} + +
// // {addedFields.length > 1 && } // {removedFields.length > 1 && } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index 230e6aa795e66..01748dae26bdd 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -43,7 +43,7 @@ export const CatalogDiffSection: React.FC = ({ data, ca {/* update stream should make an accordion, others should make a row */} {data.map((item) => { return item.transformType === "update_stream" ? ( - + ) : ( ); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx new file mode 100644 index 0000000000000..7da4590b496d6 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx @@ -0,0 +1,18 @@ +export const ModificationIcon: React.FC = () => { + return ( + + + + + ); +}; From a9b9560db92ce0c5a47e2686f19ef30ca4f2b45d Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 15:08:45 -0400 Subject: [PATCH 09/48] hook for modal display logic --- .../ConnectionItemPage/components/ReplicationView.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index aa60cf1d33f8c..520b435493ab5 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -2,7 +2,7 @@ import { faSyncAlt } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { useMemo, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { useAsyncFn, useUnmount } from "react-use"; +import { useAsyncFn, useUnmount, useToggle } from "react-use"; import styled from "styled-components"; import { Button, LabeledSwitch, ModalBody, ModalFooter } from "components"; @@ -89,8 +89,7 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch const [connectionFormValues, setConnectionFormValues] = useState(); const connectionService = useConnectionService(); const [diffAcknowledged, setDiffAcknowledged] = useState(false); - console.log(diffAcknowledged, setDiffAcknowledged); - + const [schemaUpdateModalOpen, setSchemaUpdateModalOpen] = useToggle(false); const { mutateAsync: updateConnection } = useUpdateConnection(); const { connection: initialConnection, refreshConnectionCatalog } = useConnectionLoad(connectionId); @@ -191,14 +190,14 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch return ( - {!isRefreshingCatalog && connection.catalogDiff && !diffAcknowledged && ( + {schemaUpdateModalOpen && !diffAcknowledged && ( )} - {connection ? ( + {!isRefreshingCatalog && connection ? ( Date: Thu, 30 Jun 2022 16:49:54 -0400 Subject: [PATCH 10/48] display logic, row/accordion progress --- .../components/ReplicationView.tsx | 2 +- .../CatalogDiffModal/CatalogDiffModal.tsx | 45 +++++++++++++--- .../CatalogDiffAccordion.module.scss | 2 + .../components/CatalogDiffAccordion.tsx | 15 +++--- .../components/CatalogDiffSection.module.scss | 22 ++++++++ .../components/CatalogDiffSection.tsx | 37 ++++++++----- .../components/StreamRow.module.scss | 7 ++- .../CatalogDiffModal/components/StreamRow.tsx | 54 +++++++++++++------ 8 files changed, 138 insertions(+), 46 deletions(-) diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index 520b435493ab5..c137eb7ddba56 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -190,7 +190,7 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch return ( - {schemaUpdateModalOpen && !diffAcknowledged && ( + {schemaUpdateModalOpen && !diffAcknowledged && connection.catalogDiff && ( >; } export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { - console.log(catalogDiff); - const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); - const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); + let addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); + let removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + if (!addedStreams.length) { + addedStreams = [ + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "carrot" }, + }, + ]; + } + if (!removedStreams.length) { + removedStreams = [ + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "dragonfruit" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "eclair" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "fishcake" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, + }, + ]; + } if (!updatedStreams.length) { updatedStreams = [ { transformType: "update_stream", - streamDescriptor: { namespace: "apple", name: "banana" }, + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, updateStream: [ { transformType: "add_field", fieldName: ["users", "phone"] }, { transformType: "add_field", fieldName: ["users", "email"] }, @@ -43,11 +74,9 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, return ( } onClose={() => null}>
- {addedStreams.length > 0 && } {removedStreams.length > 0 && } - {/* {updatedStreams.length > 0 && */} - - {/* } */} + {addedStreams.length > 0 && } + {updatedStreams.length > 0 && }
setDiffAcknowledged(true)}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss index 83a49434b1c00..36a1a51bd8d2c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss @@ -1,3 +1,5 @@ +@forward "../components/StreamRow.module.scss"; + .accordionContainer { width: 100%; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 1253bacb66217..0736a748c9bcf 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -16,16 +16,16 @@ export const CatalogDiffAccordion: React.FC = ({ data //do we already have a reusable accordion that accepts children? if so use that... console.log(data); //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? - // const addedFields = data?.filter((item) => item.transformType === "add_field"); - // const removedFields = data?.filter((item) => item.transformType === "remove_field"); - // const updatedFields = data?.filter((item) => item.transformType === "update_field_schema"); // /* TODO: 1. Timebox trying out a Headless UI accordion here, otherwise can implement our own // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... // 3. maybe a cimpler way to pass those props? // */ - const updatedFields = data.updateStream; + const fieldTransforms = data.updateStream; + const addedFields = fieldTransforms?.filter((item) => item.transformType === "add_field"); + const removedFields = fieldTransforms?.filter((item) => item.transformType === "remove_field"); + const updatedFields = fieldTransforms?.filter((item) => item.transformType === "update_field_schema"); return (
@@ -34,10 +34,11 @@ export const CatalogDiffAccordion: React.FC = ({ data <> {" "} - {open ? : } -
+ {open ? : } + {data.streamDescriptor.namespace} + {data.streamDescriptor.name} - This is the panel + howdy )} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss index 5f786cbf6a755..31ec705ac240e 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss @@ -1,3 +1,6 @@ +@use "../../../../scss/colors"; +@use "../components/StreamRow.module.scss"; + .sectionContainer { display: flex; flex-direction: column; @@ -9,3 +12,22 @@ line-height: 17px; padding: 15px 20px 15px 20px; } + +.sectionSubHeader { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px 10px 0px 45px; + gap: 10px; + width: 100%; + height: 22px; + + & th { + @extend .nameCell; + text-align: left; + font-weight: 400; + font-size: 10px; + color: colors.$grey; + line-height: 12px; + } +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index 01748dae26bdd..354e3e2feb4fd 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -1,3 +1,4 @@ +import classnames from "classnames"; import { FormattedMessage } from "react-intl"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; @@ -6,15 +7,13 @@ import { CatalogDiffAccordion } from "./CatalogDiffAccordion"; import styles from "./CatalogDiffSection.module.scss"; import { StreamRow } from "./StreamRow"; -interface CatalogDiffSectionProps { +interface StreamSectionProps { data: StreamTransform[]; catalog: AirbyteCatalog; } -export const CatalogDiffSection: React.FC = ({ data, catalog }) => { +export const CatalogDiffSection: React.FC = ({ data, catalog }) => { //note: do we have to send the catalog along for a field? - //isChild will be used to demote headings within the accordion - console.log("section"); const diffVerb = data[0].transformType.includes("add") ? "new" : data[0].transformType.includes("remove") @@ -28,9 +27,15 @@ export const CatalogDiffSection: React.FC = ({ data, ca : data[0].transformType.includes("field") ? "field" : undefined; + + console.log(data[0].transformType); + + const subheaderStyles = classnames(styles.sectionSubHeader, { + [styles.padLeft]: data[0].transformType === "update_stream", + }); + return (
- {/* header: {number} {descriptor} {object} */}
{data.length}{" "} = ({ data, ca }} />
- {/* update stream should make an accordion, others should make a row */} - {data.map((item) => { - return item.transformType === "update_stream" ? ( - - ) : ( - - ); - })} + + + + + + {data.map((item) => { + return item.transformType === "update_stream" ? ( + + ) : ( + + ); + })} +
Namespace Stream name +
); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index c68ace162ac9e..9d12a21c53a74 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -27,6 +27,9 @@ &.minus { color: colors.$red; } + &.mod { + color: colors.$blue-100; + } } .syncModeBox { @@ -42,6 +45,6 @@ } } -.name { - width: 230px; +.nameCell { + width: 150px; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 6a521ce44351a..82ebf8443d265 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -2,12 +2,13 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; +import { ModificationIcon } from "./ModificationIcon"; import styles from "./StreamRow.module.scss"; interface StreamRowProps { - item: StreamTransform; + item: StreamTransform | FieldTransform; catalog: AirbyteCatalog; } @@ -30,7 +31,11 @@ export const StreamRow: React.FC = ({ item, catalog }) => { // const itemType = item.transformType.includes("stream") ? "stream" : "field"; - const diffType = item.transformType.includes("add") ? "remove" : "add"; + const diffType = item.transformType.includes("add") + ? "add" + : item.transformType.includes("remove") + ? "remove" + : "update"; const rowStyle = classnames(styles.row, { [styles.add]: diffType === "add", [styles.remove]: diffType === "remove", @@ -39,27 +44,46 @@ export const StreamRow: React.FC = ({ item, catalog }) => { const iconStyle = classnames(styles.icon, { [styles.plus]: diffType === "add", [styles.minus]: diffType === "remove", + [styles.mod]: diffType === "update", }); - const streamConfig = catalog.streams.find( - (stream) => - stream.stream?.namespace === item.streamDescriptor.namespace && stream.stream?.name === item.streamDescriptor.name - )?.config; + let syncModeString = null; + let streamConfig = null; + let namespace = null; + // const fieldType = null; - const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; + let itemName = ""; + + if ("streamDescriptor" in item) { + streamConfig = catalog.streams.find( + (stream) => + stream.stream?.namespace === item.streamDescriptor.namespace && + stream.stream?.name === item.streamDescriptor.name + )?.config; + syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; + itemName = item.streamDescriptor.name; + namespace = item.streamDescriptor.namespace; + } else if ("fieldName" in item) { + itemName = item.fieldName[item.fieldName.length - 1]; + // fieldType = item.updateFieldSchema?.newSchema; + } return ( -
+ {diffType === "add" ? ( - ) : ( + ) : diffType === "remove" ? ( + ) : ( + )} -
{item.streamDescriptor.name}
- {diffType === "remove" && ( - // streamConfig?.selected && - + {namespace && {namespace}} + {itemName} + {syncModeString && streamConfig && streamConfig?.selected && ( + + + )} -
+ ); }; From fbd4760ec5188bc3377d1fa335d53c82dfa16b71 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 1 Jul 2022 10:47:02 -0400 Subject: [PATCH 11/48] fix atrocities of table rendering, move header to own component --- .../CatalogDiffModal.module.scss | 2 +- .../CatalogDiffAccordion.module.scss | 3 +- .../components/CatalogDiffAccordion.tsx | 40 ++++++++---- .../components/CatalogDiffSection.module.scss | 18 ++++-- .../components/CatalogDiffSection.tsx | 64 ++++++++++--------- .../components/DiffFieldTable.module.scss | 8 +++ .../components/DiffFieldTable.tsx | 20 ++++++ .../components/DiffHeader.tsx | 25 ++++++++ .../components/ModificationIcon.tsx | 8 +-- .../CatalogDiffModal/components/StreamRow.tsx | 16 +++-- 10 files changed, 140 insertions(+), 64 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss index c7fffb93ed009..fc7d0028baa5d 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss @@ -7,6 +7,6 @@ .buttonContainer { display: flex; flex-direction: row; - justify-content: end; + justify-content: flex-end; margin: 20px 15px 20px 15px; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss index 36a1a51bd8d2c..cb2b105254296 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss @@ -1,4 +1,5 @@ -@forward "../components/StreamRow.module.scss"; +@use "../components/StreamRow.module.scss"; +@use "../components/CatalogDiffSection.module.scss"; .accordionContainer { width: 100%; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 0736a748c9bcf..9e6a8be3bb246 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -5,6 +5,7 @@ import { Disclosure as Accordion } from "@headlessui/react"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import styles from "./CatalogDiffAccordion.module.scss"; +import { DiffHeader } from "./DiffHeader"; import { ModificationIcon } from "./ModificationIcon"; interface CatalogDiffAccordionProps { @@ -14,7 +15,6 @@ interface CatalogDiffAccordionProps { export const CatalogDiffAccordion: React.FC = ({ data }) => { //do we already have a reusable accordion that accepts children? if so use that... - console.log(data); //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? // /* TODO: 1. Timebox trying out a Headless UI accordion here, otherwise can implement our own @@ -22,10 +22,10 @@ export const CatalogDiffAccordion: React.FC = ({ data // 3. maybe a cimpler way to pass those props? // */ - const fieldTransforms = data.updateStream; - const addedFields = fieldTransforms?.filter((item) => item.transformType === "add_field"); - const removedFields = fieldTransforms?.filter((item) => item.transformType === "remove_field"); - const updatedFields = fieldTransforms?.filter((item) => item.transformType === "update_field_schema"); + const fieldTransforms = data.updateStream || []; + const addedFields = fieldTransforms.filter((item) => item.transformType === "add_field"); + const removedFields = fieldTransforms.filter((item) => item.transformType === "remove_field"); + const updatedFields = fieldTransforms.filter((item) => item.transformType === "update_field_schema"); return (
@@ -35,18 +35,32 @@ export const CatalogDiffAccordion: React.FC = ({ data {" "} {open ? : } - {data.streamDescriptor.namespace} - {data.streamDescriptor.name} +
{data.streamDescriptor.namespace}
+
{data.streamDescriptor.name}
 - howdy + + {removedFields.length > 0 && ( +
+ + {/* */} +
+ )} + {addedFields.length > 0 && ( +
+ + {/* */} +
+ )} + {updatedFields.length > 0 && ( +
+ + {/* */} +
+ )} + )}
- // - // {addedFields.length > 1 && } - // {removedFields.length > 1 && } - // {updatedFields.length > 1 && } - // ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss index 31ec705ac240e..80b056ea85466 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss @@ -6,13 +6,6 @@ flex-direction: column; } -.sectionHeader { - font-size: 14px; - font-weight: 500; - line-height: 17px; - padding: 15px 20px 15px 20px; -} - .sectionSubHeader { display: flex; flex-direction: row; @@ -31,3 +24,14 @@ line-height: 12px; } } + +.sectionHeader { + font-size: 14px; + font-weight: 500; + line-height: 17px; + padding: 15px 20px 15px 20px; +} + +.padLeft { + padding-left: 50px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index 354e3e2feb4fd..d34efa07ec478 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -1,10 +1,10 @@ import classnames from "classnames"; -import { FormattedMessage } from "react-intl"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import { CatalogDiffAccordion } from "./CatalogDiffAccordion"; import styles from "./CatalogDiffSection.module.scss"; +import { DiffHeader, DiffType, DiffVerb } from "./DiffHeader"; import { StreamRow } from "./StreamRow"; interface StreamSectionProps { @@ -14,50 +14,52 @@ interface StreamSectionProps { export const CatalogDiffSection: React.FC = ({ data, catalog }) => { //note: do we have to send the catalog along for a field? - const diffVerb = data[0].transformType.includes("add") + const diffVerb: DiffVerb = data[0].transformType.includes("add") ? "new" : data[0].transformType.includes("remove") ? "removed" - : data[0].transformType.includes("update") - ? "changed" - : undefined; + : "changed"; - const diffType = data[0].transformType.includes("stream") - ? "stream" - : data[0].transformType.includes("field") - ? "field" - : undefined; - - console.log(data[0].transformType); + const diffType: DiffType = data[0].transformType.includes("stream") ? "stream" : "field"; const subheaderStyles = classnames(styles.sectionSubHeader, { [styles.padLeft]: data[0].transformType === "update_stream", }); + if (!diffVerb || !diffType) { + return null; + } + return (
- {data.length}{" "} - , - }} - /> +
- - - - - {data.map((item) => { - return item.transformType === "update_stream" ? ( - - ) : ( - - ); - })} + + + + + + + + {data.map((item) => { + return item.transformType === "update_stream" ? ( + + + + ) : ( + + ); + })} +
Namespace Stream name -
Namespace Stream name +
+ +
); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss new file mode 100644 index 0000000000000..9943a04e3f92c --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -0,0 +1,8 @@ +@use "./CatalogDiffSection.module.scss"; + +.accordionSubHeader { + @extend .sectionSubHeader; + & th { + font-size: 10px; + } +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx new file mode 100644 index 0000000000000..e0da95c6aa8c6 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -0,0 +1,20 @@ +import { FieldTransform } from "core/request/AirbyteClient"; + +import styles from "./DiffFieldTable.module.scss"; +import { DiffHeader } from "./DiffHeader"; + +interface DiffFieldTableProps { + fieldTransforms: FieldTransform[]; +} + +export const CatalogDiffFieldTable: React.FC = ({ fieldTransforms }) => { + return ( + + + + +
+ +
+ ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx new file mode 100644 index 0000000000000..b4272bcd28a1b --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx @@ -0,0 +1,25 @@ +import { FormattedMessage } from "react-intl"; + +export type DiffVerb = "new" | "removed" | "changed"; + +export type DiffType = "field" | "stream"; + +interface DiffHeaderProps { + diffCount: number; + diffVerb: DiffVerb; + diffType: DiffType; +} + +export const DiffHeader: React.FC = ({ diffCount, diffVerb, diffType }) => { + return ( +
+ {diffCount}{" "} + , + }} + /> +
+ ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx index 7da4590b496d6..224fa510d24b0 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx @@ -2,14 +2,14 @@ export const ModificationIcon: React.FC = () => { return ( diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 82ebf8443d265..5936d28823224 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -70,13 +70,15 @@ export const StreamRow: React.FC = ({ item, catalog }) => { return (
- {diffType === "add" ? ( - - ) : diffType === "remove" ? ( - - ) : ( - - )} + + {diffType === "add" ? ( + + ) : diffType === "remove" ? ( + + ) : ( + + )} + {namespace && {namespace}} {itemName} {syncModeString && streamConfig && streamConfig?.selected && ( From b215e5e186645f452a2c1795fedb0ae22cb9c94b Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 1 Jul 2022 14:26:28 -0400 Subject: [PATCH 12/48] headers cleanup --- .../components/CatalogDiffAccordion.module.scss | 4 ++-- .../components/CatalogDiffAccordion.tsx | 17 +++++++++++++---- .../components/CatalogDiffSection.module.scss | 6 ++++-- .../components/CatalogDiffSection.tsx | 4 +++- .../components/StreamRow.module.scss | 5 +++++ 5 files changed, 27 insertions(+), 9 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss index cb2b105254296..5f557fbdeaf7b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss @@ -1,5 +1,5 @@ -@use "../components/StreamRow.module.scss"; -@use "../components/CatalogDiffSection.module.scss"; +@forward "../components/StreamRow.module.scss"; +@forward "../components/CatalogDiffSection.module.scss"; .accordionContainer { width: 100%; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 9e6a8be3bb246..f5e1315a1a696 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -1,6 +1,7 @@ import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Disclosure as Accordion } from "@headlessui/react"; +import classnames from "classnames"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; @@ -27,16 +28,24 @@ export const CatalogDiffAccordion: React.FC = ({ data const removedFields = fieldTransforms.filter((item) => item.transformType === "remove_field"); const updatedFields = fieldTransforms.filter((item) => item.transformType === "update_field_schema"); + // eslint-disable-next-line css-modules/no-undef-class + const nameCellStyle = classnames(styles.nameCell, styles.row); + return (
{({ open }) => ( <> - {" "} - {open ? : } -
{data.streamDescriptor.namespace}
-
{data.streamDescriptor.name}
+ +
+ {open ? : } + {data.streamDescriptor.namespace} +
+
+ {" "} + {data.streamDescriptor.name} +
{removedFields.length > 0 && ( diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss index 80b056ea85466..f056b77f03b60 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.module.scss @@ -10,7 +10,7 @@ display: flex; flex-direction: row; align-items: center; - padding: 0px 10px 0px 45px; + padding: 0px 10px 0px 40px; gap: 10px; width: 100%; height: 22px; @@ -33,5 +33,7 @@ } .padLeft { - padding-left: 50px; + & th { + padding-left: 25px; + } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index d34efa07ec478..b1e79ac8ecc2f 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -26,6 +26,8 @@ export const CatalogDiffSection: React.FC = ({ data, catalog [styles.padLeft]: data[0].transformType === "update_stream", }); + console.log(subheaderStyles); + if (!diffVerb || !diffType) { return null; } @@ -39,7 +41,7 @@ export const CatalogDiffSection: React.FC = ({ data, catalog Namespace - Stream name + Stream name diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index 9d12a21c53a74..2efcca4b26927 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -47,4 +47,9 @@ .nameCell { width: 150px; + text-align: left; + & .row { + display: flex; + flex-direction: row; + } } From c9daed9dda73cffca3f429aa9bd7938dac957f49 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 1 Jul 2022 14:32:48 -0400 Subject: [PATCH 13/48] headers cleanup --- .../components/CatalogDiffAccordion.tsx | 17 ++++++++++------- .../components/DiffFieldTable.tsx | 3 ++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index f5e1315a1a696..f6005d5fa82d3 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -3,10 +3,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Disclosure as Accordion } from "@headlessui/react"; import classnames from "classnames"; +import { ImageBlock } from "components"; + import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import styles from "./CatalogDiffAccordion.module.scss"; -import { DiffHeader } from "./DiffHeader"; +import { DiffFieldTable } from "./DiffFieldTable"; import { ModificationIcon } from "./ModificationIcon"; interface CatalogDiffAccordionProps { @@ -46,24 +48,25 @@ export const CatalogDiffAccordion: React.FC = ({ data {" "} {data.streamDescriptor.name}
+
+ +
{removedFields.length > 0 && (
- - {/* */} + {/* */} +
)} {addedFields.length > 0 && (
- - {/* */} +
)} {updatedFields.length > 0 && (
- - {/* */} +
)} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index e0da95c6aa8c6..02336aae95e08 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -7,13 +7,14 @@ interface DiffFieldTableProps { fieldTransforms: FieldTransform[]; } -export const CatalogDiffFieldTable: React.FC = ({ fieldTransforms }) => { +export const DiffFieldTable: React.FC = ({ fieldTransforms }) => { return ( +
Data type
); From f94c2aff4ace834676c61eb8f6cee8e5db8dd7fc Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 1 Jul 2022 14:40:00 -0400 Subject: [PATCH 14/48] imageblock more flexible --- .../components/ImageBlock/ImageBlock.module.scss | 15 +++++++++++++++ .../src/components/ImageBlock/ImageBlock.tsx | 6 +++++- .../components/CatalogDiffAccordion.tsx | 4 +++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss index 9c50ae6fa8fcc..3b719da207182 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss @@ -40,3 +40,18 @@ color: colors.$white; padding: 3px 0 3px; } + +.green { + background: colors.$green; + color: colors.$white; +} + +.red { + background: colors.$red; + color: colors.$white; +} + +.blue { + background: colors.$blue; + color: colors.$white; +} diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 77dec16e4f0e1..2d0952d1651b1 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -9,14 +9,18 @@ interface ImageBlockProps { img?: string; num?: number; small?: boolean; + color?: string; } -export const ImageBlock: React.FC = ({ img, num, small }) => { +export const ImageBlock: React.FC = ({ img, num, small, color }) => { const imageCircleClassnames = classnames({ [styles.circle]: num, [styles.iconContainer]: !num || num === undefined, [styles.small]: small && !num, [styles.darkBlue]: !small && num, + [styles.green]: color === "green", + [styles.red]: color === "red", + [styles.blue]: color === "blue", }); return (
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index f6005d5fa82d3..c58446f6f1ced 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -49,7 +49,9 @@ export const CatalogDiffAccordion: React.FC = ({ data {data.streamDescriptor.name}
- + {removedFields.length > 0 && } + {addedFields.length > 0 && } + {updatedFields.length > 0 && }
From 9fd2e03948efa2d04aaf319673ba9d6920988630 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 1 Jul 2022 15:26:12 -0400 Subject: [PATCH 15/48] progress on table todo: consolidate, complete --- .../ImageBlock/ImageBlock.module.scss | 31 ++++++------ .../src/components/ImageBlock/ImageBlock.tsx | 11 ++-- .../CatalogDiffAccordion.module.scss | 8 +++ .../components/CatalogDiffAccordion.tsx | 14 +++--- .../components/CatalogDiffSection.tsx | 2 - .../components/DiffFieldTable.tsx | 25 +++++++--- .../components/FieldRow.module.scss | 39 +++++++++++++++ .../CatalogDiffModal/components/FieldRow.tsx | 50 +++++++++++++++++++ .../CatalogDiffModal/components/StreamRow.tsx | 8 +-- 9 files changed, 148 insertions(+), 40 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss index 3b719da207182..cf1e1e520dee5 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss @@ -21,6 +21,20 @@ &.darkBlue { background: colors.$dark-blue-100; } + &.green { + background: colors.$green; + color: colors.$white; + } + + &.red { + background: colors.$red; + color: colors.$white; + } + + &.blue { + background: colors.$blue; + color: colors.$white; + } } .small { @@ -39,19 +53,8 @@ font-size: 10px; color: colors.$white; padding: 3px 0 3px; -} - -.green { - background: colors.$green; - color: colors.$white; -} -.red { - background: colors.$red; - color: colors.$white; -} - -.blue { - background: colors.$blue; - color: colors.$white; + &.light { + font-weight: 500; + } } diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 2d0952d1651b1..08e2f26f90b3f 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -10,21 +10,26 @@ interface ImageBlockProps { num?: number; small?: boolean; color?: string; + light?: boolean; } -export const ImageBlock: React.FC = ({ img, num, small, color }) => { +export const ImageBlock: React.FC = ({ img, num, small, color, light }) => { const imageCircleClassnames = classnames({ [styles.circle]: num, [styles.iconContainer]: !num || num === undefined, [styles.small]: small && !num, - [styles.darkBlue]: !small && num, + [styles.darkBlue]: !small && num && !color, [styles.green]: color === "green", [styles.red]: color === "red", [styles.blue]: color === "blue", + [styles.light]: light, }); + + const numberStyles = classnames(styles.number, { [styles.light]: light }); + return (
- {num ?
{num}
:
{getIcon(img)}
} + {num ?
{num}
:
{getIcon(img)}
}
); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss index 5f557fbdeaf7b..b9da1b9414651 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss @@ -13,6 +13,14 @@ display: flex; flex-direction: row; align-items: center; + justify-content: flex-start; gap: 10px; padding: 5px 30px 5px 20px; } + +.iconBlock { + display: flex; + flex-direction: row; + gap: 1px; + margin-left: auto; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index c58446f6f1ced..9588628772e38 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -48,27 +48,27 @@ export const CatalogDiffAccordion: React.FC = ({ data {" "} {data.streamDescriptor.name}
-
- {removedFields.length > 0 && } - {addedFields.length > 0 && } - {updatedFields.length > 0 && } +
+ {removedFields.length > 0 && } + {addedFields.length > 0 && } + {updatedFields.length > 0 && }
{removedFields.length > 0 && (
{/* */} - +
)} {addedFields.length > 0 && (
- +
)} {updatedFields.length > 0 && (
- +
)} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx index b1e79ac8ecc2f..3825e1d34149c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffSection.tsx @@ -26,8 +26,6 @@ export const CatalogDiffSection: React.FC = ({ data, catalog [styles.padLeft]: data[0].transformType === "update_stream", }); - console.log(subheaderStyles); - if (!diffVerb || !diffType) { return null; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 02336aae95e08..2e9c4f79bd1c3 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -1,21 +1,30 @@ import { FieldTransform } from "core/request/AirbyteClient"; import styles from "./DiffFieldTable.module.scss"; -import { DiffHeader } from "./DiffHeader"; +import { DiffHeader, DiffVerb } from "./DiffHeader"; +import { FieldRow } from "./FieldRow"; interface DiffFieldTableProps { fieldTransforms: FieldTransform[]; + diffVerb: DiffVerb; } -export const DiffFieldTable: React.FC = ({ fieldTransforms }) => { +export const DiffFieldTable: React.FC = ({ fieldTransforms, diffVerb }) => { return ( - - - - + + + + {diffVerb === "changed" && } + + + + {fieldTransforms.map((transform) => { + return ; + })} +
- - Data type
+ + Data type
); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss new file mode 100644 index 0000000000000..4ecb2abbf0779 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -0,0 +1,39 @@ +@use "../../../../scss/colors"; + +.row { + display: flex; + flex-direction: row; + height: 40px; + align-items: flex-start; + padding: 5px 20px 5px 20px; + gap: 10px; + border-bottom: 1px solid colors.$white; + width: 100%; +} + +.rowContent { + height: 35px; + font-size: 12px; + &.add { + background-color: colors.$green-50; + } + &.remove { + background-color: colors.$red-50; + } + &.update { + background-color: colors.$grey-50; + } +} + +.icon { + margin-top: -1px; + &.plus { + color: colors.$green; + } + &.minus { + color: colors.$red; + } + &.mod { + color: colors.$blue-100; + } +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx new file mode 100644 index 0000000000000..643ff2c28faf2 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -0,0 +1,50 @@ +import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classnames from "classnames"; + +import { FieldTransform } from "core/request/AirbyteClient"; + +import styles from "./FieldRow.module.scss"; +import { ModificationIcon } from "./ModificationIcon"; + +interface FieldRowProps { + transform: FieldTransform; +} + +export const FieldRow: React.FC = ({ transform }) => { + // const transformType = transform.transformType; + const fieldName = transform.fieldName[transform.fieldName.length - 1]; + const diffType = transform.transformType.includes("add") + ? "add" + : transform.transformType.includes("remove") + ? "remove" + : "update"; + const fieldType = transform.updateFieldSchema?.newSchema.type; + + const contentStyle = classnames(styles.rowContent, { + [styles.add]: diffType === "add", + [styles.remove]: diffType === "remove", + }); + + const iconStyle = classnames(styles.icon, { + [styles.plus]: diffType === "add", + [styles.minus]: diffType === "remove", + [styles.mod]: diffType === "update", + }); + + return ( + + + {diffType === "add" ? ( + + ) : diffType === "remove" ? ( + + ) : ( + + )} + + {fieldName} + {fieldType} + + ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 5936d28823224..3400db838726f 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -2,13 +2,13 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; -import { AirbyteCatalog, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import { ModificationIcon } from "./ModificationIcon"; import styles from "./StreamRow.module.scss"; interface StreamRowProps { - item: StreamTransform | FieldTransform; + item: StreamTransform; catalog: AirbyteCatalog; } @@ -50,7 +50,6 @@ export const StreamRow: React.FC = ({ item, catalog }) => { let syncModeString = null; let streamConfig = null; let namespace = null; - // const fieldType = null; let itemName = ""; @@ -63,9 +62,6 @@ export const StreamRow: React.FC = ({ item, catalog }) => { syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; itemName = item.streamDescriptor.name; namespace = item.streamDescriptor.namespace; - } else if ("fieldName" in item) { - itemName = item.fieldName[item.fieldName.length - 1]; - // fieldType = item.updateFieldSchema?.newSchema; } return ( From a5d47f8f3123a4238cfb37e512b66d9dbb3510c1 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 6 Jul 2022 16:08:42 -0400 Subject: [PATCH 16/48] styling good, animation TODO --- .../components/CatalogDiffAccordion.tsx | 63 ++++++++++--------- .../components/DiffFieldTable.module.scss | 18 ++++++ .../components/DiffFieldTable.tsx | 2 +- .../components/FieldRow.module.scss | 38 ++++++++--- .../CatalogDiffModal/components/FieldRow.tsx | 35 ++++++++--- 5 files changed, 105 insertions(+), 51 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx index 9588628772e38..65779e7dc3560 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx @@ -1,6 +1,6 @@ import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Disclosure as Accordion } from "@headlessui/react"; +import { Disclosure, Transition } from "@headlessui/react"; import classnames from "classnames"; import { ImageBlock } from "components"; @@ -17,14 +17,6 @@ interface CatalogDiffAccordionProps { } export const CatalogDiffAccordion: React.FC = ({ data }) => { - //do we already have a reusable accordion that accepts children? if so use that... - //todo: this is basically the same set of filters as what happens at the root level with the streams... should that logic be exported/combined? - - // /* TODO: 1. Timebox trying out a Headless UI accordion here, otherwise can implement our own - // 2. Accordion will have a header with the caret, the name, and the number of added/removed/udpated fields... - // 3. maybe a cimpler way to pass those props? - // */ - const fieldTransforms = data.updateStream || []; const addedFields = fieldTransforms.filter((item) => item.transformType === "add_field"); const removedFields = fieldTransforms.filter((item) => item.transformType === "remove_field"); @@ -35,10 +27,10 @@ export const CatalogDiffAccordion: React.FC = ({ data return (
- + {({ open }) => ( <> - +
{open ? : } @@ -53,28 +45,37 @@ export const CatalogDiffAccordion: React.FC = ({ data {addedFields.length > 0 && } {updatedFields.length > 0 && }
- - - {removedFields.length > 0 && ( -
- {/* */} - -
- )} - {addedFields.length > 0 && ( -
- -
- )} - {updatedFields.length > 0 && ( -
- -
- )} - + + + + {removedFields.length > 0 && ( +
+ +
+ )} + {addedFields.length > 0 && ( +
+ +
+ )} + {updatedFields.length > 0 && ( +
+ +
+ )} + + )} - +
); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index 9943a04e3f92c..7ec077e130cef 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -4,5 +4,23 @@ @extend .sectionSubHeader; & th { font-size: 10px; + width: 228px; + padding-left: 15px; } } + +.table { + width: 100%; +} + +tbody > tr:first-of-type > td:nth-of-type(2) { + border-radius: 6px 6px 0px 0px; +} + +tbody > tr:last-of-type > td:nth-of-type(2) { + border-radius: 0px 0px 6px 6px; +} + +tbody > tr:only-of-type > td:nth-of-type(2) { + border-radius: 6px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 2e9c4f79bd1c3..4bf31c339fb7c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -11,7 +11,7 @@ interface DiffFieldTableProps { export const DiffFieldTable: React.FC = ({ fieldTransforms, diffVerb }) => { return ( - +
- + + + {fieldType && ( + )} - - ); }; From af61e73f177473b90b5721932a0784a95ebc4e93 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 8 Jul 2022 12:02:45 -0400 Subject: [PATCH 17/48] self review pt. 1 --- .../CatalogDiffModal/CatalogDiffModal.tsx | 60 ++----------------- ....module.scss => DiffAccordion.module.scss} | 2 +- ...logDiffAccordion.tsx => DiffAccordion.tsx} | 19 +++--- .../components/DiffFieldTable.module.scss | 2 +- ...on.module.scss => DiffSection.module.scss} | 0 ...CatalogDiffSection.tsx => DiffSection.tsx} | 7 +-- .../CatalogDiffModal/components/FieldRow.tsx | 4 +- .../components/StreamRow.module.scss | 5 +- .../CatalogDiffModal/components/StreamRow.tsx | 46 ++++---------- 9 files changed, 35 insertions(+), 110 deletions(-) rename airbyte-webapp/src/views/Connection/CatalogDiffModal/components/{CatalogDiffAccordion.module.scss => DiffAccordion.module.scss} (87%) rename airbyte-webapp/src/views/Connection/CatalogDiffModal/components/{CatalogDiffAccordion.tsx => DiffAccordion.tsx} (88%) rename airbyte-webapp/src/views/Connection/CatalogDiffModal/components/{CatalogDiffSection.module.scss => DiffSection.module.scss} (100%) rename airbyte-webapp/src/views/Connection/CatalogDiffModal/components/{CatalogDiffSection.tsx => DiffSection.tsx} (87%) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 889b1e9a81513..e68f854939273 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -7,7 +7,7 @@ import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; import { Modal } from "../../../components/Modal"; import styles from "./CatalogDiffModal.module.scss"; -import { CatalogDiffSection } from "./components/CatalogDiffSection"; +import { CatalogDiffSection } from "./components/DiffSection"; interface CatalogDiffModalProps { catalogDiff: CatalogDiff; @@ -15,61 +15,9 @@ interface CatalogDiffModalProps { setDiffAcknowledged: Dispatch>; } export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { - let addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); - let removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); - let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); - - if (!addedStreams.length) { - addedStreams = [ - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "banana" }, - }, - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "carrot" }, - }, - ]; - } - if (!removedStreams.length) { - removedStreams = [ - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "dragonfruit" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "eclair" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "fishcake" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, - }, - ]; - } - if (!updatedStreams.length) { - updatedStreams = [ - { - transformType: "update_stream", - streamDescriptor: { namespace: "apple", name: "harissa_paste" }, - updateStream: [ - { transformType: "add_field", fieldName: ["users", "phone"] }, - { transformType: "add_field", fieldName: ["users", "email"] }, - { transformType: "remove_field", fieldName: ["users", "lastName"] }, - - { - transformType: "update_field_schema", - fieldName: ["users", "address"], - updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, - }, - ], - }, - ]; - } + const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); + const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); + const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); return ( } onClose={() => null}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss similarity index 87% rename from airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss rename to airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss index b9da1b9414651..0c02991614136 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -1,5 +1,5 @@ @forward "../components/StreamRow.module.scss"; -@forward "../components/CatalogDiffSection.module.scss"; +@forward "../components/DiffSection.module.scss"; .accordionContainer { width: 100%; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx similarity index 88% rename from airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx rename to airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 65779e7dc3560..0c075d663a56b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/CatalogDiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -7,17 +7,22 @@ import { ImageBlock } from "components"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; -import styles from "./CatalogDiffAccordion.module.scss"; +import styles from "./DiffAccordion.module.scss"; import { DiffFieldTable } from "./DiffFieldTable"; import { ModificationIcon } from "./ModificationIcon"; -interface CatalogDiffAccordionProps { +interface DiffAccordionProps { data: StreamTransform; // stream transforms with type 'update_stream' catalog: AirbyteCatalog; } -export const CatalogDiffAccordion: React.FC = ({ data }) => { - const fieldTransforms = data.updateStream || []; +export const DiffAccordion: React.FC = ({ data }) => { + const fieldTransforms = data.updateStream; + + if (!fieldTransforms) { + return null; + } + const addedFields = fieldTransforms.filter((item) => item.transformType === "add_field"); const removedFields = fieldTransforms.filter((item) => item.transformType === "remove_field"); const updatedFields = fieldTransforms.filter((item) => item.transformType === "update_field_schema"); @@ -36,16 +41,14 @@ export const CatalogDiffAccordion: React.FC = ({ data {open ? : } {data.streamDescriptor.namespace} -
- {" "} - {data.streamDescriptor.name} -
+
{data.streamDescriptor.name}
{removedFields.length > 0 && } {addedFields.length > 0 && } {updatedFields.length > 0 && }
+ {/* TODO: can't get transition to play nicely... */} = ({ data, catalog }) => { - //note: do we have to send the catalog along for a field? const diffVerb: DiffVerb = data[0].transformType.includes("add") ? "new" : data[0].transformType.includes("remove") @@ -48,7 +47,7 @@ export const CatalogDiffSection: React.FC = ({ data, catalog return item.transformType === "update_stream" ? ( ) : ( diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index 0c5cda511e2f6..dd56922d919d0 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -21,8 +21,6 @@ export const FieldRow: React.FC = ({ transform }) => { const fieldType = transform.updateFieldSchema?.newSchema.type; - const rowStyle = classnames(styles.row, {}); - const iconStyle = classnames(styles.icon, { [styles.plus]: diffType === "add", [styles.minus]: diffType === "remove", @@ -38,7 +36,7 @@ export const FieldRow: React.FC = ({ transform }) => { const updateCellStyle = classnames(styles.cell, styles.update); return ( - + @@ -77,9 +57,9 @@ export const StreamRow: React.FC = ({ item, catalog }) => { {namespace && } - {syncModeString && streamConfig && streamConfig?.selected && ( + {diffType === "remove" && streamConfig?.selected && syncModeString && ( )} From 05dfe0a7ce186b8daa11889309e5ea911722f574 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 11 Jul 2022 12:02:25 -0400 Subject: [PATCH 18/48] cleanup --- .../CatalogDiffModal/CatalogContext.tsx | 21 ++++ .../CatalogDiffModal/CatalogDiffModal.tsx | 76 +++++++++++-- .../components/DiffAccordion.tsx | 101 +++++++++--------- .../components/DiffSection.tsx | 38 +++---- .../components/StreamRow.module.scss | 1 - .../CatalogDiffModal/components/StreamRow.tsx | 27 +++-- 6 files changed, 174 insertions(+), 90 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogContext.tsx diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogContext.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogContext.tsx new file mode 100644 index 0000000000000..f5aacbcf55640 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogContext.tsx @@ -0,0 +1,21 @@ +import { createContext, useContext, useState } from "react"; + +import { AirbyteCatalog } from "core/request/AirbyteClient"; + +// @ts-expect-error Default value provided at implementation +const CatalogContext = createContext>(); + +export const useCatalogState = () => { + const [catalog, setCatalog] = useState(); + + return { + catalog, + setCatalog, + }; +}; + +export const useCatalogContext = () => useContext(CatalogContext); + +export const CatalogProvider: React.FC = ({ children }) => { + return {children}; +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index e68f854939273..a0a9cb1aaeb7a 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -6,8 +6,9 @@ import { LoadingButton } from "components"; import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; import { Modal } from "../../../components/Modal"; +import { CatalogProvider, useCatalogContext } from "./CatalogContext"; import styles from "./CatalogDiffModal.module.scss"; -import { CatalogDiffSection } from "./components/DiffSection"; +import { DiffSection } from "./components/DiffSection"; interface CatalogDiffModalProps { catalogDiff: CatalogDiff; @@ -15,16 +16,77 @@ interface CatalogDiffModalProps { setDiffAcknowledged: Dispatch>; } export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { - const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); - const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); - const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + const { setCatalog } = useCatalogContext(); + setCatalog(catalog); + + // const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); + // const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); + // const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + + let addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); + let removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); + let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + + if (!addedStreams.length) { + addedStreams = [ + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "carrot" }, + }, + ]; + } + if (!removedStreams.length) { + removedStreams = [ + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "dragonfruit" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "eclair" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "fishcake" }, + }, + { + transformType: "remove_stream", + streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, + }, + ]; + } + if (!updatedStreams.length) { + updatedStreams = [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + updateStream: [ + { transformType: "add_field", fieldName: ["users", "phone"] }, + { transformType: "add_field", fieldName: ["users", "email"] }, + { transformType: "remove_field", fieldName: ["users", "lastName"] }, + + { + transformType: "update_field_schema", + fieldName: ["users", "address"], + updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + }, + ], + }, + ]; + } return ( } onClose={() => null}>
- {removedStreams.length > 0 && } - {addedStreams.length > 0 && } - {updatedStreams.length > 0 && } + + {removedStreams.length > 0 && } + {addedStreams.length > 0 && } + {updatedStreams.length > 0 && } +
setDiffAcknowledged(true)}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 0c075d663a56b..5beadf577a65b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -5,7 +5,7 @@ import classnames from "classnames"; import { ImageBlock } from "components"; -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { StreamTransform } from "core/request/AirbyteClient"; import styles from "./DiffAccordion.module.scss"; import { DiffFieldTable } from "./DiffFieldTable"; @@ -13,7 +13,6 @@ import { ModificationIcon } from "./ModificationIcon"; interface DiffAccordionProps { data: StreamTransform; // stream transforms with type 'update_stream' - catalog: AirbyteCatalog; } export const DiffAccordion: React.FC = ({ data }) => { @@ -31,54 +30,58 @@ export const DiffAccordion: React.FC = ({ data }) => { const nameCellStyle = classnames(styles.nameCell, styles.row); return ( -
- - {({ open }) => ( - <> - - -
- {open ? : } - {data.streamDescriptor.namespace} -
-
{data.streamDescriptor.name}
-
- {removedFields.length > 0 && } - {addedFields.length > 0 && } - {updatedFields.length > 0 && } -
- - {/* TODO: can't get transition to play nicely... */} - - - {removedFields.length > 0 && ( -
- +
+ + ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index 84058ad363afa..0e9055756a898 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -1,28 +1,27 @@ import classnames from "classnames"; -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { StreamTransform } from "core/request/AirbyteClient"; import { DiffAccordion } from "./DiffAccordion"; import { DiffHeader, DiffType, DiffVerb } from "./DiffHeader"; import styles from "./DiffSection.module.scss"; import { StreamRow } from "./StreamRow"; -interface StreamSectionProps { - data: StreamTransform[]; - catalog: AirbyteCatalog; +interface DiffSectionProps { + streams: StreamTransform[]; } -export const CatalogDiffSection: React.FC = ({ data, catalog }) => { - const diffVerb: DiffVerb = data[0].transformType.includes("add") +export const DiffSection: React.FC = ({ streams }) => { + const diffVerb: DiffVerb = streams[0].transformType.includes("add") ? "new" - : data[0].transformType.includes("remove") + : streams[0].transformType.includes("remove") ? "removed" : "changed"; - const diffType: DiffType = data[0].transformType.includes("stream") ? "stream" : "field"; + const diffType: DiffType = streams[0].transformType.includes("stream") ? "stream" : "field"; const subheaderStyles = classnames(styles.sectionSubHeader, { - [styles.padLeft]: data[0].transformType === "update_stream", + [styles.padLeft]: streams[0].transformType === "update_stream", }); if (!diffVerb || !diffType) { @@ -32,7 +31,7 @@ export const CatalogDiffSection: React.FC = ({ data, catalog return (
- +
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss index 4ecb2abbf0779..48c55a56f57d2 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -3,26 +3,27 @@ .row { display: flex; flex-direction: row; - height: 40px; - align-items: flex-start; + align-items: center; padding: 5px 20px 5px 20px; gap: 10px; - border-bottom: 1px solid colors.$white; - width: 100%; + height: 35px; + font-size: 12px; } -.rowContent { +.content { + padding-left: 10px; + display: flex; + width: 100%; height: 35px; - font-size: 12px; + border-bottom: 1px solid colors.$white; + align-items: center; + &.add { background-color: colors.$green-50; } &.remove { background-color: colors.$red-50; } - &.update { - background-color: colors.$grey-50; - } } .icon { @@ -37,3 +38,22 @@ color: colors.$blue-100; } } + +.iconCell { + background: white; + width: 20px; + text-align: center; + height: 100%; +} + +.cell { + width: 228px; + &.update { + border-radius: 6px; + & span { + background-color: rgba(98, 94, 255, 0.1); + padding: 7px; + border-radius: 6px; + } + } +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index 643ff2c28faf2..0c5cda511e2f6 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -12,19 +12,16 @@ interface FieldRowProps { } export const FieldRow: React.FC = ({ transform }) => { - // const transformType = transform.transformType; const fieldName = transform.fieldName[transform.fieldName.length - 1]; const diffType = transform.transformType.includes("add") ? "add" : transform.transformType.includes("remove") ? "remove" : "update"; + const fieldType = transform.updateFieldSchema?.newSchema.type; - const contentStyle = classnames(styles.rowContent, { - [styles.add]: diffType === "add", - [styles.remove]: diffType === "remove", - }); + const rowStyle = classnames(styles.row, {}); const iconStyle = classnames(styles.icon, { [styles.plus]: diffType === "add", @@ -32,19 +29,37 @@ export const FieldRow: React.FC = ({ transform }) => { [styles.mod]: diffType === "update", }); + const contentStyle = classnames(styles.content, { + [styles.add]: diffType === "add", + [styles.remove]: diffType === "remove", + [styles.update]: diffType === "update", + }); + + const updateCellStyle = classnames(styles.cell, styles.update); + return ( -
+
{diffType === "add" ? ( ) : diffType === "remove" ? ( ) : ( - + + + + )} + + + {fieldName} + + {fieldType} + {fieldName}{fieldType}
- +
{diffType === "add" ? ( diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index 2efcca4b26927..a38663a8f2366 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -36,13 +36,10 @@ font-size: 11px; line-height: 12px; border-radius: 5px; - background: colors.$grey-100; padding: 5px 9px 5px 9px; width: 276px; opacity: 50%; - &.remove { - background: colors.$red-100; - } + background: colors.$red-100; } .nameCell { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 3400db838726f..1ae4ce4843ee5 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -12,30 +12,17 @@ interface StreamRowProps { catalog: AirbyteCatalog; } -export const SyncModeBox: React.FC<{ syncModeString: string; mode: "remove" | "update" }> = ({ - syncModeString, - mode, -}) => { - const syncModeBoxStyle = classnames(styles.syncModeBox, { - [styles.remove]: mode === "remove", - }); - return
{syncModeString}
; +export const SyncModeBox: React.FC<{ syncModeString: string }> = ({ syncModeString }) => { + return
{syncModeString}
; }; export const StreamRow: React.FC = ({ item, catalog }) => { - // if it's a stream, get the catalog data - // if it's a field, get the field type - - // render the row! - // use the transformType to use classnames to apply condiitonal styling - - // const itemType = item.transformType.includes("stream") ? "stream" : "field"; - const diffType = item.transformType.includes("add") ? "add" : item.transformType.includes("remove") ? "remove" : "update"; + const rowStyle = classnames(styles.row, { [styles.add]: diffType === "add", [styles.remove]: diffType === "remove", @@ -47,22 +34,15 @@ export const StreamRow: React.FC = ({ item, catalog }) => { [styles.mod]: diffType === "update", }); - let syncModeString = null; - let streamConfig = null; - let namespace = null; - - let itemName = ""; + // These properties may or may not exist on any given stream - if ("streamDescriptor" in item) { - streamConfig = catalog.streams.find( - (stream) => - stream.stream?.namespace === item.streamDescriptor.namespace && - stream.stream?.name === item.streamDescriptor.name - )?.config; - syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; - itemName = item.streamDescriptor.name; - namespace = item.streamDescriptor.namespace; - } + const streamConfig = catalog.streams.find( + (stream) => + stream.stream?.namespace === item.streamDescriptor.namespace && stream.stream?.name === item.streamDescriptor.name + )?.config; + const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; + const itemName = item.streamDescriptor.name; + const namespace = item.streamDescriptor.namespace; return (
{namespace}{itemName} - +
+
+ + {({ open }) => ( + <> + + +
+ {open ? : } + {data.streamDescriptor.namespace}
- )} - {addedFields.length > 0 && ( -
- +
{data.streamDescriptor.name}
+
+ {removedFields.length > 0 && } + {addedFields.length > 0 && } + {updatedFields.length > 0 && }
- )} - {updatedFields.length > 0 && ( -
- -
- )} - - - - )} - -
+ + {/* TODO: can't get transition to play nicely... */} + + + {removedFields.length > 0 && ( +
+ +
+ )} + {addedFields.length > 0 && ( +
+ +
+ )} + {updatedFields.length > 0 && ( +
+ +
+ )} + + + + )} + +
+
@@ -43,19 +42,14 @@ export const CatalogDiffSection: React.FC = ({ data, catalog - {data.map((item) => { - return item.transformType === "update_stream" ? ( - - - - ) : ( - { + return stream.transformType === "update_stream" ? ( + + ) : ( + ); })} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index a38663a8f2366..4da5ee346d079 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -1,5 +1,4 @@ @use "../../../../scss/colors"; -// @use "../../../../views/Connection/CatalogTree/StreamHeader"; do this instead of copy/pasting the icon stuff below once import chaos mastered .row { display: flex; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 1ae4ce4843ee5..9d13772f7b649 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -2,24 +2,26 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { StreamTransform } from "core/request/AirbyteClient"; +import { useCatalogContext } from "../CatalogContext"; import { ModificationIcon } from "./ModificationIcon"; import styles from "./StreamRow.module.scss"; interface StreamRowProps { - item: StreamTransform; - catalog: AirbyteCatalog; + stream: StreamTransform; } export const SyncModeBox: React.FC<{ syncModeString: string }> = ({ syncModeString }) => { return
{syncModeString}
; }; -export const StreamRow: React.FC = ({ item, catalog }) => { - const diffType = item.transformType.includes("add") +export const StreamRow: React.FC = ({ stream }) => { + const { catalog } = useCatalogContext(); + + const diffType = stream.transformType.includes("add") ? "add" - : item.transformType.includes("remove") + : stream.transformType.includes("remove") ? "remove" : "update"; @@ -34,15 +36,18 @@ export const StreamRow: React.FC = ({ item, catalog }) => { [styles.mod]: diffType === "update", }); - // These properties may or may not exist on any given stream + console.log(catalog.streams); - const streamConfig = catalog.streams.find( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const streamConfig = catalog!.streams.find( (stream) => - stream.stream?.namespace === item.streamDescriptor.namespace && stream.stream?.name === item.streamDescriptor.name + stream.stream?.namespace === stream.streamDescriptor.namespace && + stream.stream?.name === stream.streamDescriptor.name )?.config; + const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; - const itemName = item.streamDescriptor.name; - const namespace = item.streamDescriptor.namespace; + const itemName = stream.streamDescriptor.name; + const namespace = stream.streamDescriptor.namespace; return ( From 0cd64abea45790aaa124314f20a03abd9f0111e0 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 11 Jul 2022 12:03:07 -0400 Subject: [PATCH 19/48] note --- .../src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index a0a9cb1aaeb7a..bfbb1677a6c57 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -23,6 +23,7 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, // const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); // const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + //todo: remove this for review... this is just to force the modal regardless of your source schema during dev let addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); let removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); From 631faef5629ff13b5a04570e3afcc8ac62cba985 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 11 Jul 2022 12:03:27 -0400 Subject: [PATCH 20/48] note --- .../src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index bfbb1677a6c57..18a09259652af 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -23,7 +23,7 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, // const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); // const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); - //todo: remove this for review... this is just to force the modal regardless of your source schema during dev + //todo: remove this and uncomment above for review... this is just to force the modal regardless of your source schema during dev let addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); let removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); From 81b8d6c85cf4c6c779ba1acc6653f31952695d0e Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 12 Jul 2022 14:50:50 -0400 Subject: [PATCH 21/48] accessibility and i18n improvements --- .../src/components/ImageBlock/ImageBlock.tsx | 5 +- airbyte-webapp/src/locales/en.json | 3 + .../components/ReplicationView.tsx | 17 +- .../CatalogDiffModal/CatalogContext.tsx | 21 --- .../CatalogDiffModal/CatalogDiffModal.tsx | 99 ++++------- .../components/DiffAccordion.module.scss | 7 +- .../components/DiffAccordion.tsx | 157 +++++++++++------- .../components/DiffFieldTable.module.scss | 1 + .../components/DiffFieldTable.tsx | 3 +- .../components/DiffHeader.tsx | 2 +- .../components/DiffSection.module.scss | 6 - .../components/DiffSection.tsx | 56 +++---- .../CatalogDiffModal/components/FieldRow.tsx | 11 +- .../components/FieldSection.module.scss | 26 +++ .../components/FieldSection.tsx | 44 +++++ .../components/StreamRow.module.scss | 5 +- .../CatalogDiffModal/components/StreamRow.tsx | 51 ++---- 17 files changed, 279 insertions(+), 235 deletions(-) delete mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogContext.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 08e2f26f90b3f..a239e42d715c2 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -11,9 +11,10 @@ interface ImageBlockProps { small?: boolean; color?: string; light?: boolean; + ariaLabel?: string; } -export const ImageBlock: React.FC = ({ img, num, small, color, light }) => { +export const ImageBlock: React.FC = ({ img, num, small, color, light, ariaLabel }) => { const imageCircleClassnames = classnames({ [styles.circle]: num, [styles.iconContainer]: !num || num === undefined, @@ -28,7 +29,7 @@ export const ImageBlock: React.FC = ({ img, num, small, color, const numberStyles = classnames(styles.number, { [styles.light]: light }); return ( -
+
{num ?
{num}
:
{getIcon(img)}
}
); diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 450229bc98e20..9b942fae199ba 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -337,6 +337,9 @@ "connection.updateSchema.changed": "{item} with changes", "connection.updateSchema.stream": "{count, plural, one {table} other {tables}}", "connection.updateSchema.field": "{count, plural, one {field} other {fields}}", + "connection.updateSchema.streamName": "Stream name", + "connection.updateSchema.namespace": "Namespace", + "connection.updateSchema.dataType": "Data type", "connection.newConnection": "+ New connection", "connection.newConnectionTitle": "New connection", diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index c137eb7ddba56..71c3366576554 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -190,13 +190,16 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch return ( - {schemaUpdateModalOpen && !diffAcknowledged && connection.catalogDiff && ( - - )} + {schemaUpdateModalOpen && + !diffAcknowledged && + connection.catalogDiff?.transforms && + connection.catalogDiff.transforms.length > 0 && ( + + )} {!isRefreshingCatalog && connection ? ( >(); - -export const useCatalogState = () => { - const [catalog, setCatalog] = useState(); - - return { - catalog, - setCatalog, - }; -}; - -export const useCatalogContext = () => useContext(CatalogContext); - -export const CatalogProvider: React.FC = ({ children }) => { - return {children}; -}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 18a09259652af..7891e5f43380b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -3,91 +3,56 @@ import { FormattedMessage } from "react-intl"; import { LoadingButton } from "components"; -import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; +import { AirbyteCatalog, CatalogDiff, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; import { Modal } from "../../../components/Modal"; -import { CatalogProvider, useCatalogContext } from "./CatalogContext"; import styles from "./CatalogDiffModal.module.scss"; import { DiffSection } from "./components/DiffSection"; +import { FieldSection } from "./components/FieldSection"; interface CatalogDiffModalProps { catalogDiff: CatalogDiff; catalog: AirbyteCatalog; setDiffAcknowledged: Dispatch>; } -export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { - const { setCatalog } = useCatalogContext(); - setCatalog(catalog); - // const addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); - // const removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); - // const updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); +export type DiffVerb = "new" | "removed" | "changed"; + +interface SortedDiff { + newItems: T[]; + removedItems: T[]; + changedItems: T[]; +} + +export const diffReducer = (diffArray: T[]): SortedDiff => { + const sortedDiff: SortedDiff = { newItems: [], removedItems: [], changedItems: [] }; - //todo: remove this and uncomment above for review... this is just to force the modal regardless of your source schema during dev - let addedStreams = catalogDiff.transforms.filter((item) => item.transformType === "add_stream"); - let removedStreams = catalogDiff.transforms.filter((item) => item.transformType === "remove_stream"); - let updatedStreams = catalogDiff.transforms.filter((item) => item.transformType === "update_stream"); + diffArray.filter((streamTransform) => { + if (streamTransform.transformType.includes("add")) { + sortedDiff.newItems.push(streamTransform); + } - if (!addedStreams.length) { - addedStreams = [ - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "banana" }, - }, - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "carrot" }, - }, - ]; - } - if (!removedStreams.length) { - removedStreams = [ - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "dragonfruit" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "eclair" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "fishcake" }, - }, - { - transformType: "remove_stream", - streamDescriptor: { namespace: "apple", name: "gelatin_mold" }, - }, - ]; - } - if (!updatedStreams.length) { - updatedStreams = [ - { - transformType: "update_stream", - streamDescriptor: { namespace: "apple", name: "harissa_paste" }, - updateStream: [ - { transformType: "add_field", fieldName: ["users", "phone"] }, - { transformType: "add_field", fieldName: ["users", "email"] }, - { transformType: "remove_field", fieldName: ["users", "lastName"] }, + if (streamTransform.transformType.includes("remove")) { + sortedDiff.removedItems.push(streamTransform); + } - { - transformType: "update_field_schema", - fieldName: ["users", "address"], - updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, - }, - ], - }, - ]; - } + if (streamTransform.transformType.includes("update")) { + sortedDiff.changedItems.push(streamTransform); + } + return sortedDiff; + }); + console.log(sortedDiff); + return sortedDiff; +}; +export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { + const { newItems, removedItems, changedItems } = diffReducer(catalogDiff.transforms); return ( } onClose={() => null}>
- - {removedStreams.length > 0 && } - {addedStreams.length > 0 && } - {updatedStreams.length > 0 && } - + {removedItems.length > 0 && } + {newItems.length > 0 && } + {changedItems.length > 0 && }
setDiffAcknowledged(true)}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss index 0c02991614136..d0b6e4578ad66 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -15,7 +15,8 @@ align-items: center; justify-content: flex-start; gap: 10px; - padding: 5px 30px 5px 20px; + padding: 5px 30px 5px 0px; + font-weight: 400; } .iconBlock { @@ -24,3 +25,7 @@ gap: 1px; margin-left: auto; } + +.namespace { + padding-left: 0px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 5beadf577a65b..9c1d2e410d8f2 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -1,87 +1,122 @@ import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Disclosure, Transition } from "@headlessui/react"; +import { Disclosure } from "@headlessui/react"; import classnames from "classnames"; +import { useIntl } from "react-intl"; import { ImageBlock } from "components"; import { StreamTransform } from "core/request/AirbyteClient"; +import { diffReducer } from "../CatalogDiffModal"; import styles from "./DiffAccordion.module.scss"; import { DiffFieldTable } from "./DiffFieldTable"; import { ModificationIcon } from "./ModificationIcon"; interface DiffAccordionProps { - data: StreamTransform; // stream transforms with type 'update_stream' + streamTransform: StreamTransform; } -export const DiffAccordion: React.FC = ({ data }) => { - const fieldTransforms = data.updateStream; +export const DiffAccordion: React.FC = ({ streamTransform }) => { + const { formatMessage } = useIntl(); - if (!fieldTransforms) { + if (!streamTransform.updateStream) { return null; } - const addedFields = fieldTransforms.filter((item) => item.transformType === "add_field"); - const removedFields = fieldTransforms.filter((item) => item.transformType === "remove_field"); - const updatedFields = fieldTransforms.filter((item) => item.transformType === "update_field_schema"); + console.log(streamTransform.updateStream); + const { newItems, removedItems, changedItems } = diffReducer(streamTransform.updateStream); // eslint-disable-next-line css-modules/no-undef-class const nameCellStyle = classnames(styles.nameCell, styles.row); + // eslint-disable-next-line css-modules/no-undef-class + const namespaceCellStyles = classnames(styles.nameCell, styles.row, styles.namespace); return ( -
- - +
+ + {({ open }) => ( + <> + + +
+ {open ? : } + {streamTransform.streamDescriptor.namespace} +
+
+ {streamTransform.streamDescriptor.name} +
+
+ {removedItems.length > 0 && ( + + )} + {newItems.length > 0 && ( + + )} + {changedItems.length > 0 && ( + + )} +
+ + + {removedItems.length > 0 && ( +
+ +
+ )} + {newItems.length > 0 && ( +
+ +
+ )} + {changedItems.length > 0 && ( +
+ +
+ )} + + + )} + +
); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index 34a03e1c884a8..42bcfc774ad3a 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -11,6 +11,7 @@ .table { width: 100%; + padding-left: 20px; } tbody > tr:first-of-type > td:nth-of-type(2) { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 4bf31c339fb7c..62824e037e224 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -1,7 +1,8 @@ import { FieldTransform } from "core/request/AirbyteClient"; +import { DiffVerb } from "../CatalogDiffModal"; import styles from "./DiffFieldTable.module.scss"; -import { DiffHeader, DiffVerb } from "./DiffHeader"; +import { DiffHeader } from "./DiffHeader"; import { FieldRow } from "./FieldRow"; interface DiffFieldTableProps { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx index b4272bcd28a1b..d019e2d9631f5 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx @@ -1,6 +1,6 @@ import { FormattedMessage } from "react-intl"; -export type DiffVerb = "new" | "removed" | "changed"; +import { DiffVerb } from "../CatalogDiffModal"; export type DiffType = "field" | "stream"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss index f056b77f03b60..42a09c8e5134c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss @@ -31,9 +31,3 @@ line-height: 17px; padding: 15px 20px 15px 20px; } - -.padLeft { - & th { - padding-left: 25px; - } -} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index 0e9055756a898..d70284b627abd 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -1,40 +1,24 @@ -import classnames from "classnames"; +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; -import { StreamTransform } from "core/request/AirbyteClient"; - -import { DiffAccordion } from "./DiffAccordion"; -import { DiffHeader, DiffType, DiffVerb } from "./DiffHeader"; +import { DiffVerb } from "../CatalogDiffModal"; +import { DiffHeader } from "./DiffHeader"; import styles from "./DiffSection.module.scss"; import { StreamRow } from "./StreamRow"; interface DiffSectionProps { streams: StreamTransform[]; + catalog?: AirbyteCatalog; + diffVerb: DiffVerb; } -export const DiffSection: React.FC = ({ streams }) => { - const diffVerb: DiffVerb = streams[0].transformType.includes("add") - ? "new" - : streams[0].transformType.includes("remove") - ? "removed" - : "changed"; - - const diffType: DiffType = streams[0].transformType.includes("stream") ? "stream" : "field"; - - const subheaderStyles = classnames(styles.sectionSubHeader, { - [styles.padLeft]: streams[0].transformType === "update_stream", - }); - - if (!diffVerb || !diffType) { - return null; - } - +export const DiffSection: React.FC = ({ streams, catalog, diffVerb }) => { return (
- +
- -
-
- - {({ open }) => ( - <> - - -
- {open ? : } - {data.streamDescriptor.namespace} -
-
{data.streamDescriptor.name}
-
- {removedFields.length > 0 && } - {addedFields.length > 0 && } - {updatedFields.length > 0 && } -
- - {/* TODO: can't get transition to play nicely... */} - - - {removedFields.length > 0 && ( -
- -
- )} - {addedFields.length > 0 && ( -
- -
- )} - {updatedFields.length > 0 && ( -
- -
- )} - - - - )} - -
-
- + @@ -43,13 +27,27 @@ export const DiffSection: React.FC = ({ streams }) => { {streams.map((stream) => { - return stream.transformType === "update_stream" ? ( - + catalogStream.stream?.namespace === stream.streamDescriptor.namespace && + catalogStream.stream?.name === stream.streamDescriptor.name + )?.config; + + streamConfig?.syncMode && + streamConfig.destinationSyncMode && + (syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`); + } + + return ( + - ) : ( - ); })} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index dd56922d919d0..e13b9f64463c6 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -1,4 +1,4 @@ -import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { faArrowRight, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; @@ -19,7 +19,8 @@ export const FieldRow: React.FC = ({ transform }) => { ? "remove" : "update"; - const fieldType = transform.updateFieldSchema?.newSchema.type; + const oldType = transform.updateFieldSchema?.oldSchema.type; + const newType = transform.updateFieldSchema?.newSchema.type; const iconStyle = classnames(styles.icon, { [styles.plus]: diffType === "add", @@ -52,9 +53,11 @@ export const FieldRow: React.FC = ({ transform }) => { - {fieldType && ( + {oldType && newType && ( )} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss new file mode 100644 index 0000000000000..a012ea1a59140 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -0,0 +1,26 @@ +@use "./DiffSection.module.scss"; +@use "../../../../scss/colors"; + +ul, +li { + list-style-type: none; + list-style-position: inside; + margin: 0px; + padding: 0px; + height: auto; + font-weight: 400; +} + +.fieldSubHeader { + @extend .sectionSubHeader; + + > div { + @extend.namecell; + text-align: left; + font-weight: 400; + font-size: 10px; + color: colors.$grey; + line-height: 12px; + padding-left: 10px; + } +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx new file mode 100644 index 0000000000000..2c80811145003 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -0,0 +1,44 @@ +import { FormattedMessage, useIntl } from "react-intl"; + +import { StreamTransform } from "core/request/AirbyteClient"; + +import { DiffVerb } from "../CatalogDiffModal"; +import { DiffAccordion } from "./DiffAccordion"; +import { DiffHeader } from "./DiffHeader"; +import styles from "./FieldSection.module.scss"; + +interface FieldSectionProps { + streams: StreamTransform[]; + diffVerb: DiffVerb; +} + +export const FieldSection: React.FC = ({ streams, diffVerb }) => { + const { formatMessage } = useIntl(); + return ( + // eslint-disable-next-line css-modules/no-undef-class +
+ {/* eslint-disable-next-line css-modules/no-undef-class */} +
+ +
+
+ +
+
+ +
+
+
+
    + {streams.map((stream) => { + return ( +
  • + +
    • + ); + })} +
+
+
+ ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index 4da5ee346d079..3efb016cb945d 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -9,6 +9,7 @@ gap: 10px; border-bottom: 1px solid colors.$white; width: 100%; + font-size: 12px; &.add { background-color: colors.$green-50; @@ -36,13 +37,13 @@ line-height: 12px; border-radius: 5px; padding: 5px 9px 5px 9px; - width: 276px; + width: 226px; opacity: 50%; background: colors.$red-100; } .nameCell { - width: 150px; + width: 140px; text-align: left; & .row { display: flex; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 9d13772f7b649..ff47c8afe15af 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -4,57 +4,42 @@ import classnames from "classnames"; import { StreamTransform } from "core/request/AirbyteClient"; -import { useCatalogContext } from "../CatalogContext"; +import { DiffVerb } from "../CatalogDiffModal"; import { ModificationIcon } from "./ModificationIcon"; import styles from "./StreamRow.module.scss"; interface StreamRowProps { - stream: StreamTransform; + streamTransform: StreamTransform; + syncMode?: string; + + diffVerb: DiffVerb; } export const SyncModeBox: React.FC<{ syncModeString: string }> = ({ syncModeString }) => { return
{syncModeString}
; }; -export const StreamRow: React.FC = ({ stream }) => { - const { catalog } = useCatalogContext(); - - const diffType = stream.transformType.includes("add") - ? "add" - : stream.transformType.includes("remove") - ? "remove" - : "update"; - +export const StreamRow: React.FC = ({ streamTransform, syncMode, diffVerb }) => { const rowStyle = classnames(styles.row, { - [styles.add]: diffType === "add", - [styles.remove]: diffType === "remove", + [styles.add]: diffVerb === "new", + [styles.remove]: diffVerb === "removed", }); const iconStyle = classnames(styles.icon, { - [styles.plus]: diffType === "add", - [styles.minus]: diffType === "remove", - [styles.mod]: diffType === "update", + [styles.plus]: diffVerb === "new", + [styles.minus]: diffVerb === "removed", + [styles.mod]: diffVerb === "changed", }); - console.log(catalog.streams); - - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const streamConfig = catalog!.streams.find( - (stream) => - stream.stream?.namespace === stream.streamDescriptor.namespace && - stream.stream?.name === stream.streamDescriptor.name - )?.config; - - const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; - const itemName = stream.streamDescriptor.name; - const namespace = stream.streamDescriptor.namespace; - + const itemName = streamTransform.streamDescriptor.name; + const namespace = streamTransform.streamDescriptor.namespace; + console.log(syncMode); return (
{namespace && } - {diffType === "remove" && streamConfig?.selected && syncModeString && ( + {diffVerb === "removed" && syncMode && ( )} From 584d07c782ef3936b51500a472c71ebf72faab92 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 12 Jul 2022 14:57:31 -0400 Subject: [PATCH 22/48] fix typo in scss --- .../CatalogDiffModal/components/FieldSection.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss index a012ea1a59140..1e7f4bbf307a9 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -15,7 +15,7 @@ li { @extend .sectionSubHeader; > div { - @extend.namecell; + @extend .nameCell; text-align: left; font-weight: 400; font-size: 10px; From 90498e95134345d4bdce60eaf786fd2e7c105961 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 12 Jul 2022 15:13:32 -0400 Subject: [PATCH 23/48] missig i18l things --- .../CatalogDiffModal/components/DiffFieldTable.tsx | 8 +++++++- .../CatalogDiffModal/components/DiffSection.tsx | 10 ++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 62824e037e224..0896d220fe191 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -1,3 +1,5 @@ +import { FormattedMessage } from "react-intl"; + import { FieldTransform } from "core/request/AirbyteClient"; import { DiffVerb } from "../CatalogDiffModal"; @@ -18,7 +20,11 @@ export const DiffFieldTable: React.FC = ({ fieldTransforms, - {diffVerb === "changed" && } + {diffVerb === "changed" && ( + + )} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index d70284b627abd..22a2a8b49ea1d 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -1,3 +1,5 @@ +import { FormattedMessage } from "react-intl"; + import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; import { DiffVerb } from "../CatalogDiffModal"; @@ -20,8 +22,12 @@ export const DiffSection: React.FC = ({ streams, catalog, diff
Namespace Stream name
{fieldName} - {fieldType} + + {oldType} {newType} +
- {diffType === "add" ? ( + {diffVerb === "new" ? ( - ) : diffType === "remove" ? ( + ) : diffVerb === "removed" ? ( ) : ( @@ -62,9 +47,9 @@ export const StreamRow: React.FC = ({ stream }) => { {namespace}{itemName} - +
Data type + +
- - + + From 5043f63b0096d89119f829cec4f4370c405268ed Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 14 Jul 2022 06:13:40 -0400 Subject: [PATCH 24/48] move icon to /icons --- .../components => components/icons}/ModificationIcon.tsx | 2 +- .../Connection/CatalogDiffModal/components/DiffAccordion.tsx | 2 +- .../views/Connection/CatalogDiffModal/components/FieldRow.tsx | 2 +- .../views/Connection/CatalogDiffModal/components/StreamRow.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) rename airbyte-webapp/src/{views/Connection/CatalogDiffModal/components => components/icons}/ModificationIcon.tsx (82%) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx b/airbyte-webapp/src/components/icons/ModificationIcon.tsx similarity index 82% rename from airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx rename to airbyte-webapp/src/components/icons/ModificationIcon.tsx index 224fa510d24b0..0804f327b6c33 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/ModificationIcon.tsx +++ b/airbyte-webapp/src/components/icons/ModificationIcon.tsx @@ -1,6 +1,6 @@ export const ModificationIcon: React.FC = () => { return ( - + Date: Thu, 14 Jul 2022 06:10:19 -0400 Subject: [PATCH 25/48] Update airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- .../src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 7891e5f43380b..008ff53d96533 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -41,7 +41,6 @@ export const diffReducer = (diffArra } return sortedDiff; }); - console.log(sortedDiff); return sortedDiff; }; export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { From 5c95e0e3ae33fdec2e589d396aa9c761fa4ea768 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 14 Jul 2022 06:12:34 -0400 Subject: [PATCH 26/48] Update airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- .../Connection/CatalogDiffModal/components/DiffAccordion.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 1e59f07c4af11..8a1e7950dba27 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -24,7 +24,6 @@ export const DiffAccordion: React.FC = ({ streamTransform }) return null; } - console.log(streamTransform.updateStream); const { newItems, removedItems, changedItems } = diffReducer(streamTransform.updateStream); // eslint-disable-next-line css-modules/no-undef-class From c1ce5eae8dc425297870efe65174d534fe65e170 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 14 Jul 2022 13:49:37 -0700 Subject: [PATCH 27/48] spacing, use ModalFooter --- .../CatalogDiffModal/CatalogDiffModal.module.scss | 11 +++-------- .../Connection/CatalogDiffModal/CatalogDiffModal.tsx | 12 ++++++------ .../components/DiffAccordion.module.scss | 5 +++-- .../CatalogDiffModal/components/DiffAccordion.tsx | 5 ++++- .../components/DiffFieldTable.module.scss | 11 ++++++----- .../components/DiffSection.module.scss | 7 ++++--- .../CatalogDiffModal/components/DiffSection.tsx | 2 +- .../CatalogDiffModal/components/FieldRow.module.scss | 11 ++++++----- .../components/FieldSection.module.scss | 3 ++- .../CatalogDiffModal/components/FieldSection.tsx | 4 ++-- .../components/StreamRow.module.scss | 9 +++++---- 11 files changed, 42 insertions(+), 38 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss index fc7d0028baa5d..3911013fefc87 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss @@ -1,12 +1,7 @@ +@use "../../../scss/variables"; + .modalContent { display: flex; flex-direction: column; - width: 596px; -} - -.buttonContainer { - display: flex; - flex-direction: row; - justify-content: flex-end; - margin: 20px 15px 20px 15px; + width: variables.$width-modal-md; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 008ff53d96533..57aa9344c9eb5 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -1,11 +1,11 @@ import { Dispatch, SetStateAction } from "react"; import { FormattedMessage } from "react-intl"; -import { LoadingButton } from "components"; +import { Button } from "components"; import { AirbyteCatalog, CatalogDiff, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; -import { Modal } from "../../../components/Modal"; +import { Modal, ModalFooter } from "../../../components/Modal"; import styles from "./CatalogDiffModal.module.scss"; import { DiffSection } from "./components/DiffSection"; import { FieldSection } from "./components/FieldSection"; @@ -53,11 +53,11 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, {newItems.length > 0 && } {changedItems.length > 0 && } -
- setDiffAcknowledged(true)}> + +
+ + ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss index d0b6e4578ad66..61cece5a46b6d 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -1,3 +1,4 @@ +@use "../../../../scss/variables"; @forward "../components/StreamRow.module.scss"; @forward "../components/DiffSection.module.scss"; @@ -14,8 +15,8 @@ flex-direction: row; align-items: center; justify-content: flex-start; - gap: 10px; - padding: 5px 30px 5px 0px; + gap: variables.$spacing-md; + padding: variables.$spacing-sm 30px variables.$spacing-sm 0px; font-weight: 400; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 8a1e7950dba27..7aca5322afbdc 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -45,7 +45,10 @@ export const DiffAccordion: React.FC = ({ streamTransform }) {open ? : } {streamTransform.streamDescriptor.namespace} -
+
{streamTransform.streamDescriptor.name}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index 42bcfc774ad3a..ee553a5fcc14b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -1,3 +1,4 @@ +@use "../../../../scss/variables"; @use "./DiffSection.module.scss"; .accordionSubHeader { @@ -5,23 +6,23 @@ & th { font-size: 10px; width: 228px; - padding-left: 15px; + padding-left: variables.$spacing-lg; } } .table { width: 100%; - padding-left: 20px; + padding-left: variables.$spacing-xl; } tbody > tr:first-of-type > td:nth-of-type(2) { - border-radius: 6px 6px 0px 0px; + border-radius: variables.$border-radius-sm variables.$border-radius-sm 0px 0px; } tbody > tr:last-of-type > td:nth-of-type(2) { - border-radius: 0px 0px 6px 6px; + border-radius: 0px 0px variables.$border-radius-sm variables.$border-radius-sm; } tbody > tr:only-of-type > td:nth-of-type(2) { - border-radius: 6px; + border-radius: variables.$border-radius-sm; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss index 42a09c8e5134c..31efe5378b4e1 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss @@ -1,4 +1,5 @@ @use "../../../../scss/colors"; +@use "../../../../scss/variables"; @use "../components/StreamRow.module.scss"; .sectionContainer { @@ -10,8 +11,8 @@ display: flex; flex-direction: row; align-items: center; - padding: 0px 10px 0px 40px; - gap: 10px; + padding: 0px variables.$spacing-md 0px variables.$spacing-2xl; + gap: variables.$spacing-md; width: 100%; height: 22px; @@ -29,5 +30,5 @@ font-size: 14px; font-weight: 500; line-height: 17px; - padding: 15px 20px 15px 20px; + padding: variables.$spacing-lg variables.$spacing-xl; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index 22a2a8b49ea1d..c3f519f1dc1bf 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -26,7 +26,7 @@ export const DiffSection: React.FC = ({ streams, catalog, diff
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss index 48c55a56f57d2..77162e5fa3dd1 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -1,11 +1,12 @@ +@use "../../../../scss/variables"; @use "../../../../scss/colors"; .row { display: flex; flex-direction: row; align-items: center; - padding: 5px 20px 5px 20px; - gap: 10px; + padding: variables.$spacing-sm variables.$spacing-xl; + gap: variables.$spacing-md; height: 35px; font-size: 12px; } @@ -49,11 +50,11 @@ .cell { width: 228px; &.update { - border-radius: 6px; + border-radius: variables.$border-radius-sm; & span { background-color: rgba(98, 94, 255, 0.1); - padding: 7px; - border-radius: 6px; + padding: variables.$spacing-sm; + border-radius: variables.$border-radius-sm; } } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss index 1e7f4bbf307a9..bd70a2def8dd6 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -1,3 +1,4 @@ +@use "../../../../scss/variables"; @use "./DiffSection.module.scss"; @use "../../../../scss/colors"; @@ -21,6 +22,6 @@ li { font-size: 10px; color: colors.$grey; line-height: 12px; - padding-left: 10px; + padding-left: variables.$spacing-md; } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 2c80811145003..766026269ee27 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -24,8 +24,8 @@ export const FieldSection: React.FC = ({ streams, diffVerb })
-
- +
+
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss index 3efb016cb945d..dfa49bf595e12 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -1,12 +1,13 @@ @use "../../../../scss/colors"; +@use "../../../../scss/variables"; .row { display: flex; flex-direction: row; height: 40px; align-items: center; - padding: 5px 20px 5px 20px; - gap: 10px; + padding: variables.$spacing-sm variables.$spacing-xl; + gap: variables.$spacing-md; border-bottom: 1px solid colors.$white; width: 100%; font-size: 12px; @@ -35,8 +36,8 @@ .syncModeBox { font-size: 11px; line-height: 12px; - border-radius: 5px; - padding: 5px 9px 5px 9px; + border-radius: variables.$border-radius-sm; + padding: variables.$spacing-sm variables.$spacing-md; width: 226px; opacity: 50%; background: colors.$red-100; From 7ef0651af301d3340b0a2503a550787e22c629ef Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 14 Jul 2022 12:05:55 -0700 Subject: [PATCH 28/48] Update airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- .../views/Connection/CatalogDiffModal/components/StreamRow.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 398915713990e..59c66e208e5bf 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -33,7 +33,6 @@ export const StreamRow: React.FC = ({ streamTransform, syncMode, const itemName = streamTransform.streamDescriptor.name; const namespace = streamTransform.streamDescriptor.namespace; - console.log(syncMode); return (
{streams.map((stream) => { - let syncModeString; - - if (catalog) { - const streamConfig = catalog.streams.find( - (catalogStream) => - catalogStream.stream?.namespace === stream.streamDescriptor.namespace && - catalogStream.stream?.name === stream.streamDescriptor.name - )?.config; - - streamConfig?.syncMode && - streamConfig.destinationSyncMode && - (syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`); - } - return ( From e5a907681d751f60ef5d7d4f6dfffd44dc55f43e Mon Sep 17 00:00:00 2001 From: tealjulia Date: Mon, 25 Jul 2022 09:26:02 -0400 Subject: [PATCH 35/48] respond to review --- airbyte-webapp/src/components/Modal/ModalBody.module.scss | 2 +- airbyte-webapp/src/components/Modal/ModalBody.tsx | 6 +++--- airbyte-webapp/src/locales/en.json | 6 +++--- .../views/Connection/CatalogDiffModal/CatalogDiffModal.tsx | 2 +- .../CatalogDiffModal/components/DiffAccordion.tsx | 3 +++ .../Connection/CatalogDiffModal/components/DiffHeader.tsx | 2 +- 6 files changed, 12 insertions(+), 9 deletions(-) diff --git a/airbyte-webapp/src/components/Modal/ModalBody.module.scss b/airbyte-webapp/src/components/Modal/ModalBody.module.scss index 3d71004876d95..37d77d314c32a 100644 --- a/airbyte-webapp/src/components/Modal/ModalBody.module.scss +++ b/airbyte-webapp/src/components/Modal/ModalBody.module.scss @@ -5,6 +5,6 @@ overflow: auto; max-width: 100%; &.paddingNone { - padding: 0px 0px 0px 0px; + padding: 0; } } diff --git a/airbyte-webapp/src/components/Modal/ModalBody.tsx b/airbyte-webapp/src/components/Modal/ModalBody.tsx index 917574ba7f3ab..759ebc8833b1a 100644 --- a/airbyte-webapp/src/components/Modal/ModalBody.tsx +++ b/airbyte-webapp/src/components/Modal/ModalBody.tsx @@ -4,12 +4,12 @@ import styles from "./ModalBody.module.scss"; interface ModalBodyProps { maxHeight?: number | string; - padding?: boolean; + padded?: boolean; } -export const ModalBody: React.FC = ({ children, maxHeight, padding }) => { +export const ModalBody: React.FC = ({ children, maxHeight, padded = true }) => { const modalStyles = classnames(styles.modalBody, { - [styles.paddingNone]: padding === false, + [styles.paddingNone]: !padded, }); return (
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 9b942fae199ba..8ce44683a9cfa 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -332,9 +332,9 @@ "connection.updateSchema": "Refresh source schema", "connection.updateSchema.completed": "Refreshed source schema", "connection.updateSchema.confirm": "Confirm", - "connection.updateSchema.new": "new {item}", - "connection.updateSchema.removed": "removed {item}", - "connection.updateSchema.changed": "{item} with changes", + "connection.updateSchema.new": "{value} new {item}", + "connection.updateSchema.removed": "{value} removed {item}", + "connection.updateSchema.changed": "{value} {item} with changes", "connection.updateSchema.stream": "{count, plural, one {table} other {tables}}", "connection.updateSchema.field": "{count, plural, one {field} other {fields}}", "connection.updateSchema.streamName": "Stream name", diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index c1547044d8d56..4ace886626903 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -25,7 +25,7 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, return ( <> - +
{removedItems.length > 0 && } {newItems.length > 0 && } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index f6e88274a5c3b..0472d33eef75b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -62,6 +62,7 @@ export const DiffAccordion: React.FC = ({ streamTransform }) id: "connection.updateSchema.removed", }, { + value: removedItems.length, item: formatMessage({ id: "field" }, { values: { count: removedItems.length } }), } )}`} @@ -77,6 +78,7 @@ export const DiffAccordion: React.FC = ({ streamTransform }) id: "connection.updateSchema.new", }, { + value: newItems.length, item: formatMessage({ id: "field" }, { values: { count: newItems.length } }), } )}`} @@ -92,6 +94,7 @@ export const DiffAccordion: React.FC = ({ streamTransform }) id: "connection.updateSchema.changed", }, { + value: changedItems.length, item: formatMessage({ id: "field" }, { values: { count: changedItems.length } }), } )}`} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx index 78cbc24c4cbee..92f09ca3331c1 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx @@ -13,10 +13,10 @@ interface DiffHeaderProps { export const DiffHeader: React.FC = ({ diffCount, diffVerb, diffType }) => { return (
- {diffCount}{" "} , }} /> From fdc8ac5b12872b9b2fd12a14f69e213bc74ab956 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Mon, 25 Jul 2022 16:06:13 -0400 Subject: [PATCH 36/48] add accordionheader component --- .../CatalogDiffModal/CatalogDiffModal.tsx | 2 +- .../components/DiffAccordion.module.scss | 11 --- .../components/DiffAccordion.tsx | 88 ++----------------- .../DiffAccordionHeader.module.scss | 6 ++ .../components/DiffAccordionHeader.tsx | 49 +++++++++++ .../components/DiffFieldTable.tsx | 2 +- .../components/DiffHeader.tsx | 2 +- .../components/DiffIconBlock.module.scss | 6 ++ .../components/DiffIconBlock.tsx | 67 ++++++++++++++ .../components/DiffSection.tsx | 2 +- .../components/FieldSection.tsx | 2 +- .../CatalogDiffModal/components/StreamRow.tsx | 2 +- .../CatalogDiffModal/{utils => }/types.tsx | 0 .../CatalogDiffModal/{utils => }/utils.tsx | 0 14 files changed, 143 insertions(+), 96 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx rename airbyte-webapp/src/views/Connection/CatalogDiffModal/{utils => }/types.tsx (100%) rename airbyte-webapp/src/views/Connection/CatalogDiffModal/{utils => }/utils.tsx (100%) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 4ace886626903..a616f9173a12b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -9,7 +9,7 @@ import { ModalBody, ModalFooter } from "../../../components/Modal"; import styles from "./CatalogDiffModal.module.scss"; import { DiffSection } from "./components/DiffSection"; import { FieldSection } from "./components/FieldSection"; -import { getSortedDiff } from "./utils/utils"; +import { getSortedDiff } from "./utils"; interface CatalogDiffModalProps { catalogDiff: CatalogDiff; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss index 61cece5a46b6d..ef64acdfa7f67 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -19,14 +19,3 @@ padding: variables.$spacing-sm 30px variables.$spacing-sm 0px; font-weight: 400; } - -.iconBlock { - display: flex; - flex-direction: row; - gap: 1px; - margin-left: auto; -} - -.namespace { - padding-left: 0px; -} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 0472d33eef75b..d42a051c03b99 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -1,17 +1,11 @@ -import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Disclosure } from "@headlessui/react"; -import classnames from "classnames"; import { useMemo } from "react"; -import { useIntl } from "react-intl"; - -import { ImageBlock } from "components"; import { StreamTransform } from "core/request/AirbyteClient"; -import { ModificationIcon } from "../../../../components/icons/ModificationIcon"; -import { getSortedDiff } from "../utils/utils"; +import { getSortedDiff } from "../utils"; import styles from "./DiffAccordion.module.scss"; +import { DiffAccordionHeader } from "./DiffAccordionHeader"; import { DiffFieldTable } from "./DiffFieldTable"; interface DiffAccordionProps { @@ -19,88 +13,24 @@ interface DiffAccordionProps { } export const DiffAccordion: React.FC = ({ streamTransform }) => { - const { formatMessage } = useIntl(); - const { newItems, removedItems, changedItems } = useMemo( () => getSortedDiff(streamTransform.updateStream), [streamTransform.updateStream] ); - // eslint-disable-next-line css-modules/no-undef-class - const nameCellStyle = classnames(styles.nameCell, styles.row); - // eslint-disable-next-line css-modules/no-undef-class - const namespaceCellStyles = classnames(styles.nameCell, styles.row, styles.namespace); - return (
{({ open }) => ( <> - -
- {open ? : } - {streamTransform.streamDescriptor.namespace} -
-
- {streamTransform.streamDescriptor.name} -
-
- {removedItems.length > 0 && ( - - )} - {newItems.length > 0 && ( - - )} - {changedItems.length > 0 && ( - - )} -
+ {removedItems.length > 0 && } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss new file mode 100644 index 0000000000000..63b3a27ce38dd --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss @@ -0,0 +1,6 @@ +@forward "../components/StreamRow.module.scss"; +@forward "../components/DiffSection.module.scss"; + +.namespace { + padding-left: 0px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx new file mode 100644 index 0000000000000..be9f8aa41b351 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx @@ -0,0 +1,49 @@ +import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classnames from "classnames"; +import { useIntl } from "react-intl"; + +import { ModificationIcon } from "components/icons/ModificationIcon"; + +import { StreamDescriptor } from "core/request/AirbyteClient"; + +import styles from "./DiffAccordionHeader.module.scss"; +import { DiffIconBlock } from "./DiffIconBlock"; + +interface DiffAccordionHeaderProps { + open: boolean; + + streamDescriptor: StreamDescriptor; + removedCount: number; + newCount: number; + changedCount: number; +} +export const DiffAccordionHeader: React.FC = ({ + open, + streamDescriptor, + removedCount, + newCount, + changedCount, +}) => { + // eslint-disable-next-line css-modules/no-undef-class + const nameCellStyle = classnames(styles.nameCell, styles.row); + + // eslint-disable-next-line css-modules/no-undef-class + const namespaceCellStyles = classnames(styles.nameCell, styles.row, styles.namespace); + + const { formatMessage } = useIntl(); + + return ( + <> + +
+ {open ? : } + {streamDescriptor.namespace} +
+
+ {streamDescriptor.name} +
+ + + ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 8b5225f5ed3fb..0d6c4f43b7585 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -2,7 +2,7 @@ import { FormattedMessage } from "react-intl"; import { FieldTransform } from "core/request/AirbyteClient"; -import { DiffVerb } from "../utils/types"; +import { DiffVerb } from "../types"; import styles from "./DiffFieldTable.module.scss"; import { DiffHeader } from "./DiffHeader"; import { FieldRow } from "./FieldRow"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx index 92f09ca3331c1..6b5f543d8ff83 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx @@ -1,6 +1,6 @@ import { FormattedMessage } from "react-intl"; -import { DiffVerb } from "../utils/types"; +import { DiffVerb } from "../types"; export type DiffType = "field" | "stream"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss new file mode 100644 index 0000000000000..7fb834f093b4f --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss @@ -0,0 +1,6 @@ +.iconBlock { + display: flex; + flex-direction: row; + gap: 1px; + margin-left: auto; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx new file mode 100644 index 0000000000000..453f23443dcff --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.tsx @@ -0,0 +1,67 @@ +import { useIntl } from "react-intl"; + +import { ImageBlock } from "components"; + +import styles from "./DiffIconBlock.module.scss"; + +interface DiffIconBlockProps { + newCount: number; + removedCount: number; + changedCount: number; +} +export const DiffIconBlock: React.FC = ({ newCount, removedCount, changedCount }) => { + const { formatMessage } = useIntl(); + + return ( +
+ {removedCount > 0 && ( + + )} + {newCount > 0 && ( + + )} + {changedCount > 0 && ( + + )} +
+ ); +}; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index a10cf578b5b54..01d421055a963 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -2,7 +2,7 @@ import { FormattedMessage } from "react-intl"; import { AirbyteCatalog, StreamDescriptor, StreamTransform } from "core/request/AirbyteClient"; -import { DiffVerb } from "../utils/types"; +import { DiffVerb } from "../types"; import { DiffHeader } from "./DiffHeader"; import styles from "./DiffSection.module.scss"; import { StreamRow } from "./StreamRow"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 02b6399e4ba15..86a4f5d608d6f 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -2,7 +2,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { StreamTransform } from "core/request/AirbyteClient"; -import { DiffVerb } from "../utils/types"; +import { DiffVerb } from "../types"; import { DiffAccordion } from "./DiffAccordion"; import { DiffHeader } from "./DiffHeader"; import styles from "./FieldSection.module.scss"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index b9bf1121d2ef2..fcfd4606691a0 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -5,7 +5,7 @@ import classnames from "classnames"; import { StreamTransform } from "core/request/AirbyteClient"; import { ModificationIcon } from "../../../../components/icons/ModificationIcon"; -import { DiffVerb } from "../utils/types"; +import { DiffVerb } from "../types"; import styles from "./StreamRow.module.scss"; interface StreamRowProps { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/types.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/types.tsx similarity index 100% rename from airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/types.tsx rename to airbyte-webapp/src/views/Connection/CatalogDiffModal/types.tsx diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx similarity index 100% rename from airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx rename to airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx From 4d798760b59542f6af46dd9c47bff9696dd46d99 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Mon, 25 Jul 2022 16:09:30 -0400 Subject: [PATCH 37/48] catalog can be undefined --- .../Connection/CatalogDiffModal/components/DiffSection.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index 01d421055a963..3f64713e7eca9 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -48,11 +48,7 @@ export const DiffSection: React.FC = ({ streams, catalog, diff return ( From b62b67e2ecf29becea507803d49e33c77516aedf Mon Sep 17 00:00:00 2001 From: tealjulia Date: Mon, 25 Jul 2022 16:12:25 -0400 Subject: [PATCH 38/48] cleanup cell rendering --- .../CatalogDiffModal/components/FieldRow.tsx | 8 ++++---- .../components/FieldSection.tsx | 20 ++++++++++--------- .../CatalogDiffModal/components/StreamRow.tsx | 2 +- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index 5fdb35f344e8c..1c77e9a7281af 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -53,13 +53,13 @@ export const FieldRow: React.FC = ({ transform }) => {
- {oldType && newType && ( - - )} + )} + ); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 86a4f5d608d6f..320d7c84e1366 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -29,15 +29,17 @@ export const FieldSection: React.FC = ({ streams, diffVerb })
-
    - {streams.map((stream) => { - return ( -
  • - -
    • - ); - })} -
+ {streams.length > 0 && ( +
    + {streams.map((stream) => { + return ( +
  • + +
    • + ); + })} +
+ )} ); diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index fcfd4606691a0..6e50442108695 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -44,7 +44,7 @@ export const StreamRow: React.FC = ({ streamTransform, syncMode, )} - {namespace && } + {diffVerb === "removed" && syncMode && ( - + {diffVerb === "removed" && syncMode && ( - {diffVerb === "changed" && ( - )} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss index eb74ab066c2ec..1c608338fea68 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -12,9 +12,14 @@ li { font-weight: 400; } +.fieldHeader { + @extend .sectionHeader; + padding: variables.$spacing-lg variables.$spacing-xl; +} + .fieldSubHeader { @extend .sectionSubHeader; - padding: 0px variables.$spacing-sm 0px variables.$spacing-lg; + padding: 0px variables.$spacing-sm 0px 35px; .padLeft { padding-left: variables.$spacing-xl; @@ -30,3 +35,7 @@ li { padding-left: variables.$spacing-md; } } + +.fieldRowsContainer { + padding-left: variables.$spacing-lg; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 2b2c02142fedf..4c03fcf8a4e7b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -18,17 +18,19 @@ export const FieldSection: React.FC = ({ streams, diffVerb }) // eslint-disable-next-line css-modules/no-undef-class
{/* eslint-disable-next-line css-modules/no-undef-class */} -
- -
-
- -
-
- -
-
+
+ +
+
+
+ +
+
+
+
+
+
{streams.length > 0 && (
    {streams.map((stream) => { From db022de632bbfb153f27d1eb8046a8b3d1eabd89 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 2 Aug 2022 17:04:03 -0400 Subject: [PATCH 43/48] cleanup from review --- .../CatalogDiffModal/components/StreamRow.tsx | 10 +++------- .../src/views/Connection/CatalogDiffModal/utils.tsx | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 9aa1c0f0ff565..2931ed5ed644b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -44,13 +44,9 @@ export const StreamRow: React.FC = ({ streamTransform, syncMode, )} -
- - {diffVerb === "removed" && syncMode && ( - - )} + + {" "} + ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx index 49745aa584972..d7a5942aa02cb 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx @@ -8,7 +8,7 @@ export const getSortedDiff = (diffAr return sortedDiff; } - diffArray.reduce((sortedDiff, transform) => { + diffArray.forEach((transform) => { if (transform.transformType.includes("add")) { sortedDiff.newItems.push(transform); } From d611e4b89ed40d6504c16d9f328539082df4a295 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 2 Aug 2022 17:07:01 -0400 Subject: [PATCH 44/48] mixup from rebase --- .../components/ReplicationView.tsx | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx index d69aa9ecfec25..0fd5827bb3303 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx @@ -196,27 +196,25 @@ export const ReplicationView: React.FC = ({ onAfterSaveSch return ( - - {!isRefreshingCatalog && connection ? ( - } - onCancel={onCancelConnectionFormEdit} - canSubmitUntouchedForm={activeUpdatingSchemaMode} - additionalSchemaControl={ - - } - onChangeValues={setConnectionFormValues} - /> - ) : ( - - )} - + {!isRefreshingCatalog && connection ? ( + } + onCancel={onCancelConnectionFormEdit} + canSubmitUntouchedForm={activeUpdatingSchemaMode} + additionalSchemaControl={ + + } + onChangeValues={setConnectionFormValues} + /> + ) : ( + + )} ); }; From 64f61db0c8324a0c2be67d96a31daaae91e4f0da Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 3 Aug 2022 12:58:38 -0400 Subject: [PATCH 45/48] set width on modal level not content level --- .../Connection/CatalogDiffModal/CatalogDiffModal.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss index 3911013fefc87..4a53ac37cae70 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss @@ -3,5 +3,4 @@ .modalContent { display: flex; flex-direction: column; - width: variables.$width-modal-md; } From fa184754441bf7d6acffcf9cbb57f70e2a3539f4 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 3 Aug 2022 12:59:19 -0400 Subject: [PATCH 46/48] Update airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx index d7a5942aa02cb..928e5a4e12d26 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx @@ -21,7 +21,6 @@ export const getSortedDiff = (diffAr sortedDiff.changedItems.push(transform); } - return sortedDiff; - }, sortedDiff); + }); return sortedDiff; }; From 7c236691569b9e1aaf39fa73b54703681b13779a Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 3 Aug 2022 12:59:25 -0400 Subject: [PATCH 47/48] Update airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- .../src/views/Connection/CatalogDiffModal/utils.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx index 928e5a4e12d26..0360311121b18 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx @@ -4,11 +4,7 @@ import { SortedDiff } from "./types"; export const getSortedDiff = (diffArray?: T[]): SortedDiff => { const sortedDiff: SortedDiff = { newItems: [], removedItems: [], changedItems: [] }; - if (!diffArray) { - return sortedDiff; - } - - diffArray.forEach((transform) => { + diffArray?.forEach((transform) => { if (transform.transformType.includes("add")) { sortedDiff.newItems.push(transform); } From bb9e18de0c13623c4aa6f66189c342b7e97f86fe Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 3 Aug 2022 13:51:05 -0400 Subject: [PATCH 48/48] linting and unused class cleanup --- .../components/DiffAccordionHeader.module.scss | 4 ---- .../src/views/Connection/CatalogDiffModal/utils.tsx | 1 - 2 files changed, 5 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss index 4bca47af29283..fb72c08342562 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss @@ -10,7 +10,3 @@ padding-left: -10px; margin-left: -5px; } - -.icon { - position: absolute; -} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx index 0360311121b18..f3ec706aaea0a 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx @@ -16,7 +16,6 @@ export const getSortedDiff = (diffAr if (transform.transformType.includes("update")) { sortedDiff.changedItems.push(transform); } - }); return sortedDiff; };
NamespaceStream name + + + +
- +
From 0f0bbdbb3355424c1ae31a7758f61aea0cfb8047 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 14 Jul 2022 14:27:44 -0700 Subject: [PATCH 29/48] begin moving to memoized reducer function --- .../CatalogDiffModal/CatalogDiffModal.tsx | 32 ++----------------- .../components/DiffFieldTable.tsx | 2 +- .../components/DiffHeader.tsx | 2 +- .../components/DiffSection.tsx | 2 +- .../components/FieldSection.tsx | 2 +- .../CatalogDiffModal/components/StreamRow.tsx | 2 +- .../CatalogDiffModal/utils/types.tsx | 9 ++++++ .../CatalogDiffModal/utils/utils.tsx | 28 ++++++++++++++++ 8 files changed, 45 insertions(+), 34 deletions(-) create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/types.tsx create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 57aa9344c9eb5..1fe1e03fbceca 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -3,12 +3,13 @@ import { FormattedMessage } from "react-intl"; import { Button } from "components"; -import { AirbyteCatalog, CatalogDiff, FieldTransform, StreamTransform } from "core/request/AirbyteClient"; +import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; import { Modal, ModalFooter } from "../../../components/Modal"; import styles from "./CatalogDiffModal.module.scss"; import { DiffSection } from "./components/DiffSection"; import { FieldSection } from "./components/FieldSection"; +import { getSortedDiff } from "./utils/utils"; interface CatalogDiffModalProps { catalogDiff: CatalogDiff; @@ -16,35 +17,8 @@ interface CatalogDiffModalProps { setDiffAcknowledged: Dispatch>; } -export type DiffVerb = "new" | "removed" | "changed"; - -interface SortedDiff { - newItems: T[]; - removedItems: T[]; - changedItems: T[]; -} - -export const diffReducer = (diffArray: T[]): SortedDiff => { - const sortedDiff: SortedDiff = { newItems: [], removedItems: [], changedItems: [] }; - - diffArray.filter((streamTransform) => { - if (streamTransform.transformType.includes("add")) { - sortedDiff.newItems.push(streamTransform); - } - - if (streamTransform.transformType.includes("remove")) { - sortedDiff.removedItems.push(streamTransform); - } - - if (streamTransform.transformType.includes("update")) { - sortedDiff.changedItems.push(streamTransform); - } - return sortedDiff; - }); - return sortedDiff; -}; export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { - const { newItems, removedItems, changedItems } = diffReducer(catalogDiff.transforms); + const { newItems, removedItems, changedItems } = getSortedDiff(catalogDiff.transforms); return ( } onClose={() => null}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 0896d220fe191..8b5225f5ed3fb 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -2,7 +2,7 @@ import { FormattedMessage } from "react-intl"; import { FieldTransform } from "core/request/AirbyteClient"; -import { DiffVerb } from "../CatalogDiffModal"; +import { DiffVerb } from "../utils/types"; import styles from "./DiffFieldTable.module.scss"; import { DiffHeader } from "./DiffHeader"; import { FieldRow } from "./FieldRow"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx index d019e2d9631f5..78cbc24c4cbee 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx @@ -1,6 +1,6 @@ import { FormattedMessage } from "react-intl"; -import { DiffVerb } from "../CatalogDiffModal"; +import { DiffVerb } from "../utils/types"; export type DiffType = "field" | "stream"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index c3f519f1dc1bf..d92baafadc984 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -2,7 +2,7 @@ import { FormattedMessage } from "react-intl"; import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; -import { DiffVerb } from "../CatalogDiffModal"; +import { DiffVerb } from "../utils/types"; import { DiffHeader } from "./DiffHeader"; import styles from "./DiffSection.module.scss"; import { StreamRow } from "./StreamRow"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 766026269ee27..02b6399e4ba15 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -2,7 +2,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { StreamTransform } from "core/request/AirbyteClient"; -import { DiffVerb } from "../CatalogDiffModal"; +import { DiffVerb } from "../utils/types"; import { DiffAccordion } from "./DiffAccordion"; import { DiffHeader } from "./DiffHeader"; import styles from "./FieldSection.module.scss"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 59c66e208e5bf..b9bf1121d2ef2 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -5,7 +5,7 @@ import classnames from "classnames"; import { StreamTransform } from "core/request/AirbyteClient"; import { ModificationIcon } from "../../../../components/icons/ModificationIcon"; -import { DiffVerb } from "../CatalogDiffModal"; +import { DiffVerb } from "../utils/types"; import styles from "./StreamRow.module.scss"; interface StreamRowProps { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/types.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/types.tsx new file mode 100644 index 0000000000000..6c1d38aace4cf --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/types.tsx @@ -0,0 +1,9 @@ +import { FieldTransform, StreamTransform } from "core/request/AirbyteClient"; + +export type DiffVerb = "new" | "removed" | "changed"; + +export interface SortedDiff { + newItems: T[]; + removedItems: T[]; + changedItems: T[]; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx new file mode 100644 index 0000000000000..947726de88eb0 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx @@ -0,0 +1,28 @@ +import { createMemo } from "react-use"; + +import { FieldTransform, StreamTransform } from "core/request/AirbyteClient"; + +import { SortedDiff } from "./types"; + +const getSortedDiff = (diffArray: T[]): SortedDiff => { + const sortedDiff: SortedDiff = { newItems: [], removedItems: [], changedItems: [] }; + + diffArray.reduce((sortedDiff, transform) => { + if (transform.transformType.includes("add")) { + sortedDiff.newItems.push(transform); + } + + if (transform.transformType.includes("remove")) { + sortedDiff.removedItems.push(transform); + } + + if (transform.transformType.includes("update")) { + sortedDiff.changedItems.push(transform); + } + + return sortedDiff; + }, sortedDiff); + return sortedDiff; +}; + +export const useMemoSortedDiff = createMemo(getSortedDiff); From 4a4800a6e3209695d43931063aaf7b42fb149069 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 19 Jul 2022 14:56:03 +0100 Subject: [PATCH 30/48] memoize diff sorter and remove extra divs --- .../CatalogDiffModal/CatalogDiffModal.tsx | 7 +++-- .../components/DiffAccordion.tsx | 30 ++++++------------- .../CatalogDiffModal/utils/utils.tsx | 9 +++--- 3 files changed, 18 insertions(+), 28 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 1fe1e03fbceca..3ef7bff13acc8 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -1,4 +1,4 @@ -import { Dispatch, SetStateAction } from "react"; +import { Dispatch, SetStateAction, useMemo } from "react"; import { FormattedMessage } from "react-intl"; import { Button } from "components"; @@ -18,7 +18,10 @@ interface CatalogDiffModalProps { } export const CatalogDiffModal: React.FC = ({ catalogDiff, catalog, setDiffAcknowledged }) => { - const { newItems, removedItems, changedItems } = getSortedDiff(catalogDiff.transforms); + const { newItems, removedItems, changedItems } = useMemo( + () => getSortedDiff(catalogDiff.transforms), + [catalogDiff.transforms] + ); return ( } onClose={() => null}> diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 7aca5322afbdc..f6e88274a5c3b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -2,6 +2,7 @@ import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Disclosure } from "@headlessui/react"; import classnames from "classnames"; +import { useMemo } from "react"; import { useIntl } from "react-intl"; import { ImageBlock } from "components"; @@ -9,7 +10,7 @@ import { ImageBlock } from "components"; import { StreamTransform } from "core/request/AirbyteClient"; import { ModificationIcon } from "../../../../components/icons/ModificationIcon"; -import { diffReducer } from "../CatalogDiffModal"; +import { getSortedDiff } from "../utils/utils"; import styles from "./DiffAccordion.module.scss"; import { DiffFieldTable } from "./DiffFieldTable"; @@ -20,11 +21,10 @@ interface DiffAccordionProps { export const DiffAccordion: React.FC = ({ streamTransform }) => { const { formatMessage } = useIntl(); - if (!streamTransform.updateStream) { - return null; - } - - const { newItems, removedItems, changedItems } = diffReducer(streamTransform.updateStream); + const { newItems, removedItems, changedItems } = useMemo( + () => getSortedDiff(streamTransform.updateStream), + [streamTransform.updateStream] + ); // eslint-disable-next-line css-modules/no-undef-class const nameCellStyle = classnames(styles.nameCell, styles.row); @@ -100,21 +100,9 @@ export const DiffAccordion: React.FC = ({ streamTransform }) - {removedItems.length > 0 && ( -
- -
- )} - {newItems.length > 0 && ( -
- -
- )} - {changedItems.length > 0 && ( -
- -
- )} + {removedItems.length > 0 && } + {newItems.length > 0 && } + {changedItems.length > 0 && } )} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx index 947726de88eb0..49745aa584972 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/utils/utils.tsx @@ -1,11 +1,12 @@ -import { createMemo } from "react-use"; - import { FieldTransform, StreamTransform } from "core/request/AirbyteClient"; import { SortedDiff } from "./types"; -const getSortedDiff = (diffArray: T[]): SortedDiff => { +export const getSortedDiff = (diffArray?: T[]): SortedDiff => { const sortedDiff: SortedDiff = { newItems: [], removedItems: [], changedItems: [] }; + if (!diffArray) { + return sortedDiff; + } diffArray.reduce((sortedDiff, transform) => { if (transform.transformType.includes("add")) { @@ -24,5 +25,3 @@ const getSortedDiff = (diffArray: T[ }, sortedDiff); return sortedDiff; }; - -export const useMemoSortedDiff = createMemo(getSortedDiff); From 1d0ca6d45769f9f7c30b5f43ff3ab81f1cb0c14a Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 19 Jul 2022 15:43:16 +0100 Subject: [PATCH 31/48] cleanup --- .../CatalogDiffModal/CatalogDiffModal.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx index 3ef7bff13acc8..3e497a7e09c84 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx @@ -5,7 +5,7 @@ import { Button } from "components"; import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; -import { Modal, ModalFooter } from "../../../components/Modal"; +import { Modal, ModalBody, ModalFooter } from "../../../components/Modal"; import styles from "./CatalogDiffModal.module.scss"; import { DiffSection } from "./components/DiffSection"; import { FieldSection } from "./components/FieldSection"; @@ -25,11 +25,13 @@ export const CatalogDiffModal: React.FC = ({ catalogDiff, return ( } onClose={() => null}> -
- {removedItems.length > 0 && } - {newItems.length > 0 && } - {changedItems.length > 0 && } -
+ +
+ {removedItems.length > 0 && } + {newItems.length > 0 && } + {changedItems.length > 0 && } +
+ - + ); }; From b769506aa477e776a665d16e675abb7eefafa476 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 20 Jul 2022 12:50:26 +0100 Subject: [PATCH 34/48] move calculated string mode out of component --- .../components/DiffSection.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index d92baafadc984..a10cf578b5b54 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -1,6 +1,6 @@ import { FormattedMessage } from "react-intl"; -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; +import { AirbyteCatalog, StreamDescriptor, StreamTransform } from "core/request/AirbyteClient"; import { DiffVerb } from "../utils/types"; import { DiffHeader } from "./DiffHeader"; @@ -13,6 +13,18 @@ interface DiffSectionProps { diffVerb: DiffVerb; } +const calculateSyncModeString = (catalog: AirbyteCatalog, streamDescriptor: StreamDescriptor) => { + const streamConfig = catalog.streams.find( + (catalogStream) => + catalogStream.stream?.namespace === streamDescriptor.namespace && + catalogStream.stream?.name === streamDescriptor.name + )?.config; + + if (streamConfig?.syncMode && streamConfig.destinationSyncMode) { + return `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; + } + return ""; +}; export const DiffSection: React.FC = ({ streams, catalog, diffVerb }) => { return (
@@ -33,24 +45,14 @@ export const DiffSection: React.FC = ({ streams, catalog, diff
{fieldName} + + {oldType && newType && ( {oldType} {newType} -
{namespace}{namespace && { namespace }} {itemName} From a03f45268288cfaa25151cca2e9338e465a43ab1 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Wed, 27 Jul 2022 11:48:46 -0400 Subject: [PATCH 39/48] cleanup and make storybook work again --- airbyte-webapp/.storybook/withProvider.tsx | 16 +++++----------- .../CatalogDiffModal/components/StreamRow.tsx | 2 +- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx index fe0b3523ebafc..bbf184f559a93 100644 --- a/airbyte-webapp/.storybook/withProvider.tsx +++ b/airbyte-webapp/.storybook/withProvider.tsx @@ -13,12 +13,9 @@ import { FeatureService } from "../src/hooks/services/Feature"; import { ConfigServiceProvider, defaultConfig } from "../src/config"; import { DocumentationPanelProvider } from "../src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; import { ServicesProvider } from "../src/core/servicesProvider"; -import { - analyticsServiceContext, - AnalyticsServiceProviderValue, -} from "../src/hooks/services/Analytics"; +import { analyticsServiceContext, AnalyticsServiceProviderValue } from "../src/hooks/services/Analytics"; -const AnalyticsContextMock: AnalyticsServiceProviderValue = ({ +const AnalyticsContextMock: AnalyticsServiceProviderValue = { analyticsContext: {}, setContext: () => {}, addContextProps: () => {}, @@ -26,7 +23,7 @@ const AnalyticsContextMock: AnalyticsServiceProviderValue = ({ service: { track: () => {}, }, -} as unknown) as AnalyticsServiceProviderValue; +} as unknown as AnalyticsServiceProviderValue; const queryClient = new QueryClient({ defaultOptions: { @@ -45,12 +42,9 @@ export const withProviders = (getStory) => ( - + - + {getStory()} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index 6e50442108695..9aa1c0f0ff565 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -44,7 +44,7 @@ export const StreamRow: React.FC = ({ streamTransform, syncMode, )} {namespace && { namespace }}{namespace && namespace} {itemName} From 72e7a79ec5d21c84c832974bab3f813a354ebee7 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Mon, 1 Aug 2022 13:26:48 -0400 Subject: [PATCH 40/48] move table styles within a parent class --- .../components/DiffFieldTable.module.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index ee553a5fcc14b..872b29ddb5ae9 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -13,16 +13,16 @@ .table { width: 100%; padding-left: variables.$spacing-xl; -} -tbody > tr:first-of-type > td:nth-of-type(2) { - border-radius: variables.$border-radius-sm variables.$border-radius-sm 0px 0px; -} + & tbody > tr:first-of-type > td:nth-of-type(2) { + border-radius: variables.$border-radius-sm variables.$border-radius-sm 0px 0px; + } -tbody > tr:last-of-type > td:nth-of-type(2) { - border-radius: 0px 0px variables.$border-radius-sm variables.$border-radius-sm; -} + & tbody > tr:last-of-type > td:nth-of-type(2) { + border-radius: 0px 0px variables.$border-radius-sm variables.$border-radius-sm; + } -tbody > tr:only-of-type > td:nth-of-type(2) { - border-radius: variables.$border-radius-sm; + & tbody > tr:only-of-type > td:nth-of-type(2) { + border-radius: variables.$border-radius-sm; + } } From f4870f11d97560478aba95e55555ca73bbe94e59 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 2 Aug 2022 16:37:14 -0400 Subject: [PATCH 41/48] subheading alignment consistency --- .../components/DiffAccordion.module.scss | 1 - .../components/DiffAccordionHeader.module.scss | 12 +++++++++++- .../components/DiffAccordionHeader.tsx | 4 ++-- .../components/DiffFieldTable.module.scss | 2 +- .../components/DiffSection.module.scss | 5 ++++- .../CatalogDiffModal/components/DiffSection.tsx | 2 +- .../CatalogDiffModal/components/FieldRow.module.scss | 6 +++--- .../components/FieldSection.module.scss | 5 +++++ .../CatalogDiffModal/components/FieldSection.tsx | 2 +- 9 files changed, 28 insertions(+), 11 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss index ef64acdfa7f67..28e1c287aecee 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -15,7 +15,6 @@ flex-direction: row; align-items: center; justify-content: flex-start; - gap: variables.$spacing-md; padding: variables.$spacing-sm 30px variables.$spacing-sm 0px; font-weight: 400; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss index 63b3a27ce38dd..4bca47af29283 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss @@ -1,6 +1,16 @@ @forward "../components/StreamRow.module.scss"; @forward "../components/DiffSection.module.scss"; +@use "../../../../scss/variables"; .namespace { - padding-left: 0px; + padding-left: variables.$spacing-sm; +} + +.headerAdjust { + padding-left: -10px; + margin-left: -5px; +} + +.icon { + position: absolute; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx index be9f8aa41b351..cca15b62d5cc1 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx @@ -38,10 +38,10 @@ export const DiffAccordionHeader: React.FC = ({
{open ? : } - {streamDescriptor.namespace} +
{streamDescriptor.namespace}
- {streamDescriptor.name} +
{streamDescriptor.name}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index 872b29ddb5ae9..11932512bf730 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -6,7 +6,7 @@ & th { font-size: 10px; width: 228px; - padding-left: variables.$spacing-lg; + padding-left: variables.$spacing-sm; } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss index 31efe5378b4e1..4dcd0e8d91354 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss @@ -12,7 +12,6 @@ flex-direction: row; align-items: center; padding: 0px variables.$spacing-md 0px variables.$spacing-2xl; - gap: variables.$spacing-md; width: 100%; height: 22px; @@ -24,6 +23,10 @@ color: colors.$grey; line-height: 12px; } + + .padLeft { + padding-left: variables.$spacing-md; + } } .sectionHeader { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index 3f64713e7eca9..47981779d2d9b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -37,7 +37,7 @@ export const DiffSection: React.FC = ({ streams, catalog, diff 		+ diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss index 77162e5fa3dd1..06ccf3e8ade85 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -28,7 +28,6 @@ } .icon { - margin-top: -1px; &.plus { color: colors.$green; } @@ -42,9 +41,10 @@ .iconCell { background: white; - width: 20px; - text-align: center; + width: 10px; height: 100%; + display: flex; + align-items: center; } .cell { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss index bd70a2def8dd6..eb74ab066c2ec 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -14,6 +14,11 @@ li { .fieldSubHeader { @extend .sectionSubHeader; + padding: 0px variables.$spacing-sm 0px variables.$spacing-lg; + + .padLeft { + padding-left: variables.$spacing-xl; + } > div { @extend .nameCell; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx index 320d7c84e1366..2b2c02142fedf 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -24,7 +24,7 @@ export const FieldSection: React.FC = ({ streams, diffVerb })
-
+
From 50037d717288da43c676c5e91e4bd4bc157320e8 Mon Sep 17 00:00:00 2001 From: tealjulia Date: Tue, 2 Aug 2022 16:59:27 -0400 Subject: [PATCH 42/48] more padding/spacing adjustments --- .../components/DiffAccordion.module.scss | 2 +- .../components/DiffFieldTable.module.scss | 7 +++++- .../components/DiffFieldTable.tsx | 2 +- .../components/FieldSection.module.scss | 11 +++++++++- .../components/FieldSection.tsx | 22 ++++++++++--------- 5 files changed, 30 insertions(+), 14 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss index 28e1c287aecee..94bdca9fae0f4 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -15,6 +15,6 @@ flex-direction: row; align-items: center; justify-content: flex-start; - padding: variables.$spacing-sm 30px variables.$spacing-sm 0px; + padding: variables.$spacing-sm; font-weight: 400; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss index 11932512bf730..34d2e94db1adc 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -3,10 +3,15 @@ .accordionSubHeader { @extend .sectionSubHeader; + + & .padLeft { + padding-left: variables.$spacing-lg; + } + & th { font-size: 10px; width: 228px; - padding-left: variables.$spacing-sm; + padding-left: variables.$spacing-md; } } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 0d6c4f43b7585..e0cb49a1f5777 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -21,7 +21,7 @@ export const DiffFieldTable: React.FC = ({ fieldTransforms,
+ {namespace && namespace}{itemName} - - {namespace}{itemName}{diffVerb === "removed" && syncMode && }