CARDS-1741: Add a "PageStart" extension point to the patient UI

modules/data-entry/src/main/frontend/src/questionnaire/ResourceHeader.jsx

@@ -33,6 +33,8 @@ import makeStyles from '@mui/styles/makeStyles';
 import { grey } from '@mui/material/colors';
 
 import { GRID_SPACE_UNIT } from "./QuestionnaireStyle";
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 
 const useStyles = makeStyles(theme => ({
     resourceHeader: {
@@ -100,6 +102,8 @@ function ResourceHeader (props) {
   let { title, breadcrumbs, separator, tags, action, children } = props;
 
   const classes = useStyles();
+  const theme = useTheme();
+  const appbarExpanded = useMediaQuery(theme.breakpoints.up('md'));
 
   // Scroll trigger for collapsing the Title and action into the breadcrumbs
   const fullBreadcrumbTrigger = useScrollTrigger({
@@ -110,7 +114,7 @@ function ResourceHeader (props) {
 
   return (
     <>
-    <Grid item xs={12} className={classes.resourceHeader} style={{top: props.contentOffset}} id="cards-resource-header">
+    <Grid item xs={12} className={classes.resourceHeader} style={ { top: appbarExpanded ? props.contentOffset: 0 }} id="cards-resource-header">
       <Grid container direction="row" justifyContent="space-between" alignItems="center" wrap="nowrap">
         <Grid item>
           <Breadcrumbs separator={separator}>

modules/demo-banner/pom.xml

@@ -45,6 +45,7 @@
             <Sling-Initial-Content>
               SLING-INF/content/Extensions/PageStart/;path:=/Extensions/PageStart/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/LoginPageStart/;path:=/Extensions/LoginPageStart/;overwriteProperties:=true;uninstall:=true,
+              SLING-INF/content/Extensions/SurveyPageStart/;path:=/Extensions/SurveyPageStart/;overwriteProperties:=true;uninstall:=true
             </Sling-Initial-Content>
           </instructions>
         </configuration>

modules/demo-banner/src/main/frontend/src/demoBanner.jsx

@@ -32,7 +32,11 @@ import WarningIcon from '@mui/icons-material/Warning';
 
 const appbarStyle = theme => ({
   root: {
-    backgroundColor: theme.palette.warning.main
+    backgroundColor: theme.palette.warning.main,
+    boxShadow: "none",
+    [theme.breakpoints.down('md')]: {
+      position: 'absolute',
+    },
   }
 });
 

modules/demo-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/WarningBanner.json

@@ -0,0 +1,6 @@
+{
+  "jcr:primaryType": "cards:Extension",
+  "cards:extensionPointId": "patient-portal/surveyPageStart",
+  "cards:extensionName": "Demo Warning Banner",
+  "cards:extensionRenderURL": "asset:cards-demo-banner.demoBanner.js"
+}

modules/downtime-warning-banner/pom.xml

@@ -43,6 +43,7 @@
               SLING-INF/content/apps/cards/config/;path:=/apps/cards/config/;overwrite:=false,
               SLING-INF/content/Extensions/PageStart/;path:=/Extensions/PageStart/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/LoginPageStart/;path:=/Extensions/LoginPageStart/;overwriteProperties:=true;uninstall:=true,
+              SLING-INF/content/Extensions/SurveyPageStart/;path:=/Extensions/SurveyPageStart/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/AdminDashboard/;path:=/Extensions/AdminDashboard/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/Views/;path:=/Extensions/Views/;overwriteProperties:=true;uninstall:=true,
             </Sling-Initial-Content>

modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx

@@ -34,6 +34,10 @@ import BuildIcon from '@mui/icons-material/Build';
 const appbarStyle = theme => ({
   root: {
     backgroundColor: theme.palette.info.main,
+    boxShadow: "none",
+    [theme.breakpoints.down('md')]: {
+      position: 'absolute',
+    },
     "& .MuiAvatar-root" : {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.info.main
@@ -68,11 +72,11 @@ export default function DowntimeWarning(props) {
         setEnabled(json.enabled == 'true');
         if (json.fromDate) {
           let date = new Date(json.fromDate);
-          setFromDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
+          (date != "Invalid Date") && setFromDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
         }
         if (json.toDate) {
           let date = new Date(json.toDate);
-          setToDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
+          (date != "Invalid Date") && setToDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
         }
       })
       .catch((error) => {
@@ -88,7 +92,7 @@ export default function DowntimeWarning(props) {
     <StyledAppBar position="fixed" style={props.style} ref={props.onRender}>
       <Toolbar>
       {error && <Typography color='error'>{errorText}</Typography>}
-      <Grid container spacing={1} direction="row" alignItems="center" wrap="nowrap">
+      <Grid container spacing={1} direction="row" justifyContent="center" alignItems="center" wrap="nowrap">
         <Grid item><Avatar><BuildIcon/></Avatar></Grid>
         <Grid item>
         <Typography variant="body2">

modules/downtime-warning-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/DowntimeWarningBanner.json

@@ -0,0 +1,6 @@
+{
+  "jcr:primaryType": "cards:Extension",
+  "cards:extensionPointId": "patient-portal/surveyPageStart",
+  "cards:extensionName": "Downtime Warning Banner",
+  "cards:extensionRenderURL": "asset:cards-downtime-warning-banner.downtimeBanner.js"
+}

modules/homepage/src/main/frontend/src/themePage/Sidebar/sidebar.jsx

@@ -144,7 +144,7 @@ const Sidebar = ({ ...props }) => {
           PaperProps={ { style: { top: contentOffset + 'px', height: 'calc(100% - ' + contentOffset + 'px)' } } }
         >
           {brand}
-          <div className={classes.sidebarWrapper}>
+          <div className={classes.sidebarWrapper} style={ { height: 'calc(100vh - ' + (75 + contentOffset) + 'px)' } }>
             <AdminNavbarLinks closeSidebar={props.handleDrawerToggle}/>
             {links}
             {adminLinks}

modules/login/src/main/frontend/src/styling/styles.js

@@ -33,7 +33,7 @@ const styles = theme => ({
     padding: theme.spacing(2, 3, 3),
   },
   selfContained: {
-    marginTop: theme.spacing(10),
+    marginTop: theme.spacing(14),
     marginBottom: theme.spacing(2),
   },
   logo: {

modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx

@@ -0,0 +1,55 @@
+//
+//  Licensed to the Apache Software Foundation (ASF) under one
+//  or more contributor license agreements.  See the NOTICE file
+//  distributed with this work for additional information
+//  regarding copyright ownership.  The ASF licenses this file
+//  to you 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 React, { useState } from "react";
+import PropTypes from 'prop-types';
+import PageStart from './PageStart';
+
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
+
+let PageStartWrapper = (props) => {
+  let { children, extensionsName } = {...props};
+  const [ contentOffset, setContentOffset ] = useState(0);
+
+  const theme = useTheme();
+  const appbarExpanded = useMediaQuery(theme.breakpoints.up('md'));
+
+  return (<>
+      <PageStart
+        extensionsName={extensionsName}
+        setTotalHeight={(th) => {
+              if (contentOffset != th) {
+                setContentOffset(th);
+              }
+            }
+        }
+      />
+      <div id="page-start-wrapper-content" style={ { position: appbarExpanded ? 'relative' : 'absolute', top: contentOffset + 'px' } }>
+       { children }
+     </div>
+   </>
+  );
+}
+
+PageStartWrapper.propTypes = {
+  extensionsName: PropTypes.string,
+};
+
+export default PageStartWrapper;

modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx

@@ -16,7 +16,7 @@
 //  specific language governing permissions and limitations
 //  under the License.
 //
-import React, { useState } from "react";
+import React from "react";
 import {
   AppBar,
   Breadcrumbs,
@@ -29,11 +29,16 @@ import {
   useScrollTrigger,
 } from "@mui/material";
 
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
   appbar : {
     margin: theme.spacing(-1, -1, 4),
+    [theme.breakpoints.down('md')]: {
+      margin: theme.spacing(0, -1),
+    },
     padding: theme.spacing(0, 1),
     boxSizing: "content-box",
     background: "transparent",
@@ -85,6 +90,10 @@ function Header (props) {
     threshold: 250,
   });
 
+  const theme = useTheme();
+  const appbarExpanded = useMediaQuery(theme.breakpoints.up('md'));
+  const contentOffset = document?.getElementById('page-start-wrapper-content')?.style.top || 0;
+
   let subtitleBar = subtitle ?
     <Toolbar variant="dense" className={classes.toolbar}>
       <Typography variant="h6" color="textPrimary">{ subtitle }</Typography>
@@ -94,7 +103,7 @@ function Header (props) {
 
   return (
     <>
-    <AppBar position="sticky" className={classes.appbar}>
+    <AppBar position="sticky" className={classes.appbar} style={ { top: appbarExpanded ? contentOffset: 0 }}>
       <Collapse in={!subtitle || !(scrollTrigger)}>
         <Toolbar variant="dense" className={classes.toolbar}>
           <div className={classes.titleLine}>

modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx

@@ -26,6 +26,7 @@ import QuestionnaireSet from "./QuestionnaireSet.jsx";
 import PatientIdentification from "./PatientIdentification.jsx";
 import Footer from "./Footer.jsx";
 import ErrorPage from "../components/ErrorPage.jsx";
+import PageStartWrapper from '../PageStartWrapper';
 
 import { DEFAULT_INSTRUCTIONS, SURVEY_INSTRUCTIONS_PATH } from "./SurveyInstructionsConfiguration.jsx"
 
@@ -88,25 +89,32 @@ function PatientPortalHomepage (props) {
     let appName = document.querySelector('meta[name="title"]')?.content;
     let message = surveyInstructions?.welcomeMessage?.replaceAll("APP_NAME", appName) || '';
     message = `${message}\n\n### To fill out surveys, please follow the personalized link that was emailed to you.`;
-    return (
-      <ErrorPage
-        sx={{maxWidth: 500, margin: "0 auto"}}
-        title=""
-        message={message}
-        messageColor="textPrimary"
-      />)
+    return (<>
+      <PageStartWrapper extensionsName="SurveyPageStart">
+        <ErrorPage
+          sx={{maxWidth: 500, margin: "0 auto"}}
+          title=""
+          message={message}
+          messageColor="textPrimary"
+        />
+      </PageStartWrapper>
+    </>)
   }
 
   if (!subject) {
     return (<>
-      <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText}/>
-      <Footer />
+      <PageStartWrapper extensionsName="SurveyPageStart">
+        <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText} />
+        <Footer />
+      </PageStartWrapper>
     </>);
   }
 
   return (<>
-    <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
-    <Footer />
+    <PageStartWrapper extensionsName="SurveyPageStart">
+      <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
+      <Footer />
+    </PageStartWrapper>
   </>);
 }
 

modules/patient-portal/src/main/resources/SLING-INF/content/apps/cards/ExtensionPoints/SurveyPageStart.json

@@ -0,0 +1,5 @@
+{
+  "jcr:primaryType": "cards:ExtensionPoint",
+  "cards:extensionPointId": "patient-portal/surveyPageStart",
+  "cards:extensionPointName": "Content to be displayed on the top of the Patient Portal"
+}