Test run. Add filtering (#147)

Visual-Regression-Tracker/Visual-Regression-Tracker#194

Author: pashidlos

src/components/BuildList/index.tsx

@@ -318,4 +318,4 @@ const BuildList: FunctionComponent = () => {
   );
 };
 
-export default BuildList;
+export default React.memo(BuildList);

src/components/TestRunList/DataGridCustomToolbar.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { Toolbar, Box } from "@material-ui/core";
-import { BaseComponentProps, DensitySelector } from "@material-ui/data-grid";
+import {
+  BaseComponentProps,
+  DensitySelector,
+  FilterToolbarButton,
+} from "@material-ui/data-grid";
 import { BulkDeleteButton } from "./BulkDeleteButton";
 
 export const DataGridCustomToolbar: React.FunctionComponent<BaseComponentProps> = (
@@ -9,6 +13,7 @@ export const DataGridCustomToolbar: React.FunctionComponent<BaseComponentProps>
   return (
     <>
       <Toolbar variant="dense">
+        <FilterToolbarButton />
         <DensitySelector />
         <Box marginLeft="auto">
           <BulkDeleteButton {...props} />

src/components/TestRunList/StatusFilterOperators.tsx

@@ -0,0 +1,50 @@
+import { FormControl, InputLabel, Select } from "@material-ui/core";
+import React from "react";
+import { useTestRunState } from "../../contexts";
+import {
+  FilterInputValueProps,
+  getStringOperators,
+} from "@material-ui/data-grid";
+import { TestStatus } from "../../types";
+
+const StatusInputComponent = (props: FilterInputValueProps) => {
+  const { item, applyValue } = props;
+  const { testRuns } = useTestRunState();
+
+  const handleFilterChange = (event: any) => {
+    applyValue({ ...item, value: event.target.value as string });
+  };
+
+  const filterOptions: Array<TestStatus> = Array.from(
+    new Set(testRuns.map((item) => item.status))
+  );
+
+  return (
+    <FormControl fullWidth>
+      <InputLabel shrink id="statusFilter">
+        Value
+      </InputLabel>
+      <Select
+        id="statusFilter"
+        native
+        displayEmpty
+        value={item.value}
+        onChange={handleFilterChange}
+      >
+        <option aria-label="All" value="" />
+        {filterOptions.map((item) => (
+          <option key={item} value={item}>
+            {item}
+          </option>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export const StatusFilterOperators = getStringOperators()
+  .filter((operator) => operator.value === "equals")
+  .map((operator) => ({
+    ...operator,
+    InputComponent: StatusInputComponent,
+  }));

src/components/TestRunList/TagFilterOperators.tsx

@@ -0,0 +1,58 @@
+import { FormControl, InputLabel, Select } from "@material-ui/core";
+import React from "react";
+import { useTestRunState } from "../../contexts";
+import {
+  FilterInputValueProps,
+  getStringOperators,
+} from "@material-ui/data-grid";
+
+const TagInputComponent = (props: FilterInputValueProps) => {
+  const { item, applyValue } = props;
+  const { testRuns } = useTestRunState();
+
+  const handleFilterChange = (event: any) => {
+    applyValue({ ...item, value: event.target.value as string });
+  };
+
+  const filterOptions: Array<string> = Array.from(
+    new Set(
+      testRuns
+        .map((item) => item.os)
+        .concat(testRuns.map((item) => item.browser))
+        .concat(testRuns.map((item) => item.device))
+        .concat(testRuns.map((item) => item.viewport))
+    )
+  );
+
+  return (
+    <FormControl fullWidth>
+      <InputLabel shrink id="tagFilter">
+        Value
+      </InputLabel>
+      <Select
+        id="tagFilter"
+        native
+        displayEmpty
+        value={item.value}
+        onChange={handleFilterChange}
+      >
+        <option aria-label="All" value="" />
+        {filterOptions.map(
+          (item) =>
+            item && (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            )
+        )}
+      </Select>
+    </FormControl>
+  );
+};
+
+export const TagFilterOperators = getStringOperators()
+  .filter((operator) => operator.value === "contains")
+  .map((operator) => ({
+    ...operator,
+    InputComponent: TagInputComponent,
+  }));

src/components/TestRunList/index.tsx

@@ -17,36 +17,57 @@ import {
   CellParams,
 } from "@material-ui/data-grid";
 import { DataGridCustomToolbar } from "./DataGridCustomToolbar";
+import { StatusFilterOperators } from "./StatusFilterOperators";
+import { TagFilterOperators } from "./TagFilterOperators";
 
-const columns: ColDef[] = [
-  { field: "id", hide: true },
+const columnsDef: ColDef[] = [
+  { field: "id", hide: true, filterable: false },
   { field: "name", headerName: "Name", flex: 1 },
   {
     field: "tags",
     headerName: "Tags",
     flex: 1,
-    renderCell: (params: CellParams) => {
-      const tags = [
+    valueGetter: (params: CellParams) => {
+      const tags: Array<string> = [
         params.row["os"],
         params.row["device"],
         params.row["browser"],
         params.row["viewport"],
       ];
-      return (
-        <>
-          {tags.map(
-            (tag) => tag && <Chip key={tag} size="small" label={tag} />
-          )}
-        </>
+      return tags.reduce(
+        (prev, curr) => prev.concat(curr ? `${curr};` : ""),
+        ""
       );
     },
+    renderCell: (params: CellParams) => (
+      <React.Fragment>
+        {params
+          .getValue("tags")
+          ?.toString()
+          .split(";")
+          .map(
+            (tag) =>
+              tag && (
+                <Chip
+                  key={tag}
+                  size="small"
+                  label={tag}
+                  style={{ margin: "1px" }}
+                />
+              )
+          )}
+      </React.Fragment>
+    ),
+    filterOperators: TagFilterOperators,
   },
   {
     field: "status",
     headerName: "Status",
+    flex: 0.3,
     renderCell: (params: CellParams) => {
       return <TestStatusChip status={params.getValue("status")?.toString()} />;
     },
+    filterOperators: StatusFilterOperators,
   },
 ];
 
@@ -76,7 +97,7 @@ const TestRunList: React.FunctionComponent = () => {
     <React.Fragment>
       <DataGrid
         rows={testRuns}
-        columns={columns}
+        columns={columnsDef}
         pageSize={10}
         rowsPerPageOptions={[10, 20, 30]}
         loading={loading}