contentstack · v1shalpatel · Jul 9, 2024 · Jul 4, 2024 · Jul 5, 2024 · Jul 5, 2024
diff --git a/api/src/services/migration.service.ts b/api/src/services/migration.service.ts
@@ -66,7 +66,7 @@ const createTestStack = async (req: Request): Promise<LoginServiceType> => {
       .get("projects")
       .findIndex({ id: projectId })
       .value();
-    console.log(index);
+
     if (index > -1) {
       ProjectModelLowdb.update((data: any) => {
         data.projects[index].current_test_stack_id = res.data.stack.uid;
@@ -143,7 +143,7 @@ const deleteTestStack = async (req: Request): Promise<LoginServiceType> => {
       .get("projects")
       .findIndex({ id: projectId })
       .value();
-    console.log(index);
+
     if (index > -1) {
       ProjectModelLowdb.update((data: any) => {
         data.projects[index].current_test_stack_id = "";

diff --git a/api/src/services/projects.service.ts b/api/src/services/projects.service.ts
@@ -240,16 +240,16 @@ const updateLegacyCMS = async (req: Request) => {
     throw new BadRequestError(HTTP_TEXTS.CANNOT_UPDATE_LEGACY_CMS);
   }
 
-  if (project.current_step > STEPPER_STEPS.LEGACY_CMS) {
-    contentMapperService.removeMapping(projectId);
-    logger.info(
-      getLogMessage(
-        srcFunc,
-        `Content Mapping for project [Id : ${projectId}] has been successfully removed.`,
-        token_payload
-      )
-    );
-  }
+  // if (project.current_step > STEPPER_STEPS.LEGACY_CMS) {
+  //   await contentMapperService.removeMapping(projectId);
+  //   logger.info(
+  //     getLogMessage(
+  //       srcFunc,
+  //       `Content Mapping for project [Id : ${projectId}] has been successfully removed.`,
+  //       token_payload
+  //     )
+  //   );
+  // }
 
   try {
     ProjectModelLowdb.update((data: any) => {
@@ -383,16 +383,16 @@ const updateFileFormat = async (req: Request) => {
     throw new BadRequestError(HTTP_TEXTS.CANNOT_UPDATE_FILE_FORMAT);
   }
 
-  if (project.current_step > STEPPER_STEPS.LEGACY_CMS) {
-    contentMapperService.removeMapping(projectId);
-    logger.info(
-      getLogMessage(
-        srcFunc,
-        `Content Mapping for project [Id : ${projectId}] has been successfully removed.`,
-        token_payload
-      )
-    );
-  }
+  // if (project.current_step > STEPPER_STEPS.LEGACY_CMS) {
+  //   await contentMapperService.removeMapping(projectId);
+  //   logger.info(
+  //     getLogMessage(
+  //       srcFunc,
+  //       `Content Mapping for project [Id : ${projectId}] has been successfully removed.`,
+  //       token_payload
+  //     )
+  //   );
+  // }
 
   try {
     ProjectModelLowdb.update((data: any) => { 
@@ -507,16 +507,16 @@ const updateDestinationStack = async (req: Request) => {
     );
     throw new BadRequestError(HTTP_TEXTS.CANNOT_UPDATE_DESTINATION_STACK);
   }
-  if (project.current_step > STEPPER_STEPS.DESTINATION_STACK) {
-    await contentMapperService.resetAllContentTypesMapping(projectId);
-    logger.info(
-      getLogMessage(
-        srcFunc,
-        `Content Mapping for project [Id : ${projectId}] has been successfully reset.`,
-        token_payload
-      )
-    );
-  }
+  // if (project.current_step > STEPPER_STEPS.DESTINATION_STACK) {
+  //   await contentMapperService.resetAllContentTypesMapping(projectId);
+  //   logger.info(
+  //     getLogMessage(
+  //       srcFunc,
+  //       `Content Mapping for project [Id : ${projectId}] has been successfully reset.`,
+  //       token_payload
+  //     )
+  //   );
+  // }
   try {
     const [err, res] = await safePromise(
       https({
@@ -760,7 +760,7 @@ const deleteProject = async (req: Request) => {
 };
 
 const revertProject = async (req: Request) => {
-  const { orgId, projectId } = req?.params;
+  const { orgId, projectId } = req.params;
   const decodedToken = req.body.token_payload;
   const { user_id = "", region = "" } = decodedToken;
   const srcFunc = "revertProject";

diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
@@ -38,9 +38,9 @@
       width: 100%!important;
     }
   }
-  svg {
-    margin-left: $px-12;
-  }
+  // svg {
+  //   margin-left: $px-12;
+  // }
   .Button {
     padding: 0;
     &:hover {
@@ -99,6 +99,11 @@
     }
   }
 }
+.mapped-icon {
+  circle {
+    fill: $color-brand-draft-base;
+  }
+}
 .dropdown-align {
   .Dropdown__menu--primary {
     right: 0;
@@ -236,17 +241,25 @@ div .table-row {
   top: $px-50;
   z-index: 1;
   li {
+    align-items: center;
     cursor: pointer;
+    display: flex;
     font-size: $size-font-medium;
+    justify-content: space-between;
     padding: $px-8 $px-12;
     &:hover {
       background-color: $color-base-white-10;
       color: $color-brand-primary-base;
     }
+    .filter-status {
+      margin-right: 20px;
+    }
     &.active-filter {
-      color: $color-brand-primary-base;
-      cursor: text;
-      font-weight: $font-weight-bold;
+      .filter-status {
+        color: $color-brand-primary-base;
+        cursor: text;
+        font-weight: $font-weight-bold;
+      }
     }
   }
 }

diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
@@ -281,7 +281,7 @@ const ContentMapper = () => {
 
   // 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 = {};
@@ -295,12 +295,15 @@ const ContentMapper = () => {
       setLoading(true);
 
       for (let index = 0; index <= 30; index++) {
-        itemStatusMap[index] = 'loaded';
+        itemStatusMap[index] = 'loaded' ?? '';
       }
 
       updateItemStatusMap({ ...itemStatusMap });
       setLoading(false);
-      setTableData(data?.fieldMapping || []);
+
+      const newTableData = data?.fieldMapping.filter((field: FieldMapType) => field !== null)
+
+      setTableData(newTableData || []);
       setTotalCounts(data?.count);
     } catch (error) {
       console.error('fetchData -> error', error);
@@ -325,7 +328,7 @@ const ContentMapper = () => {
       updateItemStatusMap({ ...itemStatusMapCopy });
       setLoading(true);
 
-      const { data } = await getFieldMapping(contentTypeUid, skip, limit, searchText || '');
+      const { data } = await getFieldMapping(contentTypeUid || '', skip, limit, searchText || '');
 
       const updateditemStatusMapCopy: ItemStatusMapProp = { ...itemStatusMap };
 
@@ -916,26 +919,23 @@ const ContentMapper = () => {
   }
 
   // Function to filter content types as per the status
-  const handleContentTypeFilter = (e: React.MouseEvent<HTMLElement>) => {
-    const li_list = document.querySelectorAll('li.status-wrapper');
+  const handleContentTypeFilter = (value: string, e: React.MouseEvent<HTMLElement>) => {
+    const li_list = document.querySelectorAll('.filter-wrapper li');
     if(li_list) {
       li_list.forEach((ele) => {
-        const selectedEle = document.querySelector(".active-filter");
-        if (selectedEle && selectedEle !== e?.target) {
-          ele?.classList?.remove('active-filter');
-        }
+        ele?.classList?.remove('active-filter');
       })
     }
-    (e?.target as HTMLElement)?.classList?.toggle('active-filter');
-
-    const filterVal = (e?.target as HTMLElement)?.innerText;
-    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === filterVal);
+
+    (e?.target as HTMLElement)?.closest('li')?.classList?.add('active-filter');
+    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === value);
 
-    if ((e?.target as HTMLElement)?.classList?.contains('active-filter')) {
+    if (value !== 'All') {
       setFilteredContentTypes(filteredCT)
     } else {
       setFilteredContentTypes(contentTypes)
     }
+    setShowFilter(false);
   }
 
   // Function to close filter panel on click outside
@@ -956,19 +956,18 @@ const ContentMapper = () => {
   }
   const tableHeight = calcHeight();
 
-
-
   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">
+          <div className="content-types-list-header d-flex align-items-center justify-content-between">
             {contentTypesHeading && <h2>{contentTypesHeading}</h2> }
+            {contentTypes && validateArray(contentTypes) && contentTypes?.length }
           </div>
 
           <div className='ct-search-wrapper'>
-            <div className='d-flex align-items-center pb-3'>
+            <div className='d-flex align-items-center'>
               <Search
                 placeholder={searchPlaceholder}
                 type="secondary"
@@ -979,27 +978,24 @@ const ContentMapper = () => {
                 debounceSearch={true}
               />
 
-              <Button buttonType="light" onClick={handleFilter}>
+              <Button buttonType="light" onClick={handleFilter} className="ml-8">
                 <Icon icon="Filter" version="v2" />
               </Button>
               {showFilter && (
                 <div className='filter-wrapper' ref={ref}> 
                   <ul>
                     {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
-                      <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
+                      <>
+                      <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(CONTENT_MAPPING_STATUS[key], e)}>
+                        <span className='filter-status'>{CONTENT_MAPPING_STATUS[key]}</span>
+                        {STATUS_ICON_Mapping[key] && <Icon size="small" icon={STATUS_ICON_Mapping[key]} className={STATUS_ICON_Mapping[key] === 'CheckedCircle' ? 'mapped-icon' : ''} />}
+                      </li>  
+                      </>
                     ))}
                   </ul>
                 </div>
               )}
             </div>
-            <div className='d-flex align-items-center justify-content-end'>
-              <ul className='d-flex'>
-                  {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
-                    <li key={`${keyInd?.toString()}`}  className={`status-wrapper ${CONTENT_MAPPING_STATUS[key]?.toLocaleLowerCase()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
-                  ))}
-              </ul>
-              {contentTypes && validateArray(contentTypes) && contentTypes?.length }
-            </div>
           </div>
 
           {filteredContentTypes && validateArray(filteredContentTypes)
@@ -1022,13 +1018,20 @@ const ContentMapper = () => {
 
 
                       <div className='d-flex align-items-center ct-options'>
-                        <span className=''>
-                          {icon && <Icon size="small" icon={icon} fill={icon === 'CheckedCircle' ? '#0469E3' : ''} />}
+                        <span>
+                          {icon && (
+                            <Tooltip content={CONTENT_MAPPING_STATUS[content?.status]} position="bottom">
+                              <Icon size="small" icon={icon} className={icon === 'CheckedCircle' ? 'mapped-icon' : ''} />
+                            </Tooltip>
+                          )}
+                        </span>
+                        <span className='ml-10'>
+                          <Tooltip content="Schema Preview" position="bottom">
+                            <Icon icon="LivePreview" version="v2" onClick={handleSchemaPreview} />
+                          </Tooltip>
                         </span>
-
 
-                        <Dropdown
-                          // version="v2"
+                        {/* <Dropdown
                           list={[
                             {
                               action: handleSchemaPreview,
@@ -1042,7 +1045,7 @@ const ContentMapper = () => {
                           className='dropdown-align'
                         >
                           <Icon icon="DotsThreeLargeVertical" version="v2" />
-                        </Dropdown>
+                        </Dropdown> */}
                       </div>
                     </li>
                   )
@@ -1061,7 +1064,7 @@ const ContentMapper = () => {
               canSearch={true}
               data={tableData?.length ? [...tableData] : []}
               columns={columns}
-              uniqueKey={'id'}
+              uniqueKey={'id' || ''}
               isRowSelect
               // fullRowSelect
               itemStatusMap={itemStatusMap}

diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
@@ -121,16 +121,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
 
     setFileIcon(fileFormat === 'zip' ? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1) : fileFormat?.toUpperCase());
     dispatch(updateNewMigrationData(newMigrationDataObj));
-    await updateFileFormatData(selectedOrganisation?.value, projectId, {
-      file_format: fileFormat === 'zip' ? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1) : fileFormat?.toUpperCase(),
-      file_path: '',
-        is_fileValid: '',
-        awsDetails:{
-          awsRegion: '',
-          bucketName: '',
-          buketKey: ''
-        }
-    });
+
   }
 
   /****  ALL USEEffects  HERE  ****/

diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
@@ -98,7 +98,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
       } else if (!isValidPrefix(value)) {
         setIsRestrictedKey(false);
         setIsError(true);
-        setErrorMessage('Affix should not contain more than 5 characters or fewer than 2.');
+        setErrorMessage('Affix should be 2 to 5 alphabetic characters');
       } else {
         setPrefix(value);
         setIsError(false);