bugfix: Content type search and fields search issue resolved in Contentmapper

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -55,8 +55,7 @@ export interface FieldMapType {
   otherCmsType: string;
   uid: string;
   id: string;
-  _canFreezeCheckbox?: boolean;
-  _canSelect?: boolean;
+  _invalid?: boolean;
 }
 
 export interface ItemStatus {

ui/src/components/ContentMapper/index.scss

@@ -20,18 +20,19 @@
   list-style-type: none;
   margin: 5px 15px 0;
   li {
+    align-items: center;
     border: 1px solid transparent;
     cursor: pointer;
+    display: flex;
     font-size: $size-font-large;
+    justify-content: space-between;
     line-height: normal;
+    min-height: 42px;
     padding: $space-10 35px;
     &.active-ct {
-      align-items: center;
       background-color: $color-brand-white-base;
       border: 1px solid $color-brand-primary-base;
       color: $color-brand-primary-base;
-      display: flex;
-      justify-content: space-between;
     }
   }
 }
@@ -73,6 +74,9 @@
     }
   }
 }
+.disabled-field {
+  color: $color-font-disabled; 
+}
 .action-btn-wrapper {
   background-color: $color-brand-white-base;
   display: flex;

ui/src/components/ContentMapper/index.tsx

@@ -138,6 +138,8 @@ const ContentMapper = () => {
 
   const [active, setActive] = useState<number>(null ?? 0);
 
+  const [searchContentType, setSearchContentType] = useState('');
+
   /** ALL HOOKS Here */
   const { projectId = '' } = useParams();
   const navigate = useNavigate();
@@ -160,13 +162,16 @@ const ContentMapper = () => {
 
     fetchExistingContentTypes();
     stackStatus();
+  }, []);
 
+  // Make title and url field non editable
+  useEffect(() => {
     tableData?.forEach((field) => {
-      if (field?.otherCmsField === 'title') {
-        field._canFreezeCheckbox = true;
+      if (field?.otherCmsField === 'title' || field?.otherCmsField === 'url') {
+        field._invalid = true;
       }
     });
-  }, []);
+  })
 
   useEffect(() => {
     if (contentTypeMapped && otherCmsTitle) {
@@ -194,16 +199,18 @@ const ContentMapper = () => {
 
   // Method to fetch content types
   const fetchContentTypes = async (searchText: string) => {
-    const { data } = await getContentTypes(projectId || '', 0, 10, ''); //org id will always present
+    const { data } = await getContentTypes(projectId || '', 0, 10, searchContentType || ''); //org id will always present
 
     setContentTypes(data?.contentTypes);
     setSelectedContentType(data?.contentTypes?.[0]);
     setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length);
     setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle);
     setContentTypeUid(data?.contentTypes?.[0]?.id);
+    fetchFields(data?.contentTypes?.[0]?.id, searchText || '');
     setotherCmsUid(data?.contentTypes?.[0]?.otherCmsUid);
-    fetchFields(data?.contentTypes?.[0]?.id, searchText);
   };
+
+  // Get the stack status if it is empty or not
   const stackStatus = async () => {
     const contentTypeCount = await getStackStatus(
       newMigrationData?.destination_stack?.selectedOrg?.value,
@@ -218,17 +225,24 @@ const ContentMapper = () => {
   };
 
   // Method to search content types
-  const handleSearch = async (search: string) => {
-    setSearchText(search);
-    const { data } = await getContentTypes(projectId, 0, 5, search); //org id will always present
+  const handleSearch = async (searchCT: string) => {
+    console.log("searchCT", searchCT);
+
+    setSearchContentType(searchCT)
+
+    const { data } = await getContentTypes(projectId, 0, 5, searchCT || ''); //org id will always present
+
     setContentTypes(data?.contentTypes);
-    setContentTypeUid(data?.contentTypes[0]?.id);
-    fetchFields(data?.contentTypes[0]?.id, searchText);
+    setSelectedContentType(data?.contentTypes?.[0]);
+    setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length);
+    setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle);
+    setContentTypeUid(data?.contentTypes?.[0]?.id);
+    fetchFields(data?.contentTypes[0]?.id, searchText || '');
   };
 
   // Method to get fieldmapping
   const fetchFields = async (contentTypeId: string, searchText: string) => {
-    const { data } = await getFieldMapping(contentTypeId, 0, 30, searchText);
+    const { data } = await getFieldMapping(contentTypeId, 0, 30, searchText || '');
 
     try {
       const itemStatusMap: ItemStatusMapProp = {};
@@ -256,7 +270,8 @@ const ContentMapper = () => {
 
   // Fetch table data
   const fetchData = async ({ searchText }: TableTypes) => {
-    fetchContentTypes(searchText);
+    setSearchText(searchText);
+    fetchContentTypes(searchText || '');
   };
 
   // Method for Load more table data
@@ -300,11 +315,10 @@ const ContentMapper = () => {
 
     setContentTypeUid(contentTypes?.[i]?.id);
     setCurrentIndex(i);
+    fetchFields(contentTypes?.[i]?.id, searchText || '');
     setotherCmsUid(contentTypes?.[i]?.otherCmsUid);
     setSelectedContentType(contentTypes?.[i]);
-
-    fetchFields(contentTypes?.[i]?.id, searchText);
-  };
+   };
 
   //function to handle previous content type navigation
   const handlePrevClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -340,10 +354,6 @@ const ContentMapper = () => {
     }
   };
 
-  // const handleDropDownChange = (value: ContentType) => {
-  //   setSelectedContentType(value);
-  // };
-
   const handleOnClick = (title: string) => {
     return cbModal({
       component: (props: ModalObj) => (
@@ -464,7 +474,7 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={option}
-            isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'}
+            // isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'}
           />
         </div>
         <Icon
@@ -789,26 +799,13 @@ const ContentMapper = () => {
     isDisabled: contentTypeMapped && Object.values(contentTypeMapped).includes(option?.label)
   }));
 
-  const [SelectedAssets, updateSelectedAssets] = useState({});
-  const [resetRowSelection, updateResetRowSelection] = useState(false);
-
-  const onRowSelectProp = [
-    {
-      label: 'Log selected Items',
-      cb: (data: any) => {
-        updateResetRowSelection(true);
-      }
-    }
-  ];
-
   return (
     <div className="step-container">
       <div className="d-flex flex-wrap table-container">
         {/* Content Types List */}
         <div className="content-types-list-wrapper">
           <div className="content-types-list-header">
             <Heading tagName="h6" text={contentTypesHeading} />
-            {/* <Paragraph text={parseDescription} tagName='div' /> */}
             <p>{parseDescription}</p>
 
             <Search
@@ -817,7 +814,7 @@ const ContentMapper = () => {
               version="v2"
               onChange={(search: string) => handleSearch(search)}
               onClear={true}
-              value={searchText}
+              value={searchContentType}
               debounceSearch={true}
             />
           </div>
@@ -827,8 +824,7 @@ const ContentMapper = () => {
               {contentTypes?.map((content: ContentType, index: number) => (
                 <li
                   key={`${index.toString()}`}
-                  // className={index === 0 ? 'active-ct' : ''}
-                  className={`${active == index && 'active-ct'}`}
+                  className={`${active == index ? 'active-ct' : ''}`}
                   onClick={(e) => openContentType(e, index)}
                 >
                   <span>{content?.otherCmsTitle}</span>
@@ -879,10 +875,6 @@ const ContentMapper = () => {
               totalCounts={totalCounts}
               searchPlaceholder={searchPlaceholder}
               fetchTableData={fetchData}
-              rowDisableProp={{
-                key: '_invalid',
-                value: true
-              }}
               loadMoreItems={loadMoreItems}
               tableHeight={485}
               equalWidthColumns={true}
@@ -911,7 +903,7 @@ const ContentMapper = () => {
                 ),
                 showExportCta: true
               }}
-              v2Features={{ key: 'canFreezeCheckbox', value: true }}
+              rowDisableProp={{ key: '_invalid', value: true }}
             />
           </div>
 

ui/src/scss/_variables.scss

@@ -24,6 +24,7 @@ $color-base-gray-20: #475161;
 $color-base-gray-40: #dde3ee;
 $color-stepper-title: #6e6b86;
 $color-brand-warning-medium: #eb5646;
+$color-font-disabled: rgba(160, 174, 192, 0.5);
 
 $font-family-primary: Inter;
 $font-family-secondary: 'Montserrat', sans-serif;