Merge pull request #287 from contentstack/feature/dropdown-field-choices

Feature/dropdown field choices

Author: RohitKini

ui/src/components/ContentMapper/index.tsx

@@ -284,6 +284,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   const deletedExstingField : ExistingFieldType= existingField;
   const isNewStack = newMigrationData?.stackDetails?.isNewStack;
   const [isFieldDeleted, setIsFieldDeleted] = useState<boolean>(false);
+  const [isContentDeleted, setIsContentDeleted] = useState<boolean>(false);
 
   /** ALL HOOKS Here */
   const { projectId = '' } = useParams();
@@ -323,13 +324,46 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
   },[tableData]);
 
   useEffect(() => {
-    if (contentTypeMapped && otherCmsTitle) {
-      setOtherContentType({
-        label: contentTypeMapped?.[otherCmsTitle] ?? 'Select content type from existing stack',
-        value: contentTypeMapped?.[otherCmsTitle] ?? 'Select content type from existing stack'
-      });
+    const mappedContentType = contentTypesList && contentTypesList?.find((item)=>item?.title === contentTypeMapped?.[otherCmsTitle]);
+
+    if (contentTypeMapped && otherCmsTitle  ) {
+      
+      if (mappedContentType?.uid) {
+        setOtherContentType({
+          id: mappedContentType?.uid,
+          label: contentTypeMapped?.[otherCmsTitle],
+          value: contentTypeMapped?.[otherCmsTitle],
+        });
+        setIsContentDeleted(false);
+      } else {
+
+        setOtherContentType({
+          label: 'Select content type from existing stack',
+          value: 'Select content type from existing stack',
+        });
+
+      }  
+     
+    }
+    
+  }, [contentTypeMapped, otherCmsTitle,contentTypesList]);
+
+
+
+  useEffect(()=>{
+    if(isContentDeleted){
+      setContentTypeMapped((prevState: ContentTypeMap) => {
+            const { [otherCmsTitle]: removed, ...newState } = prevState; 
+          
+            return newState;
+          });
+       
+          setIsFieldDeleted(false);
     }
-  }, [contentTypeMapped, otherCmsTitle]);
+ 
+
+  },[isContentDeleted, contentTypesList, otherCmsTitle])
+  
 
   useEffect(() => {
     if (contentTypeMapped[otherCmsTitle] === otherContentType?.label) {
@@ -567,10 +601,10 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     const otherTitle = contentTypes?.[i]?.otherCmsTitle;
     setOtherCmsTitle(otherTitle);
 
-    setOtherContentType({ 
-      label: contentTypeMapped?.[otherTitle] || 'Select content type from existing stack', 
-      value: contentTypeMapped?.[otherTitle] || 'Select content type from existing stack'
-    });
+    // setOtherContentType({ 
+    //   label: contentTypeMapped?.[otherTitle] || 'Select content type from existing stack', 
+    //   value: contentTypeMapped?.[otherTitle] || 'Select content type from existing stack'
+    // });
 
     setContentTypeUid(contentTypes?.[i]?.id ?? '');
     fetchFields(contentTypes?.[i]?.id ?? '', searchText || '');
@@ -583,6 +617,16 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     const { data, status } = await getExistingContentTypes(projectId);
     if (status === 201) {
       setContentTypesList(data?.contentTypes);
+      const mappedContentType = data?.contentTypes && data?.contentTypes?.find((item:ContentTypeList)=>item?.title === contentTypeMapped?.[otherCmsTitle]);
+      
+      if (mappedContentType?.uid) {
+        setOtherContentType({
+          id: mappedContentType?.uid,
+          label: contentTypeMapped?.[otherCmsTitle],
+          value: contentTypeMapped?.[otherCmsTitle],
+        });
+        setIsContentDeleted(false);
+      }
     }
   };
 
@@ -1487,17 +1531,29 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
         fieldMapping: updatedRows
       }
     };
