diff --git a/src/components/BuildList/index.tsx b/src/components/BuildList/index.tsx index 4e224eea..0e4e26b2 100644 --- a/src/components/BuildList/index.tsx +++ b/src/components/BuildList/index.tsx @@ -318,4 +318,4 @@ const BuildList: FunctionComponent = () => { ); }; -export default BuildList; +export default React.memo(BuildList); diff --git a/src/components/TestRunList/DataGridCustomToolbar.tsx b/src/components/TestRunList/DataGridCustomToolbar.tsx index 8cfac800..b1c1e11b 100644 --- a/src/components/TestRunList/DataGridCustomToolbar.tsx +++ b/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 = ( @@ -9,6 +13,7 @@ export const DataGridCustomToolbar: React.FunctionComponent return ( <> + diff --git a/src/components/TestRunList/StatusFilterOperators.tsx b/src/components/TestRunList/StatusFilterOperators.tsx new file mode 100644 index 00000000..a6ffe80a --- /dev/null +++ b/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 = Array.from( + new Set(testRuns.map((item) => item.status)) + ); + + return ( + + + Value + + + + ); +}; + +export const StatusFilterOperators = getStringOperators() + .filter((operator) => operator.value === "equals") + .map((operator) => ({ + ...operator, + InputComponent: StatusInputComponent, + })); diff --git a/src/components/TestRunList/TagFilterOperators.tsx b/src/components/TestRunList/TagFilterOperators.tsx new file mode 100644 index 00000000..f4acab3d --- /dev/null +++ b/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 = 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 ( + + + Value + + + + ); +}; + +export const TagFilterOperators = getStringOperators() + .filter((operator) => operator.value === "contains") + .map((operator) => ({ + ...operator, + InputComponent: TagInputComponent, + })); diff --git a/src/components/TestRunList/index.tsx b/src/components/TestRunList/index.tsx index e1b211b3..6f3a6d49 100644 --- a/src/components/TestRunList/index.tsx +++ b/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 = [ params.row["os"], params.row["device"], params.row["browser"], params.row["viewport"], ]; - return ( - <> - {tags.map( - (tag) => tag && - )} - + return tags.reduce( + (prev, curr) => prev.concat(curr ? `${curr};` : ""), + "" ); }, + renderCell: (params: CellParams) => ( + + {params + .getValue("tags") + ?.toString() + .split(";") + .map( + (tag) => + tag && ( + + ) + )} + + ), + filterOperators: TagFilterOperators, }, { field: "status", headerName: "Status", + flex: 0.3, renderCell: (params: CellParams) => { return ; }, + filterOperators: StatusFilterOperators, }, ]; @@ -76,7 +97,7 @@ const TestRunList: React.FunctionComponent = () => {