-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🪟 Add catalog changes modal on schema refresh (#14074)
* WIP - types, props, components * logic tweaks * moving around * begin styling and content * modal formatting, section header * client update, add/removed streams works * theme tweaks * WIP -- adding accordion * hook for modal display logic * display logic, row/accordion progress * fix atrocities of table rendering, move header to own component * headers cleanup * headers cleanup * imageblock more flexible * progress on table todo: consolidate, complete * styling good, animation TODO * self review pt. 1 * cleanup * note * note * accessibility and i18n improvements * fix typo in scss * missig i18l things * move icon to /icons * Update airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * Update airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * spacing, use ModalFooter * Update airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * begin moving to memoized reducer function * memoize diff sorter and remove extra divs * cleanup * modal body padding * up0date to use modal service * move calculated string mode out of component * respond to review * add accordionheader component * catalog can be undefined * cleanup cell rendering * cleanup and make storybook work again * move table styles within a parent class * subheading alignment consistency * more padding/spacing adjustments * cleanup from review * mixup from rebase * set width on modal level not content level * Update airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * Update airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> * linting and unused class cleanup Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>
- Loading branch information
1 parent
d3d60c1
commit a4ccaee
Showing
34 changed files
with
901 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
export const ModificationIcon: React.FC = () => { | ||
return ( | ||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"> | ||
<path | ||
fillRule="evenodd" | ||
clipRule="evenodd" | ||
d="M10.8332 9.16663L14.1665 6.66663L10.8332 4.16663V5.83329H4.1665V7.49996H10.8332V9.16663Z" | ||
fill="#CBC8FF" | ||
/> | ||
<path | ||
fillRule="evenodd" | ||
clipRule="evenodd" | ||
d="M9.16683 15.8334L5.8335 13.3334L9.16683 10.8334V12.5H15.8335V14.1667H9.16683V15.8334Z" | ||
fill="#CBC8FF" | ||
/> | ||
</svg> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
@use "../../../scss/variables"; | ||
|
||
.modalContent { | ||
display: flex; | ||
flex-direction: column; | ||
} |
42 changes: 42 additions & 0 deletions
42
airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { useMemo } from "react"; | ||
import { FormattedMessage } from "react-intl"; | ||
|
||
import { Button } from "components"; | ||
|
||
import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient"; | ||
|
||
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"; | ||
|
||
interface CatalogDiffModalProps { | ||
catalogDiff: CatalogDiff; | ||
catalog: AirbyteCatalog; | ||
onClose: () => void; | ||
} | ||
|
||
export const CatalogDiffModal: React.FC<CatalogDiffModalProps> = ({ catalogDiff, catalog, onClose }) => { | ||
const { newItems, removedItems, changedItems } = useMemo( | ||
() => getSortedDiff(catalogDiff.transforms), | ||
[catalogDiff.transforms] | ||
); | ||
|
||
return ( | ||
<> | ||
<ModalBody maxHeight={400} padded={false}> | ||
<div className={styles.modalContent}> | ||
{removedItems.length > 0 && <DiffSection streams={removedItems} diffVerb="removed" catalog={catalog} />} | ||
{newItems.length > 0 && <DiffSection streams={newItems} diffVerb="new" />} | ||
{changedItems.length > 0 && <FieldSection streams={changedItems} diffVerb="changed" />} | ||
</div> | ||
</ModalBody> | ||
<ModalFooter> | ||
<Button onClick={() => onClose()}> | ||
<FormattedMessage id="connection.updateSchema.confirm" /> | ||
</Button> | ||
</ModalFooter> | ||
</> | ||
); | ||
}; |
20 changes: 20 additions & 0 deletions
20
airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
@use "../../../../scss/variables"; | ||
@forward "../components/StreamRow.module.scss"; | ||
@forward "../components/DiffSection.module.scss"; | ||
|
||
.accordionContainer { | ||
width: 100%; | ||
} | ||
|
||
.accordionButton { | ||
width: 100%; | ||
background: none; | ||
border: none; | ||
height: 40px; | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
justify-content: flex-start; | ||
padding: variables.$spacing-sm; | ||
font-weight: 400; | ||
} |
45 changes: 45 additions & 0 deletions
45
airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { Disclosure } from "@headlessui/react"; | ||
import { useMemo } from "react"; | ||
|
||
import { StreamTransform } from "core/request/AirbyteClient"; | ||
|
||
import { getSortedDiff } from "../utils"; | ||
import styles from "./DiffAccordion.module.scss"; | ||
import { DiffAccordionHeader } from "./DiffAccordionHeader"; | ||
import { DiffFieldTable } from "./DiffFieldTable"; | ||
|
||
interface DiffAccordionProps { | ||
streamTransform: StreamTransform; | ||
} | ||
|
||
export const DiffAccordion: React.FC<DiffAccordionProps> = ({ streamTransform }) => { | ||
const { newItems, removedItems, changedItems } = useMemo( | ||
() => getSortedDiff(streamTransform.updateStream), | ||
[streamTransform.updateStream] | ||
); | ||
|
||
return ( | ||
<div className={styles.accordionContainer}> | ||
<Disclosure> | ||
{({ open }) => ( | ||
<> | ||
<Disclosure.Button className={styles.accordionButton}> | ||
<DiffAccordionHeader | ||
streamDescriptor={streamTransform.streamDescriptor} | ||
removedCount={removedItems.length} | ||
newCount={newItems.length} | ||
changedCount={changedItems.length} | ||
open={open} | ||
/> | ||
</Disclosure.Button> | ||
<Disclosure.Panel> | ||
{removedItems.length > 0 && <DiffFieldTable fieldTransforms={removedItems} diffVerb="removed" />} | ||
{newItems.length > 0 && <DiffFieldTable fieldTransforms={newItems} diffVerb="new" />} | ||
{changedItems.length > 0 && <DiffFieldTable fieldTransforms={changedItems} diffVerb="changed" />} | ||
</Disclosure.Panel> | ||
</> | ||
)} | ||
</Disclosure> | ||
</div> | ||
); | ||
}; |
Oops, something went wrong.