Bugfix/content mapper

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

@@ -0,0 +1,41 @@
+
+import {
+  ModalBody,
+  ModalHeader,
+  ModalFooter,
+  ButtonGroup,
+  Button,
+  Paragraph
+} from '@contentstack/venus-components';
+
+interface Props {
+  closeModal: () => void;
+  isopen: any;
+  otherCmsTitle?: string;
+  saveContentType: () => void;
+  openContentType: () => void;
+}
+
+const SaveChangesModal = (props:Props) => {
+  return(
+      <>
+      <ModalHeader title={'Save Changes'} closeModal={()=>{props?.closeModal(),props.isopen(false)}} className="text-capitalize" />
+      <ModalBody>
+        <div className='modal-data'>             
+          <Paragraph tagName="p" text={`You have unsaved changes on this page. Please save the content type ${props?.otherCmsTitle || ''}.`} variant={"p1"}/>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup>
+          <Button buttonType="secondary"version={"v2"}  onClick={() => {props.closeModal(); props.isopen(false)}}> 
+            Cancel
+          </Button>
+          <Button version={"v2"} onClick={() => { props.saveContentType(); props.closeModal(); props.openContentType() }}>Save</Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  )
+
+}
+
+export default SaveChangesModal;

ui/src/components/ContentMapper/index.tsx

@@ -48,7 +48,7 @@ import {
   optionsType,
   UidMap,
   ContentTypeMap,
-  Advanced
+  Advanced,
 } from './contentMapper.interface';
 import { ItemStatusMapProp } from '@contentstack/venus-components/build/components/Table/types';
 import { ModalObj } from '../Modal/modal.interface';
@@ -57,6 +57,7 @@ import { UpdatedSettings } from '../AdvancePropertise/advanceProperties.interfac
 // Components
 import SchemaModal from '../SchemaModal';
 import AdvanceSettings from '../AdvancePropertise';
+import SaveChangesModal from '../Common/SaveChangesModal';
 
 // Styles
 import './index.scss';
@@ -431,10 +432,34 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
     }
   };
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   // Method to change the content type
+  const handleOpenContentType = (i: number) => {
+    if (isDropDownChanged) {
+      setIsModalOpen(true);
+      return cbModal({
+        component: (props: ModalObj) => (
+          <SaveChangesModal
+            {...props}
+            isopen={setIsModalOpen}
+            otherCmsTitle={otherCmsTitle}
+            saveContentType={handleSaveContentType}
+            openContentType={() => openContentType(i)}
+          />
+        ),
+        modalProps: {
+          size: 'xsmall',
+          shouldCloseOnOverlayClick: false
+        }
+      });
+    } else {
+      openContentType(i);
+    }
+  };
+
   const openContentType = (i: number) => {
     setActive(i);
-
     const otherTitle = contentTypes?.[i]?.otherCmsTitle;
     setOtherCmsTitle(otherTitle);
     const option = contentTypeMapped?.[otherTitle] ?? 'Select Content Type';
@@ -444,7 +469,7 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
     fetchFields(contentTypes?.[i]?.id ?? '', searchText || '');
     setotherCmsUid(contentTypes?.[i]?.otherCmsUid);
     setSelectedContentType(contentTypes?.[i]);
-  };
+  }
 
   // Function to get exisiting content types list
   const fetchExistingContentTypes = async () => {
@@ -566,15 +591,15 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
       }
     });
   };
+
   const SelectAccessor = (data: FieldMapType) => {
-
     //const OptionsForRow = Fields[data?.backupFieldType as keyof Mapping];
     const OptionsForRow = dummy_obj?.[data?.backupFieldType]?.options ;
     const initialOption = {
       label: dummy_obj?.[data?.ContentstackFieldType]?.label,
       value: dummy_obj?.[data?.ContentstackFieldType]?.label,
     };
-    let option:any;
+    let option: FieldTypes[];
     if (Array.isArray(OptionsForRow)) {
        option = OptionsForRow.map((option) => ({
         label: option,
@@ -585,12 +610,18 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
         label,
         value,
       }));
-    }else{
+
+      if (option?.length === 1 && option?.[0]?.label === initialOption?.label) {
+        option = [{ label: "No option available", value: "No option available" }];
+      }
+
+    } else {
       option = [{ label: OptionsForRow, value: OptionsForRow }]
     }
 
-      const fieldLabel = data?.ContentstackFieldType === 'url' || data?.ContentstackFieldType === 'group'
-        ? data?.ContentstackFieldType : option?.[0]?.label
+    const fieldLabel = data?.ContentstackFieldType === 'url' || data?.ContentstackFieldType === 'group'
+      ? data?.ContentstackFieldType : option?.[0]?.label
+
     return (
       <div className="table-row">
         <div className="select">
@@ -891,7 +922,7 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
           notificationContent: { text: 'Content type saved successfully' },
           notificationProps: {
             position: 'bottom-center',
-            hideProgressBar: false
+            hideProgressBar: true
           },
           type: 'success'
         });
@@ -907,7 +938,7 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
           notificationContent: { text: data?.error?.message },
           notificationProps: {
             position: 'bottom-center',
-            hideProgressBar: false
+            hideProgressBar: true
           },
           type: 'error'
         });
@@ -1120,8 +1151,8 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
                     <li
                       key={`${index.toString()}`}
                       className={`${active == index ? 'active-ct' : ''}`}
-                      onClick={() => openContentType(index)}
-                      onKeyDown={() => openContentType(index)}
+                      onClick={() => handleOpenContentType(index)}
+                      onKeyDown={() => handleOpenContentType(index)}
                     >
                       <div className='cms-title'>
                         <Tooltip content={content?.type} position="bottom">