create query action by id, and update tenant components

edumeet · Nov 18, 2024 · bf12e0e · bf12e0e
1 parent 9fdc075
commit bf12e0e
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 162 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/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/tenants/Tenant.tsx b/src/components/managementservice/tenants/Tenant.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from '@mui/material';
 import { useEffect, useMemo, useState } from 'react';
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from '@mui/material';
 // eslint-disable-next-line camelcase
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
 import { Tenant } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
 import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
+import TenantFQDNTable from './TenatnFQDN';
+import TenantOAuthTable from './TenantOAuth';
+export interface TenantProp {
+	tenantId: number;
+}
 
 const TenantTable = () => {
 
@@ -54,7 +58,7 @@ const TenantTable = () => {
 		fetchProduct();
 	}, []);
 
-	const [ open, setOpen ] = React.useState(false);
+	const [ open, setOpen ] = useState(false);
 
 	const handleClickOpen = () => {
 		setId(0);
@@ -148,6 +152,10 @@ const TenantTable = () => {
 
 						value={description}
 					/>
+					Tenant domains
+					<TenantFQDNTable tenantId={id} />
+					Tenant Auth
+					<TenantOAuthTable tenantId={id} />
 
 				</DialogContent>
 				<DialogActions>

diff --git a/src/components/managementservice/tenants/TenantOAuth.tsx b/src/components/managementservice/tenants/TenantOAuth.tsx
@@ -1,13 +1,15 @@
 /* eslint-disable camelcase */
-import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Autocomplete } from '@mui/material';
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from '@mui/material';
 import { Tenant, TenantOAuth } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
-import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
+import { createData, deleteData, getData, getDataByID, patchData } from '../../../store/actions/managementActions';
 import { notificationsActions } from '../../../store/slices/notificationsSlice';
+import { TenantProp } from './Tenant';
 
-const TenantOAuthTable = () => {
+const TenantOAuthTable = (props: TenantProp) => {
+	const tenantId = props.tenantId;
 
 	const dispatch = useAppDispatch();
 
@@ -71,10 +73,9 @@ const TenantOAuthTable = () => {
 	const [ data, setData ] = useState([]);
 	const [ isLoading, setIsLoading ] = useState(false);
 	const [ id, setId ] = useState(0);
-	const [ tenantId, setTenantId ] = useState(0);
 	const [ profileUrl, setProfileUrl ] = useState('');
 	const [ wellknown, setWellknown ] = useState('');
-	const [ wellknownEpmty, setWellknownEmpty ] = useState(true);
+	const [ wellknownEmpty, setWellknownEmpty ] = useState(true);
 
 	const [ key, setKey ] = useState('');
 	const [ secret, setSecret ] = useState('');
@@ -83,8 +84,7 @@ const TenantOAuthTable = () => {
 	const [ scope, setScope ] = useState('');
 	const [ scopeDelimeter, setScopeDelimeter ] = useState('');
 	const [ redirect, setRedirect ] = useState('');
-	const [ tenantIdOption, setTenantIdOption ] = useState<Tenant | undefined>();
-
+
 	async function fetchProduct() {
 		setIsLoading(true);
 
@@ -96,7 +96,7 @@ const TenantOAuthTable = () => {
 		});
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		dispatch(getData('tenantOAuths')).then((tdata: any) => {
+		dispatch(getDataByID(tenantId, 'tenantOAuths')).then((tdata: any) => {
 			if (tdata != undefined) {
 				setData(tdata.data);
 			}
@@ -114,16 +114,13 @@ const TenantOAuthTable = () => {
 
 	const handleClickOpen = () => {
 		setId(0);
-		setTenantId(0);
 		setProfileUrl('https://edumeet.example.com/kc/realms/<realm>/protocol/openid-connect/userinfo');
 		setKey('edumeet-dev-client');
 		setSecret('');
 		setAuthorizeUrl('https://edumeet.example.com/kc/realms/<realm>/protocol/openid-connect/auth');
 		setAccessUrl('https://edumeet.example.com/kc/realms/<realm>/protocol/openid-connect/token');
 		setScope('openid profile email');
 		setScopeDelimeter(' ');
-		setTenantIdOption(undefined);
-		setTenantId(0);
 		setRedirect('https://edumeet.example.com/mgmt/oauth/tenant/callback');
 		setOpen(true);
 	};
@@ -132,13 +129,6 @@ const TenantOAuthTable = () => {
 		setOpen(true);
 	};
 
-	const handleTenantIdChange = (event: SyntheticEvent<Element, Event>, newValue: Tenant) => {
-		if (newValue) {
-			setTenantId(newValue.id);
-			setTenantIdOption(newValue);
-		}
-	};
-
 	const handleProfileUrlChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
 		setProfileUrl(event.target.value);
 	};
@@ -289,16 +279,6 @@ const TenantOAuthTable = () => {
 						onChange={handleTenantIdChange}
 						value={tenantId}
 					/> */}
-					<Autocomplete
-						options={tenants}
-						getOptionLabel={(option) => option.name}
-						fullWidth
-						disableClearable
-						onChange={handleTenantIdChange}
-						value={tenantIdOption}
-						sx={{ marginTop: '8px' }}
-						renderInput={(params) => <TextField {...params} label="Tenant" />}
-					/>
 					<TextField
 						margin="dense"
 						required
@@ -309,7 +289,7 @@ const TenantOAuthTable = () => {
 						value={wellknown}
 						onChange={handleWellknownChange}
 					/>
-					<Button onClick={handleWellknownUpdate} variant="contained" fullWidth disabled={wellknownEpmty} >Update parameters from URL</Button>
+					<Button onClick={handleWellknownUpdate} variant="contained" fullWidth disabled={wellknownEmpty} >Update parameters from URL</Button>
 					<TextField
 						margin="dense"
 						required
@@ -409,7 +389,7 @@ const TenantOAuthTable = () => {
 					const r = row.getAllCells();
 
 					const tid = r[0].getValue();
-					const ttenantId= r[1].getValue();
+					// const ttenantId= r[1].getValue();
 					const taccess= r[2].getValue();
 					const tauthorize= r[3].getValue();
 					const tprofile= r[4].getValue();
@@ -420,17 +400,6 @@ const TenantOAuthTable = () => {
 					if (typeof tid === 'number') {
 						setId(tid);
 					}
-					if (typeof ttenantId === 'string') {
-						const ttenant = tenants.find((x) => x.id === parseInt(ttenantId));
-
-						if (ttenant) {
-							setTenantIdOption(ttenant);
-						}
-						setTenantId(parseInt(ttenantId));
-					} else {
-						setTenantId(0);
-					}
-
 					if (typeof tprofile === 'string') { setProfileUrl(tprofile); } else {
 						setProfileUrl('');
 					}

diff --git a/src/components/managementservice/tenants/TenatnFQDN.tsx b/src/components/managementservice/tenants/TenatnFQDN.tsx
@@ -1,13 +1,14 @@
-import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line camelcase
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Autocomplete } from '@mui/material';
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from '@mui/material';
 import { Tenant, TenantFQDN } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
-import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
-
-const TenantFQDNTable = () => {
+import { createData, deleteData, getData, getDataByID, patchData } from '../../../store/actions/managementActions';
+import { TenantProp } from './Tenant';
 
+const TenantFQDNTable = (props: TenantProp) => {
+	const tenantId = props.tenantId;
 	const dispatch = useAppDispatch();
 
 	type TenantOptionTypes = Array<Tenant>
@@ -54,9 +55,6 @@ const TenantFQDNTable = () => {
 	const [ data, setData ] = useState([]);
 	const [ isLoading, setIsLoading ] = useState(false);
 	const [ id, setId ] = useState(0);
-	const [ tenantId, setTenantId ] = useState(0);
-
-	const [ tenantIdOption, setTenantIdOption ] = useState<Tenant | undefined>();
 
 	const [ fqdn, setFQDN ] = useState('');
 
@@ -73,7 +71,7 @@ const TenantFQDNTable = () => {
 		});
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		dispatch(getData('tenantFQDNs')).then((tdata: any) => {
+		dispatch(getDataByID(tenantId, 'tenantFQDNs')).then((tdata: any) => {
 			if (tdata != undefined) {
 				setData(tdata.data);
 			}
@@ -90,8 +88,6 @@ const TenantFQDNTable = () => {
 
 	const handleClickOpen = () => {
 		setId(0);
-		setTenantId(0);
-		setTenantIdOption(undefined);
 		setDescription('');
 		setFQDN('');
 		setOpen(true);
@@ -101,13 +97,6 @@ const TenantFQDNTable = () => {
 		setOpen(true);
 	};
 
-	const handleTenantIdChange = (event: SyntheticEvent<Element, Event>, newValue: Tenant) => {
-		if (newValue) {
-			setTenantId(newValue.id);
-			setTenantIdOption(newValue);
-		}
-	};
-
 	const handleDescriptionChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
 		setDescription(event.target.value);
 	};
@@ -164,16 +153,6 @@ const TenantFQDNTable = () => {
 						These are the parameters that you can change.
 					</DialogContentText>
 					<input type="hidden" name="id" value={id} />
-					<Autocomplete
-						options={tenants}
-						getOptionLabel={(option) => option.name}
-						fullWidth
-						disableClearable
-						onChange={handleTenantIdChange}
-						value={tenantIdOption}
-						sx={{ marginTop: '8px' }}
-						renderInput={(params) => <TextField {...params} label="Tenant" />}
-					/>
 					<TextField
 						margin="dense"
 						id="description"
@@ -207,25 +186,14 @@ const TenantFQDNTable = () => {
 					const r = row.getAllCells();
 
 					const tid = r[0].getValue();
-					const ttenantId = r[1].getValue();
+					// const ttenantId = r[1].getValue();
 					const tdescription = r[2].getValue();
 					const tfqdn = r[3].getValue();
 
 					if (typeof tid === 'number') {
 						setId(tid);
 					}
 
-					if (typeof ttenantId === 'string') {
-						const ttenant = tenants.find((x) => x.id === parseInt(ttenantId));
-
-						if (ttenant) {
-							setTenantIdOption(ttenant);
-						}
-						setTenantId(parseInt(ttenantId));
-					} else {
-						setTenantId(0);
-					}
-
 					if (typeof tdescription === 'string') {
 						setDescription(tdescription);
 					} else {
@@ -244,7 +212,11 @@ const TenantFQDNTable = () => {
 			columns={columns}
 			data={data} // fallback to array if data is undefined
 			initialState={{
-				columnVisibility: {}
+				columnVisibility: {
+					id: false,
+					tenantId: false,
+					description: false
+				}
 			}}
 			state={{ isLoading }} /></>;
 };

diff --git a/src/store/actions/managementActions.tsx b/src/store/actions/managementActions.tsx
@@ -76,6 +76,41 @@ export const getData = (serviceName:string): AppThunk<Promise<object | undefined
 	return data;
 };
 
+export const getDataByID = (id:string|number, serviceName:string): AppThunk<Promise<object | undefined>> => async (
+	dispatch,
+	_getState,
+	{ managementService }
+): Promise<object | undefined> => {
+
+	logger.debug('getData() [serviceName:%s]', serviceName);
+
+	let data: object | undefined;
+
+	try {
+
+		data = await (await managementService).service(serviceName).find(
+			{
+				query: {
+					id: id,
+					$sort: {
+						id: 1
+					}
+				}
+			}
+		);
+
+	} catch (error) {
+		if (error instanceof Error) {
+			dispatch(notificationsActions.enqueueNotification({
+				message: `Failed to get data: ${error.toString()}`,
+				options: { variant: 'error' }
+			}));
+		}
+	}
+
+	return data;
+};
+
 export const deleteData = (id : number, serviceName:string): AppThunk<Promise<object | undefined>> => async (
 	dispatch,
 	_getState,