fix:improved handling of steps data based on projectmapped state in stepper and setting empty redux values on deletion of project

Author: AishDani

ui/src/components/Common/DeleteProjectModal/index.tsx

@@ -2,16 +2,12 @@
 import { useState } from 'react';
 import {
   Button,
-  Notification,
   ModalBody,
   ModalHeader,
   ModalFooter,
   ButtonGroup
 } from '@contentstack/venus-components';
 
-// Service
-import { deleteProject } from '../../../services/api/project.service';
-
 // Interfaces
 import { SettingsModalProps } from '../../../components/Modal/modal.interface';
 
@@ -22,39 +18,11 @@ import { SettingsModalProps } from '../../../components/Modal/modal.interface';
  * @returns {JSX.Element} The rendered DeleteProjectModal component.
  */
 const DeleteProjectModal = (props: SettingsModalProps) => {
-  const { closeModal, navigate, projectId, projectName, selectedOrg } = props;
+  const { closeModal, projectName, handleDeleteProject } = props;
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  /**
-   * Handles the deletion of the project.
-   *
-   * @param {() => void} closeModal - A function to close the modal.
-   * @returns {Promise<void>} A promise that resolves when the project is deleted.
-   */
-  const handleDeleteProject = async (closeModal: () => void): Promise<void> => {
-    setIsLoading(true);
-    const response = await deleteProject(selectedOrg?.value || '', projectId ?? '');
-
-    if (response?.status === 200) {
-      setIsLoading(false);
-      closeModal();
-      setTimeout(() => {
-        navigate('/projects');
-      }, 800);
-      setTimeout(() => {
-        Notification({
-          notificationContent: { text: response?.data?.data?.message },
-          notificationProps: {
-            position: 'bottom-center',
-            hideProgressBar: true
-          },
-          type: 'success'
-        });
-      }, 1200);
-    }
-  };
-
+  
   return (
     <>
       <ModalHeader
@@ -83,7 +51,7 @@ const DeleteProjectModal = (props: SettingsModalProps) => {
             icon="v2-Delete"
             tabindex={0}
             isLoading={isLoading}
-            onClick={() => handleDeleteProject(closeModal)}
+            onClick={() => handleDeleteProject()}
           >
             Delete
           </Button>

ui/src/components/Common/Settings/index.tsx

@@ -23,7 +23,7 @@ import { Setting } from './setting.interface';
 import { ModalObj } from '../../../components/Modal/modal.interface';
 
 // Service
-import { getProject, updateProject } from '../../../services/api/project.service';
+import { deleteProject, getProject, updateProject } from '../../../services/api/project.service';
 import { CS_ENTRIES } from '../../../utilities/constants';
 import { getCMSDataFromFile } from '../../../cmsData/cmsSelector';
 
@@ -32,6 +32,9 @@ import DeleteProjectModal from '../DeleteProjectModal';
 
 //stylesheet
 import './Settings.scss';
+import { useDispatch } from 'react-redux';
+import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
+import { DEFAULT_NEW_MIGRATION } from '../../../context/app/app.interface';
 
 /**
  * Renders the Settings component.
@@ -51,6 +54,7 @@ const Settings = () => {
   );
 
   const navigate = useNavigate();
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const fetchData = async () => {
@@ -120,6 +124,29 @@ const Settings = () => {
       });
     }
   };
+   const handleDeleteProject = async (closeModal: ()=> void): Promise<void> => {
+      //setIsLoading(true);
+      const response = await deleteProject(selectedOrganisation?.value, params?.projectId ?? '');
+  
+      if (response?.status === 200) {
+        //setIsLoading(false);
+        closeModal();
+        dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION));
+        setTimeout(() => {
+          navigate('/projects');
+        }, 800);
+        setTimeout(() => {
+          Notification({
+            notificationContent: { text: response?.data?.data?.message },
+            notificationProps: {
+              position: 'bottom-center',
+              hideProgressBar: true
+            },
+            type: 'success'
+          });
+        }, 1200);
+      }
+    };
 
   const handleClick = () => {
     cbModal({
@@ -129,6 +156,7 @@ const Settings = () => {
           projectId={params?.projectId ?? ''}
           projectName={projectName}
           navigate={navigate}
+          handleDeleteProject={() => handleDeleteProject(props?.closeModal)}
           {...props}
         />
       ),

ui/src/components/Common/router.tsx

@@ -33,7 +33,6 @@ const AppRouter = () => {
 
       {/* ALL PROTECTED ROUTES HERE */}
       <Route element={<PrivateRoute redirectTo="/" />}>
-        <Route path="/migrations" element={<MigrationLazyLoad />} />
         <Route path="/projects" element={<ProjectsLazyLoad />} />
 
         <Route

ui/src/components/DestinationStack/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getDestinationStackSteps } from './StepperSteps';
-import { CircularLoader, HelpText, Icon, Info, Tooltip } from '@contentstack/venus-components';
+import { CircularLoader } from '@contentstack/venus-components';
 import { CS_ENTRIES } from '../../utilities/constants';
 import {
   DEFAULT_DESTINATION_STACK_DATA,
@@ -39,8 +39,8 @@ const DestinationStackComponent = ({
   const migrationData = useSelector((state: RootState) => state?.migration?.migrationData);
   const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
   const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = useState<boolean>(newMigrationData?.isprojectMapped);
-
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isProjectMapped, setisProjectMapped] = useState<boolean>(newMigrationData?.isprojectMapped);
   const handleAllStepsComplete = (flag = false) => {
     handleOnAllStepsComplete(flag);
   };
@@ -94,9 +94,14 @@ const DestinationStackComponent = ({
       }
     }
   }, [internalActiveStepIndex]);
+
+  useEffect(()=>{
+    setisProjectMapped(newMigrationData?.isprojectMapped);
+  },[newMigrationData?.isprojectMapped]);
+
   return (
     <>
-      {isLoading || newMigrationData?.isprojectMapped ? (
+      {isLoading || isProjectMapped ? (
         <div className="loader-container">
           <CircularLoader />
         </div>

ui/src/components/Modal/modal.interface.ts

@@ -17,6 +17,7 @@ export interface SettingsModalProps {
   projectName?: string;
   closeModal: () => void;
   navigate: (url: string) => void;
+  handleDeleteProject: () => void;
 }
 
 export interface FormData {

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
+import React, { useState, useImperativeHandle, forwardRef, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import './HorizontalStepper.scss';
 import { cbModal, Notification, Button, CircularLoader } from '@contentstack/venus-components';
@@ -46,6 +46,7 @@ export type stepperProps = {
   handleSaveCT?: () => void;
   changeDropdownState: () => void;
   projectData: MigrationResponse;
+  isProjectMapped: boolean;
 };
 
 export type HorizontalStepperHandles = {
@@ -88,16 +89,21 @@ const HorizontalStepper = forwardRef(
 
     const navigate = useNavigate();
     const { projectId = '' } = useParams();
+      const newMigrationDataRef = useRef(newMigrationData);
 
     const handleSaveCT = props?.handleSaveCT;
     const handleDropdownChange = props?.changeDropdownState;
     useBlockNavigation(isModalOpen);
 
+    useEffect(() => {
+      newMigrationDataRef.current = newMigrationData;
+    }, [newMigrationData]);
+
     useEffect(() => {
       const stepIndex = parseInt(stepId || '', 10) - 1;
 
       if (!Number.isNaN(stepIndex) && stepIndex >= 0 && stepIndex < steps?.length) {
-        !newMigrationData?.isprojectMapped && setShowStep(stepIndex);
+        !newMigrationDataRef?.current?.isprojectMapped && setShowStep(stepIndex);
         setStepsCompleted((prev) => {
           const updatedStepsCompleted = [...prev];
           if (
@@ -266,7 +272,7 @@ const HorizontalStepper = forwardRef(
           <>
             {!hideTabView && <StepsTitleCreator />}
             <div className={`stepContent ${props.stepContentClassName}`}>
-              {newMigrationData?.isprojectMapped ? (
+              {(newMigrationDataRef?.current?.isprojectMapped || props?.isProjectMapped)? (
                 <div className={`stepper-loader `}>
                   <CircularLoader />
                 </div>

ui/src/pages/Migration/index.tsx

@@ -329,12 +329,14 @@ const Migration = () => {
         currentStep: -1
       },
       destination_stack: {
+        ...newMigrationData?.destination_stack,
         selectedOrg: selectedOrganisationData,
         selectedStack: selectedStackData,
         stackArray: [],
         migratedStacks: migratedstacks?.data?.destinationStacks,
         sourceLocale: projectData?.source_locales,
-        localeMapping: locales
+        localeMapping: locales,
+        csLocale: newMigrationDataRef?.current?.destination_stack?.csLocale
       },
       content_mapping: {
         isDropDownChanged: false,
@@ -721,6 +723,7 @@ const Migration = () => {
           handleSaveCT={saveRef?.current?.handleSaveContentType}
           changeDropdownState={changeDropdownState}
           projectData={projectData || defaultMigrationResponse}
+          isProjectMapped={isProjectMapper}
         />
       </div>
     </div>