[CMG-84], [CMG-85]

ui/src/App.tsx

@@ -12,9 +12,7 @@ import './scss/App.scss';
 function App() {
   return (
     <ErrorBoundary>
-      <Suspense>
-      {/* <Suspense fallback={<FullPageLoader resourceName="Migration" />}> */}
-
+      <Suspense fallback={<FullPageLoader resourceName="Migration" />}>
         <AppContextProvider>
           <AppLayout>
             <AppRouter />

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

@@ -1,7 +1,7 @@
 import { ChangeEvent, DragEvent, useRef, useState } from 'react';
-// import { InfoModal } from '@contentstack/venus-components';
+import { InfoModal } from '@contentstack/venus-components';
 import { IFile } from '../../../context/app/app.interface';
-// import Upload from './upload';
+import Upload from './upload';
 import './fileupload.scss';
 
 type FileUploadProps = {
@@ -27,24 +27,24 @@ const FileUpload = (props: FileUploadProps) => {
 
     const filesArray = Array.from(filesList);
 
-    // InfoModal({
-    //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //   // @ts-ignore
-    //   component: (props: any) => (
-    //     <Upload
-    //       fileList={filesArray}
-    //       {...props}
-    //       onCloseAfterUpload={onCloseAfterUpload}
-    //       projectId={props?.projectId}
-    //     />
-    //   ),
-    //   modalProps: {
-    //     targetNodeOrId: targetRef.current,
-
-    //     onClose: handleSetUploadModalFalse
-    //   },
-    //   alignment: 'bottom-right'
-    // });
+    InfoModal({
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      component: (props: any) => (
+        <Upload
+          fileList={filesArray}
+          {...props}
+          onCloseAfterUpload={onCloseAfterUpload}
+          projectId={props?.projectId}
+        />
+      ),
+      modalProps: {
+        targetNodeOrId: targetRef.current,
+
+        onClose: handleSetUploadModalFalse
+      },
+      alignment: 'bottom-right'
+    });
 
     setIsDragOver(false);
   };

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -55,7 +55,8 @@ export interface FieldMapType {
   otherCmsType: string;
   uid: string;
   id: string;
-  _invalid?: boolean;
+  _canFreezeCheckbox?: boolean;
+  _canSelect?: boolean;
 }
 
 export interface ItemStatus {

ui/src/components/ContentMapper/index.tsx

@@ -143,8 +143,8 @@ const ContentMapper = () => {
     stackStatus();
 
     tableData?.forEach((field) => {
-      if (field?.otherCmsField === 'title' || field?.otherCmsField === 'url') {
-        field._invalid = true;
+      if (field?.otherCmsField === 'title') {
+        field._canFreezeCheckbox = true;
       }
     });
   }, []);
@@ -400,6 +400,7 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={option}
+            isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'}
           />
         </div>
         <Icon
@@ -637,7 +638,7 @@ const ContentMapper = () => {
   if (!IsEmptyStack) {
     columns?.push({
       disableSortBy: true,
-      Header: `Contentstack: ${newMigrationData?.destination_stack?.selectedStack?.label}`,
+      Header: `Contentstack: ${OtherContentType?.label ?? ''}`,
       // accessor: 'ct_field',
       accessor: SelectAccessorOfColumn,
       id: 'contentstack_field',
@@ -664,7 +665,17 @@ const ContentMapper = () => {
     value: item?.title
   }));
 
-  // console.log("==============", contentTypesList);
+  const [SelectedAssets, updateSelectedAssets] = useState({});
+  const [resetRowSelection, updateResetRowSelection] = useState(false);
+
+  const onRowSelectProp = [
+    {
+      label: 'Log selected Items',
+      cb: (data: any) => {
+        updateResetRowSelection(true)
+      }
+    }
+  ]
 
   return (
     <div className="step-container">
@@ -771,10 +782,7 @@ const ContentMapper = () => {
                 ),
                 showExportCta: true
               }}
-              rowDisableProp={{
-                key: '_invalid',
-                value: true
-              }}
+              v2Features={{ key: 'canFreezeCheckbox', value: true }}
             />
           </div>
 

ui/src/components/DestinationStack/index.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getDestinationStackSteps } from './StepperSteps';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Button } from '@contentstack/venus-components';
+import { Button, CircularLoader } from '@contentstack/venus-components';
 //import { getEntries } from '../../services/contentstackSDK';
 import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants';
 import { AppContext } from '../../context/app/app.context';
@@ -34,6 +34,7 @@ const DestinationStackComponent = ({
   projectData
 }: DestinationStackComponentProps) => {
   /** ALL HOOKS HERE */
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isCompleted, setIsCompleted] = useState<boolean>(false);
   const [isMigrationLocked, setIsMigrationLocked] = useState<boolean>(false);
   const [stepperKey, setStepperKey] = useState<string>('v-mig-destination-step');
@@ -144,6 +145,7 @@ const DestinationStackComponent = ({
       //Check for null
       if (!data) {
         updateMigrationData({ destinationStackData: DEFAULT_DESTINATION_STACK_DATA });
+        setIsLoading(false);
         return;
       }
 
@@ -156,6 +158,8 @@ const DestinationStackComponent = ({
 
       updateMigrationData({ destinationStackData: destinationStackDataMapped });
 
+      setIsLoading(false);
+
       //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(
@@ -168,7 +172,7 @@ const DestinationStackComponent = ({
 
   useEffect(() => {
     setStepperKey('destination-Vertical-stepper');
-  }, []);
+  }, [isLoading]);
 
   useEffect(() => {
     updateDestinationStackData();
@@ -190,34 +194,44 @@ const DestinationStackComponent = ({
   }, [internalActiveStepIndex]);
 
   return (
-    <div className="destination-stack-container">
-      <div className="row">
-        <div className="col-12">
-          <AutoVerticalStepper
-            key={stepperKey}
-            steps={getDestinationStackSteps(
-              isCompleted,
-              isMigrationLocked,
-              migrationData?.destinationStackData?.all_steps
-            )}
-            ref={autoVerticalStepperComponent}
-            isEdit={!isMigrationLocked}
-            handleOnAllStepsComplete={handleOnAllStepsComplete}
-          />
+    <>
+      {isLoading ? (
+        <div className="row">
+          <div className="col-12 text-center center-align">
+            <CircularLoader />
+          </div>
         </div>
-        {isCompleted && !isMigrationLocked ? (
-          <div className="col-12">
-            <div className="pl-40">
-              <Button version="v2" onClick={handleOnClick}>
-                {migrationData?.destinationStackData?.cta}
-              </Button>
+      ) : (
+        <div className="destination-stack-container">
+          <div className="row">
+            <div className="col-12">
+              <AutoVerticalStepper
+                key={stepperKey}
+                steps={getDestinationStackSteps(
+                  isCompleted,
+                  isMigrationLocked,
+                  migrationData?.destinationStackData?.all_steps
+                )}
+                ref={autoVerticalStepperComponent}
+                isEdit={!isMigrationLocked}
+                handleOnAllStepsComplete={handleOnAllStepsComplete}
+              />
             </div>
+            {isCompleted && !isMigrationLocked ? (
+              <div className="col-12">
+                <div className="pl-40">
+                  <Button version="v2" onClick={handleOnClick}>
+                    {migrationData?.destinationStackData?.cta}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
           </div>
-        ) : (
-          <></>
-        )}
-      </div>
-    </div>
+        </div>
+      )}
+    </>
   );
 };
 

ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx

@@ -159,7 +159,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
           <Search
             className="service_list_search_bar"
             width="full"
-            placeholder="Search for connectors"
+            placeholder="Search for CMS"
             debounceSearch
             onClear
             version="v2"

ui/src/components/LegacyCms/index.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import AutoVerticalStepper from '../Stepper/VerticalStepper/AutoVerticalStepper';
 import { getLegacyCMSSteps } from './StepperSteps';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Button } from '@contentstack/venus-components';
+import { Button, CircularLoader } from '@contentstack/venus-components';
 // import { getEntries } from '../../services/contentstackSDK';
 import { CS_ENTRIES, PROJECT_STATUS } from '../../utilities/constants';
 import { AppContext } from '../../context/app/app.context';
@@ -39,6 +39,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   /** ALL HOOKS HERE */
   const [isCompleted, setIsCompleted] = useState<boolean>(false);
   const [isMigrationLocked, setIsMigrationLocked] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [internalActiveStepIndex, setInternalActiveStepIndex] = useState<number>(-1);
   const [stepperKey, setStepperKey] = useState<string>('v-mig-step');
   const { projectId = '' } = useParams();
@@ -76,6 +77,8 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   /********** ALL USEEFFECT HERE *************/
   useEffect(() => {
     const fetchCMSData = async () => {
+      setIsLoading(true);
+
       //check if offline CMS data field is set to true, if then read data from cms data file.
       const data = await getCMSDataFromFile(CS_ENTRIES.LEGACY_CMS);
 
@@ -85,6 +88,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
       //Check for null
       if (!data) {
         updateMigrationData({ legacyCMSData: DEFAULT_LEGACY_CMS_DATA });
+        setIsLoading(false);
         return;
       }
 
@@ -169,6 +173,8 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
         }
       });
 
+      setIsLoading(false);
+
       //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(
@@ -183,7 +189,7 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   useEffect(() => {
     setStepperKey('legacy-Vertical-stepper');
     setisValidated(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || false);
-  }, []);
+  }, [isLoading]);
 
   useEffect(() => {
     if (autoVerticalStepper?.current) {
@@ -201,39 +207,52 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
   }, [internalActiveStepIndex]);
 
   return (
-    <div className="legacy-cms-container">
-      <div className="row">
-        <div className="col-12">
-          <AutoVerticalStepper
-            ref={autoVerticalStepper}
-            key={stepperKey}
-            steps={getLegacyCMSSteps(
-              isCompleted,
-              isMigrationLocked,
-              migrationData.legacyCMSData.all_steps
-            )}
-            isEdit={!isMigrationLocked}
-            handleOnAllStepsComplete={handleOnAllStepsComplete}
-            stepComponentProps={{
-              handleDeleteFile: handleOnClickDeleteUploadedFile
-            }}
-          />
-        </div>
-        {isCompleted && !isMigrationLocked ? (
-          <div className="col-12">
-            <div className="pl-40">
-              <Button version="v2"
-               disabled={! newMigrationData?.legacy_cms?.uploadedFile?.isValidated} 
-               onClick={handleOnClick}>
-                {migrationData?.legacyCMSData?.cta}
-              </Button>
+    <>
+      {isLoading 
+        ? (
+          <div className="row">
+            <div className="col-12 text-center center-align">
+              <CircularLoader />
             </div>
           </div>
-        ) : (
-          <></>
-        )}
-      </div>
-    </div>
+        ) 
+        : (
+          <div className="legacy-cms-container">
+            <div className="row">
+              <div className="col-12">
+                <AutoVerticalStepper
+                  ref={autoVerticalStepper}
+                  key={stepperKey}
+                  steps={getLegacyCMSSteps(
+                    isCompleted,
+                    isMigrationLocked,
+                    migrationData.legacyCMSData.all_steps
+                  )}
+                  isEdit={!isMigrationLocked}
+                  handleOnAllStepsComplete={handleOnAllStepsComplete}
+                  stepComponentProps={{
+                    handleDeleteFile: handleOnClickDeleteUploadedFile
+                  }}
+                />
+              </div>
+              {isCompleted && !isMigrationLocked ? (
+                <div className="col-12">
+                  <div className="pl-40">
+                    <Button version="v2"
+                    disabled={! newMigrationData?.legacy_cms?.uploadedFile?.isValidated} 
+                    onClick={handleOnClick}>
+                      {migrationData?.legacyCMSData?.cta}
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        )
+      }
+    </>
   );
 };