refactor:test migration bugs and disabled dropdown field mapping for existing stack case

Author: AishDani

ui/src/components/ContentMapper/index.tsx

@@ -1370,15 +1370,17 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
           isDisabled: true
         }
         : (OptionsForRow.length === 0 || (OptionsForRow.length > 0 && OptionsForRow.every((item)=>item.isDisabled) 
-          && (!existingField[data?.uid] || ! updatedExstingField[data?.uid] ) ))
+          && (!existingField[data?.uid] || ! updatedExstingField[data?.uid] ) ) || (OptionsForRow.length > 0 && data?.contentstackFieldType === "dropdown"))
           ? {
             label: Fields[data?.contentstackFieldType]?.label,
             value: Fields[data?.contentstackFieldType]?.label,
             isDisabled: data?.contentstackFieldType === 'text' ||
               data?.contentstackFieldType === 'group' ||
               data?.contentstackFieldType === 'url' ||
               data?.otherCmsType === "reference" || 
-              data?.contentstackFieldType === "global_field"
+              data?.contentstackFieldType === "global_field" ||
+              data?.contentstackFieldType === "dropdown"
+
           }
           : {
           label: `${selectedOption} matches`,

ui/src/components/LogScreen/index.tsx

@@ -15,30 +15,38 @@ import { INewMigration } from '../../context/app/app.interface';
 import './index.scss';
 
 import { MAGNIFY,DEMAGNIFY } from '../../common/assets';
+import { saveStateToLocalStorage } from '../TestMigration';
 
+// Define log styles for different levels
 const logStyles: { [key: string]: React.CSSProperties } = {
   info: { backgroundColor: '#f1f1f1' },
   warn: { backgroundColor: '#ffeeba', color: '#856404' },
   error: { backgroundColor: '#f8d7da', color: '#721c24' },
   success: { backgroundColor: '#d4edda', color: '#155724' },
 };
 
+// Define the props for the component
 type LogsType = {
   serverPath: string;
   sendDataToParent?: (isMigrationStarted: boolean) => void | undefined;
+  projectId: string
 }
 
 /**
  * TestMigrationLogViewer component displays logs received from the server.
  * @param {string} serverPath - The path of the server to connect to.
+ * @param {function} sendDataToParent - Callback to inform the parent about migration status.
+ * @param {string} projectId - The project ID for saving state to local storage.
  */
-const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
+const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: LogsType) => {
   const [logs, setLogs] = useState<string[]>([JSON.stringify({ message: "Migration logs will appear here once the process begins.", level: ''})]);
 
   const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
 
+  // Redux dispatcher
   const dispatch = useDispatch();
 
+  // Set up WebSocket connection
   useEffect(() => {
     const socket = io(serverPath || ''); // Connect to the server
 
@@ -125,6 +133,25 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
         const message = logObject.message;
 
         if (message === "Test Migration Process Completed") {
+
+
+          // push test migration completion in redux
+          const newMigrationDataObj : INewMigration = {
+            ...newMigrationData,
+            test_migration:{
+              ...newMigrationData?.test_migration,
+              isMigrationComplete:true,
+              isMigrationStarted: false,
+            }
+          }
+          dispatch(updateNewMigrationData(newMigrationDataObj));
+
+          // Save test migration state to local storage
+          saveStateToLocalStorage({
+            isTestMigrationCompleted : true,
+            isTestMigrationStarted : false,
+          }, projectId);
+
           Notification({
             notificationContent: { text: message },
             notificationProps: {
@@ -135,6 +162,7 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
           });
           sendDataToParent?.(false);
 
+          // Update testStacks data in Redux
           const newMigrationObj: INewMigration = {
             ...newMigrationData,
             testStacks: [...newMigrationData?.testStacks ?? [], {stackUid: newMigrationData?.test_migration?.stack_api_key, stackName: newMigrationData?.test_migration?.stack_name, isMigrated: true}]
@@ -150,6 +178,7 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
 
   return (
     <div className='logs-wrapper'>
+       {/* Logs container */}
       <div className="logs-container" style={{ height: '400px', overflowY: 'auto' }} ref={logsContainerRef}>
         {migratedTestStack?.isMigrated
           ? <div className="log-entry text-center">
@@ -190,6 +219,7 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
         }
       </div>
 
+      {/* Action buttons for scrolling and zooming */}           
       {!migratedTestStack?.isMigrated && !logs?.some((log) => log === "Migration logs will appear here once the process begins.") && ( 
         <div className='action-items'>
           <Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />

ui/src/components/TestMigration/index.tsx

@@ -18,7 +18,7 @@ import { getAllStacksInOrg } from '../../services/api/stacks.service';
 import { CS_ENTRIES } from '../../utilities/constants';
 
 // Interface
-import { MigrationType } from './testMigration.interface';
+import { MigrationType, TestMigrationValues } from './testMigration.interface';
 import { INewMigration } from '../../context/app/app.interface';
 
 
@@ -28,21 +28,36 @@ import TestMigrationLogViewer from '../LogScreen';
 // CSS
 import './index.scss';
 
+// utility function to save state to sessionStorage
+export const saveStateToLocalStorage = (state:TestMigrationValues, projectId : string) => {
+  sessionStorage.setItem(`testmigration_${projectId}`, JSON.stringify(state));
+};
+
+// utitlity function to retrieve state from sessionStorage
+const getStateFromLocalStorage = (projectId : string) => {
+  const state = sessionStorage.getItem(`testmigration_${projectId}`);
+  return state ? JSON.parse(state) : null;
+};
+
 const TestMigration = () => {
+
+  // Access Redux state for migration data and selected organization
   const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
   const selectedOrganisation = useSelector((state: RootState)=>state?.authentication?.selectedOrganisation);
 
   const [data, setData] = useState<MigrationType>({});
   const [isLoading, setIsLoading] = useState(newMigrationData?.isprojectMapped);
   const [isStackLoading, setIsStackLoading] = useState<boolean>(false);
-  const [disableTestMigration, setdisableTestMigration] = useState<boolean>(false);
+  const [disableTestMigration, setdisableTestMigration] = useState<boolean>(newMigrationData?.test_migration?.isMigrationStarted);
 
-  const [disableCreateStack, setDisableCreateStack] = useState<boolean>(false);
+  const [disableCreateStack, setDisableCreateStack] = useState<boolean>(newMigrationData?.test_migration?.isMigrationStarted);
   const [stackLimitReached, setStackLimitReached] = useState<boolean>(false);
 
+   // Extract project ID from URL parameters
   const { projectId = '' } = useParams();
   const dispatch = useDispatch();
 
+  // Destructure CMS data for button labels and subtitles
   const { create_stack_cta: createStackCta, subtitle, start_migration_cta: startMigrationCta } = data
 
   /********** ALL USEEFFECT HERE *************/
@@ -63,7 +78,8 @@ const TestMigration = () => {
     * to disable Create Test Stack and Start Test Migration buttons as per isMigrated state
   */
   useEffect(() => {
-    if (!newMigrationData?.testStacks?.find((stack) => stack?.stackUid === newMigrationData?.test_migration?.stack_api_key)?.isMigrated) {
+    if (!newMigrationData?.testStacks?.find((stack) => stack?.stackUid === newMigrationData?.test_migration?.stack_api_key)?.isMigrated && !disableTestMigration) {
+      
       setDisableCreateStack(false);
     }
 
@@ -72,6 +88,18 @@ const TestMigration = () => {
     }
   }, [newMigrationData?.testStacks]);
 
+  useEffect(() => {
+
+      // Retrieve and apply saved state from sessionStorage
+    const savedState = getStateFromLocalStorage(projectId);
+    if (savedState) {
+      setdisableTestMigration(savedState?.isTestMigrationStarted);
+      setDisableCreateStack(savedState?.isTestMigrationStarted);  
+    }
+    
+  },[]);
+
+
 
   /**
     * Handles create test stack function
@@ -81,15 +109,19 @@ const TestMigration = () => {
 
     //get org plan details
     try {
+
+      // Fetch organization details to determine stack limit
       const orgDetails = await getOrgDetails(selectedOrganisation?.value);
       const stacks_details_key = Object.keys(orgDetails?.data?.organization?.plan?.features)?.find(key => orgDetails?.data?.organization?.plan?.features[key].uid === 'stacks') ?? '';
 
       const max_stack_limit = orgDetails?.data?.organization?.plan?.features[stacks_details_key]?.max_limit;
 
+      // Check the current stack count
       const stackData = await getAllStacksInOrg(selectedOrganisation?.value, ''); // org id will always be there
 
       const stack_count = stackData?.data?.stacks?.length;
 
+      // Handle stack limit reached
       if (stack_count >= max_stack_limit) {
         setIsLoading(false);
         setDisableCreateStack(true);
@@ -104,6 +136,7 @@ const TestMigration = () => {
       console.log(error);
     }
 
+    // Prepare data for stack creation
     const data = {
       name: newMigrationData?.destination_stack?.selectedStack?.label,
       description: 'test migration stack',
@@ -130,7 +163,7 @@ const TestMigration = () => {
           type: 'success'
         });
 
-
+        // Update migration data in Redux
         const newMigrationDataObj: INewMigration = {
           ...newMigrationData,
           test_migration: { ...newMigrationData?.test_migration, stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key, stack_name: res?.data?.data?.data?.stack?.name }
@@ -154,7 +187,26 @@ const TestMigration = () => {
 
       if (testRes?.status === 200) {
         setdisableTestMigration(true);
+        
+        //dispatch test migration started flag in redux
+        const newMigrationDataObj : INewMigration = {
+          ...newMigrationData,
+          test_migration:{
+            ...newMigrationData?.test_migration,
+            isMigrationStarted:true,
+          }
+        }
+        dispatch(updateNewMigrationData(newMigrationDataObj));
+
+        //update test migration started flag in localstorage
+        saveStateToLocalStorage({
+          isTestMigrationCompleted : false,
+          isTestMigrationStarted : true,
+        }, projectId);
+
         handleMigrationState(true);
+
+        
         Notification({
           notificationContent: { text: 'Test Migration started' },
           notificationProps: {
@@ -250,7 +302,7 @@ const TestMigration = () => {
         <div className='content-block'>
           <div className='content-header'>Execution Logs</div>
           <div>
-            <TestMigrationLogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} sendDataToParent={handleMigrationState} />
+            <TestMigrationLogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} sendDataToParent={handleMigrationState} projectId={projectId} />
           </div>
         </div>
       </div>

ui/src/components/TestMigration/testMigration.interface.ts

@@ -8,3 +8,8 @@ export interface CTA {
   title?: string;
   url?: string;
 }
+
+export interface TestMigrationValues {
+  isTestMigrationStarted: boolean,
+  isTestMigrationCompleted: boolean,
+}

ui/src/pages/Migration/index.tsx

@@ -257,8 +257,8 @@ const Migration = () => {
       test_migration: {
         stack_link: stackLink,
         stack_api_key: projectData?.current_test_stack_id,
-        isMigrationStarted: false,
-        isMigrationComplete: false
+        isMigrationStarted: newMigrationData?.test_migration?.isMigrationStarted || false,
+        isMigrationComplete: newMigrationData?.test_migration?.isMigrationStarted || false
       },
       migration_execution: {
         migrationStarted: projectData?.isMigrationStarted