+    let newstate = {} ;
+    setContentTypeMapped((prevState: ContentTypeMap) => {
+      const newState = { ...prevState };
+      
+      delete newState[otherCmsTitle];
+      newstate = newState;   
+      
+      return newState;
+    });
     if (orgId && selectedContentType) {
       const { status } = await resetToInitialMapping(
         orgId,
         projectID,
         selectedContentType?.id ?? '',
         dataCs
       );
+      
       setExistingField({});
       setContentTypeSchema([]);
-      setContentTypeMapped({});
+   
       if (status == 200) {
+        await updateContentMapper(orgId, projectID, {...newstate} );
+             
         Notification({
           notificationContent: { text: 'Content type reset successfully' },
           notificationProps: {
@@ -1512,6 +1568,51 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
 
   // Function to fetch single content type
   const handleFetchContentType = async () => {
+    const { data , status} = await fetchExistingContentType(projectId,'') ;
+    // if(status === 201){
+    //   Notification({
+    //     notificationContent: { text: "All Content Types fetched successfully" },
+    //     notificationProps: {
+    //       position: 'bottom-center',
+    //       hideProgressBar: false
+    //     },
+    //     type: 'success'
+    //   });
+
+    // }
+    const contentTypesArr: ContentTypeList[] = contentTypesList;
+    const index = contentTypesList.findIndex(ct => ct?.uid === data?.uid);
+      
+    if(index != -1) {      
+      contentTypesArr[index] = data;
+    }
+  
+    setContentTypesList(data?.contentTypes);
+    
+
+    const content_type = data?.contentTypes?.find((item:any)=>item?.title === otherContentType?.label);
+    const contentTypeKey = Object.keys(contentTypeMapped).find(key => contentTypeMapped[key] === otherContentType?.label);
+
+    
+    if(! content_type &&  contentTypeKey){
+      const updatedState = { ...contentTypeMapped };
+      delete updatedState[contentTypeKey];
+  
+      setContentTypeMapped((prevState: ContentTypeMap) => {
+        const newState = { ...prevState };
+        
+        delete newState[contentTypeKey]
+    
+        return newState;
+      });
+      await updateContentMapper(selectedOrganisation?.value, projectId, {... updatedState} );
+      setOtherContentType({
+        label: 'Select content type from existing stack',
+        value: 'Select content type from existing stack'
+
+      });
+    }
+    
     if (otherContentType?.label === "Select Content Type") {
       Notification({
         notificationContent: { text: "Please Select a Content Type to fetch." },
@@ -1521,8 +1622,9 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
         },
         type: 'error'
       });
-    } else {
-      const { data , status} = await fetchExistingContentType(projectId, otherContentType?.id ?? '');
+    } else if(otherContentType?.id){
+      
+      const { data , status} = await fetchExistingContentType(projectId, otherContentType?.id ?? '') ;
 
       const index = contentTypesList.findIndex(ct => ct?.uid === data?.uid);
 
@@ -1532,7 +1634,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
         contentTypesArr[index] = data;
       }
 
-      setContentTypesList(contentTypesArr);
+      //setContentTypesList(contentTypesArr);
       setContentTypeSchema(data?.schema);
       if (status == 201) {
         Notification({
@@ -1560,7 +1662,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     }
   ];
 
-  const isOtherContentType = contentTypesList?.some((ct) => ct?.title === otherContentType?.label);
+  const isOtherContentType = contentTypesList && contentTypesList?.some((ct) => ct?.title === otherContentType?.label);
 
   if (!isNewStack) {
     columns?.push({

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

@@ -5,6 +5,7 @@ import {
 import { ICardType, defaultCardType } from '../../components/Common/Card/card.interface';
 import { CTA } from '../../types/common.interface';
 import { IFilterType } from '../../components/Common/Modal/FilterModal/filterModal.interface';
+import { ContentTypeList } from '../../components/ContentMapper/contentMapper.interface';
 export interface ICTA {
   title: string;
   href: string;
@@ -170,6 +171,7 @@ export interface IContentMapper {
   content_type_mapping: ContentTypeMap;
   isDropDownChanged?: boolean;
   otherCmsTitle?: string;
+  contentTypeList:ContentTypeList[]
 }
 export interface INewMigration {
   mapperKeys: ContentTypeMap;
@@ -307,7 +309,8 @@ export const DEFAULT_DESTINATION_STACK: IDestinationStack = {
 export const DEFAULT_CONTENT_MAPPER: IContentMapper = {
   content_type_mapping: {},
   isDropDownChanged: false,
-  otherCmsTitle: ''
+  otherCmsTitle: '',
+  contentTypeList: [],
 };
 
 export const DEFAULT_TEST_MIGRATION: ITestMigration = {