From 3c9f292353ceb0f2616eeb7aeb472265784c36ca Mon Sep 17 00:00:00 2001
From: Jarkko Pesonen <435495+jrkkp@users.noreply.github.com>
Date: Thu, 14 Nov 2024 14:35:51 +0200
Subject: [PATCH] VKT(Frontend & Backend): Examiner admin ui navigation fixes
 and some demo data

---
 backend/vkt/db/4_init.sql                     |  6 +++
 .../clerkExamEvent/overview/TopControls.tsx   |  9 +++--
 .../listing/ExaminerEnrollmentListing.tsx     | 13 ++-----
 .../listing/ExaminerEnrollmentListingRow.tsx  | 19 +++++-----
 .../listing/ExaminerContactRequestListing.tsx |  9 ++++-
 .../overview/ExaminerExamEventDetails.tsx     | 18 +--------
 .../ClerkExamEventOverviewPageSkeleton.tsx    |  3 +-
 frontend/packages/vkt/src/enums/app.ts        |  5 +--
 ...ClerkEnrollmentAppointmentOverviewPage.tsx |  9 +++++
 .../ClerkEnrollmentContactRequestPage.tsx     | 38 ++++++++-----------
 .../src/pages/ClerkExamEventOverviewPage.tsx  |  2 +-
 .../ExaminerExamEventOverviewPage.tsx         |  3 +-
 .../packages/vkt/src/routers/AppRouter.tsx    | 32 ++++++++--------
 13 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/backend/vkt/db/4_init.sql b/backend/vkt/db/4_init.sql
index 50bcefb49..86b9315d5 100644
--- a/backend/vkt/db/4_init.sql
+++ b/backend/vkt/db/4_init.sql
@@ -461,6 +461,12 @@ VALUES (2, 1, 1,
        'Anneli', 'Annikkinen',
        '123c2089-83a8-4163-8180-d8b675ff5337', NOW() - INTERVAL '3 days', NOW() - INTERVAL '6 days');
 
