Merge pull request #361 from aehrc/feature/support-embedded

Support embedded launch intent from EHR

apps/smart-forms-app/package.json

@@ -47,7 +47,7 @@
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "6.9.0",
+    "react-router-dom": "6.8.1",
     "react-spinners": "^0.13.8",
     "react-to-print": "^2.14.13",
     "sdc-assemble": "^1.0.1",

apps/smart-forms-app/src/features/dashboard/components/DashboardPages/QuestionnairePage/Buttons/CreateNewResponseButton.tsx

@@ -28,7 +28,6 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 
 function CreateNewResponseButton() {
   const smartClient = useConfigStore((state) => state.smartClient);
-  const setLaunchIntent = useConfigStore((state) => state.setLaunchIntent);
   const buildSourceQuestionnaire = useQuestionnaireStore((state) => state.buildSourceQuestionnaire);
   const buildSourceResponse = useQuestionnaireResponseStore((state) => state.buildSourceResponse);
 
@@ -58,13 +57,6 @@ function CreateNewResponseButton() {
     const questionnaireResponse = createQuestionnaireResponse(questionnaire);
     buildSourceResponse(questionnaireResponse);
 
-    // FIXME this is a hack to test tabs rendering in an embedded browser
-    if (questionnaire.id === 'TestIntentCollapsible') {
-      setLaunchIntent('embedded-browser');
-    } else {
-      setLaunchIntent(null);
-    }
-
     navigate('/renderer');
     setIsLoading(false);
   }
@@ -89,7 +81,8 @@ function CreateNewResponseButton() {
         fontSize={9}
         variant="subtitle2"
         color={buttonIsDisabled ? 'text.disabled' : 'secondary'}
-        sx={{ mt: -0.5, mb: 0.5 }}>
+        sx={{ mt: -0.5, mb: 0.5 }}
+        textAlign="center">
         Create response
       </Typography>
     </Stack>

apps/smart-forms-app/src/features/dashboard/components/DashboardPages/ResponsesPage/Buttons/OpenResponseButton.tsx

@@ -144,6 +144,7 @@ function OpenResponseButton(props: Props) {
         fontSize={9}
         variant="subtitle2"
         color={buttonIsDisabled ? 'text.disabled' : 'secondary'}
+        textAlign="center"
         sx={{ mt: -0.5, mb: 0.5 }}>
         Open Response
       </Typography>

apps/smart-forms-app/src/features/renderer/components/FormPage/Collapsible/FormBodySingleCollapsible.tsx

@@ -51,7 +51,7 @@ const FormBodySingleCollapsible = memo(function FormBodySingleCollapsible(
   return (
     <Accordion
       expanded={selectedIndex === index}
-      TransitionProps={{ unmountOnExit: true }}
+      TransitionProps={{ unmountOnExit: true, timeout: 250 }}
       onChange={() => onToggleExpand(index)}>
       <AccordionSummary
         expandIcon={

apps/smart-forms-app/src/features/renderer/components/RendererEmbeddedSpeedDial.tsx

@@ -17,7 +17,6 @@
 
 import { SpeedDial, SpeedDialAction } from '@mui/material';
 import BuildIcon from '@mui/icons-material/Build';
-import GradingIcon from '@mui/icons-material/Grading';
 import { useNavigate } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 import EditIcon from '@mui/icons-material/Edit';
@@ -32,16 +31,19 @@ import TaskAltIcon from '@mui/icons-material/TaskAlt';
 import { useState } from 'react';
 import RendererSaveAsFinalDialog from './RendererNav/SaveAsFinal/RendererSaveAsFinalDialog.tsx';
 import HomeIcon from '@mui/icons-material/Home';
+import GradingIcon from '@mui/icons-material/Grading';
 
 interface RendererEmbeddedSpeedDialProps {
   isPopulating: boolean;
 }
+
 function RendererEmbeddedSpeedDial(props: RendererEmbeddedSpeedDialProps) {
   const { isPopulating } = props;
 
   const smartClient = useConfigStore((state) => state.smartClient);
   const patient = useConfigStore((state) => state.patient);
   const user = useConfigStore((state) => state.user);
+  const launchQuestionnaire = useConfigStore((state) => state.launchQuestionnaire);
 
   const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
   const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
@@ -58,11 +60,6 @@ function RendererEmbeddedSpeedDial(props: RendererEmbeddedSpeedDialProps) {
   const navigate = useNavigate();
   const { closeSnackbar } = useSnackbar();
 
-  function handleViewResponses() {
-    closeSnackbar();
-    navigate('/dashboard/responses');
-  }
-
   function handlePreview() {
     if (location.pathname === '/renderer/preview') {
       navigate('/renderer');
@@ -106,6 +103,7 @@ function RendererEmbeddedSpeedDial(props: RendererEmbeddedSpeedDialProps) {
   }
 
   const showSaveButtons = smartClient && sourceQuestionnaire.item;
+  const launchQuestionnaireExists = !!launchQuestionnaire;
 
   if (isPopulating) {
     return null;
@@ -122,20 +120,27 @@ function RendererEmbeddedSpeedDial(props: RendererEmbeddedSpeedDialProps) {
           '& .MuiFab-primary': { width: 46, height: 46 }
         }}
         icon={<BuildIcon />}>
-        <SpeedDialAction
-          icon={<HomeIcon />}
-          tooltipTitle="Back to Home (Debug)"
-          tooltipOpen
-          onClick={() => {
-            navigate('/dashboard/questionnaires');
-          }}
-        />
-        <SpeedDialAction
-          icon={<GradingIcon />}
-          tooltipTitle="View Existing Responses"
-          tooltipOpen
-          onClick={handleViewResponses}
-        />
+        {launchQuestionnaireExists ? (
+          <SpeedDialAction
+            icon={<GradingIcon />}
+            tooltipTitle="View Existing Responses"
+            tooltipOpen
+            onClick={() => {
+              closeSnackbar();
+              navigate('/dashboard/existing');
+            }}
+          />
+        ) : (
+          <SpeedDialAction
+            icon={<HomeIcon />}
+            tooltipTitle="Back to Home"
+            tooltipOpen
+            onClick={() => {
+              closeSnackbar();
+              navigate('/dashboard/questionnaires');
+            }}
+          />
+        )}
         <SpeedDialAction
           icon={location.pathname === '/renderer/preview' ? <EditIcon /> : <VisibilityIcon />}
           tooltipTitle={location.pathname === '/renderer/preview' ? 'Editor' : 'Preview'}

apps/smart-forms-app/src/features/smartAppLaunch/components/Authorisation.tsx

@@ -19,6 +19,7 @@ import { useEffect, useReducer } from 'react';
 import { oauth2 } from 'fhirclient';
 import {
   getEncounter,
+  getLaunchIntent,
   getPatient,
   getQuestionnaireContext,
   getQuestionnaireReferences,
@@ -76,6 +77,7 @@ function Authorisation() {
   const setUser = useConfigStore((state) => state.setUser);
   const setEncounter = useConfigStore((state) => state.setEncounter);
   const setLaunchQuestionnaire = useConfigStore((state) => state.setLaunchQuestionnaire);
+  const setLaunchIntent = useConfigStore((state) => state.setLaunchIntent);
 
   const buildSourceQuestionnaire = useQuestionnaireStore((state) => state.buildSourceQuestionnaire);
 
@@ -174,6 +176,11 @@ function Authorisation() {
           } else {
             dispatch({ type: 'UPDATE_HAS_QUESTIONNAIRE', payload: false });
           }
+
+          // Set launch intent if available
+          if (getLaunchIntent(client)) {
+            setLaunchIntent(getLaunchIntent(client));
+          }
         })
         .catch((error: Error) => {
           // Prompt user to launch app if app is unlaunched

apps/smart-forms-app/src/features/smartAppLaunch/utils/launch.ts

@@ -51,12 +51,13 @@ interface FhirContext {
   identifier?: Identifier;
 }
 
-interface tokenResponseWithFhirContext extends fhirclient.TokenResponse {
-  fhirContext: FhirContext[] | undefined;
+interface tokenResponseCustomised extends fhirclient.TokenResponse {
+  fhirContext?: FhirContext[];
+  intent?: string;
 }
 
 export function getQuestionnaireReferences(client: Client): FhirContext[] {
-  const tokenResponse = client.state.tokenResponse as tokenResponseWithFhirContext;
+  const tokenResponse = client.state.tokenResponse as tokenResponseCustomised;
   const fhirContext = tokenResponse.fhirContext;
 
   if (!fhirContext) return [];
@@ -115,3 +116,10 @@ export function responseToQuestionnaireResource(
     console.error(response);
   }
 }
+
+export function getLaunchIntent(client: Client): string | null {
+  const tokenResponse = client.state.tokenResponse as tokenResponseCustomised;
+  const launchIntent = tokenResponse.intent;
+
+  return launchIntent ?? null;
+}

apps/smart-forms-app/src/features/viewer/ResponsePreview.tsx

@@ -68,7 +68,7 @@ function ResponsePreview() {
         <title>{questionnaire.title ? questionnaire.title : 'Response Preview'}</title>
       </Helmet>
       <Fade in={true} timeout={500}>
-        <Container sx={{ mt: 2 }}>
+        <Container>
           <PageHeading>Response Preview</PageHeading>
           <Card sx={{ mb: 2 }}>
             <Box ref={componentRef} sx={{ p: 4 }} data-test="response-preview-box">

apps/smart-forms-app/src/theme/overrides/SpeedDial.ts

@@ -27,7 +27,7 @@ export default function SpeedDial(theme: Theme) {
           fontSize: theme.typography.subtitle2.fontSize,
           fontWeight: theme.typography.subtitle2.fontWeight,
           boxShadow: theme.customShadows.z8,
-          maxWidth: 150,
+          maxWidth: 200,
           whiteSpace: 'nowrap'
         }
       }