From 18763afb981d3d86e7ff63f7072f458bc58e3767 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 2 Nov 2022 12:35:57 -0400 Subject: [PATCH 1/8] Increase size of CatalogDiff modal Add ModalService to CatalogDiff to fix story --- .../CatalogDiffModal/index.stories.tsx | 22 +++++++++++-------- .../useConfirmCatalogDiff.tsx | 1 + 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx index 081a6c194b29..c6a44aaeaf15 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx @@ -3,6 +3,8 @@ import { FormattedMessage } from "react-intl"; import { Modal } from "components/ui/Modal"; +import { ModalServiceProvider } from "hooks/services/Modal"; + import { CatalogDiffModal } from "./CatalogDiffModal"; export default { @@ -12,15 +14,17 @@ export default { const Template: ComponentStory = (args) => { return ( - }> - { - return null; - }} - /> - + + }> + { + return null; + }} + /> + + ); }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx index e21777def532..5a876663ef08 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx @@ -18,6 +18,7 @@ export const useConfirmCatalogDiff = () => { openModal({ title: formatMessage({ id: "connection.updateSchema.completed" }), preventCancel: true, + size: "md", content: ({ onClose }) => ( ), From 4018acc3dd113d1761e8082d9167c065491a31a1 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 2 Nov 2022 15:26:27 -0400 Subject: [PATCH 2/8] Fix issues with catalog diff field section styles * Update how icons work * Rearrange table headings and cells to align correctly * Add more spacing to the Diff Icon badges * Remove div from DiffHeader and simplify rendering * Remove border-spacing from tables * Move table margins to be set by padding on the panel itself --- .../components/DiffAccordion.module.scss | 13 +++++-- .../components/DiffAccordion.tsx | 2 +- .../components/DiffFieldTable.module.scss | 11 +++--- .../components/DiffFieldTable.tsx | 4 +-- .../components/DiffHeader.tsx | 24 +++++++------ .../components/DiffIconBlock.module.scss | 4 ++- .../components/DiffSection.module.scss | 10 ++++-- .../components/DiffSection.tsx | 2 +- .../components/FieldRow.module.scss | 17 ++++----- .../CatalogDiffModal/components/FieldRow.tsx | 36 +++++++++---------- .../components/FieldSection.module.scss | 6 ++-- 11 files changed, 68 insertions(+), 61 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 94bdca9fae0f..87346e0f81ef 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -1,6 +1,6 @@ -@use "../../../../scss/variables"; -@forward "../components/StreamRow.module.scss"; -@forward "../components/DiffSection.module.scss"; +@use "scss/variables"; +@forward "./StreamRow.module.scss"; +@forward "./DiffSection.module.scss"; .accordionContainer { width: 100%; @@ -18,3 +18,10 @@ padding: variables.$spacing-sm; font-weight: 400; } + +.accordionPanel { + display: flex; + flex-direction: column; + gap: variables.$spacing-sm; + padding: 0 30px; +} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx index 112563dba001..4f7b5a50568c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx @@ -32,7 +32,7 @@ export const DiffAccordion: React.FC = ({ streamTransform }) open={open} /> - + {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 3196cf318730..edeef872b6bc 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss @@ -1,23 +1,20 @@ -@use "../../../../scss/variables"; +@use "scss/variables"; @use "./DiffSection.module.scss"; -.accordionSubHeader { +.header { @extend %sectionSubHeader; - & .padLeft { - padding-left: variables.$spacing-lg; - } + padding: 0 0 0 30px; & th { font-size: 10px; width: 228px; - padding-left: variables.$spacing-md; } } .table { width: 100%; - padding-left: variables.$spacing-xl; + border-spacing: 0; & tbody > tr:first-of-type > td:nth-of-type(2) { border-radius: variables.$border-radius-sm variables.$border-radius-sm 0 0; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx index 24c54af63dfc..b4d45e871777 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx @@ -16,12 +16,12 @@ export const DiffFieldTable: React.FC = ({ fieldTransforms, return ( - + {diffVerb === "changed" && ( - )} diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx index 6b5f543d8ff8..00ef53880d3c 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx @@ -1,4 +1,4 @@ -import { FormattedMessage } from "react-intl"; +import { useIntl } from "react-intl"; import { DiffVerb } from "../types"; @@ -11,15 +11,17 @@ interface DiffHeaderProps { } export const DiffHeader: React.FC = ({ diffCount, diffVerb, diffType }) => { - return ( -
- , - }} - /> -
+ const { formatMessage } = useIntl(); + + const text = formatMessage( + { + id: `connection.updateSchema.${diffVerb}`, + }, + { + value: diffCount, + item: formatMessage({ id: `connection.updateSchema.${diffType}` }, { count: diffCount }), + } ); + + return <>{text}; }; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss index 7fb834f093b4..06891b31acf0 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss @@ -1,6 +1,8 @@ +@use "scss/variables"; + .iconBlock { display: flex; flex-direction: row; - gap: 1px; + gap: variables.$spacing-sm; margin-left: auto; } 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 b6db3b81c395..c1fd7f66d749 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss @@ -1,12 +1,16 @@ -@use "../../../../scss/colors"; -@use "../../../../scss/variables"; -@use "../components/StreamRow.module.scss"; +@use "scss/colors"; +@use "scss/variables"; +@use "./StreamRow.module.scss"; .sectionContainer { display: flex; flex-direction: column; } +.table { + border-spacing: 0; +} + .sectionSubHeader, %sectionSubHeader { display: flex; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx index cd82648fdee9..9069123282af 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx @@ -31,7 +31,7 @@ export const DiffSection: React.FC = ({ streams, catalog, diff
-
+
+
- + {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 index a50363d0be93..9c95e901d131 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -1,5 +1,5 @@ -@use "../../../../scss/colors"; -@use "../../../../scss/variables"; +@use "scss/colors"; +@use "scss/variables"; @use "./DiffSection.module.scss"; .fieldHeader { @@ -30,7 +30,7 @@ } .fieldRowsContainer { - padding-left: variables.$spacing-lg; + padding: 0 variables.$spacing-lg; ul, li { From 0aa678561958db79f8ea65d70121ff32b4022d2d Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Fri, 4 Nov 2022 15:20:57 -0400 Subject: [PATCH 3/8] Update spacing on field section to align more closely with design --- .../components/DiffAccordion.module.scss | 4 ++-- .../components/DiffAccordionHeader.module.scss | 11 +++++------ .../components/DiffAccordionHeader.tsx | 4 ++-- .../CatalogDiffModal/components/FieldRow.module.scss | 10 ++++++++++ .../CatalogDiffModal/components/FieldRow.tsx | 3 ++- .../components/FieldSection.module.scss | 7 +------ .../CatalogDiffModal/components/FieldSection.tsx | 2 +- .../CatalogDiffModal/components/StreamRow.module.scss | 4 ++-- 8 files changed, 25 insertions(+), 20 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 87346e0f81ef..f6f9660c5c0b 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,7 @@ flex-direction: row; align-items: center; justify-content: flex-start; - padding: variables.$spacing-sm; + padding: 0 15px 0 0; font-weight: 400; } @@ -23,5 +23,5 @@ display: flex; flex-direction: column; gap: variables.$spacing-sm; - padding: 0 30px; + padding: 0 15px 0 40px; } 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 fb72c0834256..58427fc104f2 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss @@ -1,12 +1,11 @@ @forward "../components/StreamRow.module.scss"; @forward "../components/DiffSection.module.scss"; -@use "../../../../scss/variables"; +@use "scss/variables"; -.namespace { - padding-left: variables.$spacing-sm; +.row { + padding: 0 0 0 variables.$spacing-sm; } -.headerAdjust { - padding-left: -10px; - margin-left: -5px; +.namespace { + padding-left: variables.$spacing-sm; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx index 33d74bca7eb0..e9465cad5046 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx @@ -36,10 +36,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/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss index 1f2f6d8b08ed..8d9c8968bf6d 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -26,6 +26,16 @@ } } +tr:first-child .content { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +tr:last-child .content { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + .icon { &.plus { color: colors.$green; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index 3bfa0152760f..60746e4086ab 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -2,9 +2,10 @@ import { faArrowRight, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; +import { ModificationIcon } from "components/icons/ModificationIcon"; + import { FieldTransform } from "core/request/AirbyteClient"; -import { ModificationIcon } from "../../../../components/icons/ModificationIcon"; import styles from "./FieldRow.module.scss"; interface FieldRowProps { 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 9c95e901d131..be5a3f172e9b 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss @@ -11,11 +11,7 @@ .fieldSubHeader { @extend %sectionSubHeader; - padding: 0 variables.$spacing-sm 0 35px; - - .padLeft { - padding-left: variables.$spacing-xl; - } + padding: 0 variables.$spacing-sm 0 40px; > div { @extend %nameCell; @@ -25,7 +21,6 @@ font-size: 10px; color: colors.$grey; line-height: 12px; - 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 9d85aa78a781..b6916a74ee8f 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx @@ -23,7 +23,7 @@ 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 4ce24fc9df90..a1974be7af35 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,5 @@ -@use "../../../../scss/colors"; -@use "../../../../scss/variables"; +@use "scss/colors"; +@use "scss/variables"; .row { display: flex; From a418e10f299d28d6e143b0849f1b2372ee792837 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Fri, 4 Nov 2022 15:34:15 -0400 Subject: [PATCH 4/8] Update text color in NumberBadge to be consistent. --- .../src/components/ui/NumberBadge/NumberBadge.module.scss | 8 +++----- .../src/components/ui/NumberBadge/NumberBadge.tsx | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss index e0a6b4a5d309..cf1d0ff58298 100644 --- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss +++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss @@ -1,5 +1,5 @@ -@use "../../../scss/colors"; -@use "../../../scss/fonts"; +@use "scss/colors"; +@use "scss/fonts"; .circle { height: 20px; @@ -17,6 +17,7 @@ font-style: normal; font-weight: 500; font-size: 10px; + color: colors.$white; &.default { background: colors.$dark-blue-100; @@ -24,16 +25,13 @@ &.green { background: colors.$green; - color: colors.$black; } &.red { background: colors.$red; - color: colors.$black; } &.blue { background: colors.$blue; - color: colors.$white; } } diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx index d38716afd5ce..7ff77e918384 100644 --- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx +++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx @@ -20,7 +20,7 @@ export const NumberBadge: React.FC = ({ value, color, classNam return (
-
{value}
+ {value}
); }; From 7ca44905b0343d064d1a6abc0060bdd4d23020cc Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Fri, 4 Nov 2022 15:52:54 -0400 Subject: [PATCH 5/8] Update spacing and alignment in stream row to match design --- .../components/DiffSection.module.scss | 4 ---- .../components/DiffSection.tsx | 2 +- .../components/StreamRow.module.scss | 17 ++++++++++++-- .../CatalogDiffModal/components/StreamRow.tsx | 22 +++++++++++-------- 4 files changed, 29 insertions(+), 16 deletions(-) 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 c1fd7f66d749..6ac99ce10fa6 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss @@ -29,10 +29,6 @@ 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 9069123282af..215e40a53cb9 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
- - - From adf638b6bfb0134b8f7f93e57838b24bded85948 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Date: Thu, 10 Nov 2022 10:26:10 -0500 Subject: [PATCH 6/8] Restore text color in NumberBadge --- .../src/components/ui/NumberBadge/NumberBadge.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss index cf1d0ff58298..ddb7ab7616b8 100644 --- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss +++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss @@ -17,7 +17,6 @@ font-style: normal; font-weight: 500; font-size: 10px; - color: colors.$white; &.default { background: colors.$dark-blue-100; @@ -25,13 +24,16 @@ &.green { background: colors.$green; + color: colors.$black; } &.red { background: colors.$red; + color: colors.$black; } &.blue { background: colors.$blue; + color: colors.$white; } } From 0fca9615be476bbc7e9cc07d48be56eae40102ff Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Thu, 10 Nov 2022 14:02:08 -0500 Subject: [PATCH 7/8] Cleanup onClose fn in CatalogDiff story --- .../views/Connection/CatalogDiffModal/index.stories.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx index c6a44aaeaf15..5be4f2ae00e2 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx @@ -16,13 +16,7 @@ const Template: ComponentStory = (args) => { return ( }> - { - return null; - }} - /> + null} /> ); From a2ec790eecfa81756bcc412fe53d3077f61a763f Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Mon, 14 Nov 2022 19:55:19 -0500 Subject: [PATCH 8/8] Add padding bottoom to DiffAccordion Update CatalogDiff stories to include different use cases --- .../components/DiffAccordion.module.scss | 2 +- .../CatalogDiffModal/index.stories.tsx | 149 ++++++++++++------ 2 files changed, 106 insertions(+), 45 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 f6f9660c5c0b..dedf1888428d 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss @@ -23,5 +23,5 @@ display: flex; flex-direction: column; gap: variables.$spacing-sm; - padding: 0 15px 0 40px; + padding: 0 15px variables.$spacing-md 40px; } diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx index 5be4f2ae00e2..b78f416eedff 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx @@ -3,6 +3,7 @@ import { FormattedMessage } from "react-intl"; import { Modal } from "components/ui/Modal"; +import { CatalogDiff } from "core/request/AirbyteClient"; import { ModalServiceProvider } from "hooks/services/Modal"; import { CatalogDiffModal } from "./CatalogDiffModal"; @@ -22,52 +23,112 @@ const Template: ComponentStory = (args) => { ); }; -export const Primary = Template.bind({}); +const oneStreamAddCatalogDiff: CatalogDiff = { + transforms: [ + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + ], +}; +const oneFieldAddCatalogDiff: CatalogDiff = { + transforms: [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + updateStream: [{ transformType: "add_field", fieldName: ["users", "phone"], breaking: false }], + }, + ], +}; + +const oneFieldUpdateCatalogDiff: CatalogDiff = { + transforms: [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + updateStream: [ + { + transformType: "update_field_schema", + breaking: false, + fieldName: ["users", "address"], + updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + }, + ], + }, + ], +}; + +const fullCatalogDiff: CatalogDiff = { + transforms: [ + { + transformType: "update_stream", + streamDescriptor: { namespace: "apple", name: "harissa_paste" }, + updateStream: [ + { transformType: "add_field", fieldName: ["users", "phone"], breaking: false }, + { transformType: "add_field", fieldName: ["users", "email"], breaking: false }, + { transformType: "remove_field", fieldName: ["users", "lastName"], breaking: false }, + { + transformType: "update_field_schema", + breaking: false, + fieldName: ["users", "address"], + updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, + }, + { + transformType: "update_field_schema", + breaking: false, + fieldName: ["users", "updated_at"], + updateFieldSchema: { oldSchema: { type: "string" }, newSchema: { type: "DateTime" } }, + }, + ], + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "banana" }, + }, + { + transformType: "add_stream", + streamDescriptor: { namespace: "apple", name: "carrot" }, + }, + { + 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" }, + }, + ], +}; + +export const Primary = Template.bind({}); Primary.args = { - catalogDiff: { - transforms: [ - { - transformType: "update_stream", - streamDescriptor: { namespace: "apple", name: "harissa_paste" }, - updateStream: [ - { transformType: "add_field", fieldName: ["users", "phone"], breaking: false }, - { transformType: "add_field", fieldName: ["users", "email"], breaking: false }, - { transformType: "remove_field", fieldName: ["users", "lastName"], breaking: false }, + catalogDiff: fullCatalogDiff, + catalog: { streams: [] }, +}; + +export const OneStreamAdd = Template.bind({}); +OneStreamAdd.args = { + catalogDiff: oneStreamAddCatalogDiff, + catalog: { streams: [] }, +}; + +export const OneFieldAdd = Template.bind({}); +OneFieldAdd.args = { + catalogDiff: oneFieldAddCatalogDiff, + catalog: { streams: [] }, +}; - { - transformType: "update_field_schema", - breaking: false, - fieldName: ["users", "address"], - updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } }, - }, - ], - }, - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "banana" }, - }, - { - transformType: "add_stream", - streamDescriptor: { namespace: "apple", name: "carrot" }, - }, - { - 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" }, - }, - ], - }, +export const OneFieldUpdate = Template.bind({}); +OneFieldUpdate.args = { + catalogDiff: oneFieldUpdateCatalogDiff, catalog: { streams: [] }, };
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 79120f3e6475..1f2f6d8b08ed 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss @@ -1,18 +1,16 @@ -@use "../../../../scss/variables"; -@use "../../../../scss/colors"; +@use "scss/variables"; +@use "scss/colors"; .row { display: flex; flex-direction: row; align-items: center; - padding: variables.$spacing-sm variables.$spacing-xl; gap: variables.$spacing-md; height: 35px; font-size: 12px; } .content { - padding-left: 10px; display: flex; width: 100%; height: 35px; @@ -39,24 +37,21 @@ &.mod { color: colors.$blue-100; + margin-left: -5px; } } -.iconCell { - background: white; +.iconContainer { width: 10px; height: 100%; display: flex; align-items: center; + margin: 0 variables.$spacing-md; } .cell { - width: 228px; - &.update { - border-radius: variables.$border-radius-sm; - - & span { + span { background-color: rgba(98, 94, 255, 10%); padding: variables.$spacing-sm; border-radius: variables.$border-radius-sm; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx index 3f8d715c5906..3bfa0152760f 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -38,29 +38,29 @@ export const FieldRow: React.FC = ({ transform }) => { return (
- {diffType === "add" ? ( - - ) : diffType === "remove" ? ( - - ) : ( - - - - )} - -
- {fieldName} +
+ {diffType === "add" ? ( + + ) : diffType === "remove" ? ( + + ) : ( +
+ +
+ )}
-
- {oldType && newType && ( + {fieldName} +
+
{oldType} {newType} - )} -
-
+ 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 a1974be7af35..adbb2651fd93 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss @@ -6,7 +6,7 @@ flex-direction: row; height: 40px; align-items: center; - padding: variables.$spacing-sm variables.$spacing-xl; + padding: variables.$spacing-sm variables.$spacing-lg; gap: variables.$spacing-md; border-bottom: 1px solid colors.$white; width: 100%; @@ -21,6 +21,19 @@ } } +.content { + display: flex; + align-items: center; +} + +.iconContainer { + width: 10px; + height: 100%; + display: flex; + align-items: center; + margin-right: variables.$spacing-lg; +} + .icon { margin-top: -1px; @@ -49,7 +62,7 @@ .nameCell, %nameCell { - width: 140px; + width: 150px; text-align: left; & .row { diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx index de077b279de8..083699a47076 100644 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx @@ -35,16 +35,20 @@ export const StreamRow: React.FC = ({ streamTransform, syncMode, const namespace = streamTransform.streamDescriptor.namespace; return (
- {diffVerb === "new" ? ( - - ) : diffVerb === "removed" ? ( - - ) : ( - - )} + +
+
+ {diffVerb === "new" ? ( + + ) : diffVerb === "removed" ? ( + + ) : ( + + )} +
+ {namespace} +
{namespace} {itemName} {diffVerb === "removed" && syncMode && }