From e958e8eb2ab54787d0973a121e221b95f16dff0c Mon Sep 17 00:00:00 2001
From: yashin4112 <yash.shinde@contentstack.com>
Date: Mon, 8 Jun 2026 20:02:38 +0530
Subject: [PATCH 1/2] fix: update Card component's radio button logic and
 improve SaveChangesModal props for better handling of async functions style:
 refine ContentMapper styles for improved layout and adjust LegacyCms styles
 for better UI consistency feat: enhance LoadSelectCms logic to preserve
 selected CMS and file format across sessions fix: disable editing of file
 path in LoadUploadFile when file is validated refactor: update
 HorizontalStepper to correctly manage completed steps during navigation fix:
 add iteration handling in Migration component to ensure proper state
 management

---
 ui/src/components/Common/Card/card.tsx        |   2 +-
 .../Common/SaveChangesModal/index.tsx         |  14 +-
 ui/src/components/ContentMapper/index.scss    | 122 +++++++++---------
 .../LegacyCms/Actions/LoadSelectCms.tsx       |  23 +++-
 .../LegacyCms/Actions/LoadUploadFile.tsx      |   5 +-
 ui/src/components/LegacyCms/legacyCms.scss    |  12 +-
 .../HorizontalStepper/HorizontalStepper.tsx   |   5 +-
 ui/src/pages/Migration/index.tsx              |   1 +
 8 files changed, 104 insertions(+), 80 deletions(-)

diff --git a/ui/src/components/Common/Card/card.tsx b/ui/src/components/Common/Card/card.tsx
index a7c9b06a9..eb9f379ae 100644
--- a/ui/src/components/Common/Card/card.tsx
+++ b/ui/src/components/Common/Card/card.tsx
@@ -106,7 +106,7 @@ const Card = <T extends ICardType = ICardType>({
         }}
       >
         {isHovered || selectedCard?.[idField] === data?.[idField] ? (
-          <Radio checked={selectedCard?.id === data?.id} disabled={!isHovered} />
+          <Radio checked={selectedCard?.[idField] === data?.[idField]} disabled={!isHovered} />
         ) : (
           <></>
         )}
diff --git a/ui/src/components/Common/SaveChangesModal/index.tsx b/ui/src/components/Common/SaveChangesModal/index.tsx
index 61a0cfe8f..ec85710ab 100644
--- a/ui/src/components/Common/SaveChangesModal/index.tsx
+++ b/ui/src/components/Common/SaveChangesModal/index.tsx
@@ -11,9 +11,9 @@ interface Props {
   closeModal: () => void;
   isopen?: (flag: boolean) => void;
   otherCmsTitle?: string;
-  saveContentType?: () => void | Promise<void>;
+  saveContentType?: () => void;
   openContentType?: () => void;
-  changeStep?: () => void | Promise<void>;
+  changeStep?: () => void;
   dropdownStateChange: () => void;
 }
 