+INSERT INTO payment(version, enrollment_id, amount, transaction_id, reference, payment_url,
+       payment_status, refunded_at, enrollment_appointment_id)
+VALUES (2, null, 51400, '78b29334-a283-11ef-88a1-bf672bd574b1', '7676156682',
+       'https://pay.paytrail.com/pay/78b29334-a283-11ef-88a1-bf672bd574b1', 'OK',
+       null, 3);
+
 -- Insert enrollment appointment
 INSERT INTO enrollment_appointment(person_id, examiner_id, examiner_exam_event_id,
                        skill_oral, skill_textual, skill_understanding,
diff --git a/frontend/packages/vkt/src/components/clerkExamEvent/overview/TopControls.tsx b/frontend/packages/vkt/src/components/clerkExamEvent/overview/TopControls.tsx
index 33144b3a0..1f2d62a75 100644
--- a/frontend/packages/vkt/src/components/clerkExamEvent/overview/TopControls.tsx
+++ b/frontend/packages/vkt/src/components/clerkExamEvent/overview/TopControls.tsx
@@ -4,15 +4,18 @@ import { CustomButtonLink } from 'shared/components';
 import { Variant } from 'shared/enums';
 
 import { useCommonTranslation } from 'configs/i18n';
-import { AppRoutes } from 'enums/app';
 
-export const TopControls: FC = () => {
+interface TopControlsProps {
+  backTo: string;
+}
+
+export const TopControls: FC<TopControlsProps> = ({ backTo }) => {
   const translateCommon = useCommonTranslation();
 
   return (
     <div className="columns">
       <CustomButtonLink
-        to={AppRoutes.ClerkExcellentLevelPage}
+        to={backTo}
         className="color-secondary-dark"
         variant={Variant.Text}
         startIcon={<ArrowBackIosOutlined />}
diff --git a/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListing.tsx b/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListing.tsx
index 97e6ad005..f8edd96ea 100644
--- a/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListing.tsx
+++ b/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListing.tsx
@@ -6,17 +6,11 @@ import { ClerkEnrollmentAppointment } from 'interfaces/clerkEnrollment';
 
 interface ExaminerEnrollmentListingProps {
   enrollments: Array<ClerkEnrollmentAppointment>;
-  examEventId: number;
 }
 
-const getRowDetailsWithExamEventId = (examEventId: number) => {
+const getRowDetailsWithExamEventId = () => {
   const getRowDetails = (enrollment: ClerkEnrollmentAppointment) => {
-    return (
-      <ExaminerEnrollmentListingRow
-        enrollment={enrollment}
-        examEventId={examEventId}
-      />
-    );
+    return <ExaminerEnrollmentListingRow enrollment={enrollment} />;
   };
 
   return getRowDetails;
@@ -24,13 +18,12 @@ const getRowDetailsWithExamEventId = (examEventId: number) => {
 
 export const ExaminerEnrollmentListing = ({
   enrollments,
-  examEventId,
 }: ExaminerEnrollmentListingProps) => (
   <CustomTable
     className="table-layout-auto"
     data={enrollments}
     header={<ExaminerEnrollmentListingHeader />}
-    getRowDetails={getRowDetailsWithExamEventId(examEventId)}
+    getRowDetails={getRowDetailsWithExamEventId()}
     size="small"
     stickyHeader
   />
diff --git a/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListingRow.tsx b/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListingRow.tsx
index 59f937886..1b295de73 100644
--- a/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListingRow.tsx
+++ b/frontend/packages/vkt/src/components/examinerEnrollment/listing/ExaminerEnrollmentListingRow.tsx
@@ -1,5 +1,5 @@
 import { TableCell, TableRow } from '@mui/material';
-import { useNavigate } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { Text } from 'shared/components';
 
 import { useClerkTranslation } from 'configs/i18n';
@@ -26,16 +26,15 @@ function pick<T extends object, K extends keyof T>(object: T, keys: Array<K>) {
 
 export const ExaminerEnrollmentListingRow = ({
   enrollment,
-  examEventId,
 }: {
   enrollment: ClerkEnrollmentAppointment;
-  examEventId: number;
 }) => {
   // I18n
   const { t } = useClerkTranslation({
     keyPrefix: 'vkt.component.clerkEnrollmentListing.row',
   });
   const navigate = useNavigate();
+  const params = useParams();
 
   const getSelectedPartialExamsText = () => {
     const partialExams = pick(enrollment, [
@@ -56,12 +55,14 @@ export const ExaminerEnrollmentListingRow = ({
   };
 
   const onClick = () => {
-    navigate(
-      AppRoutes.ClerkEnrollmentOverviewPage.replace(
-        /:examEventId/,
-        `${examEventId}`,
-      ),
-    );
+    if (params.oid && enrollment.id) {
+      navigate(
+        AppRoutes.ExaminerEnrollmentAppointmentPage.replace(
+          ':oid',
+          params.oid,
+        ).replace(/:enrollmentAppointmentId/, `${enrollment.id}`),
+      );
+    }
   };
 
   return (
diff --git a/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerContactRequestListing.tsx b/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerContactRequestListing.tsx
index 9913be824..9f58cff18 100644
--- a/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerContactRequestListing.tsx
+++ b/frontend/packages/vkt/src/components/examinerExamEvent/listing/ExaminerContactRequestListing.tsx
@@ -1,5 +1,6 @@
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { TableCell, TableHead, TableRow } from '@mui/material';
+import { useParams } from 'react-router';
 import { CustomButtonLink, CustomTable, Text } from 'shared/components';
 import { Color, Variant } from 'shared/enums';
 
@@ -25,6 +26,9 @@ const ExaminerContactRequestListingRow = ({
 }: {
   contactRequest: ContactRequest;
 }) => {
+  const params = useParams();
+  const oid = params.oid || '';
+
   return (
     <TableRow>
       <TableCell>
@@ -39,7 +43,10 @@ const ExaminerContactRequestListingRow = ({
           variant={Variant.Text}
           color={Color.Secondary}
           endIcon={<ChevronRightIcon />}
-          to={AppRoutes.ClerkEnrollmentContactRequestPage.replace(
+          to={AppRoutes.ExaminerEnrollmentContactRequestPage.replace(
+            ':oid',
+            oid,
+          ).replace(
             /:enrollmentContactRequestId/,
             contactRequest.id.toString(),
           )}
diff --git a/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx b/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx
index 431fb473b..9c121b7bd 100644
--- a/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx
+++ b/frontend/packages/vkt/src/components/examinerExamEvent/overview/ExaminerExamEventDetails.tsx
@@ -18,7 +18,6 @@ import { DateTimeUtils } from 'utils/dateTime';
 interface EnrollmentListProps {
   enrollments: Array<ClerkEnrollmentAppointment>;
   status: EnrollmentAppointmentStatus;
-  examEventId: number;
 }
 
 const enrollmentFilter = (
@@ -27,11 +26,7 @@ const enrollmentFilter = (
 ): Array<ClerkEnrollmentAppointment> =>
   enrollments.filter((e: ClerkEnrollmentAppointment) => e.status === status);
 
-const EnrollmentList: FC<EnrollmentListProps> = ({
-  enrollments,
-  status,
-  examEventId,
-}) => {
+const EnrollmentList: FC<EnrollmentListProps> = ({ enrollments, status }) => {
   const { t } = useClerkTranslation({
     keyPrefix: 'vkt.component.clerkExamEventOverview.examEventListingHeader',
   });
@@ -46,10 +41,7 @@ const EnrollmentList: FC<EnrollmentListProps> = ({
             data-testid={`clerk-exam-event-overview-page__enrollment-list-${status}__header`}
           >{`${t(status)}: ${filteredEnrollments.length}`}</H2>
           <div className="margin-top-sm">
-            <ExaminerEnrollmentListing
-              enrollments={filteredEnrollments}
-              examEventId={examEventId}
-            />
+            <ExaminerEnrollmentListing enrollments={filteredEnrollments} />
           </div>
         </div>
       )}
@@ -119,34 +111,28 @@ export const ExaminerExamEventDetails = () => {
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.COMPLETED}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.AWAITING_PAYMENT}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={
           EnrollmentAppointmentStatus.EXPECTING_PAYMENT_UNFINISHED_ENROLLMENT
         }
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.WAITING_AUTHENTICATION}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.CANCELED}
-        examEventId={examEvent.id}
       />
       <EnrollmentList
         enrollments={enrollments}
         status={EnrollmentAppointmentStatus.CANCELED_UNFINISHED_ENROLLMENT}
-        examEventId={examEvent.id}
       />
     </>
   );
diff --git a/frontend/packages/vkt/src/components/skeletons/ClerkExamEventOverviewPageSkeleton.tsx b/frontend/packages/vkt/src/components/skeletons/ClerkExamEventOverviewPageSkeleton.tsx
index 2bddd8682..27ae8a2f8 100644
--- a/frontend/packages/vkt/src/components/skeletons/ClerkExamEventOverviewPageSkeleton.tsx
+++ b/frontend/packages/vkt/src/components/skeletons/ClerkExamEventOverviewPageSkeleton.tsx
@@ -3,12 +3,13 @@ import { SkeletonVariant } from 'shared/enums';
 
 import { ClerkExamEventDetails } from 'components/clerkExamEvent/overview/ClerkExamEventDetails';
 import { TopControls } from 'components/clerkExamEvent/overview/TopControls';
+import { AppRoutes } from 'enums/app';
 
 export const ClerkExamEventOverviewPageSkeleton = () => {
   return (
     <>
       <Skeleton variant={SkeletonVariant.Rectangular}>
-        <TopControls />
+        <TopControls backTo={AppRoutes.ClerkExcellentLevelPage} />
       </Skeleton>
       <Skeleton
         className="full-max-width half-height margin-top-lg"
diff --git a/frontend/packages/vkt/src/enums/app.ts b/frontend/packages/vkt/src/enums/app.ts
index f3ba7a70e..10c349a53 100644
--- a/frontend/packages/vkt/src/enums/app.ts
+++ b/frontend/packages/vkt/src/enums/app.ts
@@ -59,9 +59,6 @@ export enum AppRoutes {
   PublicEnrollmentContactDone = goodAndSatisfactoryLevelContactRoute +
     '/:examinerId/valmis',
 
-  // Routes for clerk user
-  ClerkEnrollmentContactRequestPage = '/vkt/virkailija/yhteydenottopyynto/:enrollmentContactRequestId',
-  ClerkEnrollmentAppointmentPage = '/vkt/virkailija/ilmoittautuminen/:enrollmentAppointmentId',
   ClerkLocalLogoutPage = '/vkt/cas/localLogout',
   ClerkRoot = '/vkt/virkailija',
 
@@ -81,6 +78,8 @@ export enum AppRoutes {
   ExaminerDetailsPage = '/vkt/tv/:oid/omat-tiedot',
   ExaminerExamEventCreatePage = '/vkt/tv/:oid/tutkintotilaisuus/luo',
   ExaminerExamEventPage = '/vkt/tv/:oid/tutkintotilaisuus/:examEventId',
+  ExaminerEnrollmentContactRequestPage = '/vkt/tv/:oid/yhteydenottopyynto/:enrollmentContactRequestId',
+  ExaminerEnrollmentAppointmentPage = '/vkt/tv/:oid/ilmoittautuminen/:enrollmentAppointmentId',
 
   // Miscellaneous
   AccessibilityStatementPage = '/vkt/saavutettavuusseloste',
diff --git a/frontend/packages/vkt/src/pages/ClerkEnrollmentAppointmentOverviewPage.tsx b/frontend/packages/vkt/src/pages/ClerkEnrollmentAppointmentOverviewPage.tsx
index e81ff38f1..61fdc0ea5 100644
--- a/frontend/packages/vkt/src/pages/ClerkEnrollmentAppointmentOverviewPage.tsx
+++ b/frontend/packages/vkt/src/pages/ClerkEnrollmentAppointmentOverviewPage.tsx
@@ -5,7 +5,9 @@ import { H1 } from 'shared/components';
 import { APIResponseStatus } from 'shared/enums';
 
 import { ClerkEnrollmentAppointmentDetails } from 'components/clerkEnrollment/appointment/ClerkEnrollmentAppointmentDetails';
+import { TopControls } from 'components/clerkExamEvent/overview/TopControls';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
+import { AppRoutes } from 'enums/app';
 import { loadClerkEnrollmentAppointment } from 'redux/reducers/clerkEnrollmentAppointment';
 import { clerkEnrollmentAppointmentSelector } from 'redux/selectors/clerkEnrollmentAppointment';
 
@@ -17,6 +19,12 @@ export const ClerkEnrollmentAppointmentOverviewPage: FC = () => {
 
   const dispatch = useAppDispatch();
   const params = useParams();
+  const backTo = enrollment?.examEvent?.id
+    ? AppRoutes.ExaminerExamEventPage.replace(':oid', params.oid || '').replace(
+        ':examEventId',
+        enrollment?.examEvent?.id,
+      )
+    : AppRoutes.ExaminerHomePage.replace(':oid', params.oid || '');
 
   useEffect(() => {
     if (
@@ -29,6 +37,7 @@ export const ClerkEnrollmentAppointmentOverviewPage: FC = () => {
 
   return (
     <Box className="clerk-enrollment-overview-page">
+      <TopControls backTo={backTo} />
       <H1 data-testid="clerk-enrollment-overview-page__header"></H1>
       <Paper
         elevation={3}
diff --git a/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx b/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
index 1950a2989..af82077a6 100644
--- a/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
+++ b/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
@@ -1,10 +1,8 @@
-import { ArrowBackIosOutlined as ArrowBackIosOutlinedIcon } from '@mui/icons-material';
 import { Box, Divider, Grid, Paper } from '@mui/material';
 import { FC, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router';
 import {
   CustomButton,
-  CustomButtonLink,
   H1,
   H2,
   H3,
@@ -13,6 +11,7 @@ import {
 } from 'shared/components';
 import { APIResponseStatus, Color, Variant } from 'shared/enums';
 
+import { TopControls } from 'components/clerkExamEvent/overview/TopControls';
 import { useCommonTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { AppRoutes } from 'enums/app';
@@ -24,22 +23,6 @@ import {
 import { clerkEnrollmentContactRequestSelector } from 'redux/selectors/clerkEnrollmentContactRequest';
 import { EnrollmentUtils } from 'utils/enrollment';
 
-const BackButton = () => {
-  const translateCommon = useCommonTranslation();
-
-  return (
-    <CustomButtonLink
-      to={AppRoutes.ClerkRoot}
-      variant={Variant.Text}
-      startIcon={<ArrowBackIosOutlinedIcon />}
-      className="color-secondary-dark"
-      data-testid="clerk-create-exam__back-btn"
-    >
-      {translateCommon('back')}
-    </CustomButtonLink>
-  );
-};
-
 export const ClerkEnrollmentContactRequestPage: FC = () => {
   const { status, createStatus, enrollment } = useAppSelector(
     clerkEnrollmentContactRequestSelector,
@@ -64,16 +47,26 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
   useEffect(() => {
     if (
       createStatus === APIResponseStatus.Success &&
-      params.enrollmentContactRequestId
+      params.enrollmentContactRequestId &&
+      params.oid
     ) {
       navigate(
-        AppRoutes.ClerkEnrollmentAppointmentPage.replace(
+        AppRoutes.ExaminerEnrollmentAppointmentPage.replace(
+          ':oid',
+          params.oid,
+        ).replace(
           ':enrollmentAppointmentId',
           params.enrollmentContactRequestId,
         ),
       );
     }
-  }, [dispatch, navigate, params.enrollmentContactRequestId, createStatus]);
+  }, [
+    dispatch,
+    navigate,
+    params.oid,
+    params.enrollmentContactRequestId,
+    createStatus,
+  ]);
 
   const isLoading = status === APIResponseStatus.InProgress;
   const isSavingDisabled = isLoading;
@@ -110,6 +103,7 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
   const onSubmit = () => {
     dispatch(createClerkEnrollmentAppointment(enrollment.id));
   };
+  const backTo = AppRoutes.ExaminerHomePage.replace(':oid', params.oid || '');
 
   return (
     <Box className="clerk-homepage">
@@ -120,7 +114,7 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
         className="clerk-homepage__grid-container"
       >
         <div>
-          <BackButton />
+          <TopControls backTo={backTo} />
         </div>
         <Grid item>
           <H1>Yhteydenottopyyntö</H1>
diff --git a/frontend/packages/vkt/src/pages/ClerkExamEventOverviewPage.tsx b/frontend/packages/vkt/src/pages/ClerkExamEventOverviewPage.tsx
index dfdcd5711..7c740be33 100644
--- a/frontend/packages/vkt/src/pages/ClerkExamEventOverviewPage.tsx
+++ b/frontend/packages/vkt/src/pages/ClerkExamEventOverviewPage.tsx
@@ -86,7 +86,7 @@ export const ClerkExamEventOverviewPage: FC = () => {
           <ClerkExamEventOverviewPageSkeleton />
         ) : (
           <>
-            <TopControls />
+            <TopControls backTo={AppRoutes.ClerkExcellentLevelPage} />
             <ClerkExamEventDetails />
           </>
         )}
diff --git a/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx b/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx
index 454b52b8e..8d1c71edd 100644
--- a/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx
+++ b/frontend/packages/vkt/src/pages/examiner/ExaminerExamEventOverviewPage.tsx
@@ -81,6 +81,7 @@ export const ExaminerExamEventOverviewPage: FC = () => {
         translateCommon,
       )} ${DateUtils.formatOptionalDate(examEvent.date)}`
     : '';
+  const backTo = AppRoutes.ExaminerHomePage.replace(':oid', params.oid || '');
 
   return (
     <Box className="clerk-exam-event-overview-page">
@@ -93,7 +94,7 @@ export const ExaminerExamEventOverviewPage: FC = () => {
           <ClerkExamEventOverviewPageSkeleton />
         ) : (
           <>
-            <TopControls />
+            <TopControls backTo={backTo} />
             <ExaminerExamEventDetails />
           </>
         )}
diff --git a/frontend/packages/vkt/src/routers/AppRouter.tsx b/frontend/packages/vkt/src/routers/AppRouter.tsx
index 045b3a3ce..195633405 100644
--- a/frontend/packages/vkt/src/routers/AppRouter.tsx
+++ b/frontend/packages/vkt/src/routers/AppRouter.tsx
@@ -352,22 +352,6 @@ export const AppRouter: FC = () => {
             </TitlePage>
           }
         />
-        <Route
-          path={AppRoutes.ClerkEnrollmentContactRequestPage}
-          element={
-            <TitlePage title={createTitle('clerkExamEventCreate')}>
-              <ClerkEnrollmentContactRequestPage />
-            </TitlePage>
-          }
-        />
-        <Route
-          path={AppRoutes.ClerkEnrollmentAppointmentPage}
-          element={
-            <TitlePage title={createTitle('clerkExamEventCreate')}>
-              <ClerkEnrollmentAppointmentOverviewPage />
-            </TitlePage>
-          }
-        />
         <Route
           path={AppRoutes.ClerkGoodAndSatisfactoryLevelPage}
           element={
@@ -405,6 +389,22 @@ export const AppRouter: FC = () => {
               </TitlePage>
             }
           />
+          <Route
+            path={AppRoutes.ExaminerEnrollmentContactRequestPage}
+            element={
+              <TitlePage title={createTitle('clerkExamEventCreate')}>
+                <ClerkEnrollmentContactRequestPage />
+              </TitlePage>
+            }
+          />
+          <Route
+            path={AppRoutes.ExaminerEnrollmentAppointmentPage}
+            element={
+              <TitlePage title={createTitle('clerkExamEventCreate')}>
+                <ClerkEnrollmentAppointmentOverviewPage />
+              </TitlePage>
+            }
+          />
           <Route
             path={AppRoutes.ExaminerExamEventPage}
             element={