fix: block reservation creating if no permissions

City-of-Helsinki · Sep 4, 2024 · a0a0de2 · a0a0de2
1 parent adca50b
commit a0a0de2
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 44 deletions.
diff --git a/apps/admin-ui/src/App.tsx b/apps/admin-ui/src/App.tsx
@@ -7,7 +7,7 @@ import "./i18n";
 import { PUBLIC_URL } from "./common/const";
 import { GlobalContext } from "./context/GlobalContexts";
 import { prefixes } from "./common/urls";
-import { AuthorizationChecker } from "./common/AuthorizationChecker";
+import { withAuthorization } from "@/common/AuthorizationChecker";
 import MyUnitsRouter from "./spa/my-units/router";
 import ReservationsRouter from "./component/reservations/ReservationRouter";
 import NotificationsRouter from "./component/notifications/router";
@@ -55,21 +55,6 @@ const ApplicationRoundAllocation = dynamic(
     import(`./spa/recurring-reservations/application-rounds/[id]/allocation`)
 );
 
-const withAuthorization = (
-  component: JSX.Element,
-  apiBaseUrl: string,
-  feedbackUrl: string,
-  permission?: UserPermissionChoice
-) => (
-  <AuthorizationChecker
-    permission={permission}
-    apiUrl={apiBaseUrl}
-    feedbackUrl={feedbackUrl}
-  >
-    {component}
-  </AuthorizationChecker>
-);
-
 type Props = {
   reservationUnitPreviewUrl: string;
   apiBaseUrl: string;
@@ -230,7 +215,10 @@ function ClientApp({
           <Route
             path="/my-units/*"
             element={withAuthorization(
-              <MyUnitsRouter />,
+              <MyUnitsRouter
+                apiBaseUrl={apiBaseUrl}
+                feedbackUrl={feedbackUrl}
+              />,
               apiBaseUrl,
               feedbackUrl
             )}

diff --git a/apps/admin-ui/src/common/AuthorizationChecker.tsx b/apps/admin-ui/src/common/AuthorizationChecker.tsx
@@ -40,3 +40,18 @@ export function AuthorizationChecker({
     </Suspense>
   );
 }
+
+export const withAuthorization = (
+  component: JSX.Element,
+  apiBaseUrl: string,
+  feedbackUrl: string,
+  permission?: UserPermissionChoice
+) => (
+  <AuthorizationChecker
+    permission={permission}
+    apiUrl={apiBaseUrl}
+    feedbackUrl={feedbackUrl}
+  >
+    {component}
+  </AuthorizationChecker>
+);
diff --git a/apps/admin-ui/src/spa/my-units/[id]/UnitCalendar.tsx b/apps/admin-ui/src/spa/my-units/[id]/UnitCalendar.tsx
@@ -19,6 +19,7 @@ import Popup from "reactjs-popup";
 import styled, { css } from "styled-components";
 import {
   ReservationTypeChoice,
+  UserPermissionChoice,
   type ReservationUnitReservationsFragment,
 } from "@gql/gql-types";
 import { useTranslation } from "react-i18next";
@@ -30,6 +31,7 @@ import { CELL_BORDER, CELL_BORDER_LEFT, CELL_BORDER_LEFT_ALERT } from "./const";
 import { ReservationPopupContent } from "./ReservationPopupContent";
 import eventStyleGetter from "./eventStyleGetter";
 import { CreateReservationModal } from "./CreateReservationModal";
+import { useCheckPermission } from "@/hooks";
 
 type CalendarEventType = CalendarEvent<ReservationUnitReservationsFragment>;
 type Resource = {
@@ -58,12 +60,6 @@ type EventStyleGetter = ({ event }: CalendarEventType) => {
   className?: string;
 };
 
-type Props = {
-  date: Date;
-  resources: Resource[];
-  refetch: () => void;
-};
-
 const FlexContainer = styled.div<{ $numCols: number }>`
   display: flex;
   flex-direction: column;
@@ -201,12 +197,14 @@ const Container = styled.div<{ $height: number }>`
 function Cells({
   cols,
   reservationUnitPk,
+  unitPk,
   date,
   setModalContent,
   onComplete,
 }: {
   cols: number;
   reservationUnitPk: number;
+  unitPk: number;
   date: Date;
   setModalContent: (content: JSX.Element | null, isHds?: boolean) => void;
   onComplete: () => void;
@@ -217,8 +215,16 @@ function Cells({
     return setHours(date, Math.round(index / 2)) < now;
   };
 
+  const { hasPermission } = useCheckPermission({
+    units: [unitPk],
+    permission: UserPermissionChoice.CanCreateStaffReservations,
+  });
+
   const onClick =
     (offset: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (!hasPermission) {
+        return;
+      }
       e.preventDefault();
       setModalContent(
         <CreateReservationModal
@@ -436,7 +442,19 @@ function sortByDraftStatusAndTitle(resources: Resource[]) {
   });
 }
 
-export function UnitCalendar({ date, resources, refetch }: Props): JSX.Element {
+type Props = {
+  date: Date;
+  unitPk: number;
+  resources: Resource[];
+  refetch: () => void;
+};
+
+export function UnitCalendar({
+  unitPk,
+  date,
+  resources,
+  refetch,
+}: Props): JSX.Element {
   const calendarRef = useRef<HTMLDivElement>(null);
   // todo find out min and max opening hour of every reservationunit
   const [beginHour, endHour] = [0, 24];
@@ -529,6 +547,7 @@ export function UnitCalendar({ date, resources, refetch }: Props): JSX.Element {
                 cols={numHours * 2}
                 date={startDate}
                 reservationUnitPk={row.pk}
+                unitPk={unitPk}
                 setModalContent={setModalContent}
                 onComplete={refetch}
               />

diff --git a/apps/admin-ui/src/spa/my-units/[id]/UnitReservations.tsx b/apps/admin-ui/src/spa/my-units/[id]/UnitReservations.tsx
@@ -72,7 +72,12 @@ function UnitReservationsInner({
       {loading ? (
         <Loader />
       ) : (
-        <UnitCalendar date={date} resources={resources} refetch={refetch} />
+        <UnitCalendar
+          date={date}
+          resources={resources}
+          refetch={refetch}
+          unitPk={Number(unitPk)}
+        />
       )}
       <LegendContainer>
         <Legends>

diff --git a/apps/admin-ui/src/spa/my-units/[id]/index.tsx b/apps/admin-ui/src/spa/my-units/[id]/index.tsx
@@ -3,19 +3,20 @@ import { H1 } from "common/src/common/typography";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
-import { Button, Tabs as HDSTabs } from "hds-react";
+import { Tabs as HDSTabs } from "hds-react";
 import { breakpoints } from "common/src/common/style";
 import { parseAddress } from "@/common/util";
 import { Container } from "@/styles/layout";
 import { getRecurringReservationUrl } from "@/common/urls";
-import { BasicLink } from "@/styles/util";
 import Loader from "@/component/Loader";
 import { ReservationUnitCalendarView } from "./ReservationUnitCalendarView";
 import { UnitReservations } from "./UnitReservations";
 import { TabHeader, Tabs } from "@/component/Tabs";
-import { useUnitViewQuery } from "@gql/gql-types";
 import { base64encode, filterNonNullable } from "common/src/helpers";
 import { errorToast } from "common/src/common/toast";
+import { UserPermissionChoice, useUnitViewQuery } from "@gql/gql-types";
+import { useCheckPermission } from "@/hooks";
+import { ButtonLikeLink } from "@/component/ButtonLikeLink";
 
 type Params = {
   unitId: string;
@@ -81,6 +82,11 @@ export function MyUnitView() {
 
   const { unit } = data ?? {};
 
+  const { hasPermission: canCreateReservations } = useCheckPermission({
+    units: [Number(pk)],
+    permission: UserPermissionChoice.CanCreateStaffReservations,
+  });
+
   if (loading) {
     return <Loader />;
   }
@@ -108,18 +114,13 @@ export function MyUnitView() {
           </LocationOnlyOnDesktop>
         )}
       </ContainerWithSpacing>
-
       <ContainerWithSpacing>
-        <BasicLink to={recurringReservationUrl ?? ""}>
-          <Button
-            disabled={!recurringReservationUrl}
-            variant="secondary"
-            theme="black"
-            size="small"
-          >
-            {t("MyUnits.Calendar.header.recurringReservation")}
-          </Button>
-        </BasicLink>
+        <ButtonLikeLink
+          to={canCreateReservations ? recurringReservationUrl : ""}
+          disabled={!canCreateReservations}
+        >
+          {t("MyUnits.Calendar.header.recurringReservation")}
+        </ButtonLikeLink>
       </ContainerWithSpacing>
       <Tabs headers={TabHeaders}>
         <ReservationTabPanel key="unit-reservations">

diff --git a/apps/admin-ui/src/spa/my-units/router.tsx b/apps/admin-ui/src/spa/my-units/router.tsx
@@ -4,24 +4,55 @@ import { RecurringReservation } from "./recurring/RecurringReservation";
 import { MyUnits } from "./index";
 import { MyUnitView } from "./[id]/index";
 import { RecurringReservationDone } from "./recurring/RecurringReservationDone";
+import { withAuthorization } from "@/common/AuthorizationChecker";
+import { UserPermissionChoice } from "@gql/gql-types";
 
-function MyUnitsRouter(): JSX.Element {
+function MyUnitsRouter({
+  apiBaseUrl,
+  feedbackUrl,
+}: {
+  apiBaseUrl: string;
+  feedbackUrl: string;
+}): JSX.Element {
   return (
     <Routes>
       <Route index element={<MyUnits />} />
       <Route path=":unitId" element={<MyUnitView />} />
-      <Route path=":unitId/recurring" element={<RecurringReservation />} />
+      <Route
+        path=":unitId/recurring"
+        element={withAuthorization(
+          <RecurringReservation />,
+          apiBaseUrl,
+          feedbackUrl,
+          UserPermissionChoice.CanCreateStaffReservations
+        )}
+      />
       <Route
         path=":unitId/recurring-reservation"
-        element={<RecurringReservation />}
+        element={withAuthorization(
+          <RecurringReservation />,
+          apiBaseUrl,
+          feedbackUrl,
+          UserPermissionChoice.CanCreateStaffReservations
+        )}
       />
       <Route
         path=":unitId/recurring/:pk/completed"
-        element={<RecurringReservationDone />}
+        element={withAuthorization(
+          <RecurringReservationDone />,
+          apiBaseUrl,
+          feedbackUrl,
+          UserPermissionChoice.CanCreateStaffReservations
+        )}
       />
       <Route
         path=":unitId/recurring-reservation/completed"
-        element={<RecurringReservationDone />}
+        element={withAuthorization(
+          <RecurringReservationDone />,
+          apiBaseUrl,
+          feedbackUrl,
+          UserPermissionChoice.CanCreateStaffReservations
+        )}
       />
     </Routes>
   );