🪟 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 <[email protected]>

* Update airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* spacing, use ModalFooter

* Update airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* 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 <[email protected]>

* Update airbyte-webapp/src/views/Connection/CatalogDiffModal/utils.tsx

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

* linting and unused class cleanup

Co-authored-by: Edmundo Ruiz Ghanem <[email protected]>

Author: teallarson

airbyte-webapp/.storybook/withProvider.tsx

@@ -13,20 +13,17 @@ 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: () => {},
   removeContextProps: () => {},
   service: {
     track: () => {},
   },
-} as unknown) as AnalyticsServiceProviderValue;
+} as unknown as AnalyticsServiceProviderValue;
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -45,12 +42,9 @@ export const withProviders = (getStory) => (
           <MemoryRouter>
             <IntlProvider messages={messages} locale={"en"}>
               <ThemeProvider theme={theme}>
-                <ConfigServiceProvider
-                  defaultConfig={defaultConfig}
-                  providers={[]}
-                  >
+                <ConfigServiceProvider defaultConfig={defaultConfig} providers={[]}>
                   <DocumentationPanelProvider>
-                    <FeatureService>
+                    <FeatureService features={[]}>
                       <GlobalStyle />
                       {getStory()}
                     </FeatureService>

airbyte-webapp/package-lock.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",

airbyte-webapp/package.json

@@ -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,4 +53,8 @@
   font-size: 10px;
   color: colors.$white;
   padding: 3px 0 3px;
+
+  &.light {
+    font-weight: 500;
+  }
 }

airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss

@@ -9,18 +9,28 @@ interface ImageBlockProps {
   img?: string;
   num?: number;
   small?: boolean;
+  color?: string;
+  light?: boolean;
+  ariaLabel?: string;
 }
 
-export const ImageBlock: React.FC<ImageBlockProps> = ({ img, num, small }) => {
+export const ImageBlock: React.FC<ImageBlockProps> = ({ img, num, small, color, light, ariaLabel }) => {
   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 (
-    <div className={imageCircleClassnames}>
-      {num ? <div className={styles.number}>{num}</div> : <div className={styles.icon}>{getIcon(img)}</div>}
+    <div className={imageCircleClassnames} aria-label={ariaLabel}>
+      {num ? <div className={numberStyles}>{num}</div> : <div className={styles.icon}>{getIcon(img)}</div>}
     </div>
   );
 };

airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx

@@ -4,4 +4,7 @@
   padding: variables.$spacing-lg variables.$spacing-xl;
   overflow: auto;
   max-width: 100%;
+  &.paddingNone {
+    padding: 0;
+  }
 }

airbyte-webapp/src/components/Modal/ModalBody.module.scss

@@ -1,12 +1,18 @@
+import classnames from "classnames";
+
 import styles from "./ModalBody.module.scss";
 
 interface ModalBodyProps {
   maxHeight?: number | string;
+  padded?: boolean;
 }
 
-export const ModalBody: React.FC<ModalBodyProps> = ({ children, maxHeight }) => {
+export const ModalBody: React.FC<ModalBodyProps> = ({ children, maxHeight, padded = true }) => {
+  const modalStyles = classnames(styles.modalBody, {
+    [styles.paddingNone]: !padded,
+  });
   return (
-    <div className={styles.modalBody} style={{ maxHeight }}>
+    <div className={modalStyles} style={{ maxHeight }}>
       {children}
     </div>
   );

airbyte-webapp/src/components/Modal/ModalBody.tsx

@@ -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>
+  );
+};

airbyte-webapp/src/components/icons/ModificationIcon.tsx

@@ -43,7 +43,7 @@ export const ModalServiceProvider: React.FC = ({ children }) => {
         <Modal
           title={modalOptions.title}
           size={modalOptions.size}
-          onClose={() => resultSubjectRef.current?.next({ type: "canceled" })}
+          onClose={modalOptions.preventCancel ? undefined : () => resultSubjectRef.current?.next({ type: "canceled" })}
         >
           <modalOptions.content
             onCancel={() => resultSubjectRef.current?.next({ type: "canceled" })}

airbyte-webapp/src/hooks/services/Modal/ModalService.tsx

@@ -5,6 +5,7 @@ import { ModalProps } from "components/Modal/Modal";
 export interface ModalOptions<T> {
   title: ModalProps["title"];
   size?: ModalProps["size"];
+  preventCancel?: boolean;
   content: React.ComponentType<ModalContentProps<T>>;
 }