Merge pull request #541 from IABTechLab/ans-UID2-3992-better-ux-when-…

…no-participant-access

Better ux when user does not have access to a participant

src/api/middleware/participantsMiddleware.ts

@@ -18,13 +18,10 @@ export const verifyAndEnrichParticipant = async (
   const traceId = getTraceId(req);
   const userEmail = req.auth?.payload?.email as string;
 
-  const participant = await Participant.query().findById(participantId).withGraphFetched('types');
-  if (!participant) {
-    return res.status(404).send([{ message: 'The participant cannot be found.' }]);
-  }
+  let participant = await Participant.query().findById(participantId).withGraphFetched('types');
 
   if (!(await canUserAccessParticipant(userEmail, participantId, traceId))) {
-    res.status(403).send([{ message: 'You do not have access to that participant.' }]);
+    participant = undefined;
   }
 
   req.participant = participant;

src/web/App.tsx

@@ -6,11 +6,12 @@ import { EnvironmentBanner } from './components/Core/Banner/EnvironmentBanner';
 import { ErrorView } from './components/Core/ErrorView/ErrorView';
 import { Loading } from './components/Core/Loading/Loading';
 import { ToastContainerWrapper } from './components/Core/Popups/Toast';
+import { NoParticipantAccessView } from './components/Navigation/NoParticipantAccessView';
 import { PortalHeader } from './components/PortalHeader/PortalHeader';
 import { UpdatesTour } from './components/SiteTour/UpdatesTour';
 import { configureFontAwesomeLibrary } from './configureFontAwesomeLibrary';
 import { CurrentUserContext } from './contexts/CurrentUserProvider';
-import { ParticipantProvider } from './contexts/ParticipantProvider';
+import { ParticipantContext, ParticipantProvider } from './contexts/ParticipantProvider';
 import { HomeRedirector } from './screens/homeRedirector';
 import { PortalErrorBoundary } from './utils/PortalErrorBoundary';
 
@@ -21,11 +22,15 @@ configureFontAwesomeLibrary();
 
 function AppContent() {
   const { LoggedInUser } = useContext(CurrentUserContext);
+  const { participant } = useContext(ParticipantContext);
   const isLocalDev = process.env.NODE_ENV === 'development';
 
   if (LoggedInUser?.user?.participants!.length === 0) {
     return <ErrorView message='You do not have access to any participants.' />;
   }
+  if (LoggedInUser && !participant) {
+    return <NoParticipantAccessView />;
+  }
 
   return (
     <>

src/web/components/Navigation/NoParticipantAccessView.scss

@@ -0,0 +1,30 @@
+.no-participant-access-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4.5rem 6.5rem;
+  font-size: 1rem;
+  background-color: var(--theme-background-content);
+  height: 100vh;
+
+  .instructions {
+    font-size: 1.25rem;
+    margin-top: 0;
+    color: var(--theme-secondary);
+  }
+
+  .no-access-text {
+    font-weight: bold;
+    margin-bottom: 0.25rem;
+  }
+
+  .use-switcher-text {
+    margin-bottom: 1rem;
+  }
+
+  .switcher {
+    width: fit-content;
+    border: 2px solid gray;
+    padding-top: 1rem;
+  }
+}

src/web/components/Navigation/NoParticipantAccessView.tsx

@@ -0,0 +1,17 @@
+import { ParticipantSwitcher } from './ParticipantSwitcher';
+
+import './NoParticipantAccessView.scss';
+
+export function NoParticipantAccessView() {
+  return (
+    <div className='no-participant-access-container'>
+      <p className='no-access-text instructions'>You do not have access to this participant.</p>
+      <p className='use-switcher-text instructions'>
+        Use the dropdown below to navigate to a participant you have access to.
+      </p>
+      <div className='switcher'>
+        <ParticipantSwitcher noInitialValue />
+      </div>
+    </div>
+  );
+}

src/web/components/Navigation/ParticipantSwitcher.tsx

@@ -8,7 +8,13 @@ import { SelectDropdown, SelectOption } from '../Input/SelectDropdown';
 
 import './ParticipantSwitcher.scss';
 
-export function ParticipantSwitcher() {
+type ParticipantSwitcherProps = Readonly<{
+  noInitialValue?: boolean;
+}>;
+
+export function ParticipantSwitcher({
+  noInitialValue,
+}: ParticipantSwitcherProps) {
   const { participant } = useContext(ParticipantContext);
   const { LoggedInUser } = useContext(CurrentUserContext);
   const navigate = useNavigate();
@@ -35,7 +41,7 @@ export function ParticipantSwitcher() {
     <div className='participant-switcher'>
       {showDropdown ? (
         <SelectDropdown
-          initialValue={currentParticipantOption}
+          initialValue={noInitialValue ? undefined : currentParticipantOption}
           options={participantOptions}
           onSelectedChange={handleOnSelectedChange}
         />