can add groups

src/pages/Devices.tsx

@@ -1,6 +1,6 @@
-import { DeveloperBoard as ProvisionIcon } from "@mui/icons-material";
+import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
 import { Box, Chip, IconButton, Theme, Tooltip, Typography } from "@mui/material";
-import { blue } from "@mui/material/colors";
+import { blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import ProvisionDevice from "device/ProvisionDevice";
@@ -13,6 +13,8 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { or } from "utils/types";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
+import { Group } from "models";
+import GroupSettings from "group/GroupSettings";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -24,7 +26,10 @@ const useStyles = makeStyles((theme: Theme) => {
       marginLeft: theme.spacing(2),
       display: "flex",
       // justifyContent: "center",
-    }
+    },
+    green: {
+      color: green["600"]
+    },
   });
 });
 
@@ -51,6 +56,12 @@ export default function Devices() {
   const [searchGroup, setGroupSearch] = useState("");
   const [totalGroups, setTotalGroups] = useState(0);
 
+  const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(undefined);
+  const [groupSettingsMode, setGroupSettingsMode] = useState<
+    "add" | "update" | "remove" | undefined
+  >(undefined);
+  const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
+
   const openProvisionDialog = () => {
     setIsProvisionDialogOpen(true);
   };
@@ -59,6 +70,21 @@ export default function Devices() {
     setIsProvisionDialogOpen(false);
   };
 
+  const openGroupSettings = (
+    group: Group | undefined,
+    mode: "add" | "update" | "remove" | undefined
+  ) => {
+    setGroupSettingsIsOpen(true);
+    setGroupSettingsMode(mode);
+    setSelectedGroup(group);
+  };
+
+  const closeGroupSettings = (event: any) => {
+    setGroupSettingsIsOpen(false);
+    setGroupSettingsMode(undefined);
+    setSelectedGroup(undefined);
+  };
+
   const loadGroups = () => {
     groupAPI.listGroups(
       groupLimit,
@@ -97,7 +123,7 @@ export default function Devices() {
   }, [limit, page, order, orderBy, search])
 
   useEffect(() => {
-    loadDevices()
+    loadGroups()
   }, [groupLimit, groupPage, orderGroup, orderGroupBy, searchGroup])
 
 
@@ -178,11 +204,32 @@ export default function Devices() {
     )
   }
 
+  const groupButton = () => {
+    return (
+      <Tooltip title="Create Group">
+        <IconButton
+          onClick={() => openGroupSettings(undefined, "add")}
+          aria-label="Create Group">
+          <CreateGroupIcon className={classes.green} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
+  const subtitle = () => {
+    return (
+      <>
+      {provisionButton()}
+      {groupButton()}
+      </>
+    )
+  }
+
   return(
     <PageContainer padding={isMobile ? 0 : 2}>
       <ResponsiveTable<pond.Device>
         title="Devices"
-        subtitle={provisionButton()}
+        subtitle={subtitle()}
         rows={devices}
         columns={columns()}
         total={total}
@@ -198,6 +245,14 @@ export default function Devices() {
         refreshCallback={loadDevices}
         closeDialogCallback={closeProvisionDialog}
       />
+      <GroupSettings
+        initialGroup={selectedGroup}
+        mode={groupSettingsMode}
+        isDialogOpen={groupSettingsIsOpen}
+        closeDialogCallback={closeGroupSettings}
+        refreshCallback={loadGroups}
+        canEdit={true}
+      />
     </PageContainer>
   )
 }