feat(CE): added connector formstate persistence (#1429)

ui/src/stores/useSteppedForm.ts

@@ -0,0 +1,94 @@
+import { Form, Step } from '@/components/SteppedForm/types';
+import { updateFormDataForStep } from '@/components/SteppedForm/utils';
+import { create } from 'zustand';
+
+type SteppedFormStore = {
+  forms: Form[];
+  currentStep: number;
+  steps: Step[];
+  baseSteps: Step[];
+  stepInfo: Step | null;
+  connectorFormData: Record<string, Record<string, unknown>>;
+  setSteps: (steps: Step[]) => void;
+  setBaseSteps: (steps: Step[]) => void;
+  updateStep: (step: number) => void;
+  resetForms: () => void;
+  handleMoveForward: (formKey: string, form: unknown) => void;
+  handleMoveBack: (formKey: string, form: unknown) => void;
+  removeStep: (index: number) => void;
+  addStep: (step: Step, atIndex: number, noOfStepsToSplice: number) => void;
+  setSearchParamsUpdater: (fn: (step: number) => void) => void;
+  saveConnectorFormData: (connectorName: string, stepKey: string, formData: unknown) => void;
+  setSearchParamsExternal?: (step: number) => void;
+};
+
+const DEFAULT_STORE = {
+  forms: [],
+  currentStep: 0,
+  isCurrentStepValid: false,
+  steps: [],
+  baseSteps: [],
+  connectorFormData: {},
+};
+
+const useSteppedForm = create<SteppedFormStore>()((set, get) => ({
+  ...DEFAULT_STORE,
+  stepInfo: get()?.steps?.[get().currentStep] ?? null,
+  setSteps: (steps: Step[]) => set({ steps, stepInfo: steps?.[0] ?? null, forms: [] }),
+  setBaseSteps: (steps: Step[]) => set({ baseSteps: steps }),
+
+  updateStep: (step: number) => set({ currentStep: step, stepInfo: get().steps?.[step] ?? null }),
+  resetForms: () =>
+    set({ forms: [], stepInfo: null, currentStep: 0, steps: [], connectorFormData: {} }),
+  handleMoveForward: (stepKey: string, form?: unknown) => {
+    get().setSearchParamsExternal?.(get().currentStep + 1);
+    return set({
+      forms: updateFormDataForStep({
+        forms: get().forms,
+        step: get().currentStep,
+        data: { [stepKey]: form },
+        stepKey: stepKey,
+      }),
+      currentStep: get().currentStep + 1,
+      stepInfo: get().steps?.[get().currentStep + 1] ?? null,
+    });
+  },
+  handleMoveBack: (stepKey: string, form?: unknown) => {
+    get().setSearchParamsExternal?.(get().currentStep - 1);
+    return set({
+      forms: updateFormDataForStep({
+        forms: get().forms,
+        step: get().currentStep,
+        data: { [stepKey]: form },
+        stepKey: stepKey,
+      }),
+      currentStep: get().currentStep - 1,
+      stepInfo: get().steps?.[get().currentStep - 1] ?? null,
+    });
+  },
+  removeStep: (index: number) => {
+    const _steps = [...get().steps];
+    _steps.splice(index, 1);
+    set({ steps: _steps });
+  },
+  addStep: (step: Step, atIndex: number, noOfStepsToSplice: number = 0) => {
+    const _steps = [...get().steps];
+    _steps.splice(atIndex, noOfStepsToSplice, step);
+    set({ steps: _steps });
+  },
+  setSearchParamsUpdater: (fn: (step: number) => void) => set({ setSearchParamsExternal: fn }),
+  saveConnectorFormData: (connectorName: string, stepKey: string, formData: unknown) => {
+    const currentData = get().connectorFormData;
+    set({
+      connectorFormData: {
+        ...currentData,
+        [connectorName]: {
+          ...currentData[connectorName],
+          [stepKey]: formData,
+        },
+      },
+    });
+  },
+}));
+
+export default useSteppedForm;

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

@@ -4,6 +4,7 @@ import { SteppedFormContext } from '@/components/SteppedForm/SteppedForm';
 import { getConnectorDefinition } from '@/services/connectors';
 import { useContext } from 'react';
 import { Box } from '@chakra-ui/react';
+import { useMemo } from 'react';
 
 import FormFooter from '@/components/FormFooter';
 
@@ -15,15 +16,34 @@ import JSONSchemaForm from '@/components/JSONSchemaForm';
 import { useStore } from '@/stores';
 
 const ConnectorConfigForm = ({ connectorType }: { connectorType: string }): JSX.Element | null => {
+<<<<<<< HEAD
   const { state, stepInfo, handleMoveForward } = useContext(SteppedFormContext);
   const { forms } = state;
+=======
+  const {
+    forms,
+    stepInfo,
+    handleMoveForward,
+    saveConnectorFormData,
+    connectorFormData = {},
+  } = useSteppedForm();
+  const activeWorkspaceId = useStore((state) => state.workspaceId);
+
+  const stepKey = connectorType === 'source' ? 'connectToSources' : 'destinationConfig';
+
+>>>>>>> cd20cdf6 (feat(CE): added connector formstate persistence (#1429))
   const selectedConnector = forms.find(
-    ({ stepKey }) => stepKey === (connectorType === 'source' ? 'datasource' : connectorType),
+    ({ stepKey: sk }) => sk === (connectorType === 'source' ? 'datasource' : connectorType),
   );
   const connector = selectedConnector?.data?.[
     connectorType === 'source' ? 'datasource' : connectorType
   ] as string;
-  const activeWorkspaceId = useStore((state) => state.workspaceId);
+
+  const formData = useMemo(() => {
+    if (!connectorFormData || !connector) return {};
+    const persistedData = connectorFormData[connector]?.[stepKey];
+    return (persistedData as Record<string, unknown>) || {};
+  }, [connector, stepKey, connectorFormData]);
 
   if (!connector) return null;
 
@@ -39,6 +59,7 @@ const ConnectorConfigForm = ({ connectorType }: { connectorType: string }): JSX.
 
   const handleFormSubmit = async (formData: FormData) => {
     const processedFormData = processFormData(formData);
+    saveConnectorFormData(connector, stepKey, processedFormData);
     handleMoveForward(stepInfo?.formKey as string, processedFormData);
   };
 
@@ -54,6 +75,7 @@ const ConnectorConfigForm = ({ connectorType }: { connectorType: string }): JSX.
           <JSONSchemaForm
             schema={connectorSchema}
             uiSchema={generatedSchema}
+            formData={formData}
             onSubmit={(formData: FormData) => handleFormSubmit(formData)}
           >
             <FormFooter