Refactor migration and UI components for improved functionality

sauravraw · sauravraw · commit 7b20417faf7f · 2025-11-27T17:48:15.000+05:30
- Updated migration service to use the correct destination stack ID.
- Enhanced AdvancePropertise component to include additional toggle states in field settings.
- Modified ContentMapper styles for better layout, including a sticky footer for the save button and adjustments to prevent header wrapping.
- Improved file processing error handling in upload API to ensure robust responses and logging.
diff --git a/api/src/services/migration.service.ts b/api/src/services/migration.service.ts
@@ -1020,7 +1020,7 @@ const startMigration = async (req: Request): Promise<any> => {
         await aemService.createAssets({
           projectId,
           packagePath,
-          destinationStackId: project?.current_test_stack_id,
+          destinationStackId: project?.destination_stack_id,
         });
         await aemService.createEntry({
           packagePath,
diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx
@@ -826,6 +826,10 @@ const AdvancePropertise = (props: SchemaProps) => {
                         props?.updateFieldSettings(
                           props?.rowId,
                           {
+                            ...props?.value,
+                            mandatory: toggleStates?.mandatory, 
+                            nonLocalizable: toggleStates?.nonLocalizable, 
+                            referenedItems: toggleStates?.referenedItems,
                             validationRegex: toggleStates?.validationRegex ?? '',
                             embedObjects: embedObject,
                             embedObject: !shouldToggleOff
diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
@@ -59,7 +59,6 @@
   overflow-x: hidden;
 }
 .ct-list {
-  border-right: 1px solid $color-brand-secondary-lightest;
   list-style-type: none;
   padding: 15px 0 15px 0;
   li {
@@ -151,7 +150,7 @@
   }
   .Table {
     border-left: 0 none;
-    min-height: 26.25rem;
+    min-height: 24.25rem;
     .Table__body__row {
         .Table-select-body {
          >.checkbox-wrapper {
@@ -426,4 +425,47 @@ div .table-row {
 .advanced-setting-button,
 .table-row button {
   flex-shrink: 0;           
+}
+
+// Prevent header wrapping
+.nowrap-header {
+  white-space: nowrap;
+  display: inline-block;
+}
+
+// Make sure table and save button stay fully visible
+.table-wrapper {
+  position: relative;
+  padding-bottom: 70px;
+}
+
+// Sticky footer for Save button
+.mapper-footer {
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  padding: 12px 18px;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 100;
+}
+
+// Ensure Save button is never clipped
+.saveButton {
+  min-width: 90px;
+}
+
+// Prevent bottom overflow issues with InfiniteScrollTable
+.infinite-scroll-table,
+.infinite-scroll-table-wrapper {
+  overflow-y: auto !important;
+}
+
+// Safety for small screens 
+@media (max-height: 800px) {
+  .mapper-footer {
+    padding: 10px;
+  }
 }
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
@@ -1336,26 +1336,15 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
             options={option}
             menuPlacement="auto"
             isDisabled={
-              data?.contentstackFieldType === 'group' ||
-              (data?.contentstackFieldType === 'text') ||
-              (data?.contentstackFieldType === 'url') ||
-              data?.backupFieldType === 'reference' ||
-              data?.backupFieldType === 'taxonomy' ||
-              data?.backupFieldType === 'file' ||
-              data?.backupFieldType === 'boolean' ||
-              data?.backupFieldType === 'number' ||
-              data?.backupFieldType === 'link' ||
-              data?.backupFieldType === 'date' ||
-              data?.contentstackFieldType === "global_field" ||
+              !(data?.contentstackFieldType === 'single_line_text' ||
+              data?.contentstackFieldType === 'multi_line_text' || data?.contentstackFieldType === 'html' || data?.contentstackFieldType === 'json') ||
               data?.otherCmsType === undefined ||
-              newMigrationData?.project_current_step > 4 ||
-              data?.backupFieldType === 'extension' ||
-              data?.backupFieldType === 'app'
+              newMigrationData?.project_current_step > 4
             }
           />
         </div>
         {!(
-          data?.contentstackFieldType === 'Group' ||
+          data?.contentstackFieldType === 'group' ||
           data?.contentstackFieldType === 'text' ||
           data?.contentstackFieldType === 'url' ||
           data?.contentstackFieldType === 'global_field' ||
@@ -1810,20 +1799,10 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
           ? {
             label: Fields[data?.contentstackFieldType]?.label ?? 'No Option',
             value: Fields[data?.contentstackFieldType]?.label ?? 'No Option',
-            isDisabled: data?.contentstackFieldType === 'text' ||
-              data?.contentstackFieldType === 'group' ||
-              data?.contentstackFieldType === 'url' ||
-              data?.backupFieldType === "reference" ||
-              data?.backupFieldType === 'taxonomy' ||
-              data?.backupFieldType === 'file' ||
-              data?.backupFieldType === 'boolean' ||
-              data?.backupFieldType === 'number' ||
-              data?.backupFieldType === 'link' ||
-              data?.backupFieldType === 'date' ||
-              data?.contentstackFieldType === "global_field" ||
-              data?.otherCmsType === undefined ||
-              data?.backupFieldType === 'app' ||
-              data?.backupFieldType === 'extension'
+            isDisabled: !(data?.contentstackFieldType === 'single_line_text' ||
+              data?.contentstackFieldType === 'multi_line_text' || data?.contentstackFieldType === 'html' || data?.contentstackFieldType === 'json') ||
+              data?.otherCmsType === undefined
+              
           }
           : {
             label: `${selectedOption} matches`,
@@ -2420,10 +2399,12 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
   const columns = [
     {
       disableSortBy: true,
-      Header: `${newMigrationData?.legacy_cms?.selectedCms?.title}: ${otherCmsTitle}`,
+      Header: (
+        <span className="nowrap-header">
+          {`${newMigrationData?.legacy_cms?.selectedCms?.title}: ${otherCmsTitle}`}
+        </span>
+      ),
       accessor: accessorCall,
-      // accessor: 'otherCmsField',
-      default: false,
       id: 'uuid'
     }
   ];
@@ -2433,19 +2414,25 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
   if (!isNewStack) {
     columns?.push({
       disableSortBy: true,
-      Header: `Contentstack: ${isOtherContentType ? otherContentType?.label : otherCmsTitle}`,
+      Header: (
+        <span className="nowrap-header">
+          {`Contentstack: ${isOtherContentType ? otherContentType?.label : otherCmsTitle}`}
+        </span>
+      ),
       // accessor: 'ct_field',
       accessor: SelectAccessorOfColumn,
       id: 'contentstack_field',
-      default: false
     });
   } else {
     columns?.push({
       disableSortBy: true,
-      Header: `Contentstack: ${isNewStack ? otherCmsTitle : otherContentType?.label ?? ''}`,
+      Header: (
+        <span className="nowrap-header">
+          {`Contentstack: ${isNewStack ? otherCmsTitle : otherContentType?.label ?? ''}`}
+        </span>
+      ),
       accessor: SelectAccessor,
       id: 'contentstack_cms_field',
-      default: false
     });
   }
 
@@ -2719,7 +2706,7 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
                     plural: totalCounts === 0 ? 'Count' : ''
                   }}
                 />
-                <div className='d-flex align-items-center justify-content-between my-2 mx-3 px-1 py-1'>
+                <div className="mapper-footer">
                   <div>Total Fields: <strong>{totalCounts}</strong></div>
                   <Button
                     className="saveButton"
diff --git a/upload-api/src/routes/index.ts b/upload-api/src/routes/index.ts
@@ -370,18 +370,51 @@ router.get(
 
           //buffer fully stremd
           bodyStream.on('end', async () => {
-            if (!zipBuffer) {
-              throw new Error('No data collected from the stream.');
+            try {
+              if (!zipBuffer) {
+                throw new Error('No data collected from the stream.');
+              }
+
+              console.log('📦 Processing S3 file with handleFileProcessing...');
+              const data = await handleFileProcessing(fileExt, zipBuffer, cmsType, fileName);
+              console.log('✓ S3 file processing complete.');
+
+              console.log('📦 SENDING FILE VALIDATION RESPONSE TO UI (S3):');
+              console.log('  ✓ Status:', data?.status || 200);
+              console.log('  ✓ Message:', data?.message);
+
+              res.status(data?.status || 200).json(data);
+
+              if (data?.status === 200) {
+                let filePath = path.join(__dirname, '..', '..', 'extracted_files', fileName);
+
+                // If the processor returned a specific file/folder, update the path
+                if (data?.file) {
+                  filePath = path.join(
+                    __dirname,
+                    '..',
+                    '..',
+                    'extracted_files',
+                    fileName,
+                    data.file
+                  );
+                }
+
+                createMapper(filePath, projectId, app_token, affix, config);
+              }
+            } catch (error: any) {
+              console.error('Processing error:', error);
+              if (!res.headersSent) {
+                res.status(500).json({ error: 'Failed to process file' });
+              }
             }
+          });
 
-            const data = await handleFileProcessing(fileExt, zipBuffer, cmsType, fileName);
-            res.json(data);
-            res.send('file validated successfully.');
-            let filePath = path.join(__dirname, '..', '..', 'extracted_files', fileName);
-            if (data?.file !== undefined) {
-              filePath = path.join(__dirname, '..', '..', 'extracted_files', fileName, data?.file);
+          bodyStream.on('error', (error) => {
+            console.error('Stream error:', error);
+            if (!res.headersSent) {
+              res.status(500).json({ error: 'Stream processing failed' });
             }
-            createMapper(filePath, projectId, app_token, affix, config);
           });
         }
       }
