🪟 Per-Stream state new flow

airbyte-webapp/src/App.tsx

@@ -8,6 +8,7 @@ import { ServicesProvider } from "core/servicesProvider";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { 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>
           <NotificationService>
             <ConfirmationModalService>
-              <FormChangeTrackerService>
-                <ApiServices>{children}</ApiServices>
-              </FormChangeTrackerService>
+              <ModalServiceProvider>
+                <FormChangeTrackerService>
+                  <ApiServices>{children}</ApiServices>
+                </FormChangeTrackerService>
+              </ModalServiceProvider>
             </ConfirmationModalService>
           </NotificationService>
         </FeatureService>

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

@@ -31,7 +31,9 @@ export interface ConfirmationModalProps {
   title: string;
   text: string;
   submitButtonText: string;
-  onSubmit: () => void;
+  secondaryButtonText?: string;
+  secondaryButtonDataId?: string;
+  onSubmit: (button: "primary" | "secondary") => void;
   submitButtonDataId?: string;
   cancelButtonText?: string;
 }
@@ -43,10 +45,13 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   onSubmit,
   submitButtonText,
   submitButtonDataId,
+  secondaryButtonText,
+  secondaryButtonDataId,
   cancelButtonText,
 }) => {
   const { isLoading, startAction } = useLoadingState();
-  const onSubmitBtnClick = () => startAction({ action: () => onSubmit() });
+  const onSubmitBtnClick = () => startAction({ action: () => onSubmit("primary") });
+  const onSecondaryBtnClick = () => startAction({ action: () => onSubmit("secondary") });
 
   return (
     <Modal onClose={onClose} title={<FormattedMessage id={title} />}>
@@ -56,6 +61,17 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           <ButtonWithMargin onClick={onClose} type="button" secondary disabled={isLoading}>
             <FormattedMessage id={cancelButtonText ?? "form.cancel"} />
           </ButtonWithMargin>
+          {secondaryButtonText && (
+            <ButtonWithMargin
+              danger
+              type="button"
+              onClick={onSecondaryBtnClick}
+              data-testid={secondaryButtonDataId}
+              disabled={isLoading}
+            >
+              <FormattedMessage id={secondaryButtonText} />
+            </ButtonWithMargin>
+          )}
           <LoadingButton danger onClick={onSubmitBtnClick} data-id={submitButtonDataId} isLoading={isLoading}>
             <FormattedMessage id={submitButtonText} />
           </LoadingButton>

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/hooks/services/ConfirmationModal/ConfirmationModalService.tsx

@@ -66,6 +66,8 @@ export const ConfirmationModalService = ({ children }: { children: React.ReactNo
           submitButtonText={state.confirmationModal.submitButtonText}
           submitButtonDataId={state.confirmationModal.submitButtonDataId}
           cancelButtonText={state.confirmationModal.cancelButtonText}
+          secondaryButtonText={state.confirmationModal.secondaryButtonText}
+          secondaryButtonDataId={state.confirmationModal.secondaryButtonDataId}
         />
       ) : null}
     </>

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

@@ -0,0 +1,54 @@
+import React, { useContext, useMemo, useRef, useState } from "react";
+import { firstValueFrom, Subject } from "rxjs";
+
+import { Modal } from "components";
+
+import { ModalOptions, ModalResult, ModalServiceContextType } from "./types";
+
+const ModalServiceContext = React.createContext<ModalServiceContextType | undefined>(undefined);
+
+export const ModalServiceProvider: React.FC = ({ children }) => {
+  const [modalOptions, setModalOptions] = useState<ModalOptions>();
+  const promiseRef = useRef<Subject<ModalResult>>();
+
+  const service: ModalServiceContextType = useMemo(
+    () => ({
+      openModal: (options) => {
+        promiseRef.current = new Subject();
+        setModalOptions(options);
+
+        return firstValueFrom(promiseRef.current).then((reason) => {
+          setModalOptions(undefined);
+          promiseRef.current = undefined;
+          return reason;
+        });
+      },
+      closeModal: () => {
+        promiseRef.current?.next({ type: "canceled" });
+      },
+    }),
+    []
+  );
+
+  return (
+    <ModalServiceContext.Provider value={service}>
+      {children}
+      {modalOptions && (
+        <Modal title={modalOptions.title} onClose={() => promiseRef.current?.next({ type: "canceled" })}>
+          <modalOptions.content
+            onCancel={() => promiseRef.current?.next({ type: "canceled" })}
+            onClose={(reason: unknown) => promiseRef.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,18 @@
+import React from "react";
+
+export interface ModalOptions {
+  title: React.ReactNode;
+  content: React.ComponentType<ModalContentProps>;
+}
+
+export type ModalResult = { type: "canceled" } | { type: "closed"; reason: unknown };
+
+interface ModalContentProps {
+  onClose: (reason: unknown) => void;
+  onCancel: () => void;
+}
+
+export interface ModalServiceContextType {
+  openModal: (options: ModalOptions) => Promise<ModalResult>;
+  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]);

airbyte-webapp/src/locales/en.json

@@ -106,8 +106,6 @@
   "form.destinationConnector": "Destination connector",
   "form.addItems": "Add",
   "form.items": "Items",
-  "form.toSaveSchema": "To save the new schema, click on Save changes.",
-  "form.noteStartSync": "Note that it will delete all the data in your destination and start syncing from scratch. ",
   "form.pkSelected": "{count, plural, =0 { } one {{items}} other {# keys selected}}",
   "form.url.error": "field must be a valid URL",
   "form.setupGuide": "Setup Guide",
@@ -317,7 +315,7 @@
   "syncMode.full_refresh": "Full refresh",
   "syncMode.incremental": "Incremental",
 
-  "connection.warningUpdateSchema": "WARNING! Updating the schema will delete all the data for this connection in your destination and start syncing from scratch.",
+  "connection.updateSchemaWithoutReset": "Save without reset",
   "connection.title": "Connection",
   "connection.description": "<b>Connections</b> link Sources to Destinations.",
   "connection.fromTo": "{source} → {destination}",
@@ -326,7 +324,6 @@
   "connection.testsFailed": "The connection tests failed.",
   "connection.destinationCheckSettings": "Check destination settings",
   "connection.sourceCheckSettings": "Check source settings",
-  "connection.saveAndReset": "Save changes & reset data",
   "connection.destinationTestAgain": "Test destination connection again",
   "connection.sourceTestAgain": "Test source connection again",
   "connection.resetData": "Reset your data",

airbyte-webapp/src/packages/cloud/App.tsx

@@ -10,6 +10,7 @@ import { I18nProvider } from "core/i18n";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { FeatureService } from "hooks/services/Feature";
 import { FormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import { ModalServiceProvider } from "hooks/services/Modal";
 import NotificationServiceProvider from "hooks/services/Notification";
 import en from "locales/en.json";
 import { Routing } from "packages/cloud/cloudRoutes";
@@ -37,15 +38,17 @@ const Services: React.FC = ({ children }) => (
     <ApiErrorBoundary>
       <NotificationServiceProvider>
         <ConfirmationModalService>
-          <FormChangeTrackerService>
-            <FeatureService>
-              <AppServicesProvider>
-                <AuthenticationProvider>
-                  <IntercomProvider>{children}</IntercomProvider>
-                </AuthenticationProvider>
-              </AppServicesProvider>
-            </FeatureService>
-          </FormChangeTrackerService>
+          <ModalServiceProvider>
+            <FormChangeTrackerService>
+              <FeatureService>
+                <AppServicesProvider>
+                  <AuthenticationProvider>
+                    <IntercomProvider>{children}</IntercomProvider>
+                  </AuthenticationProvider>
+                </AppServicesProvider>
+              </FeatureService>
+            </FormChangeTrackerService>
+          </ModalServiceProvider>
         </ConfirmationModalService>
       </NotificationServiceProvider>
     </ApiErrorBoundary>