CSSTUDIO-2180: add help page

README.md

@@ -55,6 +55,11 @@ Note that `REACT_APP_*` variables are [only embedded during build time](https://
 | -------------------------|-------------|
 | REACT_APP_BASE_URL       | The [Phoebus Olog Backend](https://github.com/Olog/phoebus-olog) base URL (for example: `http://localhost:8080/Olog`). Default is the same host as the frontend; e.g. `http://localhost:3000` |
 | REACT_APP_ENABLE_BETA    | Enables the Beta UI features if set to `"true"`. Disabled by default. |
+| REACT_APP_DOCS_HREF      | URL where more information can be found on Olog, shown on Help page; 
+default is `https://olog.readthedocs.io/en/latest/` |
+| REACT_APP_SUPPORT_HREF   | URL where support can be found for Olog. Shown on Help page only if provided. |
+| REACT_APP_VERSION        | Version string for Olog; default is the version defined in `package.json`. |
+| REACT_APP_VERSION_HREF   | URL where this version of Olog can be found. Shown on Help page only if provided. |
 
 ## Development 
 

src/api/ologApi.js

@@ -19,11 +19,10 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { withoutCacheBust } from "hooks/useSanitizedSearchParams";
 import customization from "config/customization";
-import packageInfo from '../../package.json';
 import { useCallback } from "react";
 
 export function ologClientInfoHeader() {
-    return {"X-Olog-Client-Info": "Olog Web " + packageInfo.version + " on " + window.navigator.userAgent}
+    return {"X-Olog-Client-Info": "Olog Web " + customization.VERSION + " on " + window.navigator.userAgent}
 }
 
 export const removeEmptyKeys = (obj, exceptions=[]) => {

src/beta/components/navigation/AppNavBar/AppNavBar.js

@@ -22,13 +22,14 @@ import Initialize from "components/Initialize";
 import { InternalButtonLink } from "components/shared/Link";
 import { useShowLogin, useUser } from "features/authSlice";
 import React from "react";
-import packageInfo from "../../../../../package.json";
 import UserMenu from "./UserMenu";
 import LoginDialog from "components/LoginLogout/LoginDialog";
 import LogoutDialog from "components/LoginLogout/LogoutDialog";
 import LockIcon from '@mui/icons-material/Lock';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import HomeIcon from '@mui/icons-material/Home';
+import HelpCenterIcon from '@mui/icons-material/HelpCenter';
+import customization from "config/customization";
 
 const AppNavBar = () => {
 
@@ -55,35 +56,48 @@ const AppNavBar = () => {
                                         <HomeIcon titleAccess="home" />
                                     </IconButton>
                                     <Typography variant="h6" component="span" >
-                                        {packageInfo.name}
+                                        {customization.NAME}
                                         {" "}
                                         <Typography component="span" variant="body2">
-                                            {packageInfo.version}
+                                            {customization.VERSION}
                                         </Typography>
                                     </Typography>
                                 </Stack>
                             </ListItem>
                         </List>
                     </nav>
-                    <nav aria-label="user menu">
+                    <Stack flexDirection="row">
+                      <nav aria-label="help menu">
                         <List sx={{
-                            display: "flex"
+                          display: "flex"
                         }}>
-                            { user ? 
-                                <ListItem>
-                                    <InternalButtonLink to="/beta/logs/create" color="inherit" startIcon={<AddCircleIcon />}>
-                                        New Entry
-                                    </InternalButtonLink> 
-                                </ListItem> : null
-                            }
-                            <ListItem>
-                                { user?.userName 
-                                    ? <UserMenu user={user} />
-                                    : <Button onClick={() => setShowLogin(true)} variant="outlined" color="inherit" startIcon={<LockIcon />} >Sign In</Button>
-                                }
-                            </ListItem>
+                          <ListItem>
+                            <IconButton component={RouterLink} to="/beta/help" color="inherit" >
+                              <HelpCenterIcon titleAccess="help" />
+                            </IconButton>
+                          </ListItem>
                         </List>
-                    </nav>
+                      </nav>
+                      <nav aria-label="user menu">
+                          <List sx={{
+                            display: "flex"
+                          }}>
+                              { user ? 
+                                  <ListItem>
+                                      <InternalButtonLink to="/beta/logs/create" color="inherit" startIcon={<AddCircleIcon />}>
+                                          New Entry
+                                      </InternalButtonLink> 
+                                  </ListItem> : null
+                              }
+                              <ListItem>
+                                  { user?.userName 
+                                      ? <UserMenu user={user} />
+                                      : <Button onClick={() => setShowLogin(true)} variant="outlined" color="inherit" startIcon={<LockIcon />} >Sign In</Button>
+                                  }
+                              </ListItem>
+                          </List>
+                      </nav>
+                    </Stack>
                 </Toolbar>
                 <LoginDialog />
                 <LogoutDialog />

src/components/Banner/Banner.js

@@ -21,10 +21,12 @@ import LoginDialog from '../LoginLogout/LoginDialog';
 import LogoutDialog from '../LoginLogout/LogoutDialog';
 import packageInfo from '../../../package.json';
 import SkipToContent from 'components/shared/SkipToContent';
-import { AppBar, Toolbar, Typography, Button, Link as MuiLink, List, ListItem, Stack, Box } from '@mui/material';
+import { AppBar, Toolbar, Typography, Button, Link as MuiLink, List, ListItem, Stack, Box, IconButton } from '@mui/material';
+import { Link as RouterLink } from "react-router-dom";
 import { InternalButtonLink } from "components/shared/Link";
 import { useShowLogin, useShowLogout, useUser } from "features/authSlice";
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import HelpCenterIcon from '@mui/icons-material/HelpCenter';
 import customization from "config/customization";
 
 /**
@@ -71,7 +73,7 @@ export const Banner = () => {
             <ListItem display="flex">
               <MuiLink component={Link} to="/" aria-label='home' sx={{ color: "ologWhite.main", textDecoration: "none !important"}}>
                 <Typography variant="h6" component="p">{packageInfo.name}</Typography>
-                <Typography variant="body2">{packageInfo.version}</Typography>
+                <Typography variant="body2">{customization.VERSION}</Typography>
               </MuiLink>
             </ListItem>
             <ListItem>
@@ -99,6 +101,17 @@ export const Banner = () => {
               </List>
             </Box> : null
           }
+          <nav aria-label="help menu">
+            <List sx={{
+              display: "flex"
+            }}>
+              <ListItem>
+                <IconButton component={RouterLink} to="/help" color="inherit" >
+                  <HelpCenterIcon titleAccess="help" />
+                </IconButton>
+              </ListItem>
+            </List>
+          </nav>
           <nav aria-label="user menu">
             <List>
               <ListItem>

src/components/shared/Help.js

@@ -0,0 +1,76 @@
+import { Box, Stack, Typography, styled } from "@mui/material";
+import React from "react";
+import { ExternalLink } from "./Link";
+
+export const Help = styled(
+  ({ summary, docsHref, supportHref, version, versionHref, className }) => {
+    return (
+      <Stack className={className} gap={1}>
+        <Box>
+          <Typography variant="h2">About</Typography>
+          {typeof summary === "string" ? (
+            <Typography>{summary}</Typography>
+          ) : (
+            summary
+          )}
+        </Box>
+        {supportHref || docsHref ? 
+          <Box>
+            {docsHref ? 
+              <>
+                <Typography variant="h2">Support</Typography>
+                <Typography
+                  display="flex"
+                  gap={0.5}
+                >
+                  Want more information about this app?
+                  <ExternalLink
+                    href={docsHref}
+                    label="Visit the documentation to learn more"
+                  >
+                    Read the docs
+                  </ExternalLink>
+                </Typography>
+              </> : null
+            }
+            {
+              supportHref ? 
+              <>
+                <Typography
+                  display="flex"
+                  gap={0.5}
+                >
+                  Experiencing issues or want to suggest an improvement?
+                  <ExternalLink
+                    href={supportHref}
+                    label="Report an issue or improvement with the support desk"
+                  >
+                    Contact support
+                  </ExternalLink>
+                </Typography>
+              </> : null
+            }
+          </Box> : null
+        }
+        {
+          versionHref && version ? 
+          <Box>
+            <Typography
+              fontWeight="bold"
+              display="flex"
+              gap={0.5}
+            >
+              Version:
+              <ExternalLink
+                href={versionHref}
+                label={`version ${version}`}
+              >
+                {version}
+              </ExternalLink>
+            </Typography>
+          </Box> : null
+        }
+      </Stack>
+    );
+  }
+)({});

src/config/customization.js

@@ -16,7 +16,11 @@
  * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
  */
 
+import packageInfo from '../../package.json';
+
 let customization = {
+
+    NAME: packageInfo.name,
     /**
      * The name of the "level" (legacy name) meta data field.
      */
@@ -92,7 +96,15 @@ let customization = {
     /**
      * Enable/Disable the beta feature
      */
-    ENABLE_BETA: process.env.REACT_APP_ENABLE_BETA === "true"
+    ENABLE_BETA: process.env.REACT_APP_ENABLE_BETA === "true",
+
+    /**
+     * Support and Docs URLs for Help page
+     */
+    DOCS_HREF: process.env.REACT_APP_DOCS_HREF ?? "https://olog.readthedocs.io/en/latest/",
+    SUPPORT_HREF: process.env.REACT_APP_SUPPORT_HREF,
+    VERSION: process.env.REACT_APP_VERSION ?? packageInfo.version,
+    VERSION_HREF: process.env.REACT_APP_VERSION_HREF
 }
 
 export default customization;

src/providers/RouterProvider.js

@@ -10,6 +10,7 @@ import {
 import App from "views/App";
 import CreateLogView from "views/CreateLogView";
 import EditLogView from "views/EditLogView";
+import { HelpView } from "views/HelpView";
 import LogHistoryView from "views/LogHistoryView";
 import NotFoundView from "views/NotFoundView";
 import ReplyLogView from "views/ReplyLogView";
@@ -48,6 +49,10 @@ export const routes = [
                 path: "error-test",
                 element: <TestErrorView />
             },
+            {
+              path: "help",
+              element: <HelpView />
+            },
             {
                 path: "*",
                 element: <NotFoundView />
@@ -87,6 +92,10 @@ export const routes = [
                 path: "error-test",
                 element: <TestErrorView />
             },
+            {
+              path: "help",
+              element: <HelpView />
+            },
             {
                 path: "/beta/*",
                 element: <NotFoundView homeHref="/beta" />

src/views/HelpView.js

@@ -0,0 +1,24 @@
+import { Box } from "@mui/material";
+import { Help } from "components/shared/Help";
+import customization from "config/customization";
+import React from "react";
+
+export const HelpView = () => {
+
+  const summary=`
+    OLOG (Online Logbook Service) allows for the creation and retrieval of log entries.
+    This service was developed to address the needs of operators, engineers, and users of large scientific facilities.
+  `;
+
+  return (
+    <Box paddingX={3}>
+      <Help 
+        summary={summary}
+        docsHref={customization.DOCS_HREF} 
+        supportHref={customization.SUPPORT_HREF}
+        version={customization.VERSION}
+        versionHref={customization.VERSION_HREF}
+      />
+    </Box>
+  );
+};