From 16f0999bcc58ac7febe17ddd72f3f6d03d9bd2a3 Mon Sep 17 00:00:00 2001
From: lorinjameson <lwjameson@gmail.com>
Date: Tue, 24 Sep 2024 09:05:50 -0700
Subject: [PATCH] Updates

---
 .../CreateGroupDialog/CreateGroupDialog.tsx   |  99 ++++++++-----
 src/components/Groups/Groups.tsx              | 138 ++++++++++--------
 src/providers/ConfigToolProvider.tsx          |   1 +
 src/types/index.ts                            |   2 +
 4 files changed, 146 insertions(+), 94 deletions(-)

diff --git a/src/components/CreateGroupDialog/CreateGroupDialog.tsx b/src/components/CreateGroupDialog/CreateGroupDialog.tsx
index 196c90d..2994c46 100644
--- a/src/components/CreateGroupDialog/CreateGroupDialog.tsx
+++ b/src/components/CreateGroupDialog/CreateGroupDialog.tsx
@@ -1,11 +1,11 @@
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import { GroupDefinition, RoleDefinition } from "../../types";
-import { useEffect, useState } from "react";
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import { GroupDefinition, RoleDefinition } from '../../types';
+import { useEffect, useState } from 'react';
 import {
   FormControl,
   MenuItem,
@@ -14,7 +14,7 @@ import {
   FormControlLabel,
   Checkbox,
   FormGroup,
-} from "@mui/material";
+} from '@mui/material';
 
 export interface CreateGroupDialogProps {
   open: boolean;
@@ -23,7 +23,14 @@ export interface CreateGroupDialogProps {
 
   onClose(): void;
 
-  onSave(_name: string, _description: string, _roleId: string, _isAdmin: boolean, _isDefault: boolean): void;
+  onSave(
+    _name: string,
+    _description: string,
+    _roleId: string,
+    _isAdmin: boolean,
+    _isDefault: boolean,
+    _isReadOnly: boolean
+  ): void;
 }
 
 const CreateGroupDialog = (props: CreateGroupDialogProps) => {
@@ -34,6 +41,7 @@ const CreateGroupDialog = (props: CreateGroupDialogProps) => {
   const [roleId, setRoleId] = useState<string | undefined>();
   const [isAdmin, setIsAdmin] = useState(false);
   const [isDefault, setIsDefault] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(false);
 
   useEffect(() => {
     if (group) {
@@ -42,23 +50,26 @@ const CreateGroupDialog = (props: CreateGroupDialogProps) => {
       setRoleId(group.role_id);
       setIsAdmin(group.is_admin);
       setIsDefault(group.is_default);
+      setIsReadOnly(group.is_read_only);
     } else {
       setName(undefined);
       setDescription(undefined);
       setRoleId(undefined);
       setIsAdmin(false);
       setIsDefault(false);
+      setIsReadOnly(false);
     }
   }, [group]);
 
   const handleSave = () => {
     if (name && description && roleId) {
-      onSave(name, description, roleId, isAdmin, isDefault);
+      onSave(name, description, roleId, isAdmin, isDefault, isReadOnly);
       setName(undefined);
       setDescription(undefined);
       setRoleId(undefined);
       setIsAdmin(false);
       setIsDefault(false);
+      setIsReadOnly(false);
     }
   };
 
@@ -70,24 +81,33 @@ const CreateGroupDialog = (props: CreateGroupDialogProps) => {
   };
 
   const handleChangeAdmin = (checked: boolean) => {
-    if(checked) {
+    if (checked) {
       setIsAdmin(true);
       setIsDefault(false);
     } else {
       setIsAdmin(false);
     }
-  }
+  };
+
+  const handleChangeReadOnly = (checked: boolean) => {
+    if (checked) {
+      setIsReadOnly(true);
+      setIsAdmin(false);
+    } else {
+      setIsReadOnly(false);
+    }
+  };
 
   const handleChangeDefault = (checked: boolean) => {
-    if(checked) {
+    if (checked) {
       setIsDefault(true);
       setIsAdmin(false);
     } else {
       setIsDefault(false);
     }
-  }
+  };
 
-  const mode = group ? "Edit" : "Create";
+  const mode = group ? 'Edit' : 'Create';
   const valid = name && description && roleId;
   return (
     <Dialog open={open} onClose={onClose}>
@@ -95,34 +115,34 @@ const CreateGroupDialog = (props: CreateGroupDialogProps) => {
       <DialogContent>
         <TextField
           autoFocus
-          margin="dense"
-          id="name"
-          label="Group Name"
-          type="text"
+          margin='dense'
+          id='name'
+          label='Group Name'
+          type='text'
           fullWidth
-          variant="standard"
-          value={name || ""}
+          variant='standard'
+          value={name || ''}
           onChange={(e) => setName(e.target.value)}
         />
         <TextField
-          margin="dense"
-          id="description"
-          label="Group Description"
-          type="text"
+          margin='dense'
+          id='description'
+          label='Group Description'
+          type='text'
           fullWidth
-          variant="standard"
-          value={description || ""}
+          variant='standard'
+          value={description || ''}
           onChange={(e) => setDescription(e.target.value)}
         />
         <FormControl fullWidth>
-          <InputLabel id="roleId">Role</InputLabel>
+          <InputLabel id='roleId'>Role</InputLabel>
           <Select
-            id="roleId"
-            label="Role"
+            id='roleId'
+            label='Role'
             fullWidth
-            variant="standard"
+            variant='standard'
             // @ts-ignore
-            value={roleId || ""}
+            value={roleId || ''}
             onChange={(e) => setRoleId(e.target.value)}
           >
             {roles.map((role) => {
@@ -142,7 +162,16 @@ const CreateGroupDialog = (props: CreateGroupDialogProps) => {
                 onChange={(e) => handleChangeAdmin(e.target.checked)}
               />
             }
-            label="Is Admin Group"
+            label='Is Admin Group'
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={isReadOnly}
+                onChange={(e) => handleChangeReadOnly(e.target.checked)}
+              />
+            }
+            label='Is Read-Only Group'
           />
           <FormControlLabel
             control={
@@ -151,7 +180,7 @@ const CreateGroupDialog = (props: CreateGroupDialogProps) => {
                 onChange={(e) => handleChangeDefault(e.target.checked)}
               />
             }
-            label="Is Default User Group"
+            label='Is Default User Group'
           />
         </FormGroup>
       </DialogContent>
diff --git a/src/components/Groups/Groups.tsx b/src/components/Groups/Groups.tsx
index a89e678..80501bb 100644
--- a/src/components/Groups/Groups.tsx
+++ b/src/components/Groups/Groups.tsx
@@ -1,6 +1,6 @@
-import { FlexColumn, FlexRow } from "../layouts";
-import { useContext, useState } from "react";
-import { ConfigToolContext } from "../../providers/ConfigToolProvider";
+import { FlexColumn, FlexRow } from '../layouts';
+import { useContext, useState } from 'react';
+import { ConfigToolContext } from '../../providers/ConfigToolProvider';
 import {
   Button,
   Card,
@@ -9,9 +9,9 @@ import {
   Checkbox,
   Divider,
   Typography,
-} from "@mui/material";
-import CreateGroupDialog from "../CreateGroupDialog";
-import { GroupDefinition } from "../../types";
+} from '@mui/material';
+import CreateGroupDialog from '../CreateGroupDialog';
+import { GroupDefinition } from '../../types';
 
 const Groups = () => {
   const { configFile, addGroup, removeGroup } = useContext(ConfigToolContext);
@@ -19,12 +19,12 @@ const Groups = () => {
   const [createOpen, setCreateOpen] = useState(false);
   const [group, setGroup] = useState<GroupDefinition | undefined>();
   const [groupType, setGroupType] = useState<
-    "org" | "project" | "layer" | undefined
+    'org' | 'project' | 'layer' | undefined
   >();
 
   const handleEditGroup = (
     group: GroupDefinition,
-    type: "org" | "project" | "layer"
+    type: 'org' | 'project' | 'layer'
   ) => {
     setGroup(group);
     setGroupType(type);
@@ -36,7 +36,8 @@ const Groups = () => {
     description: string,
     roleId: string,
     isAdmin: boolean,
-    isDefault: boolean
+    isDefault: boolean,
+    isReadOnly: boolean
   ) => {
     if (groupType) {
       const grp: GroupDefinition = {
@@ -46,6 +47,7 @@ const Groups = () => {
         role_id: roleId,
         is_admin: isAdmin,
         is_default: isDefault,
+        is_read_only: isReadOnly,
       };
 
       addGroup(grp, groupType);
@@ -55,12 +57,12 @@ const Groups = () => {
 
   const handleRemoveGroup = (
     group: GroupDefinition,
-    groupType: "org" | "project" | "layer"
+    groupType: 'org' | 'project' | 'layer'
   ) => {
     removeGroup(group.id as string, groupType);
   };
 
-  const handleCreateGroup = (groupType: "org" | "project" | "layer") => {
+  const handleCreateGroup = (groupType: 'org' | 'project' | 'layer') => {
     setGroup(undefined);
     setGroupType(groupType);
     setCreateOpen(true);
@@ -69,47 +71,53 @@ const Groups = () => {
   if (configFile) {
     return (
       <FlexColumn fullWidth padTop={32}>
-        <Typography variant="h4">Organization Groups</Typography>
+        <Typography variant='h4'>Organization Groups</Typography>
         <FlexRow fullWidth wrap padTop={10}>
           {configFile.org_groups.map((group) => {
             const role = configFile?.roles
               ? configFile?.roles?.find((r) => r.id === group.role_id)
               : undefined;
-            let roleName = "";
+            let roleName = '';
             if (role) {
               roleName = role.name;
             }
             return (
               <Card
                 sx={{ width: 300, marginRight: 10 }}
-                variant="outlined"
+                variant='outlined'
                 key={group.id}
               >
                 <CardContent>
-                  <Typography variant="h6">{group.name}</Typography>
-                  <Typography variant="body1">{group.description}</Typography>
-                  <Typography variant="h6">{`Role: ${roleName}`}</Typography>
+                  <Typography variant='h6'>{group.name}</Typography>
+                  <Typography variant='body1'>{group.description}</Typography>
+                  <Typography variant='h6'>{`Role: ${roleName}`}</Typography>
                   <FlexRow alignLeftCenter>
-                    <Checkbox checked={group.is_admin || false} disabled/>
-                    <Typography variant="body2">Is Admin Group</Typography>
+                    <Checkbox checked={group.is_admin || false} disabled />
+                    <Typography variant='body2'>Is Admin Group</Typography>
                   </FlexRow>
                   <FlexRow alignLeftCenter>
                     <Checkbox checked={group.is_default || false} disabled />
-                    <Typography variant="body2">
+                    <Typography variant='body2'>
                       Is Default User Group
                     </Typography>
                   </FlexRow>
+                  <FlexRow alignLeftCenter>
+                    <Checkbox checked={group.is_read_only || false} disabled />
+                    <Typography variant='body2'>
+                      Is Read Only User Group
+                    </Typography>
+                  </FlexRow>
                 </CardContent>
                 <CardActions>
                   <Button
-                    size="small"
-                    onClick={() => handleEditGroup(group, "org")}
+                    size='small'
+                    onClick={() => handleEditGroup(group, 'org')}
                   >
                     Edit Group
                   </Button>
                   <Button
-                    size="small"
-                    onClick={() => handleRemoveGroup(group, "org")}
+                    size='small'
+                    onClick={() => handleRemoveGroup(group, 'org')}
                   >
                     Remove Group
                   </Button>
@@ -119,54 +127,60 @@ const Groups = () => {
           })}
         </FlexRow>
         <FlexRow padTop={20} padBottom={20}>
-          <Button variant="contained" onClick={() => handleCreateGroup("org")}>
+          <Button variant='contained' onClick={() => handleCreateGroup('org')}>
             Create Organization Group
           </Button>
         </FlexRow>
-        <div style={{ width: "100%", marginBottom: 10 }}>
-          <Divider variant="fullWidth" />
+        <div style={{ width: '100%', marginBottom: 10 }}>
+          <Divider variant='fullWidth' />
         </div>
-        <Typography variant="h4">Project Groups</Typography>
+        <Typography variant='h4'>Project Groups</Typography>
         <FlexRow fullWidth wrap padTop={10}>
           {configFile.project_groups.map((group) => {
             const role = configFile?.roles
               ? configFile?.roles?.find((r) => r.id === group.role_id)
               : undefined;
-            let roleName = "";
+            let roleName = '';
             if (role) {
               roleName = role.name;
             }
             return (
               <Card
                 sx={{ width: 300, marginRight: 10 }}
-                variant="outlined"
+                variant='outlined'
                 key={group.id}
               >
                 <CardContent>
-                  <Typography variant="h6">{group.name}</Typography>
-                  <Typography variant="body1">{group.description}</Typography>
-                  <Typography variant="h6">{`Role: ${roleName}`}</Typography>
+                  <Typography variant='h6'>{group.name}</Typography>
+                  <Typography variant='body1'>{group.description}</Typography>
+                  <Typography variant='h6'>{`Role: ${roleName}`}</Typography>
                   <FlexRow alignLeftCenter>
                     <Checkbox checked={group.is_admin || false} disabled />
-                    <Typography variant="body2">Is Admin Group</Typography>
+                    <Typography variant='body2'>Is Admin Group</Typography>
                   </FlexRow>
                   <FlexRow alignLeftCenter>
                     <Checkbox checked={group.is_default || false} disabled />
-                    <Typography variant="body2">
+                    <Typography variant='body2'>
                       Is Default User Group
                     </Typography>
                   </FlexRow>
+                  <FlexRow alignLeftCenter>
+                    <Checkbox checked={group.is_read_only || false} disabled />
+                    <Typography variant='body2'>
+                      Is Read Only User Group
+                    </Typography>
+                  </FlexRow>
                 </CardContent>
                 <CardActions>
                   <Button
-                    size="small"
-                    onClick={() => handleEditGroup(group, "project")}
+                    size='small'
+                    onClick={() => handleEditGroup(group, 'project')}
                   >
                     Edit Group
                   </Button>
                   <Button
-                    size="small"
-                    onClick={() => handleRemoveGroup(group, "project")}
+                    size='small'
+                    onClick={() => handleRemoveGroup(group, 'project')}
                   >
                     Remove Group
                   </Button>
@@ -177,56 +191,62 @@ const Groups = () => {
         </FlexRow>
         <FlexRow padTop={20} padBottom={20}>
           <Button
-            variant="contained"
-            onClick={() => handleCreateGroup("project")}
+            variant='contained'
+            onClick={() => handleCreateGroup('project')}
           >
             Create Project Group
           </Button>
         </FlexRow>
-        <div style={{ width: "100%", marginBottom: 10 }}>
-          <Divider variant="fullWidth" />
+        <div style={{ width: '100%', marginBottom: 10 }}>
+          <Divider variant='fullWidth' />
         </div>
-        <Typography variant="h4">Layer Groups</Typography>
+        <Typography variant='h4'>Layer Groups</Typography>
         <FlexRow fullWidth wrap padTop={10}>
           {configFile.layer_groups.map((group) => {
             const role = configFile?.roles
               ? configFile?.roles?.find((r) => r.id === group.role_id)
               : undefined;
-            let roleName = "";
+            let roleName = '';
             if (role) {
               roleName = role.name;
             }
             return (
               <Card
                 sx={{ width: 300, marginRight: 10 }}
-                variant="outlined"
+                variant='outlined'
                 key={group.id}
               >
                 <CardContent>
-                  <Typography variant="h6">{group.name}</Typography>
-                  <Typography variant="body1">{group.description}</Typography>
-                  <Typography variant="h6">{`Role: ${roleName}`}</Typography>
+                  <Typography variant='h6'>{group.name}</Typography>
+                  <Typography variant='body1'>{group.description}</Typography>
+                  <Typography variant='h6'>{`Role: ${roleName}`}</Typography>
                   <FlexRow alignLeftCenter>
-                    <Checkbox checked={group.is_admin || false}  disabled/>
-                    <Typography variant="body2">Is Admin Group</Typography>
+                    <Checkbox checked={group.is_admin || false} disabled />
+                    <Typography variant='body2'>Is Admin Group</Typography>
                   </FlexRow>
                   <FlexRow alignLeftCenter>
-                    <Checkbox checked={group.is_default || false}  disabled/>
-                    <Typography variant="body2">
+                    <Checkbox checked={group.is_default || false} disabled />
+                    <Typography variant='body2'>
                       Is Default User Group
                     </Typography>
                   </FlexRow>
+                  <FlexRow alignLeftCenter>
+                    <Checkbox checked={group.is_read_only || false} disabled />
+                    <Typography variant='body2'>
+                      Is Read Only User Group
+                    </Typography>
+                  </FlexRow>
                 </CardContent>
                 <CardActions>
                   <Button
-                    size="small"
-                    onClick={() => handleEditGroup(group, "layer")}
+                    size='small'
+                    onClick={() => handleEditGroup(group, 'layer')}
                   >
                     Edit Group
                   </Button>
                   <Button
-                    size="small"
-                    onClick={() => handleRemoveGroup(group, "layer")}
+                    size='small'
+                    onClick={() => handleRemoveGroup(group, 'layer')}
                   >
                     Remove Group
                   </Button>
@@ -237,8 +257,8 @@ const Groups = () => {
         </FlexRow>
         <FlexRow padTop={20} padBottom={20}>
           <Button
-            variant="contained"
-            onClick={() => handleCreateGroup("layer")}
+            variant='contained'
+            onClick={() => handleCreateGroup('layer')}
           >
             Create Layer Group
           </Button>
diff --git a/src/providers/ConfigToolProvider.tsx b/src/providers/ConfigToolProvider.tsx
index 6fee413..8904fe6 100644
--- a/src/providers/ConfigToolProvider.tsx
+++ b/src/providers/ConfigToolProvider.tsx
@@ -273,6 +273,7 @@ const ConfigToolProvider = (props: ConfigToolProviderProps) => {
           top_logos_enabled: false,
           bottom_logos_enabled: false,
           favicon: 'favicon.svg',
+          login_logo_enabled: false,
         };
       }
       copy.branding.platform_name = branding.platform_name;
diff --git a/src/types/index.ts b/src/types/index.ts
index 10a2589..efad132 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -20,6 +20,7 @@ export type GroupDefinition = {
   role_id: string;
   is_admin: boolean;
   is_default: boolean;
+  is_read_only: boolean;
 };
 
 export type Branding = {
@@ -33,6 +34,7 @@ export type Branding = {
   bottom_logos_enabled: boolean;
   footer_message: string | undefined;
   top_logos_enabled: boolean;
+  login_logo_enabled: boolean;
   favicon: string;
 };