Merge pull request #815 from contentstack/bugfix/aem-741

bugfix: CMG-741, CMG-749

Author: sayalijoshi27

ui/src/components/ContentMapper/index.scss

@@ -151,7 +151,7 @@
   }
   .Table {
     border-left: 0 none;
-    min-height: inherit;
+    // min-height: inherit;
     .Table__body__row {
       //   height: auto!important;
       //   min-height: 80px;
@@ -405,4 +405,14 @@ div .table-row {
   max-width: 230px;
   display: inline-flex;
   line-height: 1.2!important;
-}
+}
+
+.custom-empty-state {
+  .Icon--original {
+    width: 207px !important;
+    height: auto !important;
+    max-width: 100%;
+    display: block;
+    margin: 0 auto;
+  }
+}

ui/src/components/ContentMapper/index.tsx

@@ -2583,13 +2583,14 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
                 <InfiniteScrollTable
                   loading={loading}
                   canSearch={true}
-                  data={tableData?.length ? [...tableData] : []}
+                  totalCounts={Math.max(0, tableData?.length)}
+                  // data={tableData?.length > 0 ? [...tableData] : []}
+                  data={[...tableData]}
                   columns={columns}
                   uniqueKey={'id'}
                   isRowSelect
                   // fullRowSelect
                   itemStatusMap={itemStatusMap}
-                  totalCounts={totalCounts}
                   searchPlaceholder={tableSearchPlaceholder}
                   fetchTableData={fetchData}
                   loadMoreItems={loadMoreItems}
@@ -2599,6 +2600,20 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
                   initialRowSelectedData={initialRowSelectedData}
                   initialSelectedRowIds={rowIds}
                   itemSize={80}
+                  v2Features={{
+                    isNewEmptyState: true
+                  }}
+                  customEmptyState={
+                    <EmptyState
+                      forPage="list"
+                      heading={<div className="empty_search_heading">No Fields available</div>}
+                      moduleIcon="NoSearchResult"
+                      description="Try changing the search query to find what you are looking for."
+                      version="v2"
+                      testId="no-results-found-page"
+                      className="custom-empty-state"
+                    />
+                  }
                   withExportCta={{
                     component: (
                       <div className='d-flex align-items-center'>
@@ -2669,7 +2684,6 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
             className="mapper-emptystate"
             img={NoDataFound}
             actions={
-              <>
                 <Button buttonType="secondary" size="small" version="v2"
                   onClick={() => {
                     const newMigrationDataObj: INewMigration = {
@@ -2683,14 +2697,12 @@ const ContentMapper = forwardRef(({ handleStepChange }: contentMapperProps, ref:
                         }
                       }
                     }
-
                     dispatch(updateNewMigrationData(newMigrationDataObj));
                     handleStepChange(0);
                     const url = `/projects/${projectId}/migration/steps/1`;
                     navigate(url, { replace: true });
                   }}
                   className='ml-10'>Go to Legacy CMS</Button>
-              </>
             }
             version="v2"
             testId="no-results-found-page"

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss

@@ -22,7 +22,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  flex: 0.6;
+  flex: 0.9;
   margin: 0;
 }
 
@@ -82,14 +82,14 @@
 }
 
 .connector {
-  height: 4px;
+  height: 4px; 
   background-color: $color-brand-primary-base;
   flex-grow: 1;
   margin: 0;
   margin-bottom: 30px;
   border-radius: 4px;
-  margin-left: -40px;
-  margin-right: -40px;
+  margin-left: -80px;
+  margin-right: -80px;
 }
 
 .circle-title-wrapper {
@@ -104,12 +104,12 @@
 .disabled-connector {
   background-color: $color-base-gray-40;
   flex-grow: 1;
-  margin: 0;
+  margin: 0;  
   margin-bottom: 30px;
   border-radius: 4px;
   height: 4px;
-  margin-left: -40px;
-  margin-right: -40px;
+  margin-left: -80px;
+  margin-right: -80px;
 }
 
 /******************* Custom Classes *******************/