(ui): Make GroupSelect controlled input

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 (
     <Autocomplete
       id="task-group-selector"
+      value={props.selected}
+      onChange={(event: any, newValue: GroupInfo | null) => {
+        props.onSelect(newValue);
+      }}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
       disableListWrap
       ListboxComponent={
         ListboxComponent as React.ComponentType<

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<typeof connector>) {
+  const [selectedGroup, setSelectedGroup] = React.useState<GroupInfo | null>(
+    null
+  );
   const { pollInterval, listGroupsAsync, queue } = props;
   const classes = useStyles();
 
@@ -46,7 +50,12 @@ function TaskGroupsTable(props: Props & ConnectedProps<typeof connector>) {
   return (
     <div>
       <div className={classes.groupSelector}>
-        <GroupSelect groups={props.groups} error={props.groupsError} />
+        <GroupSelect
+          selected={selectedGroup}
+          onSelect={setSelectedGroup}
+          groups={props.groups}
+          error={props.groupsError}
+        />
       </div>
     </div>
   );