Allow features to be disabled at build time (#143)

* Add framework for built-time feature selection
* Allow MQTT, NTP, OTA features to be disabled at build time
* Allow Project screens to be disabled at build time
* Allow security features to be disabled at build time
* Switch to std::function for StatefulService function aliases for greater flexibility
* Bump various UI lib versions
* Update docs

interface/src/components/ApplicationError.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Paper, Typography, Box, CssBaseline } from "@material-ui/core";
+import WarningIcon from "@material-ui/icons/Warning"
+
+const styles = makeStyles(
+  {
+    siteErrorPage: {
+      display: "flex",
+      height: "100vh",
+      justifyContent: "center",
+      flexDirection: "column"
+    },
+    siteErrorPagePanel: {
+      textAlign: "center",
+      padding: "280px 0 40px 0",
+      backgroundImage: 'url("/app/icon.png")',
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "50% 40px",
+      backgroundSize: "200px auto",
+      width: "100%",
+    }
+  }
+);
+
+interface ApplicationErrorProps {
+  error?: string;
+}
+
+const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
+  const classes = styles();
+  return (
+    <div className={classes.siteErrorPage}>
+      <CssBaseline />
+      <Paper className={classes.siteErrorPagePanel} elevation={10}>
+        <Box display="flex" flexDirection="row" justifyContent="center">
+          <WarningIcon fontSize="large" color="error" />
+          <Typography variant="h4" gutterBottom>
+            &nbsp;Application error
+          </Typography>
+        </Box>
+        <Typography variant="subtitle1" gutterBottom>
+          Failed to configure the application, please refresh to try again.
+        </Typography>
+        {error &&
+          (
+            <Typography variant="subtitle2" gutterBottom>
+              Error: {error}
+            </Typography>
+          )
+        }
+      </Paper>
+    </div>
+  );
+}
+
+export default ApplicationError;

interface/src/components/FullScreenLoading.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { Typography, Theme } from '@material-ui/core';
+import { makeStyles, createStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  fullScreenLoading: {
+    padding: theme.spacing(2),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100vh",
+    flexDirection: "column"
+  },
+  progress: {
+    margin: theme.spacing(4),
+  }
+}));
+
+const FullScreenLoading = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.fullScreenLoading}>
+      <CircularProgress className={classes.progress} size={100} />
+      <Typography variant="h4">
+        Loading &hellip;
+      </Typography>
+    </div>
+  )
+}
+
+export default FullScreenLoading;

interface/src/components/MenuAppBar.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React, { RefObject, Fragment } from 'react';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
 import { Drawer, AppBar, Toolbar, Avatar, Divider, Button, Box, IconButton } from '@material-ui/core';
@@ -20,6 +20,7 @@ import MenuIcon from '@material-ui/icons/Menu';
 import ProjectMenu from '../project/ProjectMenu';
 import { PROJECT_NAME } from '../api';
 import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+import { withFeatures, WithFeaturesProps } from '../features/FeaturesContext';
 
 const drawerWidth = 290;
 
@@ -82,7 +83,7 @@ interface MenuAppBarState {
   authMenuOpen: boolean;
 }
 
-interface MenuAppBarProps extends AuthenticatedContextProps, WithTheme, WithStyles<typeof styles>, RouteComponentProps {
+interface MenuAppBarProps extends WithFeaturesProps, AuthenticatedContextProps, WithTheme, WithStyles<typeof styles>, RouteComponentProps {
   sectionTitle: string;
 }
 
@@ -114,7 +115,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
   };
 
   render() {
-    const { classes, theme, children, sectionTitle, authenticatedContext } = this.props;
+    const { classes, theme, children, sectionTitle, authenticatedContext, features } = this.props;
     const { mobileOpen, authMenuOpen } = this.state;
     const path = this.props.match.url;
     const drawer = (
@@ -128,9 +129,12 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
           </Typography>
           <Divider absolute />
         </Toolbar>
-        <Divider />
-        <ProjectMenu />
-        <Divider />
+        {features.project && (
+          <Fragment>
+            <ProjectMenu />
+            <Divider />
+          </Fragment>
+        )}
         <List>
           <ListItem to='/wifi/' selected={path.startsWith('/wifi/')} button component={Link}>
             <ListItemIcon>
@@ -144,24 +148,30 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
             </ListItemIcon>
             <ListItemText primary="Access Point" />
           </ListItem>
+          {features.ntp && (
           <ListItem to='/ntp/' selected={path.startsWith('/ntp/')} button component={Link}>
             <ListItemIcon>
               <AccessTimeIcon />
             </ListItemIcon>
             <ListItemText primary="Network Time" />
           </ListItem>
-          <ListItem to='/mqtt/' selected={path.startsWith('/mqtt/')} button component={Link}>
-            <ListItemIcon>
-              <DeviceHubIcon />
-            </ListItemIcon>
-            <ListItemText primary="MQTT" />
-          </ListItem>
-          <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticatedContext.me.admin}>
-            <ListItemIcon>
-              <LockIcon />
-            </ListItemIcon>
-            <ListItemText primary="Security" />
-          </ListItem>
+          )}
+          {features.mqtt && (
+            <ListItem to='/mqtt/' selected={path.startsWith('/mqtt/')} button component={Link}>
+              <ListItemIcon>
+                <DeviceHubIcon />
+              </ListItemIcon>
+              <ListItemText primary="MQTT" />
+            </ListItem>
+          )}
+          {features.security && (
+            <ListItem to='/security/' selected={path.startsWith('/security/')} button component={Link} disabled={!authenticatedContext.me.admin}>
+              <ListItemIcon>
+                <LockIcon />
+              </ListItemIcon>
+              <ListItemText primary="Security" />
+            </ListItem>
+          )}
           <ListItem to='/system/' selected={path.startsWith('/system/')} button component={Link} >
             <ListItemIcon>
               <SettingsIcon />
@@ -172,6 +182,42 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
       </div>
     );
 
