import { FormControl, InputLabel, Select } from "@material-ui/core"; import React from "react"; import { useTestRunState } from "../../contexts"; import { GridFilterInputValueProps, getGridStringOperators, } from "@material-ui/data-grid"; const TagInputComponent = (props: GridFilterInputValueProps) => { 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)) .concat(testRuns.map((item) => item.customTags)) ) ); 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 = getGridStringOperators() .filter((operator) => operator.value === "contains") .map((operator) => ({ ...operator, InputComponent: TagInputComponent, }));