Merge pull request #586 from contentstack/feature/content-mapper

Improved Language mapper section

Author: RohitKini

ui/package.json

@@ -12,7 +12,7 @@
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@types/react-redux": "^7.1.33",
-    "axios": "^1.8.2",
+    "axios": "^1.8.3",
     "bootstrap": "5.1.3",
     "chokidar": "^3.6.0",
     "final-form": "^4.20.10",

ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx

@@ -508,7 +508,7 @@ const LanguageMapper = () => {
             type="Secondary"
           />
           <Button
-            className="ml-10 mt-10 mb-10"
+            className="mt-10"
             buttonType="secondary"
             aria-label="add language"
             version={'v2'}

ui/src/components/DestinationStack/Actions/LoadStacks.tsx

@@ -15,7 +15,7 @@ import { RootState } from '../../../store';
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
 
 // Interface
-import { DEFAULT_DROPDOWN, IDropDown, INewMigration } from '../../../context/app/app.interface';
+import { IDropDown, INewMigration } from '../../../context/app/app.interface';
 import { StackResponse } from '../../../services/api/service.interface';
 import { Stack } from '../../../components/Common/AddStack/addStack.interface';
 

ui/src/components/DestinationStack/Actions/tableHeader.tsx

@@ -9,21 +9,19 @@ const TableHeader = ({ cms }: { cms: string }) => {
         htmlFor="Content Types"
         className="contentTypeRows__label field-color field-label"
         version="v2"
-        requiredText="(destination language)"
+        requiredText="(destination)"
       >
         Contentstack
       </FieldLabel>
 
-      <div style={{ marginLeft: '15px' }}>
         <FieldLabel
           htmlFor="Fields"
-          className="contentTypeRows__label field-color field-label"
-          requiredText="(source language)"
+          className="contentTypeRows__label field-color field-label ml-20"
+          requiredText="(source)"
           version="v2"
         >
           {cms}
         </FieldLabel>
-      </div>
     </div>
   );
 };

ui/src/components/DestinationStack/DestinationStack.scss

@@ -45,13 +45,10 @@
   border-radius: 4px;
 }
 .destination-stack-container {
-  padding-left: 25px !important;
-  padding-top: 26px;
-  padding-right: 30px;
-
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: 65vh;
+  padding: 25px;
   .migration-vertical-stepper {
     padding: 24px 30px;
     border: 1px solid $color-brand-secondary-lightest;
@@ -207,6 +204,7 @@
   //padding-bottom: 50px;
 }
 .language-mapper {
+  border-top: 1px solid $color-brand-secondary-lightest;
   margin-top: 16px;
 
   .table-content-section {
@@ -220,6 +218,7 @@
     }
     .field-content__content {
       height: auto !important;
+      margin-left: 0;
       max-height: unset !important;
       overflow: visible !important;
       z-index: 9999;
@@ -229,7 +228,8 @@
     padding: 10px 20px;
   }
   .field-label {
-    padding: 10px 0;
+    padding: 15px 0 0;
+    width: 290px;
   }
 }
 
@@ -253,9 +253,9 @@
   //width: 120px;
 }
 .lang-container {
-  margin-bottom: 30px;
-  margin-left: 10px;
-  margin-top: 10px;
+  // margin-bottom: 30px;
+  // margin-left: 10px;
+  // margin-top: 10px;
   display: flex;
 }
 .info-tag {

ui/src/context/app/app.interface.ts

@@ -56,6 +56,7 @@ export interface FileDetails {
     bucketName?: string;
     buketKey?: string;
   };
+  filePath?: string | undefined;
 }
 export interface IFile {
   id?: string;

ui/src/pages/Migration/index.tsx

@@ -44,7 +44,8 @@ import {
   ICMSType,
   ILegacyCMSComponent,
   DEFAULT_CMS_TYPE,
-  TestStacks
+  TestStacks,
+  FileDetails
 } from '../../context/app/app.interface';
 import { ContentTypeSaveHandles } from '../../components/ContentMapper/contentMapper.interface';
 import { ICardType } from '../../components/Common/Card/card.interface';
@@ -60,7 +61,6 @@ import TestMigration from '../../components/TestMigration';
 import MigrationExecution from '../../components/MigrationExecution';
 import SaveChangesModal from '../../components/Common/SaveChangesModal';
 import { getMigratedStacks } from '../../services/api/project.service';
-import { getStackLocales } from '../../services/api/stacks.service';
 import { getConfig } from '../../services/api/upload.service';
 
 type StepperComponentRef = {
@@ -69,6 +69,9 @@ type StepperComponentRef = {
 type LegacyCmsRef = {
   getInternalActiveStepIndex: () => number;
 };
+type LocalesType = {
+  [key: string]: any
+}
 
 const Migration = () => {
   const params: Params<string> = useParams();
@@ -190,18 +193,18 @@ const Migration = () => {
 
     // Use regex to extract the file extension
     const match = normalizedPath?.match(/\.([a-zA-Z0-9]+)$/);
-    const ext = match ? match[1]?.toLowerCase() : "";
+    const ext = match ? match?.[1]?.toLowerCase() : "";
 
-    const fileName = filePath?.split('/')?.pop();
+    // const fileName = filePath?.split('/')?.pop();
     //const ext = fileName?.split('.')?.pop();
     const validExtensionRegex = /\.(pdf|zip|xml|json)$/i;
     return ext && validExtensionRegex?.test(`.${ext}`) ? `${ext}` : '';
   };
-
+ 
   // funcrion to form file format object from config response
-  const fetchFileFormat = (data:any) => {
+  const fetchFileFormat = (data: FileDetails) => {
     const filePath = data?.localPath?.toLowerCase();
-    const fileFormat =  getFileExtension(filePath);
+    const fileFormat =  getFileExtension(filePath ?? '');
     const selectedFileFormatObj = {
       description: "",
       fileformat_id: fileFormat,
@@ -213,11 +216,11 @@ const Migration = () => {
   }
 
 // funcrion to form upload object from config response
-  const getFileInfo = (data:any) => {
+  const getFileInfo = (data: FileDetails) => {
     const newMigrationDataObj = {
           name: data?.localPath,
           url: data?.localPath,
-          isValidated: data?.localePath !== newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath ? false : newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
+          isValidated: data?.localPath !== newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath ? false : newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
           file_details: {
             isLocalPath: data?.isLocalPath,
             cmsType: data?.cmsType,
@@ -534,11 +537,11 @@ const Migration = () => {
         (value) => value !== '' && value !== null && value !== undefined
       );
 
-    const master_locale: any = {};
-    const locales: any = {};
-    Object.entries(newMigrationData?.destination_stack?.localeMapping).forEach(([key, value]) => {
-      if (key.includes('master_locale')) {
-        master_locale[key.replace('-master_locale', '')] = value;
+    const master_locale: LocalesType = {};
+    const locales: LocalesType = {};
+    Object.entries(newMigrationData?.destination_stack?.localeMapping)?.forEach(([key, value]) => {
+      if (key?.includes('master_locale')) {
+        master_locale[key?.replace('-master_locale', '')] = value;
       } else {
         locales[key] = value;
       }