DHFPROD-7449: Scroll to respective tables when pagination is applied

Author: briantang

marklogic-data-hub-central/ui/e2e/cypress/integration/curation/curate/relatedEntityMapping.spec.tsx

@@ -249,4 +249,16 @@ describe("Mapping", () => {
     //Related entity does not exist after reopening step
     mappingStepDetail.entityTitle("Relation (relatedTo Person)").should("not.exist");
   });
+
+  it("Verify page automically scrolls to top of table after pagination", () => {
+    cy.waitUntil(() => mappingStepDetail.relatedFilterMenu("Person")).click();
+    cy.waitUntil(() => mappingStepDetail.getRelatedEntityFromList("Relation (relatedTo Person)")).click();
+    cy.get("#entityContainer").scrollTo("bottom",  {ensureScrollable: false});
+    mappingStepDetail.entityTitle("Person").should("not.be.visible");
+    browsePage.getPaginationPageSizeOptions().then(attr => {
+      attr[1].click();
+    });
+    browsePage.getPageSizeOption("10 / page").click();
+    mappingStepDetail.entityTitle("Person").should("be.visible");
+  });
 });

marklogic-data-hub-central/ui/package-lock.json

@@ -55,6 +55,7 @@
     "stompjs": "^2.3.3",
     "typescript": "^3.8.0",
     "use-deep-compare-effect": "^1.3.1",
