diff --git a/ui/src/components/GroupSelect.tsx b/ui/src/components/GroupSelect.tsx index a6efd86..ceeebb5 100644 --- a/ui/src/components/GroupSelect.tsx +++ b/ui/src/components/GroupSelect.tsx @@ -28,15 +28,27 @@ const useStyles = makeStyles((theme) => ({ })); interface Props { + selected: GroupInfo | null; + onSelect: (newVal: GroupInfo | null) => void; groups: GroupInfo[]; error: string; } export default function GroupSelect(props: Props) { const classes = useStyles(); + const [inputValue, setInputValue] = React.useState(""); + return ( { + props.onSelect(newValue); + }} + inputValue={inputValue} + onInputChange={(event, newInputValue) => { + setInputValue(newInputValue); + }} disableListWrap ListboxComponent={ ListboxComponent as React.ComponentType< diff --git a/ui/src/components/TaskGroupsTable.tsx b/ui/src/components/TaskGroupsTable.tsx index 316651c..d1cd9e6 100644 --- a/ui/src/components/TaskGroupsTable.tsx +++ b/ui/src/components/TaskGroupsTable.tsx @@ -5,6 +5,7 @@ import { listGroupsAsync } from "../actions/groupsActions"; import GroupSelect from "./GroupSelect"; import { usePolling } from "../hooks"; import { AppState } from "../store"; +import { GroupInfo } from "../api"; const useStyles = makeStyles((theme) => ({ groupSelector: { @@ -34,6 +35,9 @@ interface Props { } function TaskGroupsTable(props: Props & ConnectedProps) { + const [selectedGroup, setSelectedGroup] = React.useState( + null + ); const { pollInterval, listGroupsAsync, queue } = props; const classes = useStyles(); @@ -46,7 +50,12 @@ function TaskGroupsTable(props: Props & ConnectedProps) { return (
- +
);