Add quick links in not found page

aehrc · Nov 6, 2023 · 90500ca · 90500ca
1 parent c49cc60
commit 90500ca
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 16 deletions.
diff --git a/apps/smart-forms-app/src/components/Button/ReauthenticateButton.tsx b/apps/smart-forms-app/src/components/Button/ReauthenticateButton.tsx
@@ -7,7 +7,6 @@ function ReauthenticateButton() {
   return (
     <Button
       variant="contained"
-      sx={{ mt: 4 }}
       onClick={() => {
         navigate('/');
       }}

diff --git a/apps/smart-forms-app/src/components/Logos/Logo.styles.ts b/apps/smart-forms-app/src/components/Logos/Logo.styles.ts
@@ -20,7 +20,7 @@ import { Box } from '@mui/material';
 
 export const LogoWrapper = styled(Box)({ padding: '8px', display: 'inline-flex' });
 export const NavLogoWrapper = styled(Box)({
-  padding: '24px 20px 24px 20px',
+  padding: '16px 20px 24px 20px',
   display: 'inline-flex'
 });
 

diff --git a/apps/smart-forms-app/src/features/notfound/NotFound.tsx b/apps/smart-forms-app/src/features/notfound/NotFound.tsx
@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 
-import CenteredWrapper from '../../components/Wrapper/CenteredWrapper.tsx';
-import { Stack, Typography } from '@mui/material';
-import UnlaunchedButton from '../../components/Button/UnlaunchedButton.tsx';
-import ReauthenticateButton from '../../components/Button/ReauthenticateButton.tsx';
+import { Box, Container, Stack, Typography } from '@mui/material';
 import useSmartClient from '../../hooks/useSmartClient.ts';
+import Logo from '../../components/Logos/Logo.tsx';
+import csiroLogo from '../../data/images/csiro-logo.png';
+import NotFoundSelections from './NotFoundSelections.tsx';
 
 function NotFound() {
   const { smartClient } = useSmartClient();
@@ -29,17 +29,25 @@ function NotFound() {
   const authSessionFound = isNotLaunched && sessionStorage.getItem('authorised') === 'true';
 
   return (
-    <CenteredWrapper>
-      <Stack rowGap={2}>
-        <Typography variant="h3">Error 404</Typography>
-        <Typography fontSize={13}>
-          {authSessionFound
-            ? "We couldn't find the page you were looking for, but we detected a recent auth session. You would need to be re-authenticated. Do you want to try re-authenticating?"
-            : "We couldn't find the page you were looking for. Do you want to go back to the home page?"}
-        </Typography>
+    <>
+      <Box display="flex" px={2.5} pt={2}>
+        <Logo />
+        <Box flexGrow={1} />
+        <Box display="flex" alignItems="center" columnGap={1}>
+          <Typography sx={{ color: 'text.secondary' }}>By</Typography>
+          <Box component="img" maxHeight={35} maxWidth={35} src={csiroLogo} />
+        </Box>
+      </Box>
+
+      <Stack justifyContent="center" alignItems="center" sx={{ height: 'calc(100% - 72px)' }}>
+        <Container>
+          <Typography variant="h2" mb={2.5}>
+            Error 404
+          </Typography>
+          <NotFoundSelections authSessionFound={authSessionFound} />
+        </Container>
       </Stack>
-      {authSessionFound ? <ReauthenticateButton /> : <UnlaunchedButton />}
-    </CenteredWrapper>
+    </>
   );
 }
 

diff --git a/apps/smart-forms-app/src/features/notfound/NotFoundQuickLinks.tsx b/apps/smart-forms-app/src/features/notfound/NotFoundQuickLinks.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { Box, Card, Grid, IconButton, Stack, Typography } from '@mui/material';
+import GridViewIcon from '@mui/icons-material/GridView';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
+import StorageIcon from '@mui/icons-material/Storage';
+import DataSaverOnIcon from '@mui/icons-material/DataSaverOn';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import MenuBookIcon from '@mui/icons-material/MenuBook';
+
+interface QuickLinkCardProps {
+  title: string;
+  description: string;
+  link: string;
+  icon: ReactNode;
+}
+
+const quickLinkCards: QuickLinkCardProps[] = [
+  {
+    title: 'App Dashboard',
+    description: 'View, create and edit responses from FHIR questionnaires.',
+    link: 'https://smartforms.csiro.au',
+    icon: <GridViewIcon fontSize="large" color="primary" />
+  },
+  {
+    title: 'FHIR Implementation Guide',
+    description: 'A FHIR Implementation Guide to support the use of Smart Forms.',
+    link: 'https://smartforms.csiro.au/ig',
+    icon: <LocalFireDepartmentIcon fontSize="large" color="primary" />
+  },
+  {
+    title: 'Forms Server FHIR API',
+    description: 'A Questionnaire-hosting FHIR API which supports the $assemble operation.',
+    link: 'https://smartforms.csiro.au/fhir',
+    icon: <StorageIcon fontSize="large" color="primary" />
+  },
+  {
+    title: 'EHR Launch Simulator',
+    description: 'A minimal EHR testbed (SMART Launcher fork) for launching SMART apps.',
+    link: 'https://smartforms.csiro.au/ehr',
+    icon: <DataSaverOnIcon fontSize="large" color="primary" />
+  },
+  {
+    title: 'GitHub',
+    description: 'View the GitHub page for this open-source project.',
+    link: 'https://github.com/aehrc/smart-forms',
+    icon: <GitHubIcon fontSize="large" color="primary" />
+  }
+];
+
+function NotFoundQuickLinks() {
+  return (
+    <Grid container spacing={2}>
+      {quickLinkCards.map((card) => (
+        <Grid key={card.link} item xs={12} sm={6} md={4}>
+          <Card sx={{ p: 3, pb: 2.5, height: '100%' }}>
+            <Stack justifyContent="space-between" height="inherit">
+              <Grid container spacing={1}>
+                <Grid item xs={2}>
+                  {card.icon}
+                </Grid>
+                <Grid item xs={10}>
+                  <Typography variant="h5" mb={1}>
+                    {card.title}
+                  </Typography>
+                  <Typography>{card.description}</Typography>
+                </Grid>
+              </Grid>
+              <Box display="flex" flexDirection="row-reverse">
+                <IconButton color="primary" href={card.link}>
+                  <ArrowForwardIcon />
+                </IconButton>
+              </Box>
+            </Stack>
+          </Card>
+        </Grid>
+      ))}
+      <Grid item xs={12} sm={6} md={4}>
+        <Card sx={{ p: 3, pb: 2.5, height: '100%' }}>
+          <Stack justifyContent="space-between" height="inherit">
+            <Grid container spacing={1}>
+              <Grid item xs={2}>
+                <MenuBookIcon fontSize="large" color="primary" />
+              </Grid>
+              <Grid item xs={10}>
+                <Typography variant="h5" mb={1}>
+                  Developer Documentation
+                </Typography>
+                <Typography color="text.disabled">Coming soon!</Typography>
+              </Grid>
+            </Grid>
+            <Box display="flex" flexDirection="row-reverse">
+              <IconButton color="primary" disabled>
+                <ArrowForwardIcon />
+              </IconButton>
+            </Box>
+          </Stack>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default NotFoundQuickLinks;
diff --git a/apps/smart-forms-app/src/features/notfound/NotFoundSelections.tsx b/apps/smart-forms-app/src/features/notfound/NotFoundSelections.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Box, Stack, Typography } from '@mui/material';
+import ReauthenticateButton from '../../components/Button/ReauthenticateButton.tsx';
+import NotFoundQuickLinks from './NotFoundQuickLinks.tsx';
+
+interface NotFoundSelectionsProps {
+  authSessionFound: boolean;
+}
+
+function NotFoundSelections(props: NotFoundSelectionsProps) {
+  const { authSessionFound } = props;
+
+  if (authSessionFound) {
+    return (
+      <>
+        <Stack rowGap={1.5}>
+          <Typography fontSize={15}>
+            {
+              "We couldn't find the page you were looking for, but we detected a recent authorisation session."
+            }
+          </Typography>
+          <Typography fontSize={15}>
+            You would need to be re-authenticated. Do you want to try re-authenticating?
+          </Typography>
+        </Stack>
+        <Box mt={4} />
+        <ReauthenticateButton />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Stack rowGap={1.5} mb={5}>
+        <Typography fontSize={14}>{"We couldn't find what you were looking for."}</Typography>
+
+        <Typography fontSize={14}>
+          Use the quick links below to navigate to the page you were looking for.
+        </Typography>
+      </Stack>
+
+      <NotFoundQuickLinks />
+    </>
+  );
+}
+
+export default NotFoundSelections;