@@ -47,24 +47,24 @@ const SaveChangesModal = (props: Props) => {
           <Button
             buttonType="secondary"
             version={'v2'}
-            onClick={async () => {
+            onClick={ () => {
               props.closeModal();
               props?.dropdownStateChange();
               props.openContentType?.();
               props?.isopen?.(false);
-              await props?.changeStep?.();
+              props?.changeStep?.();
             }}
           >
             Don&apos;t Save
           </Button>
           <Button
             version={'v2'}
-            onClick={async () => {
+            onClick={ () => {
               props?.dropdownStateChange();
-              await props?.saveContentType?.();
+              props?.saveContentType?.();
               props.closeModal();
               props.openContentType?.();
-              await props?.changeStep?.();
+              props?.changeStep?.();
             }}
           >
             Save
diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
index c79bcfaf7..6efe68ab5 100644
--- a/ui/src/components/ContentMapper/index.scss
+++ b/ui/src/components/ContentMapper/index.scss
@@ -67,27 +67,9 @@
     justify-content: space-between;
     min-height: 42px;
     padding: $px-8 $px-10 $px-8 $px-12;
-
-    > .ct-options {
-      align-items: center;
-      display: flex;
-      flex-shrink: 0;
-      gap: $space-10;
-
-      .ct-schema-preview-wrap {
-        align-items: center;
-        display: inline-flex;
-      }
-    }
-
     .ct-names {
-      align-items: center;
-      display: flex;
       font-size: $size-font-xl;
       line-height: normal;
-      min-height: 0;
-      min-width: 0;
-      text-align: left;
       width: calc(100% - 50px);
       .cms-title {
         align-items: center;
@@ -95,7 +77,6 @@
         max-height: 24px;
         white-space: nowrap;
         .tippy-wrapper {
-          align-items: center;
           display: flex;
         }
         span {
@@ -105,6 +86,9 @@
           text-overflow: ellipsis;
         }
       }
+      .ct-options {
+        justify-content: flex-end;
+      }
     }
     .schema-preview {
       padding: 0;
@@ -156,58 +140,56 @@
 .table-container {
   flex: 1 0 auto;
 }
-.content-mapper-container {
-  .table-wrapper {
-    flex: 1;
-    .TablePanel {
-      border-left: 0 none;
-      .TablePanel__list-count {
-        display: none;
-      }
+.table-wrapper {
+  flex: 1;
+  .TablePanel {
+    border-left: 0 none;
+    .TablePanel__list-count {
+      display: none;
     }
-    .Table {
-      border-left: 0 none;
-      min-height: 24.25rem;
-      .Table__body__row {
+  }
+  .Table {
+    border-left: 0 none;
+    min-height: 24.25rem;
+    .Table__body__row {
         .Table-select-body {
-          > .checkbox-wrapper {
-            align-items: flex-start;
-          }
+         >.checkbox-wrapper {
+          align-items: flex-start;
         }
       }
-      .Table__body__column {
-        padding: 0 1.25rem;
-        &:not(:last-of-type) {
-          display: block;
-        }
-      }
-      .Table-select-body {
-        width: 68px;
+    }
+    .Table__body__column {
+      padding: 0 1.25rem;
+      &:not(:last-of-type) {
+        display: block;
       }
-      .cms-field {
-        // text-transform: capitalize;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // white-space: nowrap;
-        // width: 445px;
+    }
+    .Table-select-body {
+      width: 68px;
+    }
+    .cms-field {
+      // text-transform: capitalize;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      // width: 445px;
 
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .InstructionText {
-        font-size: $size-font-small;
-        margin: 0;
-      }
-      .EmptyStateWrapper {
-        margin-top: $px-20;
-      }
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    .import-cta {
+    .InstructionText {
+      font-size: $size-font-small;
       margin: 0;
     }
+    .EmptyStateWrapper {
+      margin-top: $px-20;
+    }
+  }
+  .import-cta {
+    margin: 0;
   }
 }
 .disabled-field {
@@ -503,9 +485,14 @@ div .table-row {
   }
 }
 
+.select {
+  .tippy-wrapper {
+    display: inline; 
+  }
+}
+
 .entry-mapper-container {
   .Table {
-    
     // Force row layout alignment
     .Table__head,
     .Table__body__row {
@@ -513,12 +500,19 @@ div .table-row {
       width: 100%;
     }
 
-    // Keep the row-select (checkbox) cell at its fixed width and never shrink it
+    // Keep the row-select (checkbox) cell at its fixed width and never shrink it,
+    // and vertically center the checkbox so it lines up with the row text.
     .Table-select-head,
     .Table-select-body {
       flex: 0 0 68px !important;
       width: 68px !important;
       min-width: 68px !important;
+      display: flex !important;
+      align-items: center !important;
+
+      .checkbox-wrapper {
+        align-items: center !important;
+      }
     }
 
     // Target actual column containers
diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
index 1302e0148..03f8eb75b 100644
--- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
@@ -128,9 +128,21 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
       }
 
 
-      // Determine which CMS to set as selected
+      // Determine which CMS to set as selected.
+      // If a version is already selected (e.g. preserved across a restart / on revisit),
+      // keep it instead of wiping it back to DEFAULT_CMS_TYPE. Only auto-pick when there's
+      // a single matching version, and only fall back to default when nothing is selected.
       let finalSelectedCard: ICMSType | undefined;
-      if (filteredCmsData?.length === 1) {
+      const existingSelectedCms = newMigrationData?.legacy_cms?.selectedCms;
+      const existingStillValid =
+        !isEmptyString(existingSelectedCms?.cms_id) &&
+        filteredCmsData?.some(
+          (cms: ICMSType) => cms?.cms_id === existingSelectedCms?.cms_id
+        );
+
+      if (existingStillValid) {
+        finalSelectedCard = existingSelectedCms;
+      } else if (filteredCmsData?.length === 1) {
         finalSelectedCard = filteredCmsData[0];
       } else {
         finalSelectedCard = DEFAULT_CMS_TYPE;
@@ -144,7 +156,12 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
         legacy_cms: {
           ...newMigrationData?.legacy_cms,
           selectedCms: finalSelectedCard, // Include selectedCms in this dispatch
-          selectedFileFormat: filteredCmsData[0]?.allowed_file_formats?.[0],
+          // Preserve the existing file format when a version was already selected; otherwise
+          // derive it from the resolved CMS card (data-driven via legacyCms.json).
+          selectedFileFormat:
+            newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id
+              ? newMigrationData?.legacy_cms?.selectedFileFormat
+              : finalSelectedCard?.allowed_file_formats?.[0],
           affix: newMigrationData?.legacy_cms?.affix || 'cs', // Preserve or set default affix
           uploadedFile: {
             ...newMigrationData?.legacy_cms?.uploadedFile,
diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
index e73cb76c5..261dcb56f 100644
--- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
@@ -54,11 +54,14 @@ const FileComponent = ( { fileDetails, fileFormatId }: Props ) =>
 {
   const isSQL = fileFormatId?.toLowerCase() === 'sql';
   const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
+  const isValidated = newMigrationData?.legacy_cms?.uploadedFile?.isValidated;
   const [isEditing, setIsEditing] = useState((newMigrationData?.iteration > 1 && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated) ? true : false);
   const [localPath, setLocalPath] = useState(fileDetails?.localPath || '');
   const dispatch = useDispatch();
   const currentPath = newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath || fileDetails?.localPath || '';
   const handleEditFile = async () => {
+    // Once the file is validated, editing the path is disabled
+    if (isValidated) return;
     setIsEditing(true);
     setLocalPath(currentPath);
   };
@@ -116,7 +119,7 @@ const FileComponent = ( { fileDetails, fileFormatId }: Props ) =>
             <Paragraph tagName="p" variant="p1" text={`Local Path: ${currentPath}`} />
           )}
         </div>
-        <div className="edit-icon">
+        <div className={`edit-icon${isValidated ? ' edit-icon--disabled' : ''}`}>
           <Icon icon="EditSmallActive" size="small" onClick={handleEditFile} />
         </div>
       </div>
diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss
index 1b460251c..c8568bb12 100644
--- a/ui/src/components/LegacyCms/legacyCms.scss
+++ b/ui/src/components/LegacyCms/legacyCms.scss
@@ -166,7 +166,7 @@
   line-clamp: 2;
   -webkit-box-orient: vertical;
   width: 540px;
-  gap: 10px;
+  gap: 5px;
 
   .file-path-text {
     flex: 1;
@@ -184,11 +184,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 5px;
-    
+    padding-right: 10px;
+
     &:hover {
       opacity: 0.7;
     }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+      pointer-events: none;
+    }
   }
 }
 .message-container {
diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
index 530384c33..d7a3ec90e 100644
--- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
+++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
@@ -105,7 +105,10 @@ const HorizontalStepper = forwardRef(
       if (!Number.isNaN(stepIndex) && stepIndex >= 0 && stepIndex < steps?.length) {
         !newMigrationDataRef?.current?.isprojectMapped && setShowStep(stepIndex);
         setStepsCompleted((prev) => {
-          const updatedStepsCompleted = [...prev];
+          // Drop any completed steps at or beyond the current step so a restart
+          // (navigating back to an earlier step) un-fills the connectors ahead of it.
+          // Steps before the current one remain completed.
+          const updatedStepsCompleted = prev?.filter((i) => i < stepIndex);
           if (
             stepIndex === 4 &&
             (props?.projectData?.isMigrationCompleted ||
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 5658e2e0c..35ba132ff 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -471,6 +471,7 @@ const Migration = () => {
       isprojectMapped: false,
       project_current_step: projectData?.current_step,
       isContentMapperGenerated: projectData?.content_mapper?.length > 0,
+      iteration: projectData?.iteration ?? 1,
     };
 
     dispatch(updateNewMigrationData(projectMapper));

From 431e05c55d51e2b82be635466f45769eed44ae13 Mon Sep 17 00:00:00 2001
From: yashin4112 <yash.shinde@contentstack.com>
Date: Tue, 9 Jun 2026 10:37:51 +0530
Subject: [PATCH 2/2] comment resolevd:: synchronize selected file format with
 resolved CMS to prevent stale formats

---
 .../components/LegacyCms/Actions/LoadSelectCms.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
index 03f8eb75b..7133a8835 100644
--- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
@@ -156,12 +156,12 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
         legacy_cms: {
           ...newMigrationData?.legacy_cms,
           selectedCms: finalSelectedCard, // Include selectedCms in this dispatch
-          // Preserve the existing file format when a version was already selected; otherwise
-          // derive it from the resolved CMS card (data-driven via legacyCms.json).
-          selectedFileFormat:
-            newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id
-              ? newMigrationData?.legacy_cms?.selectedFileFormat
-              : finalSelectedCard?.allowed_file_formats?.[0],
+          // Keep the file format in sync with the resolved CMS: only preserve the existing
+          // format when the existing version is being preserved; otherwise derive it from
+          // the resolved card so we never end up with DEFAULT_CMS_TYPE + a stale format.
+          selectedFileFormat: existingStillValid
+            ? newMigrationData?.legacy_cms?.selectedFileFormat
+            : finalSelectedCard?.allowed_file_formats?.[0],
           affix: newMigrationData?.legacy_cms?.affix || 'cs', // Preserve or set default affix
           uploadedFile: {
             ...newMigrationData?.legacy_cms?.uploadedFile,