+    const userMenu = (
+      <div>
+        <IconButton
+          ref={this.anchorRef}
+          aria-owns={authMenuOpen ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={this.handleToggle}
+          color="inherit"
+        >
+          <AccountCircleIcon />
+        </IconButton>
+        <Popper open={authMenuOpen} anchorEl={this.anchorRef.current} transition className={classes.authMenu}>
+          <ClickAwayListener onClickAway={this.handleClose}>
+            <Card id="menu-list-grow">
+              <CardContent>
+                <List disablePadding>
+                  <ListItem disableGutters>
+                    <ListItemAvatar>
+                      <Avatar>
+                        <AccountCircleIcon />
+                      </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary={"Signed in as: " + authenticatedContext.me.username} secondary={authenticatedContext.me.admin ? "Admin User" : undefined} />
+                  </ListItem>
+                </List>
+              </CardContent>
+              <Divider />
+              <CardActions className={classes.authMenuActions}>
+                <Button variant="contained" fullWidth color="primary" onClick={authenticatedContext.signOut}>Sign Out</Button>
+              </CardActions>
+            </Card>
+          </ClickAwayListener>
+        </Popper>
+      </div>
+    );
+
     return (
       <div className={classes.root}>
         <AppBar position="fixed" className={classes.appBar} elevation={0}>
@@ -188,39 +234,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
             <Typography variant="h6" color="inherit" noWrap className={classes.title}>
               {sectionTitle}
             </Typography>
-            <div>
-              <IconButton
-                ref={this.anchorRef}
-                aria-owns={authMenuOpen ? 'menu-list-grow' : undefined}
-                aria-haspopup="true"
-                onClick={this.handleToggle}
-                color="inherit"
-              >
-                <AccountCircleIcon />
-              </IconButton>
-              <Popper open={authMenuOpen} anchorEl={this.anchorRef.current} transition className={classes.authMenu}>
-                <ClickAwayListener onClickAway={this.handleClose}>
-                  <Card id="menu-list-grow">
-                    <CardContent>
-                      <List disablePadding>
-                        <ListItem disableGutters>
-                          <ListItemAvatar>
-                            <Avatar>
-                              <AccountCircleIcon />
-                            </Avatar>
-                          </ListItemAvatar>
-                          <ListItemText primary={"Signed in as: " + authenticatedContext.me.username} secondary={authenticatedContext.me.admin ? "Admin User" : undefined} />
-                        </ListItem>
-                      </List>
-                    </CardContent>
-                    <Divider />
-                    <CardActions className={classes.authMenuActions}>
-                      <Button variant="contained" fullWidth color="primary" onClick={authenticatedContext.signOut}>Sign Out</Button>
-                    </CardActions>
-                  </Card>
-                </ClickAwayListener>
-              </Popper>
-            </div>
+            {features.security && userMenu}
           </Toolbar>
         </AppBar>
         <nav className={classes.drawer}>
@@ -263,8 +277,10 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
 
 export default withRouter(
   withTheme(
-    withAuthenticatedContext(
-      withStyles(styles)(MenuAppBar)
+    withFeatures(
+      withAuthenticatedContext(
+        withStyles(styles)(MenuAppBar)
+      )
     )
   )
 );

interface/src/components/RestController.tsx

@@ -100,8 +100,8 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
 
       render() {
         return <RestController
-          {...this.props as P}
           {...this.state}
+          {...this.props as P}
           handleValueChange={this.handleValueChange}
           setData={this.setData}
           saveData={this.saveData}