Feat mgmt client (#206)

* Start moving mgmt-client into client * Add tenant OAuth + FQDN mgmt components * Add room,group,role,user tables.Add local admin login+bugix for login state * add management view * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Update sonarqube.yml * Add sonar project key * move management up to router level * add permissions table * add Tenant Owner+ tenant Admin table * fix mgmt-admin login for tentants. * add room owners * Add group role * add group user * add room user role table * add management current room settings * add functionality to claim room. * add notifications to MGMT and remove console.log statements * remove redundant react imports * add titles to mgmt-admin components * hide mgmt UI if login is not enabled * add success messages * fix typo, and remove unused import * fix chunking warning * create query action by id, and update tenant components * fix settings diag UI * Cleanup room and tenant UI * fix service name * fix build errors * fix typo
edumeet · Nov 22, 2024 · 1021691 · 1021691
1 parent 52100bb
commit 1021691
Show file tree

Hide file tree

Showing 19 changed files with 453 additions and 304 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,4 +27,5 @@ yarn-debug.log*
 yarn-error.log*
 
 !types.d.ts
-.vscode
+.vscode
+stats.html
diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
 		"@vitejs/plugin-react": "^4.3.1",
 		"eslint": "^8.57.1",
 		"eslint-plugin-react": "^7.36.1",
+		"rollup-plugin-visualizer": "^5.12.0",
 		"vite": "^4.5.5",
 		"vite-plugin-eslint": "^1.8.1",
 		"vite-tsconfig-paths": "^4.3.2"

diff --git a/src/components/helpdialog/HelpDialog.tsx b/src/components/helpdialog/HelpDialog.tsx
@@ -25,7 +25,7 @@ const HelpDialog = (): JSX.Element => {
 			open={ helpOpen }
 			onClose={ handleCloseHelp }
 			maxWidth='xs'
-			content={ <><ShortcutKeys /></> }
+			content={ <ShortcutKeys /> }
 			actions={
 				<Box display="flex" alignItems="center" justifyContent="space-between" width="100%">
 					<Box display="flex" alignItems="left">

diff --git a/src/components/managementservice/rooms/Room.tsx b/src/components/managementservice/rooms/Room.tsx
@@ -6,8 +6,12 @@ import React from 'react';
 import { GroupRoles, Roles, Room, RoomOwners, Tenant, User } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
 import { createRoomWithParams, deleteData, getData, patchData } from '../../../store/actions/managementActions';
+import RoomOwnerTable from './RoomOwner';
+import RoomUserRoleTable from './roomUserRole';
 
-// nested data is ok, see accessorKeys in ColumnDef below
+export interface RoomProp {
+	roomId: number;
+}
 
 const RoomTable = () => {
 	const dispatch = useAppDispatch();
@@ -510,7 +514,8 @@ const RoomTable = () => {
 					<FormControlLabel control={<Checkbox checked={filesharingEnabled} onChange={handleFilesharingEnabledChange} />} label="filesharingEnabled" />
 					<FormControlLabel control={<Checkbox checked={localRecordingEnabled} onChange={handleLocalRecordingEnabledChange} />} label="localRecordingEnabled" />
 					<FormControlLabel control={<Checkbox checked={breakoutsEnabled} onChange={handleBreakoutsEnabledChange} />} label="breakoutsEnabled" />
-
+					<RoomOwnerTable roomId={id} />
+					<RoomUserRoleTable roomId={id} />
 				</DialogContent>
 				<DialogActions>
 					<Button onClick={delTenant} disabled={cantDelete} color='warning'>Delete</Button>

diff --git a/src/components/managementservice/rooms/RoomOwner.tsx b/src/components/managementservice/rooms/RoomOwner.tsx
@@ -4,9 +4,12 @@ import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
 import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Autocomplete } from '@mui/material';
 import { Room, RoomOwners, User } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
-import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
+import { createData, deleteData, getData, getDataByRoomId, patchData } from '../../../store/actions/managementActions';
+import { RoomProp } from './Room';
+
+const RoomOwnerTable = (props: RoomProp) => {
+	const roomId = props.roomId;
 
-const RoomOwnerTable = () => {
 	const dispatch = useAppDispatch();
 
 	type RoomOptionTypes = Array<Room>
@@ -104,11 +107,11 @@ const RoomOwnerTable = () => {
 	const [ id, setId ] = useState(0);
 	const [ cantPatch, setcantPatch ] = useState(false);
 	const [ userIdOption, setUserIdOption ] = useState<User | undefined>();
-	const [ roomIdOption, setRoomIdOption ] = useState<Room | undefined>();
 	const [ userIdOptionDisabled, setUserIdOptionDisabled ] = useState(true);
-	const [ roomIdOptionDisabled, setRoomIdOptionDisabled ] = useState(true);
+
+	/* const [ roomIdOptionDisabled, setRoomIdOptionDisabled ] = useState(true); */
+	/* const [ roomIdOption, setRoomIdOption ] = useState<Room | undefined>(); */
 
-	const [ roomId, setRoomId ] = useState(0);
 	const [ userId, setUserId ] = useState(0);
 
 	async function fetchProduct() {
@@ -130,7 +133,7 @@ const RoomOwnerTable = () => {
 		});
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		dispatch(getData('roomOwners')).then((tdata: any) => {
+		dispatch(getDataByRoomId(roomId, 'roomOwners')).then((tdata: any) => {
 			if (tdata != undefined) {
 				setData(tdata.data);
 			}
@@ -150,19 +153,23 @@ const RoomOwnerTable = () => {
 
 	const handleClickOpen = () => {
 		setId(0);
-		setRoomId(0);
+
+		/* setRoomId(0); */
 		setUserId(0);
 		setUserIdOption(undefined);
-		setRoomIdOption(undefined);
+
+		/* setRoomIdOption(undefined); */
 		setUserIdOptionDisabled(false);
-		setRoomIdOptionDisabled(false);
+
+		/* setRoomIdOptionDisabled(false); */
 		setcantPatch(false);
 		setOpen(true);
 	};
 
 	const handleClickOpenNoreset = () => {
 		setUserIdOptionDisabled(true);
-		setRoomIdOptionDisabled(true);
+
+		/* setRoomIdOptionDisabled(true); */
 		setcantPatch(true);
 		setOpen(true);
 	};
@@ -173,12 +180,13 @@ const RoomOwnerTable = () => {
 			setUserIdOption(newValue);
 		}
 	};
-	const handleRoomIdChange = (event: SyntheticEvent<Element, Event>, newValue: Room) => {
+
+	/* const handleRoomIdChange = (event: SyntheticEvent<Element, Event>, newValue: Room) => {
 		if (newValue && typeof newValue.id === 'number') {
 			setRoomId(newValue.id);
 			setRoomIdOption(newValue);
 		}
-	};
+	}; */
 
 	const handleClose = () => {
 		setOpen(false);
@@ -222,6 +230,7 @@ const RoomOwnerTable = () => {
 
 	return <>
 		<div>
+			<h4>Room owners</h4>
 			<Button variant="outlined" onClick={() => handleClickOpen()}>
 				Add new
 			</Button>
@@ -233,7 +242,7 @@ const RoomOwnerTable = () => {
 						These are the parameters that you can change.
 					</DialogContentText>
 					<input type="hidden" name="id" value={id} />
-					<Autocomplete
+					{/* <Autocomplete
 						options={rooms}
 						getOptionLabel={(option) => ((typeof option.name == 'string')?option.name:'')}
 						fullWidth
@@ -243,7 +252,7 @@ const RoomOwnerTable = () => {
 						value={roomIdOption}
 						sx={{ marginTop: '8px' }}
 						renderInput={(params) => <TextField {...params} label="Room" />}
-					/>
+					/> */}
 					<Autocomplete
 						options={users}
 						getOptionLabel={(option) => option.email}
@@ -270,7 +279,8 @@ const RoomOwnerTable = () => {
 					const r = row.getAllCells();
 
 					const tid = r[0].getValue();
-					const troomId=r[1].getValue();
+
+					/* const troomId=r[1].getValue(); */
 					const tuserId=r[2].getValue();
 
 					if (typeof tid === 'number') {
@@ -288,7 +298,7 @@ const RoomOwnerTable = () => {
 						setUserIdOption(undefined);
 					}
 
-					if (typeof troomId === 'string') {
+					/* 					if (typeof troomId === 'string') {
 						const troom = rooms.find((x) => x.id === parseInt(troomId));
 
 						if (troom) {
@@ -298,7 +308,7 @@ const RoomOwnerTable = () => {
 					} else {
 						setRoomId(0);
 						setRoomIdOption(undefined);
-					}
+					} */
 
 					handleClickOpenNoreset();
 

diff --git a/src/components/managementservice/rooms/roomUserRole.tsx b/src/components/managementservice/rooms/roomUserRole.tsx
@@ -4,9 +4,11 @@ import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
 import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Autocomplete } from '@mui/material';
 import { Roles, Room, User, UsersRoles } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
-import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
+import { createData, deleteData, getData, /* getDataByRoomId, */ patchData } from '../../../store/actions/managementActions';
+import { RoomProp } from './Room';
 
-const RoomUserRoleTable = () => {
+const RoomUserRoleTable = (props: RoomProp) => {
+	const roomId = props.roomId;
 	const dispatch = useAppDispatch();
 
 	type RoomOptionTypes = Array<Room>
@@ -139,16 +141,19 @@ const RoomUserRoleTable = () => {
 	const [ id, setId ] = useState(0);
 	const [ userId, setUserId ] = useState(0);
 	const [ roleId, setRoleId ] = useState(0);
-	const [ roomId, setRoomId ] = useState(0);
+
+	/* const [ roomId, setRoomId ] = useState(0); */
 
 	const [ cantPatch, setCantPatch ] = useState(true);
 	const [ cantDelete ] = useState(false);
 	const [ userIdOption, setUserIdOption ] = useState<User | undefined>();
 	const [ roleIdOption, setRoleIdOption ] = useState<Roles | undefined>();
-	const [ roomIdOption, setRoomIdOption ] = useState<Room | undefined>();
+
+	/* const [ roomIdOption, setRoomIdOption ] = useState<Room | undefined>(); */
 	const [ userIdOptionDisabled, setUserIdOptionDisabled ] = useState(true);
 	const [ roleIdOptionDisabled, setRoleIdOptionDisabled ] = useState(true);
-	const [ roomIdOptionDisabled, setRoomIdOptionDisabled ] = useState(true);
+
+	/* const [ roomIdOptionDisabled, setRoomIdOptionDisabled ] = useState(true); */
 
 	async function fetchProduct() {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -176,8 +181,9 @@ const RoomUserRoleTable = () => {
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		dispatch(getData('roomUserRoles')).then((tdata: any) => {
+
 			if (tdata != undefined) {
-				setData(tdata);
+				setData(tdata.data);
 			}
 			setIsLoading(false);
 
@@ -197,13 +203,16 @@ const RoomUserRoleTable = () => {
 		setId(0);
 		setUserId(0);
 		setRoleId(0);
-		setRoomId(0);
+
+		/* setRoomId(0); */
 		setUserIdOption(undefined);
 		setRoleIdOption(undefined);
-		setRoomIdOption(undefined);
+
+		/* setRoomIdOption(undefined); */
 		setUserIdOptionDisabled(false);
 		setRoleIdOptionDisabled(false);
-		setRoomIdOptionDisabled(false);
+
+		/* setRoomIdOptionDisabled(false); */
 		setCantPatch(false);
 		setOpen(true);
 	};
@@ -212,7 +221,8 @@ const RoomUserRoleTable = () => {
 		setCantPatch(true);
 		setUserIdOptionDisabled(true);
 		setRoleIdOptionDisabled(true);
-		setRoomIdOptionDisabled(true);
+
+		/* setRoomIdOptionDisabled(true); */
 		setOpen(true);
 	};
 
@@ -228,12 +238,13 @@ const RoomUserRoleTable = () => {
 			setRoleIdOption(newValue);
 		}
 	};
-	const handleRoomIdChange = (event: SyntheticEvent<Element, Event>, newValue: Room) => {
+
+	/* const handleRoomIdChange = (event: SyntheticEvent<Element, Event>, newValue: Room) => {
 		if (newValue && typeof newValue.id === 'number') {
 			setRoomId(newValue.id);
 			setRoomIdOption(newValue);
 		}
-	};
+	}; */
 
 	const handleClose = () => {
 		setOpen(false);
@@ -279,6 +290,7 @@ const RoomUserRoleTable = () => {
 
 	return <>
 		<div>
+			<h4>Room-User roles</h4>
 			<Button variant="outlined" onClick={() => handleClickOpen()}>
 				Add new
 			</Button>
@@ -312,51 +324,6 @@ const RoomUserRoleTable = () => {
 						sx={{ marginTop: '8px' }}
 						renderInput={(params) => <TextField {...params} label="Role" />}
 					/>
-					<Autocomplete
-						options={rooms}
-						getOptionLabel={(option) => ((typeof option.name == 'string')?option.name:'')}
-						fullWidth
-						disableClearable
-						readOnly={roomIdOptionDisabled}
-						onChange={handleRoomIdChange}
-						value={roomIdOption}
-						sx={{ marginTop: '8px' }}
-						renderInput={(params) => <TextField {...params} label="Room" />}
-					/>
-					{/* <TextField
-						autoFocus
-						margin="dense"
-						id="userId"
-						label="userId"
-						type="number"
-						required
-						fullWidth
-						onChange={handleUserIdChange}
-						value={userId}
-					/>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="roleId"
-						label="roleId"
-						type="number"
-						required
-						fullWidth
-						onChange={handleRoleIdChange}
-						value={roleId}
-					/>
-					<TextField
-						autoFocus
-						margin="dense"
-						id="roomId"
-						label="roomId"
-						type="number"
-						required
-						fullWidth
-						onChange={handleRoomIdChange}
-						value={roomId}
-					/> */}
-
 				</DialogContent>
 				<DialogActions>
 					<Button onClick={delTenant} disabled={cantDelete} color='warning'>Delete</Button>
@@ -374,7 +341,8 @@ const RoomUserRoleTable = () => {
 					const tid = r[0].getValue();
 					const tuserId=r[1].getValue();
 					const troleId=r[2].getValue();
-					const troomId=r[3].getValue();
+
+					/* const troomId=r[3].getValue(); */
 
 					if (typeof tid === 'number') {
 						setId(tid);
@@ -402,17 +370,6 @@ const RoomUserRoleTable = () => {
 						setRoleId(0);
 						setRoleIdOption(undefined);
 					}
-					if (typeof troomId === 'string') {
-						const troom = rooms.find((x) => x.id === parseInt(troomId));
-
-						if (troom) {
-							setRoomIdOption(troom);
-						}
-						setRoomId(parseInt(troomId));
-					} else {
-						setRoomId(0);
-						setRoomIdOption(undefined);
-					}
 
 					handleClickOpenNoreset();
 				}