🪟 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/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.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, ModalServiceContextType } from "./types";
+
+const ModalServiceContext = React.createContext<ModalServiceContextType | 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: ModalServiceContextType = 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 ModalServiceContextType {
+  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 => {

airbyte-webapp/src/locales/en.json

@@ -88,7 +88,6 @@
   "form.noNeed": "No need!",
   "form.reset": "Reset",
   "form.resetData": "Reset your data",
-  "form.changedColumns": "You have changed which column is used to detect new records for a stream. You may want to reset the data in your stream.",
   "form.resetDataText": "Resetting your data will delete all the data for this connection in your destination and start syncs from scratch. Are you sure you want to do this?",
   "form.dockerError": "Could not find docker image",
   "form.edit": "Edit",
@@ -106,8 +105,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 +314,12 @@
   "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.resetModalTitle": "Stream configuration changed",
+  "connection.streamResetHint": "Due to changes in the stream configuration the affected streams should be resetted. This will delete all data of those streams in the destination and sync it again. Skipping this might lead to unexpected behavior and is discouraged.",
+  "connection.streamFullResetHint": "Due to changes in the stream configuration all streams should be resetted. This will delete all data in the destination and sync it again. Skipping this might lead to unexpected behavior and is discouraged.",
+  "connection.saveWithReset": "Reset affected streams (recommended)",
+  "connection.saveWithFullReset": "Reset all streams (recommended)",
+  "connection.save": "Save connection",
   "connection.title": "Connection",
   "connection.description": "<b>Connections</b> link Sources to Destinations.",
   "connection.fromTo": "{source} → {destination}",
@@ -326,12 +328,10 @@
   "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",
   "connection.updateSchema": "Refresh source schema",
-  "connection.updateSchemaText": "WARNING! Updating the schema will delete all the data for this connection in your destination and start syncing from scratch. Are you sure you want to do this?",
   "connection.newConnection": "+ New connection",
   "connection.newConnectionTitle": "New connection",
   "connection.noConnections": "Connection list is empty",

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>

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.module.scss

@@ -0,0 +1,12 @@
+@use "../../../../../scss/variables" as vars;
+
+.resetWarningModal {
+  padding: vars.$spacing-xl;
+}
+
+.resetWarningModalButtons {
+  display: flex;
+  justify-content: flex-end;
+  gap: vars.$spacing-md;
+  margin-top: vars.$spacing-lg;
+}