fix(CE): form-data loss on navigation

ui/src/components/ExitModal/ExitModal.tsx

@@ -14,11 +14,18 @@ import {
 } from '@chakra-ui/react';
 import { useNavigate } from 'react-router-dom';
 import ExitWarningImage from '@/assets/images/ExitWarning.png';
+import useConnectorFormStore from '@/stores/useConnectorFormStore';
 
 const ExitModal = (): JSX.Element => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { resetAllFormData } = useConnectorFormStore();
   const navigate = useNavigate();
 
+  const handleSetupExit = () => {
+    resetAllFormData();
+    navigate('*');
+  };
+
   return (
     <>
       <Button
@@ -74,7 +81,7 @@ const ExitModal = (): JSX.Element => {
                   variant='solid'
                   color='white'
                   rounded='lg'
-                  onClick={() => navigate('*')}
+                  onClick={handleSetupExit}
                   letterSpacing='-0.14px'
                 >
                   Exit

ui/src/components/JSONSchemaForm/JSONSchemaForm.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import Form from '@rjsf/chakra-ui';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
@@ -9,6 +10,7 @@ import BaseInputTemplate from '@/components/JSONSchemaForm/rjsf/BaseInputTemplat
 import DescriptionFieldTemplate from '@/components/JSONSchemaForm/rjsf/DescriptionFieldTemplate';
 import { FormProps } from '@rjsf/core';
 import WrapIfAdditionalTemplate from './rjsf/WrapIfAdditionalTemplate';
+import useConnectorFormStore from '@/stores/useConnectorFormStore';
 
 type JSONSchemaFormProps = {
   schema: RJSFSchema;
@@ -17,6 +19,8 @@ type JSONSchemaFormProps = {
   onChange?: (formData: FormData) => void;
   children?: JSX.Element;
   formData?: unknown;
+  connectorId?: string;
+  connectorType: string;
 };
 
 const JSONSchemaForm = ({
@@ -26,7 +30,13 @@ const JSONSchemaForm = ({
   onChange,
   children,
   formData,
+  connectorId,
+  connectorType,
 }: JSONSchemaFormProps): JSX.Element => {
+  const { getConnectorFormData, setConnectorFormData, resetConnectorFormData } =
+    useConnectorFormStore();
+  const currentFormData = connectorId ? getConnectorFormData(connectorType, connectorId) : formData;
+
   const templateOverrides: FormProps<any, RJSFSchema, any>['templates'] = {
     ObjectFieldTemplate: ObjectFieldTemplate,
     TitleFieldTemplate: TitleFieldTemplate,
@@ -35,15 +45,36 @@ const JSONSchemaForm = ({
     DescriptionFieldTemplate: DescriptionFieldTemplate,
     WrapIfAdditionalTemplate: WrapIfAdditionalTemplate,
   };
+
+  const handleFormChange = (data: any) => {
+    const updatedFormData = data.formData;
+    connectorId && setConnectorFormData(connectorType, connectorId, updatedFormData);
+    onChange?.(updatedFormData);
+  };
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      connectorId && resetConnectorFormData(connectorType, connectorId);
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [connectorType, connectorId, resetConnectorFormData]);
+
   return (
     <Form
       uiSchema={uiSchema}
       schema={schema}
       validator={validator}
       templates={templateOverrides}
-      formData={formData}
-      onSubmit={({ formData }) => onSubmit(formData)}
-      onChange={({ formData }) => onChange?.(formData)}
+      formData={currentFormData}
+      onSubmit={({ formData }) => {
+        onSubmit(formData);
+        connectorId && resetConnectorFormData(connectorType, connectorId);
+      }}
+      onChange={handleFormChange}
     >
       {children}
     </Form>

ui/src/stores/useConnectorFormStore.ts

@@ -0,0 +1,61 @@
+import { create } from 'zustand';
+
+type ConnectorType = string;
+type ConnectorId = string;
+interface FormData {
+  [key: string]: unknown;
+}
+
+interface ConnectorFormState {
+  formsData: {
+    [connectorType: string]: {
+      [connectorId: string]: FormData;
+    };
+  };
+  setConnectorFormData: (
+    connectorType: ConnectorType,
+    connectorId: ConnectorId,
+    data: FormData,
+  ) => void;
+  getConnectorFormData: (connectorType: ConnectorType, connectorId: ConnectorId) => FormData | null;
+  resetConnectorFormData: (connectorType: ConnectorType, connectorId: ConnectorId) => void;
+  resetAllFormData: () => void;
+}
+
+const useConnectorFormStore = create<ConnectorFormState>((set, get) => ({
+  formsData: {},
+
+  setConnectorFormData: (connectorType, connectorId, data) =>
+    set((state) => ({
+      formsData: {
+        ...state.formsData,
+        [connectorType]: {
+          ...state.formsData[connectorType],
+          [connectorId]: data,
+        },
+      },
+    })),
+
+  getConnectorFormData: (connectorType, connectorId) => {
+    const state = get();
+    return state.formsData[connectorType]?.[connectorId] ?? null;
+  },
+
+  resetConnectorFormData: (connectorType, connectorId) =>
+    set((state) => {
+      if (!state.formsData[connectorType]) return state;
+      const remainingConnectorData = Object.fromEntries(
+        Object.entries(state.formsData[connectorType] || {}).filter(([key]) => key !== connectorId),
+      );
+      return {
+        formsData: {
+          ...state.formsData,
+          [connectorType]: remainingConnectorData,
+        },
+      };
+    }),
+
+  resetAllFormData: () => set(() => ({ formsData: {} })),
+}));
+
+export default useConnectorFormStore;

ui/src/views/Connectors/ConnectorConfigForm/ConnectorConfigForm.tsx

@@ -55,6 +55,8 @@ const ConnectorConfigForm = ({ connectorType }: { connectorType: string }): JSX.
             schema={connectorSchema}
             uiSchema={generatedSchema}
             onSubmit={(formData: FormData) => handleFormSubmit(formData)}
+            connectorId={connector}
+            connectorType={connectorType}
           >
             <FormFooter
               ctaName='Continue'

ui/src/views/Connectors/Destinations/EditDestinations/EditDestinations.tsx

@@ -213,6 +213,7 @@ const EditDestination = (): JSX.Element => {
             formData={formData}
             onSubmit={(formData: FormData) => handleOnTestClick(formData)}
             onChange={(formData: FormData) => setFormData(formData)}
+            connectorType='destination'
           >
             <FormFooter
               ctaName='Save Changes'

ui/src/views/Connectors/Sources/EditSource/EditSource.tsx

@@ -209,6 +209,7 @@ const EditSource = (): JSX.Element => {
             formData={formData}
             onSubmit={(formData: FormData) => handleOnTestClick(formData)}
             onChange={(formData: FormData) => setFormData(formData)}
+            connectorType='source'
           >
             <FormFooter
               ctaName='Save Changes'