[BUG] Arrow-keys navigation not consider filters (#217)

* [BUG] Arrow-keys navigation not consider filters

Visual-Regression-Tracker/Visual-Regression-Tracker#260

Author: pashidlos

package-lock.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.2",
-    "@material-ui/data-grid": "^4.0.0-alpha.19",
+    "@material-ui/data-grid": "^4.0.0-alpha.33",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^5.11.1",

package.json

@@ -12,7 +12,16 @@ const useStyles = makeStyles((theme) => ({
 
 export const TestDetailsDialog: React.FunctionComponent = () => {
   const classes = useStyles();
-  const { testRuns, selectedTestRunId } = useTestRunState();
+  const {
+    testRuns: allTestRuns,
+    filteredTestRuns,
+    selectedTestRunId,
+  } = useTestRunState();
+
+  const testRuns = React.useMemo(() => filteredTestRuns ?? allTestRuns, [
+    allTestRuns,
+    filteredTestRuns,
+  ]);
 
   const selectedTestRunIndex = React.useMemo(
     () => testRuns.findIndex((t) => t.id === selectedTestRunId),

src/components/TestDetailsDialog/index.tsx

@@ -5,17 +5,20 @@ import {
   Tooltip,
   LinearProgress,
 } from "@material-ui/core";
-import { BaseComponentProps, RowModel } from "@material-ui/data-grid";
+import {
+  GridRowData,
+  GridSelectionState,
+  useGridSlotComponentProps,
+} from "@material-ui/data-grid";
 import { BaseModal } from "../BaseModal";
 import { useSnackbar } from "notistack";
 import { Delete, LayersClear, ThumbDown, ThumbUp } from "@material-ui/icons";
 import { testRunService } from "../../services";
 import { TestStatus } from "../../types";
 import { head } from "lodash";
 
-export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
-  props: BaseComponentProps
-) => {
+export const BulkOperation: React.FunctionComponent = () => {
+  const props = useGridSlotComponentProps();
   const { enqueueSnackbar } = useSnackbar();
   const [approveDialogOpen, setApproveDialogOpen] = React.useState(false);
   const [rejectDialogOpen, setRejectDialogOpen] = React.useState(false);
@@ -31,7 +34,7 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
   const isMerge: boolean = React.useMemo(
     () =>
       !!head(
-        props.rows.filter((value: RowModel) =>
+        props.rows.filter((value: GridRowData) =>
           ids.includes(value.id.toString())
         )
       )?.merge,
@@ -42,18 +45,18 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
     () =>
       props.rows
         .filter(
-          (value: RowModel) =>
+          (value: GridRowData) =>
             ids.includes(value.id.toString()) &&
             [TestStatus.new, TestStatus.unresolved].includes(
               value.status.toString()
             )
         )
-        .map((value: RowModel) => value.id.toString()),
+        .map((value: GridRowData) => value.id.toString()),
     // eslint-disable-next-line
     [ids]
   );
 
-  const selectedRows: Record<React.ReactText, boolean> = props.state.selection;
+  const selectedRows: GridSelectionState = props.state.selection;
   const count = Object.keys(selectedRows).length;
 
   const toggleApproveDialogOpen = () => {

src/components/TestRunList/BulkOperation.tsx

@@ -1,22 +1,19 @@
 import React from "react";
 import { Toolbar, Box } from "@material-ui/core";
 import {
-  BaseComponentProps,
-  DensitySelector,
-  FilterToolbarButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
 } from "@material-ui/data-grid";
 import { BulkOperation } from "./BulkOperation";
 
-export const DataGridCustomToolbar: React.FunctionComponent<BaseComponentProps> = (
-  props: BaseComponentProps
-) => {
+export const DataGridCustomToolbar: React.FunctionComponent = () => {
   return (
     <>
       <Toolbar variant="dense">
-        <FilterToolbarButton />
-        <DensitySelector />
+        <GridToolbarFilterButton />
+        <GridToolbarDensitySelector />
         <Box marginLeft="auto">
-          <BulkOperation {...props} />
+          <BulkOperation />
         </Box>
       </Toolbar>
     </>

src/components/TestRunList/DataGridCustomToolbar.tsx

@@ -2,12 +2,12 @@ import { FormControl, InputLabel, Select } from "@material-ui/core";
 import React from "react";
 import { useTestRunState } from "../../contexts";
 import {
-  FilterInputValueProps,
-  getStringOperators,
+  GridFilterInputValueProps,
+  getGridStringOperators,
 } from "@material-ui/data-grid";
 import { TestStatus } from "../../types";
 
-const StatusInputComponent = (props: FilterInputValueProps) => {
+const StatusInputComponent = (props: GridFilterInputValueProps) => {
   const { item, applyValue } = props;
   const { testRuns } = useTestRunState();
 
@@ -42,7 +42,7 @@ const StatusInputComponent = (props: FilterInputValueProps) => {
   );
 };
 
-export const StatusFilterOperators = getStringOperators()
+export const StatusFilterOperators = getGridStringOperators()
   .filter((operator) => operator.value === "equals")
   .map((operator) => ({
     ...operator,

src/components/TestRunList/StatusFilterOperators.tsx

@@ -2,11 +2,11 @@ import { FormControl, InputLabel, Select } from "@material-ui/core";
 import React from "react";
 import { useTestRunState } from "../../contexts";
 import {
-  FilterInputValueProps,
-  getStringOperators,
+  GridFilterInputValueProps,
+  getGridStringOperators,
 } from "@material-ui/data-grid";
 
-const TagInputComponent = (props: FilterInputValueProps) => {
+const TagInputComponent = (props: GridFilterInputValueProps) => {
   const { item, applyValue } = props;
   const { testRuns } = useTestRunState();
 
@@ -51,7 +51,7 @@ const TagInputComponent = (props: FilterInputValueProps) => {
   );
 };
 
-export const TagFilterOperators = getStringOperators()
+export const TagFilterOperators = getGridStringOperators()
   .filter((operator) => operator.value === "contains")
   .map((operator) => ({
     ...operator,

src/components/TestRunList/TagFilterOperators.tsx

@@ -11,22 +11,26 @@ import {
 import { useSnackbar } from "notistack";
 import {
   DataGrid,
-  ColDef,
-  RowParams,
-  CellParams,
+  GridCellParams,
+  GridColDef,
+  GridRowParams,
+  GridValueGetterParams,
+  GridValueFormatterParams,
+  GridFilterModelParams,
 } from "@material-ui/data-grid";
 import { DataGridCustomToolbar } from "./DataGridCustomToolbar";
 import { StatusFilterOperators } from "./StatusFilterOperators";
 import { TagFilterOperators } from "./TagFilterOperators";
+import { TestRun } from "../../types";
 
-const columnsDef: ColDef[] = [
+const columnsDef: GridColDef[] = [
   { field: "id", hide: true, filterable: false },
   { field: "name", headerName: "Name", flex: 1 },
   {
     field: "tags",
     headerName: "Tags",
     flex: 1,
-    valueGetter: (params: CellParams) => {
+    valueGetter: (params: GridValueGetterParams) => {
       const tags: Array<string> = [
         params.row["os"],
         params.row["device"],
@@ -39,10 +43,10 @@ const columnsDef: ColDef[] = [
         ""
       );
     },
-    renderCell: (params: CellParams) => (
+    renderCell: (params: GridCellParams) => (
       <React.Fragment>
         {params
-          .getValue("tags")
+          .getValue(params.id, "tags")
           ?.toString()
           .split(";")
           .map(
@@ -64,8 +68,12 @@ const columnsDef: ColDef[] = [
     field: "status",
     headerName: "Status",
     flex: 0.3,
-    renderCell: (params: CellParams) => {
-      return <TestStatusChip status={params.getValue("status")?.toString()} />;
+    renderCell: (params: GridValueFormatterParams) => {
+      return (
+        <TestStatusChip
+          status={params.getValue(params.id, "status")?.toString()}
+        />
+      );
     },
     filterOperators: StatusFilterOperators,
   },
@@ -101,16 +109,26 @@ const TestRunList: React.FunctionComponent = () => {
           pageSize={10}
           rowsPerPageOptions={[10, 20, 30]}
           loading={loading}
-          showToolbar={true}
           components={{
             Toolbar: DataGridCustomToolbar,
           }}
           checkboxSelection
           disableColumnSelector
           disableColumnMenu
           disableSelectionOnClick
-          onRowClick={(param: RowParams) => {
-            selectTestRun(testRunDispatch, param.getValue("id")?.toString());
+          onRowClick={(param: GridRowParams) => {
+            selectTestRun(
+              testRunDispatch,
+              param.getValue(param.id, "id")?.toString()
+            );
+          }}
+          onFilterModelChange={(params: GridFilterModelParams) => {
+            testRunDispatch({
+              type: "filter",
+              payload: Array.from(
+                params.visibleRows.values()
+              ) as Array<TestRun>,
+            });
           }}
         />
       )}

src/components/TestRunList/index.tsx

@@ -47,6 +47,11 @@ interface IRejectAction {
   payload: TestRun;
 }
 
+interface IFilterAction {
+  type: "filter";
+  payload: Array<TestRun>;
+}
+
 type IAction =
   | IRequestAction
   | IGetAction
@@ -55,11 +60,13 @@ type IAction =
   | IUpdateAction
   | IApproveAction
   | IRejectAction
+  | IFilterAction
   | ISelectAction;
 
 type Dispatch = (action: IAction) => void;
 type State = {
   selectedTestRunId?: string;
+  filteredTestRuns?: Array<TestRun>;
   testRuns: Array<TestRun>;
   loading: boolean;
 };
@@ -83,6 +90,11 @@ function testRunReducer(state: State, action: IAction): State {
         ...state,
         selectedTestRunId: action.payload,
       };
+    case "filter":
+      return {
+        ...state,
+        filteredTestRuns: action.payload,
+      };
     case "request":
       return {
         ...state,