fix: job manager details of the last row presented in next page (MAPCO-10671)

package.json

@@ -25,6 +25,7 @@
     "eslint:fix": "npx eslint --fix",
     "eslint:check": "npx eslint . --ext .ts,.tsx",
     "prettier:fix": "prettier --write .",
+    "prettier:fix:file": "prettier --write",
     "prettier:check": "prettier --check .",
     "confd": "node ./confd/generate-config.js",
     "confd:prod": "node ./confd/generate-config.js --environment production",

src/App.dark-theme.css

@@ -125,12 +125,12 @@
 }
 
 .dark-theme .ag-theme-alpine-dark .ag-row-selected {
-  border-radius: 100px;
-  color: var(--mdc-theme-text-primary-on-dark, #fff);
+  border-radius: 10px;
+  color: var(--mdc-theme-text-primary-on-background);
 }
 
 .dark-theme .ag-theme-alpine-dark .ag-row-hover {
-  border-radius: 100px;
+  border-radius: 10px;
   background-color: var(--ag-row-hover-color);
 }
 

src/common/components/grid/cell-renderer/__snapshots__/details-expander.cell-renderer.spec.tsx.snap

@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AgGrid DetailsExpanderRenderer component renders correctly 1`] = `
-<CollapseButton
-  onClick={[Function]}
-/>
+<Q
+  className="expanderContainer"
+>
+  <CollapseButton
+    onClick={[Function]}
+  />
+</Q>
 `;

src/common/components/grid/cell-renderer/details-expander.cell-renderer.spec.tsx

@@ -1,16 +1,7 @@
-import React from 'react';
 import { shallow } from 'enzyme';
-import {
-  ICellRendererParams,
-  Column,
-  RowNode,
-  GridApi,
-  ColumnApi,
-  IRowNode,
-} from 'ag-grid-community';
+import { ICellRendererParams, RowNode } from 'ag-grid-community';
 // eslint-disable-next-line
 import '../../../../__mocks__/confEnvShim';
-import { DETAILS_ROW_ID_SUFFIX } from '../grid';
 import { DetailsExpanderRenderer } from './details-expander.cell-renderer';
 
 const ID = '1';
@@ -22,18 +13,18 @@ const mockDataBase: ICellRendererParams = {
   setValue: () => {},
   formatValue: () => {},
   data: {
-    isVisible: true,
+    isDetailsExpanded: false,
     id: ID,
   },
-  node: new RowNode(),
+  node: {
+    ...new RowNode(),
+    setDataValue: (propName: string, val: any) => {},
+  } as any,
   colDef: {},
   $scope: null,
   rowIndex: 1,
   api: {
-    onFilterChanged: () => {},
-    getRowNode: (id: string): IRowNode<any> | undefined => {
-      return undefined;
-    },
+    resetRowHeights: () => {},
   },
   context: null,
   refreshCell: () => {},
@@ -54,27 +45,21 @@ describe('AgGrid DetailsExpanderRenderer component', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('when component clicked detail row was found in grid rowdata', () => {
+  it('when component clicked, isDetailsExpanded is toggled on the current node', () => {
     const mockData = {
       ...mockDataBase,
     };
 
-    // eslint-disable-next-line
-    jest.spyOn(mockData.api, 'onFilterChanged').mockImplementation(() => {});
-    const spyGetRonNode = jest.spyOn(mockData.api, 'getRowNode').mockImplementation(() => {
-      const val = new RowNode();
-      // eslint-disable-next-line
-      val.setDataValue = (propName, val) => {};
-      val.data = {
-        isVisible: false,
-      };
-      return val;
-    });
+    const spySetDataValue = jest.spyOn(mockData.node, 'setDataValue').mockImplementation(() => {});
+    const spyResetRowHeights = jest
+      .spyOn(mockData.api, 'resetRowHeights')
+      .mockImplementation(() => {});
 
     const wrapper = shallow(<DetailsExpanderRenderer {...mockData} />);
 
     const iconContainer = wrapper.find('CollapseButton');
     iconContainer.simulate('click');
-    expect(spyGetRonNode).toHaveBeenCalledWith(`${ID}${DETAILS_ROW_ID_SUFFIX}`);
+    expect(spySetDataValue).toHaveBeenCalledWith('isDetailsExpanded', true);
+    expect(spyResetRowHeights).toHaveBeenCalledTimes(1);
   });
 });

src/common/components/grid/cell-renderer/details-expander.cell-renderer.tsx

@@ -1,27 +1,78 @@
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { ICellRendererParams } from 'ag-grid-community';
+import { Box } from '@map-colonies/react-components';
 import { CollapseButton } from '../../collapse-button/collapse.button';
-import { DETAILS_ROW_ID_SUFFIX, IGridRowDataDetailsExt } from '../grid';
+import {
+  DEFAULT_DETAILS_ROW_HEIGHT,
+  DEFAULT_NORMAL_ROW_HEIGHT,
+  IGridRowDataDetailsExt,
+} from '../grid';
 
 import './details-expander.cell-renderer.css';
 
 interface DetailsExpanderRendererProps extends ICellRendererParams {
+  detailsComponent: React.ComponentType<ICellRendererParams>;
   detailsRowCellRendererPresencePredicate?: (data: any) => boolean;
+  normalRowHeight?: number;
+  detailsRowHeight?: number;
 }
 
 export const DetailsExpanderRenderer: React.FC<DetailsExpanderRendererProps> = (
   props
 ): JSX.Element | null => {
-  const shouldRenderBtn = props.detailsRowCellRendererPresencePredicate?.(props.data) ?? true;
+  const {
+    detailsRowCellRendererPresencePredicate,
+    detailsComponent,
+    normalRowHeight = DEFAULT_NORMAL_ROW_HEIGHT,
+    detailsRowHeight = DEFAULT_DETAILS_ROW_HEIGHT,
+    ...rendererParams
+  } = props;
+
+  const [overlayStyle, setOverlayStyle] = useState<React.CSSProperties | null>(null);
+  const [isDetailsExpanded, setIsDetailsExpanded] = useState<boolean>(
+    (props.data as IGridRowDataDetailsExt).isDetailsExpanded ?? false
+  );
+
+  const shouldRenderBtn = detailsRowCellRendererPresencePredicate?.(props.data) ?? true;
 
   const handleCollapseExpand = (): void => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const rowNode = props.api.getRowNode(`${props.data?.id as string}${DETAILS_ROW_ID_SUFFIX}`);
-    const isVisible = (rowNode?.data as IGridRowDataDetailsExt).isVisible;
-    rowNode?.setDataValue('isVisible', !isVisible);
-    props.api.onFilterChanged();
+    const newVal = !isDetailsExpanded;
+    setIsDetailsExpanded(newVal);
+    props.node.setDataValue('isDetailsExpanded', newVal);
+    props.api.resetRowHeights();
   };
-  if (shouldRenderBtn) return <CollapseButton onClick={handleCollapseExpand} />;
 
-  return null;
+  useLayoutEffect(() => {
+    if (!isDetailsExpanded) {
+      setOverlayStyle(null);
+      return;
+    }
+
+    const cell = props.eGridCell as HTMLElement;
+    const row = cell.parentElement as HTMLElement | null;
+    if (row) {
+      setOverlayStyle({
+        position: 'absolute',
+        top: normalRowHeight,
+        left: -cell.offsetLeft,
+        width: row.offsetWidth,
+        height: detailsRowHeight,
+        overflow: 'hidden',
+        zIndex: 2,
+        display: 'flex',
+        backgroundColor: 'var(--ag-background-color)',
+      });
+    }
+  }, [isDetailsExpanded, normalRowHeight, detailsRowHeight]);
+
+  return (
+    <Box className="expanderContainer">
+      {shouldRenderBtn && <CollapseButton onClick={handleCollapseExpand} />}
+      {isDetailsExpanded && overlayStyle && (
+        <Box style={overlayStyle}>
+          <props.detailsComponent {...rendererParams} data={props.data} />
+        </Box>
+      )}
+    </Box>
+  );
 };