Merge pull request #817 from Health-Informatics-UoN/fix/add-permissio…

…n-SR-details

Add permission on layout of SR details page

app/next-client-app/app/scanreports/[id]/details/page.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/api/datasets";
 import { ScanReportDetailsForm } from "@/components/scanreports/ScanReportDetailsForm";
 import { getScanReport, getScanReportPermissions } from "@/api/scanreports";
+import { Forbidden } from "@/components/core/Forbidden";
 
 interface ScanReportDetailsProps {
   params: {
@@ -34,6 +35,14 @@ export default async function ScanreportDetails({
   const permissionsSR = await getScanReportPermissions(id);
   const isAuthor = permissionsSR.permissions.includes("IsAuthor");
 
+  if (permissionsDS.permissions.length === 0) {
+    return (
+      <div>
+        <Forbidden />
+      </div>
+    );
+  }
+
   return (
     <div>
       <ScanReportDetailsForm

app/next-client-app/components/core/Forbidden.tsx

@@ -1,15 +1,18 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TriangleAlert } from "lucide-react";
 
 export function Forbidden() {
   return (
     <Alert variant="destructive">
-      <ExclamationTriangleIcon className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        You do not have permission to access this resource.
-      </AlertDescription>
+      <div>
+        <AlertTitle className="flex items-center">
+          <TriangleAlert className="h-4 w-4 mr-2" />
+          Error
+        </AlertTitle>
+        <AlertDescription>
+          You do not have permission to access this resource.
+        </AlertDescription>
+      </div>
     </Alert>
   );
 }