Merge pull request #826 from contentstack/feature/aem-final

[cmg-709], advance properties toggle button fixes

Author: sayalijoshi27

ui/src/components/AdvancePropertise/index.tsx

@@ -182,6 +182,12 @@ const AdvancePropertise = (props: SchemaProps) => {
    * @param checkBoxChanged - Indicates if the checkbox was changed.
    */
   const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => {
+    // If unchecking embedObject toggle, clear the embed objects
+    if (field === 'embedObject' && !value) {
+      setCTValue(null);
+      setEmbedObjectsLabels([]);
+    }
+    
     setToggleStates((prevStates) => ({
       ...prevStates,
       [field]: value
@@ -202,7 +208,7 @@ const AdvancePropertise = (props: SchemaProps) => {
         unique: false,
         nonLocalizable: currentToggleStates?.nonLocalizable,
         embedObject: currentToggleStates?.embedObject,
-        embedObjects: embedObjectsLabels,
+        embedObjects: field === 'embedObject' && !value ? [] : embedObjectsLabels,
         default_value: currentToggleStates?.default_value,
         minChars: currentToggleStates?.minChars,
         maxChars: currentToggleStates?.maxChars,
@@ -611,7 +617,7 @@ const AdvancePropertise = (props: SchemaProps) => {
                       label="Embed Object(s)"
                       labelColor="primary"
                       labelPosition="right"
-                      checked={(ctValue?.length ?? 0) > 0 || toggleStates?.embedObject}
+                      checked={toggleStates?.embedObject}
                       onChange={
                         handleToggleChange &&
                         ((e: React.MouseEvent<HTMLElement>) =>
@@ -624,7 +630,7 @@ const AdvancePropertise = (props: SchemaProps) => {
                     />
                   </div>
 
-                  {((ctValue && ctValue?.length > 0) || toggleStates?.embedObject) && (
+                  {toggleStates?.embedObject && (
                     <Select
                       value={ctValue}
                       isMulti={true}
@@ -633,11 +639,22 @@ const AdvancePropertise = (props: SchemaProps) => {
                         const embedObject = selectedOptions?.map(
                           (item: optionsType) => item?.value
                         ); // Update the state with the selected options
+                        
+                        // If all embed objects are removed, also uncheck the toggle
+                        const shouldToggleOff = !selectedOptions || selectedOptions.length === 0;
+                        if (shouldToggleOff) {
+                          setToggleStates((prevStates) => ({
+                            ...prevStates,
+                            embedObject: false
+                          }));
+                        }
+                        
                         props?.updateFieldSettings(
                           props?.rowId,
                           {
                             validationRegex: toggleStates?.validationRegex ?? '',
-                            embedObjects: embedObject
+                            embedObjects: embedObject,
+                            embedObject: !shouldToggleOff
                           },
                           true,
                           props?.data?.contentstackFieldUid

ui/src/components/Common/AddStack/addStack.tsx

@@ -130,11 +130,7 @@ const AddStack = (props: any): JSX.Element => {
           onSubmit={onSubmit}
           keepDirtyOnReinitialize={true}
           validate={(values: Stack) => {
-            const errors: Errors = {
-              name: '',
-              locale: '',
-              description: ''
-            };
+            const errors: any = {};
             if (!values?.name || values?.name?.trim().length < 1) {
               errors.name = 'Stack name required';
             }

ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx

@@ -39,8 +39,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   const dispatch = useDispatch();
 
   const [cmsData, setCmsData] = useState<ICMSType[]>([]);
-  const [searchText] = useState<string>('');
-  //const [cmsFilterStatus, setCmsFilterStatus] = useState<IFilterStatusType>({});
+
   const [cmsType, setCmsType] = useState<ICMSType>(
     newMigrationData?.legacy_cms?.selectedCms || defaultCardType
   );
@@ -53,7 +52,6 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   const [errorMessage, setErrorMessage] = useState<string>('');
 
   /****  ALL METHODS HERE  ****/
-
   //Handle Legacy cms selection
   const handleCardClick = async (data: ICMSType) => {
     setSelectedCard({ ...data });
@@ -75,7 +73,7 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
   };
 
   // Filter CMS Data
-  const filterCMSData = async (searchText: string) => {
+  const filterCMSData = async () => {
     try {
       const { all_cms = [] } = migrationData?.legacyCMSData || {};
       setSelectedCard(cmsType);
@@ -116,29 +114,6 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
           setCmsData([]);
         }
       }
-      const newMigrationDataObj = {
-        ...newMigrationData,
-        legacy_cms: {
-          ...newMigrationData?.legacy_cms,
-          selectedFileFormat: filteredCmsData[0].allowed_file_formats[0]
-        }
-      };
-
-      //dispatch(updateNewMigrationData(newMigrationDataObj));
-
-      // setCmsData(filteredCmsData);
-
-      //Normal Search
-      const _filterCmsData = validateArray(all_cms)
-        ? filteredCmsData?.filter(
-            ({ title, cms_id }: ICMSType) =>
-              //Filtering Criteria base on SearchText
-              title?.toLowerCase()?.includes(searchText) ||
-              cms_id?.toLowerCase()?.includes(searchText)
-          )
-        : [];
-
-      setCmsData(_filterCmsData);
 
       let newSelectedCard: ICMSType | undefined;
 
@@ -172,31 +147,9 @@ const LoadSelectCms = (props: LoadSelectCmsProps) => {
 
   /****  ALL USEEffects  HERE  ****/
   useEffect(() => {
-    filterCMSData(searchText);
+    filterCMSData();
   }, []);
 
-
-  // Handle Legacy cms selection for single match
-  // useEffect(() => {
-  //   const isSingleMatch = cmsData?.length === 1;
-  //   if (isSingleMatch) {
-  //     setSelectedCard({ ...selectedCard });
-
-  //     const newMigrationDataObj: INewMigration = {
-  //       ...newMigrationData,
-  //       legacy_cms: {
-  //         ...newMigrationDataRef?.current?.legacy_cms,
-  //         selectedCms: { ...selectedCard }
-  //       }
-  //     };
-  //     console.info("neMigObj ---> ", newMigrationDataObj, cmsData)
-  //     dispatch(updateNewMigrationData(newMigrationDataObj));
-
-  //     // Call for Step Change
-  //     props?.handleStepChange(props?.currentStep);
-  //   }
-  // }, [cmsData]);
-
   return (
     <div>
       <div className="col-12">