+    "use-dynamic-refs": "^1.0.0",
     "xml-formatter": "^2.4.0"
   },
   "scripts": {

marklogic-data-hub-central/ui/package.json

@@ -13,11 +13,13 @@ import arrayIcon from "../../../../assets/icon_array.png";
 import DocIcon from "../../../../assets/DocIcon.png";
 import {css} from "@emotion/css";
 import {getParentKey, getKeys, deepCopy} from "../../../../util/data-conversion";
-import {paginationOptions} from "../../../../config/mapping.config";
+import {paginationMapping} from "../../../../config/mapping.config";
 import {ModelingTooltips, MappingDetailsTooltips} from "../../../../config/tooltips.config";
 import StepsConfig from "../../../../config/steps.config";
 
 interface Props {
+  setScrollRef: any;
+  executeScroll: any;
   mapResp: any;
   mapData: any;
   setMapResp: any;
@@ -215,6 +217,17 @@ const EntityMapTable: React.FC<Props> = (props) => {
   /*  The source context is updated when mapping is saved/loaded, this function does a level order traversal of entity
      json and updates the sourceContext for every entity property */
 
+  const paginationFunction = {
+    defaultCurrent: paginationMapping.defaultCurrent,
+    defaultPageSize: paginationMapping.defaultPageSize,
+    hideOnSinglePage: paginationMapping.hideOnSinglePage,
+    pageSizeOptions: paginationMapping.pageSizeOptions,
+    showSizeChanger: paginationMapping.showSizeChanger,
+    size: paginationMapping.size,
+    onChange: (e) => { props.executeScroll(`${props.entityMappingId}-ref`); },
+    onShowSizeChange: (e) => { props.executeScroll(`${props.entityMappingId}-ref`); }
+  };
+
   const updateSourceContext = (mapExp, entityTable) => {
 
     let queue: any[] = [];
@@ -1381,7 +1394,7 @@ const EntityMapTable: React.FC<Props> = (props) => {
   });
 
   return (props.entityLoaded ? (props.entityMappingId || !props.isRelatedEntity) ? (<div id={props.isRelatedEntity? "entityTableContainer" : "rootTableContainer"} data-testid={props.entityTypeTitle.split(" ")[0].toLowerCase() + "-table"}>
-    <div id={entityProperties.length > 0 ? "upperTable" : "upperTableEmptyProps"}>
+    <div id={entityProperties.length > 0 ? "upperTable" : "upperTableEmptyProps"} ref={props.setScrollRef(`${props.entityMappingId}-ref`)}>
       <Table
         pagination={false}
         className={tableCSS}
@@ -1402,7 +1415,7 @@ const EntityMapTable: React.FC<Props> = (props) => {
     {entityProperties.length > 0 ?
       <div id="lowerTable">
         <Table
-          pagination={paginationOptions}
+          pagination={paginationFunction}
           className={tableCSS}
           expandIcon={(props) => customExpandIcon(props)}
           onExpand={(expanded, record) => toggleRowExpanded(expanded, record, "key")}

marklogic-data-hub-central/ui/src/components/entities/mapping/entity-map-table/entity-map-table.tsx

@@ -1646,6 +1646,7 @@ describe("RTL Source-to-entity map tests", () => {
     mockGetUris.mockResolvedValue({status: 200, data: ["/dummy/uri/person-101.json"]});
     mockGetSourceDoc.mockResolvedValue({status: 200, data: data.jsonSourceDataLargeDataset});
     mockGetNestedEntities.mockResolvedValue({status: 200, data: personRelatedEntityDefLargePropSet});
+    window.HTMLElement.prototype.scrollIntoView = function() {};
 
     let getByText, queryByText, getByTestId, getByTitle, getAllByTitle, queryByTitle, getByLabelText, queryByTestId, getAllByText;
     await act(async () => {

marklogic-data-hub-central/ui/src/components/entities/mapping/mapping-step-detail/mapping-step-detail.test.tsx

@@ -26,7 +26,8 @@ import arrayIcon from "../../../../assets/icon_array.png";
 import relatedEntityIcon from "../../../../assets/icon_related_entities.png";
 import CustomPageHeader from "../../page-header/page-header";
 import {clearSessionStorageOnRefresh, getViewSettings, setViewSettings} from "../../../../util/user-context";
-import {paginationOptions, mappingColors} from "../../../../config/mapping.config";
+import {paginationMapping, mappingColors} from "../../../../config/mapping.config";
+import useDynamicRefs from "use-dynamic-refs";
 
 const DEFAULT_MAPPING_STEP: MappingStep = {
   name: "",
@@ -145,6 +146,14 @@ const MappingStepDetail: React.FC = () => {
   const [sourceFormat, setSourceFormat] = useState("");
   const [docNotFound, setDocNotFound] = useState(false);
   const [mapData, setMapData] = useState<any>(DEFAULT_MAPPING_STEP);
+  const [getRef, setRef] =  useDynamicRefs();
+
+  const executeScroll = (refId) => {
+    const scrollToRef : any = getRef(refId);
+    if (scrollToRef && scrollToRef.current) {
+      scrollToRef.current.scrollIntoView();
+    }
+  };
 
   let tableColors = [...mappingColors];
 
@@ -1399,7 +1408,7 @@ const MappingStepDetail: React.FC = () => {
                       <span className={styles.sourceCollapseButtons}><ExpandCollapse handleSelection={(id) => handleSourceExpandCollapse(id)} currentSelection={""} /></span>
                     </div>
                     <Table
-                      pagination={paginationOptions}
+                      pagination={paginationMapping}
                       expandIcon={(props) => customExpandIcon(props)}
                       onExpand={(expanded, record) => toggleSourceRowExpanded(expanded, record, "rowKey")}
                       expandedRowKeys={sourceExpandedKeys}
@@ -1431,6 +1440,8 @@ const MappingStepDetail: React.FC = () => {
                 <span className={styles.columnOptionsSelector}>{columnOptionsSelector}</span>
               </div>
               <EntityMapTable
+                setScrollRef = {setRef}
+                executeScroll = {executeScroll}
                 mapResp={mapResp}
                 mapData={mapData}
                 setMapResp={setMapResp}
@@ -1471,8 +1482,10 @@ const MappingStepDetail: React.FC = () => {
                 labelRemoved = {labelRemoved}
                 entityLoaded = {entityLoaded}
               />
-              {relatedEntityTypeProperties.map(entity => relatedEntitiesSelected.map(selectedEntity => selectedEntity.entityMappingId).includes(entity.entityMappingId) ?
+              {relatedEntityTypeProperties.map((entity, i) => relatedEntitiesSelected.map(selectedEntity => selectedEntity.entityMappingId).includes(entity.entityMappingId) ?
                 <EntityMapTable
+                  setScrollRef = {setRef}
+                  executeScroll = {executeScroll}
                   mapResp={mapResp}
                   mapData={mapData}
                   setMapResp={setMapResp}

marklogic-data-hub-central/ui/src/components/entities/mapping/mapping-step-detail/mapping-step-detail.tsx

@@ -1,4 +1,4 @@
-export const paginationOptions = {
+export const paginationMapping = {
   defaultCurrent: 1,
   defaultPageSize: 20,
   hideOnSinglePage: false,