From 7074bbafb577925ff032ee32a92589bccb44be4f Mon Sep 17 00:00:00 2001
From: Vittorio Palmisano <vpalmisano@gmail.com>
Date: Fri, 30 Apr 2021 12:41:45 +0200
Subject: [PATCH] added /config-doc page

---
 app/src/components/ConfigDocumentation.tsx | 152 ++++++++++-----------
 app/src/config.ts                          |  14 +-
 app/src/index.js                           |   8 ++
 app/tsconfig.json                          |   2 +-
 4 files changed, 94 insertions(+), 82 deletions(-)

diff --git a/app/src/components/ConfigDocumentation.tsx b/app/src/components/ConfigDocumentation.tsx
index 251d8b45..e94efc5e 100644
--- a/app/src/components/ConfigDocumentation.tsx
+++ b/app/src/components/ConfigDocumentation.tsx
@@ -1,102 +1,102 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-use-before-define
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import Avatar from '@material-ui/core/Avatar';
-import WebAssetIcon from '@material-ui/icons/WebAsset';
-import ErrorIcon from '@material-ui/icons/Error';
-import Hidden from '@material-ui/core/Hidden';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+
+import { configDocs } from '../config';
 
 const styles = (theme: any) =>
 	({
-		dialogPaper :
-		{
-			width                          : '40vw',
-			[theme.breakpoints.down('lg')] :
-			{
-				width : '40vw'
-			},
-			[theme.breakpoints.down('md')] :
-			{
-				width : '50vw'
-			},
-			[theme.breakpoints.down('sm')] :
-			{
-				width : '70vw'
-			},
-			[theme.breakpoints.down('xs')] :
-			{
-				width : '90vw'
-			}
-			// display       : 'flex',
-			// flexDirection : 'column'
+		table : {
+			minWidth : 700
+		},
+		pre : {
+			fontSize : '0.8rem'
+		},
+		cell : {
+			maxWidth : '25vw',
+			overflow : 'auto'
 		},
 		list : {
 			backgroundColor : theme.palette.background.paper
-		},
-		errorAvatar : {
-			width  : theme.spacing(20),
-			height : theme.spacing(20)
 		}
 	});
 
-let dense = false;
-
 const ConfigDocumentation = ({
-	platform,
 	classes
+}: {
+	classes : any;
 }) =>
 {
-	if (platform !== 'desktop')
-		dense = true;
-
 	return (
-		<Dialog
-			open
-			scroll={'body'}
-			classes={{
-				paper : classes.dialogPaper
-			}}
-		>
-			<DialogTitle id='form-dialog-title'>
-				<FormattedMessage
-					id='configDocumentation.title'
-					defaultMessage='Configuration documentation'
-				/>
-			</DialogTitle>
-			<DialogContent dividers>
-				<FormattedMessage
-					id='configDocumentation.bodyText'
-					defaultMessage=''
-				/>
-				<Grid container spacing={2} justify='center' alignItems='center'>
-					<Grid item xs={12} md={7}>
-
-						<div className={classes.list}>
-							<List dense={dense}>
-
-							</List>
-						</div>
-					</Grid>
-				</Grid>
-			</DialogContent>
-		</Dialog>
+		<Card className={classes.root}>
+			<CardContent>
+				<Typography className={classes.title} variant='h5' component='h2'>
+					<FormattedMessage
+						id='configDocumentation.title'
+						defaultMessage='Edumeet configuration'
+					/>
+				</Typography>
+				<Typography variant='body2' component='div'>
+					<TableContainer component={Paper}>
+						<Table className={classes.table} size='small' aria-label='Configuration'>
+							<TableHead>
+								<TableRow>
+									<TableCell>Property</TableCell>
+									<TableCell align='left'>Description</TableCell>
+									<TableCell align='left'>Format</TableCell>
+									<TableCell align='left'>Default value</TableCell>
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{Object.entries(configDocs).map(([ name, value ] : [ string, any ]) =>
+								{
+									return (
+										<TableRow key={name}>
+											<TableCell component='th' scope='row' className={classes.cell}>{name}</TableCell>
+											<TableCell className={classes.cell}>{value.doc}</TableCell>
+											<TableCell className={classes.cell}>
+												<pre>{value.format}</pre>
+											</TableCell>
+											<TableCell className={classes.cell}>
+												<pre className={classes.pre}>{value.default}</pre>
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+					</TableContainer>
+				</Typography>
+			</CardContent>
+			<CardActions>
+				<Button size='small' onClick={(e) =>
+				{
+					e.preventDefault();
+					window.location.href = '/';
+				}}
+				>Home</Button>
+			</CardActions>
+		</Card>
 	);
 };
 
 ConfigDocumentation.propTypes =
 {
-	platform          : PropTypes.string.isRequired,
-	classes           : PropTypes.object.isRequired
+	classes : PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(ConfigDocumentation);
diff --git a/app/src/config.ts b/app/src/config.ts
index ee07d4e7..1f7044c6 100644
--- a/app/src/config.ts
+++ b/app/src/config.ts
@@ -533,26 +533,30 @@ function formatDocs(docs: any, property: string | null, schema: any)
 			formatDocs(docs, `${property ? `${property}.` : ''}${name}`, value);
 		});
 
-		return;
+		return docs;
 	}
 	else if (property)
 	{
 		docs[property] =
 		{
 			doc     : schema.doc,
-			format  : schema.format,
-			default : schema.default
+			format  : JSON.stringify(schema.format, null, 2),
+			default : JSON.stringify(schema.default, null, 2)
 		};
 	}
+
+	return docs;
 }
 
+const configDocs = formatDocs({}, null, configSchema.getSchema());
+
 // Perform validation
 configSchema.validate({ allowed: 'strict' });
 
 const config = configSchema.getProperties();
 
 // eslint-disable-next-line
-console.log('Using config:', config);
+console.log('Using config:', config, configDocs);
 
 // Override the window config with the validated properties.
 (window as any)['config'] = config;
@@ -560,5 +564,5 @@ console.log('Using config:', config);
 export {
 	configSchema,
 	config,
-	formatDocs
+	configDocs
 };
diff --git a/app/src/index.js b/app/src/index.js
index 66e4d060..e9e3558c 100644
--- a/app/src/index.js
+++ b/app/src/index.js
@@ -16,6 +16,7 @@ import RoomContext from './RoomContext';
 import deviceInfo from './deviceInfo';
 import * as meActions from './actions/meActions';
 import UnsupportedBrowser from './components/UnsupportedBrowser';
+import ConfigDocumentation from './components/ConfigDocumentation';
 import JoinDialog from './components/JoinDialog';
 import LoginDialog from './components/AccessControl/LoginDialog';
 import LoadingView from './components/Loader/LoadingView';
@@ -192,6 +193,13 @@ function run()
 											<Switch>
 												<Route exact path='/' component={JoinDialog} />
 												<Route exact path='/login_dialog' component={LoginDialog} />
+												<Route exact path='/config-doc'
+													render={(props) => (
+														<ConfigDocumentation
+															platform={device.platform} {...props}
+														/>
+													)}
+												/>
 												<Route path='/:id' component={App} />
 											</Switch>
 										</React.Fragment>
diff --git a/app/tsconfig.json b/app/tsconfig.json
index 0114a3ba..3d23e5ac 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -20,6 +20,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules", "**/*.spec.ts"]
 }