🪟 Per-Stream state new flow

airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts

@@ -17,7 +17,7 @@ describe("Connection main actions", () => {
   });
 
   it("Update connection", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
+    cy.intercept("/api/v1/web_backend/connections/updateNew").as("updateConnection");
 
     createTestConnection("Test update connection source cypress", "Test update connection destination cypress");
 

airbyte-webapp/package.json

@@ -78,7 +78,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.3",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.2.4",
     "@types/flat": "^5.0.2",
     "@types/jest": "^27.4.1",
     "@types/json-schema": "^7.0.11",

airbyte-webapp/src/App.tsx

@@ -8,6 +8,7 @@ import { ServicesProvider } from "core/servicesProvider";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { defaultFeatures, FeatureService } from "hooks/services/Feature";
 import { FormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import { ModalServiceProvider } from "hooks/services/Modal";
 import NotificationService from "hooks/services/Notification";
 import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 import { StoreProvider } from "views/common/StoreProvider";
@@ -44,9 +45,11 @@ const Services: React.FC = ({ children }) => (
         <FeatureService features={defaultFeatures}>
           <NotificationService>
             <ConfirmationModalService>
-              <FormChangeTrackerService>
-                <ApiServices>{children}</ApiServices>
-              </FormChangeTrackerService>
+              <ModalServiceProvider>
+                <FormChangeTrackerService>
+                  <ApiServices>{children}</ApiServices>
+                </FormChangeTrackerService>
+              </ModalServiceProvider>
             </ConfirmationModalService>
           </NotificationService>
         </FeatureService>

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

@@ -22,10 +22,10 @@ const cardStyleBySize = {
 };
 
 const Modal: React.FC<ModalProps> = ({ children, title, onClose, clear, closeOnBackground, size }) => {
-  const handleUserKeyPress = useCallback((event, closeModal) => {
-    const { keyCode } = event;
+  const handleUserKeyPress = useCallback((event: KeyboardEvent, closeModal: () => void) => {
+    const { key } = event;
     // Escape key
-    if (keyCode === 27) {
+    if (key === "Escape") {
       closeModal();
     }
   }, []);

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

@@ -2,6 +2,6 @@
 
 .modalBody {
   padding: variables.$spacing-lg variables.$spacing-xl;
-  overflow: scroll;
+  overflow: auto;
   max-width: 100%;
 }

airbyte-webapp/src/core/domain/connection/ConnectionService.ts

@@ -1,4 +1,4 @@
-import { deleteConnection, resetConnection, syncConnection, getState } from "../../request/AirbyteClient";
+import { deleteConnection, resetConnection, syncConnection, getState, getStateType } from "../../request/AirbyteClient";
 import { AirbyteRequestService } from "../../request/AirbyteRequestService";
 
 export class ConnectionService extends AirbyteRequestService {
@@ -17,4 +17,8 @@ export class ConnectionService extends AirbyteRequestService {
   public getState(connectionId: string) {
     return getState({ connectionId }, this.requestOptions);
   }
+
+  public getStateType(connectionId: string) {
+    return getStateType({ connectionId }, this.requestOptions);
+  }
 }

airbyte-webapp/src/core/domain/connection/WebBackendConnectionService.ts

@@ -4,7 +4,7 @@ import {
   webBackendCreateConnection,
   webBackendGetConnection,
   webBackendListConnectionsForWorkspace,
-  webBackendUpdateConnection,
+  webBackendUpdateConnectionNew as webBackendUpdateConnection,
 } from "../../request/AirbyteClient";
 import { AirbyteRequestService } from "../../request/AirbyteRequestService";
 

airbyte-webapp/src/core/domain/connection/utils.ts

@@ -19,6 +19,7 @@ export const buildConnectionUpdate = (
   connection: WebBackendConnectionRead,
   connectionUpdate: Partial<WebBackendConnectionUpdate>
 ): WebBackendConnectionUpdate => ({
+  skipReset: true,
   ...toWebBackendConnectionUpdate(connection),
   ...connectionUpdate,
 });

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

@@ -0,0 +1,93 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useEffectOnce } from "react-use";
+
+import { ModalServiceProvider, useModalService } from "./ModalService";
+import { ModalResult } from "./types";
+
+const TestComponent: React.FC<{ onModalResult?: (result: ModalResult<unknown>) => void }> = ({ onModalResult }) => {
+  const { openModal } = useModalService();
+  useEffectOnce(() => {
+    openModal({
+      title: "Test Modal Title",
+      content: ({ onCancel, onClose }) => (
+        <div data-testid="testModalContent">
+          <button onClick={onCancel} data-testid="cancel">
+            Cancel
+          </button>
+          <button onClick={() => onClose("reason1")} data-testid="close-reason1">
+            Close Reason 1
+          </button>
+          <button onClick={() => onClose("reason2")} data-testid="close-reason2">
+            Close Reason 2
+          </button>
+        </div>
+      ),
+    }).then(onModalResult);
+  });
+  return null;
+};
+
+const renderModal = (resultCallback?: (reason: unknown) => void) => {
+  return render(
+    <ModalServiceProvider>
+      <TestComponent onModalResult={resultCallback} />
+    </ModalServiceProvider>
+  );
+};
+
+describe("ModalService", () => {
+  it("should open a modal on openModal", () => {
+    const rendered = renderModal();
+
+    expect(rendered.getByText("Test Modal Title")).toBeTruthy();
+    expect(rendered.getByTestId("testModalContent")).toBeTruthy();
+  });
+
+  it("should close the modal with escape and emit a cancel result", async () => {
+    const user = userEvent.setup();
+
+    const resultCallback = jest.fn();
+
+    const rendered = renderModal(resultCallback);
+
+    await user.keyboard("{Escape}");
+
+    expect(rendered.queryByTestId("testModalContent")).toBeFalsy();
+    expect(resultCallback).toHaveBeenCalledWith({ type: "canceled" });
+  });
+
+  it("should allow cancelling the modal from inside", async () => {
+    const user = userEvent.setup();
+
+    const resultCallback = jest.fn();
+
+    const rendered = renderModal(resultCallback);
+
+    await user.click(rendered.getByTestId("cancel"));
+
+    expect(rendered.queryByTestId("testModalContent")).toBeFalsy();
+    expect(resultCallback).toHaveBeenCalledWith({ type: "canceled" });
+  });
+
+  it("should allow closing the button with a reason and return that reason", async () => {
+    const user = userEvent.setup();
+
+    const resultCallback = jest.fn();
+
+    let rendered = renderModal(resultCallback);
+
+    await user.click(rendered.getByTestId("close-reason1"));
+
+    expect(rendered.queryByTestId("testModalContent")).toBeFalsy();
+    expect(resultCallback).toHaveBeenCalledWith({ type: "closed", reason: "reason1" });
+
+    resultCallback.mockReset();
+    rendered = renderModal(resultCallback);
+
+    await user.click(rendered.getByTestId("close-reason2"));
+
+    expect(rendered.queryByTestId("testModalContent")).toBeFalsy();
+    expect(resultCallback).toHaveBeenCalledWith({ type: "closed", reason: "reason2" });
+  });
+});

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

@@ -0,0 +1,64 @@
+import React, { useContext, useMemo, useRef, useState } from "react";
+import { firstValueFrom, Subject } from "rxjs";
+
+import { Modal } from "components";
+
+import { ModalOptions, ModalResult, ModalServiceContext } from "./types";
+
+const modalServiceContext = React.createContext<ModalServiceContext | undefined>(undefined);
+
+export const ModalServiceProvider: React.FC = ({ children }) => {
+  // The any here is due to the fact, that every call to open a modal might come in with
+  // a different type, thus we can't type this with unknown or a generic.
+  // The consuming code of this service though is properly typed, so that this `any` stays
+  // encapsulated within this component.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [modalOptions, setModalOptions] = useState<ModalOptions<any>>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const resultSubjectRef = useRef<Subject<ModalResult<any>>>();
+
+  const service: ModalServiceContext = useMemo(
+    () => ({
+      openModal: (options) => {
+        resultSubjectRef.current = new Subject();
+        setModalOptions(options);
+
+        return firstValueFrom(resultSubjectRef.current).then((reason) => {
+          setModalOptions(undefined);
+          resultSubjectRef.current = undefined;
+          return reason;
+        });
+      },
+      closeModal: () => {
+        resultSubjectRef.current?.next({ type: "canceled" });
+      },
+    }),
+    []
+  );
+
+  return (
+    <modalServiceContext.Provider value={service}>
+      {children}
+      {modalOptions && (
+        <Modal
+          title={modalOptions.title}
+          size={modalOptions.size}
+          onClose={() => resultSubjectRef.current?.next({ type: "canceled" })}
+        >
+          <modalOptions.content
+            onCancel={() => resultSubjectRef.current?.next({ type: "canceled" })}
+            onClose={(reason) => resultSubjectRef.current?.next({ type: "closed", reason })}
+          />
+        </Modal>
+      )}
+    </modalServiceContext.Provider>
+  );
+};
+
+export const useModalService = () => {
+  const context = useContext(modalServiceContext);
+  if (!context) {
+    throw new Error("Can't use ModalService outside ModalServiceProvider");
+  }
+  return context;
+};

airbyte-webapp/src/hooks/services/Modal/index.ts

@@ -0,0 +1 @@
+export * from "./ModalService";

airbyte-webapp/src/hooks/services/Modal/types.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { ModalProps } from "components/Modal/Modal";
+
+export interface ModalOptions<T> {
+  title: ModalProps["title"];
+  size?: ModalProps["size"];
+  content: React.ComponentType<ModalContentProps<T>>;
+}
+
+export type ModalResult<T> = { type: "canceled" } | { type: "closed"; reason: T };
+
+interface ModalContentProps<T> {
+  onClose: (reason: T) => void;
+  onCancel: () => void;
+}
+
+export interface ModalServiceContext {
+  openModal: <ResultType>(options: ModalOptions<ResultType>) => Promise<ModalResult<ResultType>>;
+  closeModal: () => void;
+}

airbyte-webapp/src/hooks/services/useConnectionHook.tsx

@@ -63,7 +63,7 @@ function useWebConnectionService() {
   );
 }
 
-function useConnectionService() {
+export function useConnectionService() {
   const config = useConfig();
   const middlewares = useDefaultRequestMiddlewares();
   return useInitService(() => new ConnectionService(config.apiUrl, middlewares), [config.apiUrl, middlewares]);
@@ -190,20 +190,11 @@ const useUpdateConnection = () => {
   const service = useWebConnectionService();
   const queryClient = useQueryClient();
 
-  return useMutation(
-    (connectionUpdate: WebBackendConnectionUpdate) => {
-      const withRefreshedCatalogCleaned = connectionUpdate.withRefreshedCatalog
-        ? { withRefreshedCatalog: connectionUpdate.withRefreshedCatalog }
-        : null;
-
-      return service.update({ ...connectionUpdate, ...withRefreshedCatalogCleaned });
+  return useMutation((connectionUpdate: WebBackendConnectionUpdate) => service.update(connectionUpdate), {
+    onSuccess: (connection) => {
+      queryClient.setQueryData(connectionsKeys.detail(connection.connectionId), connection);
     },
-    {
-      onSuccess: (connection) => {
-        queryClient.setQueryData(connectionsKeys.detail(connection.connectionId), connection);
-      },
-    }
-  );
+  });
 };
 
 const useConnectionList = (): ListConnection => {