From 55de4e84ebb318c6a3757b7420f7ce9b0f12f628 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Fri, 25 Mar 2022 07:00:31 -0700
Subject: [PATCH] (ui): Make GroupSelect controlled input

---
 ui/src/components/GroupSelect.tsx     | 12 ++++++++++++
 ui/src/components/TaskGroupsTable.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

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 (
     <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<
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<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>
   );