🪟Auto detect schema: Remove backdrop on non-breaking change, add toast on no refresh (#21998)

* Don't show schema changes backdrop for non-breaking changes

* Show toast when there are no schema updates detected after refresh

* Remove commented out test in SchemaChangesBackdrop

* Add NotificationService to TestWrapper

Author: edmundito

airbyte-webapp/src/components/connection/ConnectionForm/SchemaChangeBackdrop.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Text } from "components/ui/Text";
@@ -21,19 +20,17 @@ export const SchemaChangeBackdrop: React.FC<React.PropsWithChildren<unknown>> =
 
   const { hasBreakingSchemaChange, hasNonBreakingSchemaChange } = useSchemaChanges(schemaChange);
 
-  const schemaChangeImage = useMemo(() => {
-    return hasBreakingSchemaChange ? <OctaviaRedFlag /> : hasNonBreakingSchemaChange ? <OctaviaYellowFlag /> : null;
-  }, [hasBreakingSchemaChange, hasNonBreakingSchemaChange]);
-
-  if (!allowAutoDetectSchema || (!hasBreakingSchemaChange && !hasNonBreakingSchemaChange) || schemaHasBeenRefreshed) {
+  if (!allowAutoDetectSchema || !hasBreakingSchemaChange || schemaHasBeenRefreshed) {
     return <>{children}</>;
   }
 
   return (
     <div className={styles.schemaChangeBackdropContainer} data-testid="schemaChangesBackdrop">
       <div className={styles.backdrop}>
         <div className={styles.contentContainer}>
-          <div>{schemaChangeImage}</div>
+          <div>
+            {hasBreakingSchemaChange ? <OctaviaRedFlag /> : hasNonBreakingSchemaChange ? <OctaviaYellowFlag /> : null}
+          </div>
           <Text className={styles.text}>
             <FormattedMessage id="connectionForm.schemaChangesBackdrop.message" />
           </Text>

airbyte-webapp/src/components/connection/ConnectionForm/SchemaChangesBackdrop.test.tsx

@@ -43,19 +43,22 @@ describe("SchemaChangesBackdrop", () => {
     userEvent.click(getByTestId("bg-button"));
     expect(buttonSpy).not.toHaveBeenCalled();
   });
-  it("renders if there are non-breaking changes and prevents background interaction", () => {
+
+  it("does not render if there are non-breaking changes", () => {
     mockUseConnectionEditService.mockReturnValue({
       connection: { mockConnection, schemaChange: SchemaChange.non_breaking },
       schemaHasBeenRefreshed: false,
       schemaRefreshing: false,
     });
 
-    const { getByTestId } = renderComponent();
+    const { queryByTestId, getByTestId } = renderComponent();
+
+    expect(queryByTestId("schemaChangesBackdrop")).toBeFalsy();
 
-    expect(getByTestId("schemaChangesBackdrop")).toMatchSnapshot();
     userEvent.click(getByTestId("bg-button"));
     expect(buttonSpy).not.toHaveBeenCalled();
   });
+
   it("does not render if there are no changes", () => {
     mockUseConnectionEditService.mockReturnValue({
       connection: { mockConnection, schemaChange: SchemaChange.no_change },
@@ -70,6 +73,7 @@ describe("SchemaChangesBackdrop", () => {
     userEvent.click(getByTestId("bg-button"));
     expect(buttonSpy).not.toHaveBeenCalled();
   });
+
   it("does not render if schema has been refreshed", () => {
     mockUseConnectionEditService.mockReturnValue({
       connection: mockConnection,

airbyte-webapp/src/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap

@@ -1,5 +1,6 @@
 import pick from "lodash/pick";
 import { useContext, useState, createContext, useCallback } from "react";
+import { useIntl } from "react-intl";
 import { useAsyncFn } from "react-use";
 
 import {
@@ -10,6 +11,7 @@ import {
 } from "core/request/AirbyteClient";
 
 import { ConnectionFormServiceProvider } from "../ConnectionForm/ConnectionFormService";
+import { useNotificationService } from "../Notification/NotificationService";
 import { useGetConnection, useUpdateConnection, useWebConnectionService } from "../useConnectionHook";
 import { SchemaError } from "../useSourceHook";
 
@@ -37,16 +39,30 @@ const getConnectionCatalog = (connection: WebBackendConnectionRead): ConnectionC
   pick(connection, ["syncCatalog", "catalogId"]);
 
 const useConnectionEdit = ({ connectionId }: ConnectionEditProps): ConnectionEditHook => {
+  const { formatMessage } = useIntl();
+  const { registerNotification, unregisterNotificationById } = useNotificationService();
   const connectionService = useWebConnectionService();
   const [connection, setConnection] = useState(useGetConnection(connectionId));
   const [catalog, setCatalog] = useState<ConnectionCatalog>(() => getConnectionCatalog(connection));
   const [schemaHasBeenRefreshed, setSchemaHasBeenRefreshed] = useState(false);
 
   const [{ loading: schemaRefreshing, error: schemaError }, refreshSchema] = useAsyncFn(async () => {
+    unregisterNotificationById("connection.noDiff");
+
     const refreshedConnection = await connectionService.getConnection(connectionId, true);
     if (refreshedConnection.catalogDiff && refreshedConnection.catalogDiff.transforms?.length > 0) {
       setConnection(refreshedConnection);
       setSchemaHasBeenRefreshed(true);
+    } else {
+      setConnection((connection) => ({
+        ...connection,
+        schemaChange: refreshedConnection.schemaChange,
+      }));
+
+      registerNotification({
+        id: "connection.noDiff",
+        text: formatMessage({ id: "connection.updateSchema.noDiff" }),
+      });
     }
   }, [connectionId]);
 

airbyte-webapp/src/hooks/services/ConnectionEdit/ConnectionEditService.tsx

@@ -49,14 +49,16 @@ const NotificationService = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export const useNotificationService: (
-  notification?: Notification,
-  dependencies?: []
-) => {
+interface NotificationServiceHook {
   registerNotification: (notification: Notification) => void;
   unregisterAllNotifications: () => void;
   unregisterNotificationById: (notificationId: string | number) => void;
-} = (notification, dependencies) => {
+}
+
+export const useNotificationService: (notification?: Notification, dependencies?: []) => NotificationServiceHook = (
+  notification,
+  dependencies
+) => {
   const notificationService = useContext(notificationServiceContext);
   if (!notificationService) {
     throw new Error("useNotificationService must be used within a NotificationService.");

airbyte-webapp/src/hooks/services/Notification/NotificationService.tsx

@@ -382,6 +382,7 @@
   "connection.updateSchema.streamName": "Stream name",
   "connection.updateSchema.namespace": "Namespace",
   "connection.updateSchema.dataType": "Data type",
+  "connection.updateSchema.noDiff": "No changes were detected in the source schema.",
 
   "connection.catalogTree.sourceDefined": "'<source defined>",
   "connection.catalogTree.sourceSchema": "'<source schema>",

airbyte-webapp/src/locales/en.json

@@ -17,6 +17,7 @@ import { ServicesProvider } from "core/servicesProvider";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { defaultOssFeatures, FeatureItem, FeatureService } from "hooks/services/Feature";
 import { ModalServiceProvider } from "hooks/services/Modal";
+import { NotificationService } from "hooks/services/Notification";
 import en from "locales/en.json";
 import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 
@@ -56,17 +57,19 @@ export const TestWrapper: React.FC<React.PropsWithChildren<TestWrapperOptions>>
     <IntlProvider locale="en" messages={en} onError={() => null}>
       <ConfigContext.Provider value={{ config }}>
         <AnalyticsProvider>
-          <FeatureService features={features}>
-            <ServicesProvider>
-              <ModalServiceProvider>
-                <ConfirmationModalService>
-                  <QueryClientProvider client={new QueryClient()}>
-                    <MemoryRouter>{children}</MemoryRouter>
-                  </QueryClientProvider>
-                </ConfirmationModalService>
-              </ModalServiceProvider>
-            </ServicesProvider>
-          </FeatureService>
+          <NotificationService>
+            <FeatureService features={features}>
+              <ServicesProvider>
+                <ModalServiceProvider>
+                  <ConfirmationModalService>
+                    <QueryClientProvider client={new QueryClient()}>
+                      <MemoryRouter>{children}</MemoryRouter>
+                    </QueryClientProvider>
+                  </ConfirmationModalService>
+                </ModalServiceProvider>
+              </ServicesProvider>
+            </FeatureService>
+          </NotificationService>
         </AnalyticsProvider>
       </ConfigContext.Provider>
     </IntlProvider>