From 1e24d52050d1fd7c2b773413bf6074f29772425c Mon Sep 17 00:00:00 2001
From: 0tuedon <90271995+0tuedon@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:00:37 +0100
Subject: [PATCH] Evaluator role access (#296)

---
 .eslintrc.json                                |  3 +-
 .../editTranscript/EditTranscript.tsx         | 21 +++++----
 src/components/navbar/AdminMenu.tsx           | 12 +++--
 src/components/navbar/Menu.tsx                | 44 +++++++++++--------
 src/components/tables/AdminReviewsTable.tsx   |  6 ++-
 src/components/tables/TableItems.tsx          |  8 ++--
 src/config/default.ts                         |  5 ---
 src/config/permissions.json                   | 27 ++++++++++++
 src/hooks/useHasPermissions.ts                | 20 +++++++++
 src/pages/admin/reviews.tsx                   | 11 ++---
 src/pages/admin/transactions.tsx              | 13 +++---
 src/pages/admin/users.tsx                     | 12 ++---
 types.ts                                      |  8 +++-
 13 files changed, 122 insertions(+), 68 deletions(-)
 create mode 100644 src/config/permissions.json
 create mode 100644 src/hooks/useHasPermissions.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index a8e3ffbb..979a6243 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,6 +15,7 @@
     "no-console": ["warn", { "allow": ["warn", "error"] }],
     "no-unused-vars": ["warn", { "vars": "all", "args": "none", "ignoreRestSiblings": false }],
     "eol-last": ["error", "always"],
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/display-name": "off" 
   }
 }
diff --git a/src/components/editTranscript/EditTranscript.tsx b/src/components/editTranscript/EditTranscript.tsx
index ad0743e6..1b22135e 100644
--- a/src/components/editTranscript/EditTranscript.tsx
+++ b/src/components/editTranscript/EditTranscript.tsx
@@ -29,9 +29,8 @@ import SubmitTranscriptMenu, {
   TranscriptSubmitOptions,
 } from "../menus/SubmitTranscriptMenu";
 import { TranscriptContent, UserReviewData } from "../../../types";
-import { useSession } from "next-auth/react";
 import { useUpdateTranscript } from "@/services/api/transcripts";
-
+import { useHasPermission } from "@/hooks/useHasPermissions";
 // Interfaces for react-markdown-editior
 export interface IHandleEditorChange {
   text: string;
@@ -74,15 +73,15 @@ const EditTranscript = ({
   onOpen: () => void;
 }) => {
   const [isPreviewOnly, setIsPreviewOnly] = useState(false);
-  const [isModalOpen, setIsModalopen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const toast = useToast();
   const mdParser = new MarkdownIt();
 
   const reviewSubmissionDisabled =
     !!reviewData.branchUrl && !!reviewData.pr_url;
 
-  const { data: userSession } = useSession();
-  const isAdmin = userSession?.user?.permissions === "admin";
+  const canSubmitToOwnRepo = useHasPermission("submitToOwnRepo");
+
   const { isLoading: saveLoading } = useUpdateTranscript();
 
   const handleSave = async () => {
@@ -149,7 +148,7 @@ const EditTranscript = ({
   // restoreOriginal content function
   const onClickRestore = () => {
     restoreOriginal();
-    setIsModalopen(false);
+    setIsModalOpen(false);
   };
 
   return (
@@ -180,7 +179,7 @@ const EditTranscript = ({
             </Button>
             <Button
               colorScheme="gray"
-              onClick={() => setIsModalopen(true)}
+              onClick={() => setIsModalOpen(true)}
               size="xs"
               ml="auto"
               display="block"
@@ -215,10 +214,10 @@ const EditTranscript = ({
                   onClick={onOpen}
                   isDisabled={reviewSubmissionDisabled}
                 >
-                  Submit {isAdmin ? `(${prRepo})` : ""}
+                  Submit {canSubmitToOwnRepo ? `(${prRepo})` : ""}
                 </Button>
               </Tooltip>
-              {isAdmin && (
+              {canSubmitToOwnRepo && (
                 <>
                   <SubmitTranscriptMenu setPrRepo={setPrRepo} />
                 </>
@@ -237,7 +236,7 @@ const EditTranscript = ({
           />
         </Box>
       </Box>
-      <Modal isOpen={isModalOpen} onClose={() => setIsModalopen(false)}>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>
@@ -253,7 +252,7 @@ const EditTranscript = ({
             <Button
               variant="outline"
               size="sm"
-              onClick={() => setIsModalopen(false)}
+              onClick={() => setIsModalOpen(false)}
               mr={2}
             >
               Cancel
diff --git a/src/components/navbar/AdminMenu.tsx b/src/components/navbar/AdminMenu.tsx
index d7b2f825..9e98a840 100644
--- a/src/components/navbar/AdminMenu.tsx
+++ b/src/components/navbar/AdminMenu.tsx
@@ -2,14 +2,20 @@ import { Box, Divider, Flex, Heading, Icon } from "@chakra-ui/react";
 import React from "react";
 import { BiLockOpenAlt } from "react-icons/bi";
 
-const AdminMenu = ({ children }: { children: React.ReactNode }) => {
+const AdminMenu = ({
+  children,
+  role,
+}: {
+  children: React.ReactNode;
+  role?: string;
+}) => {
   return (
     <>
       <Box my={4}>
         <Divider />
         <Flex my={4} gap={2} alignItems="center">
-          <Heading size="sm" color="gray.400">
-            Admin
+          <Heading size="sm" color="gray.400" textTransform={"capitalize"}>
+            {role}
           </Heading>
           <Icon color={"orange.400"} as={BiLockOpenAlt} />
         </Flex>
diff --git a/src/components/navbar/Menu.tsx b/src/components/navbar/Menu.tsx
index ec28e440..3a8c03b1 100644
--- a/src/components/navbar/Menu.tsx
+++ b/src/components/navbar/Menu.tsx
@@ -26,12 +26,14 @@ import { FiUser, FiUsers } from "react-icons/fi";
 import { HiOutlineBookOpen, HiOutlineSwitchHorizontal } from "react-icons/hi";
 import MenuNav from "./MenuNav";
 import AdminMenu from "./AdminMenu";
+import { useHasPermission } from "@/hooks/useHasPermissions";
 
 const Menu = () => {
   const { data: userSession } = useSession();
-
-  const isAdmin = userSession?.user?.permissions === "admin";
-
+  // Permissions check
+  const canAccessAdminNav = useHasPermission("accessAdminNav");
+  const canAccessTransactions = useHasPermission("accessTransactions");
+  const canAccessUsers = useHasPermission("accessUsers");
   const router = useRouter();
   const currentRoute = router.asPath?.split("/")[1] ?? "";
   const fullCurrentRoute = router.asPath;
@@ -164,16 +166,18 @@ const Menu = () => {
                         icon={BiWallet}
                       />
                     </Flex>
-                    {isAdmin ? (
-                      <AdminMenu>
+                    {canAccessAdminNav ? (
+                      <AdminMenu role={userSession.user?.permissions}>
                         <Flex direction="column" gap={2}>
-                          <MenuNav
-                            currentRoute={fullCurrentRoute}
-                            routeName={"Transactions"}
-                            routeLink={ROUTES_CONFIG.TRANSACTIONS}
-                            handleClose={closeMenu}
-                            icon={HiOutlineSwitchHorizontal}
-                          />
+                          {canAccessTransactions && (
+                            <MenuNav
+                              currentRoute={fullCurrentRoute}
+                              routeName={"Transactions"}
+                              routeLink={ROUTES_CONFIG.TRANSACTIONS}
+                              handleClose={closeMenu}
+                              icon={HiOutlineSwitchHorizontal}
+                            />
+                          )}
                           <MenuNav
                             currentRoute={fullCurrentRoute}
                             routeName={ROUTES_CONFIG.REVIEWS}
@@ -181,13 +185,15 @@ const Menu = () => {
                             handleClose={closeMenu}
                             icon={CgTranscript}
                           />
-                          <MenuNav
-                            currentRoute={fullCurrentRoute}
-                            routeName={"Users"}
-                            routeLink={ROUTES_CONFIG.USERS}
-                            handleClose={closeMenu}
-                            icon={FiUsers}
-                          />
+                          {canAccessUsers && (
+                            <MenuNav
+                              currentRoute={fullCurrentRoute}
+                              routeName={"Users"}
+                              routeLink={ROUTES_CONFIG.USERS}
+                              handleClose={closeMenu}
+                              icon={FiUsers}
+                            />
+                          )}
                         </Flex>
                       </AdminMenu>
                     ) : null}
diff --git a/src/components/tables/AdminReviewsTable.tsx b/src/components/tables/AdminReviewsTable.tsx
index d45a9f1a..95929345 100644
--- a/src/components/tables/AdminReviewsTable.tsx
+++ b/src/components/tables/AdminReviewsTable.tsx
@@ -17,6 +17,7 @@ import { useResetReview } from "@/services/api/reviews/useResetReviews";
 import { dateFormatGeneral } from "@/utils";
 import { getReviewStatus } from "@/utils/review";
 import { format } from "date-fns";
+import { useHasPermission } from "@/hooks/useHasPermissions";
 
 const tableStructure = [
   {
@@ -124,6 +125,7 @@ const AdminResetSelect = ({ children }: AdminResetSelectProps) => {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const toast = useToast();
   const { data: userSession } = useSession();
+
   const queryClient = useQueryClient();
   const resetReview = useResetReview();
   const handleCheckboxToggle = (values: (string | number)[]) => {
@@ -178,6 +180,7 @@ const AdminReviewsTable = ({
   hasFilters,
   reviews,
 }: Props) => {
+  const canResetReviews = useHasPermission("resetReviews");
   return (
     <AdminResetSelect>
       {({ handleReset, hasAdminSelected, isResetting }) => (
@@ -186,9 +189,8 @@ const AdminReviewsTable = ({
           emptyView={<EmptyView hasFilters={hasFilters} />}
           isLoading={isLoading}
           isError={isError}
-          // takes action-loading as isArchiving
           tableStructure={tableStructure}
-          showAdminControls
+          showAdminControls={canResetReviews}
           actionItems={
             <>
               {hasAdminSelected && (
diff --git a/src/components/tables/TableItems.tsx b/src/components/tables/TableItems.tsx
index 593f9cf7..c4191040 100644
--- a/src/components/tables/TableItems.tsx
+++ b/src/components/tables/TableItems.tsx
@@ -39,7 +39,8 @@ import { resolveGHApiUrl } from "@/utils/github";
 import { getReviewStatus } from "@/utils/review";
 import { AdminReview } from "@/services/api/admin/useReviews";
 import { format } from "date-fns";
-import { UserRoles } from "@/config/default";
+import { useHasPermission } from "@/hooks/useHasPermissions";
+import { UserRoles } from "../../../types";
 
 // eslint-disable-next-line no-unused-vars
 const defaultUndefined = <TData, TCb extends (data: TData) => any>(
@@ -136,7 +137,8 @@ export const TableAction = <T extends object>({
   const isAdminReviews = getReviewStatus(row as AdminReview);
   const isUsersTable = tableItem.actionTableType === "user";
 
-  const isAdmin = userSession?.user?.permissions === "admin";
+  const isAdmin = useHasPermission("accessAdminNav");
+
   const showCheckBox = isAdmin && showControls;
 
   /* Forced the type here because it uses a dynamic type so Ts isn't aware of Id in rows
@@ -503,7 +505,7 @@ export const UpdateRole = ({
           key={role}
           textTransform={"capitalize"}
           onClick={() => {
-            handleRequest(role);
+            handleRequest(role as UserRole);
           }}
         >
           {role}
diff --git a/src/config/default.ts b/src/config/default.ts
index 8a9dfb8a..86ba3884 100644
--- a/src/config/default.ts
+++ b/src/config/default.ts
@@ -33,10 +33,5 @@ export const ReviewStatus = {
   ALL: "all",
 } as const;
 
-export const UserRoles = {
-  REVIEWER: "reviewer",
-  ADMIN: "admin",
-} as const;
-
 export const upstreamOwner = "bitcointranscripts";
 export const upstreamRepo = "bitcointranscripts";
diff --git a/src/config/permissions.json b/src/config/permissions.json
new file mode 100644
index 00000000..7bf8a70a
--- /dev/null
+++ b/src/config/permissions.json
@@ -0,0 +1,27 @@
+{
+  "admin": {
+    "accessReviews": true,
+    "accessUsers": true,
+    "resetReviews": true,
+    "accessTransactions": true,
+    "accessAdminNav": true,
+    "submitToOwnRepo": true
+  },
+  "evaluator": {
+    "accessReviews": true,
+    "accessUsers": false,
+    "resetReviews": false,
+    "accessTransactions": false,
+    "accessAdminNav": true,
+    "submitToOwnRepo": false
+  },
+  "reviewer": {
+    "accessReviews": false,
+    "accessUsers": false,
+    "resetReviews": false,
+    "accessTransactions": false,
+    "accessAdminNav": false,
+    "submitToOwnRepo": false
+  }
+  
+}
\ No newline at end of file
diff --git a/src/hooks/useHasPermissions.ts b/src/hooks/useHasPermissions.ts
new file mode 100644
index 00000000..f1314e16
--- /dev/null
+++ b/src/hooks/useHasPermissions.ts
@@ -0,0 +1,20 @@
+import { useSession } from "next-auth/react";
+import { UserRole } from "../../types";
+import permissions from "../config/permissions.json";
+
+type Permissions = {
+  accessReviews: boolean;
+  accessUsers: boolean;
+  resetReviews: boolean;
+  accessTransactions: boolean;
+  accessAdminNav: boolean;
+  submitToOwnRepo: boolean;
+};
+
+export const useHasPermission = (permission: keyof Permissions) => {
+  const { data: userSession } = useSession();
+  const userRole = userSession?.user?.permissions as UserRole;
+  const userPermissions = permissions[userRole];
+
+  return !!userPermissions?.[permission];
+};
diff --git a/src/pages/admin/reviews.tsx b/src/pages/admin/reviews.tsx
index d5d16c78..ced661b6 100644
--- a/src/pages/admin/reviews.tsx
+++ b/src/pages/admin/reviews.tsx
@@ -9,10 +9,8 @@ import {
   MenuList,
   Text,
 } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
 import { BiChevronDown } from "react-icons/bi";
 import { IoIosFunnel } from "react-icons/io";
-import AuthStatus from "@/components/transcript/AuthStatus";
 import { useRouter } from "next/router";
 import { FilterQueryNames, ReviewStatus } from "@/config/default";
 import Pagination from "@/components/tables/Pagination";
@@ -21,6 +19,8 @@ import { UI_CONFIG } from "@/config/ui-config";
 import AdminReviewsTable from "@/components/tables/AdminReviewsTable";
 import { useGetAllReviews } from "@/services/api/admin/useReviews";
 import { RefetchButton } from "@/components/tables/TableItems";
+import { useHasPermission } from "@/hooks/useHasPermissions";
+import AuthStatus from "@/components/transcript/AuthStatus";
 
 type OnSelect<T> = (name: string, item: T) => void;
 
@@ -79,9 +79,7 @@ const Reviews = () => {
   const statusFilter = urlParams.get(FilterQueryNames.status);
   const pageQuery = urlParams.get(FilterQueryNames.page);
 
-  const { data: sessionData } = useSession();
-
-  const isAdmin = sessionData?.user?.permissions === "admin";
+  const canAccessReviews = useHasPermission("accessReviews");
 
   const {
     data: adminReviews,
@@ -146,7 +144,7 @@ const Reviews = () => {
     UI_CONFIG.DEBOUNCE_DELAY
   );
 
-  if (!isAdmin) {
+  if (!canAccessReviews) {
     return (
       <AuthStatus
         title="Unauthorized"
@@ -154,7 +152,6 @@ const Reviews = () => {
       />
     );
   }
-
   return (
     <>
       <Flex flexDir="column">
diff --git a/src/pages/admin/transactions.tsx b/src/pages/admin/transactions.tsx
index 07247b1e..208f79aa 100644
--- a/src/pages/admin/transactions.tsx
+++ b/src/pages/admin/transactions.tsx
@@ -9,10 +9,8 @@ import {
   MenuList,
   Text,
 } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
 import { BiChevronDown } from "react-icons/bi";
 import { IoIosFunnel } from "react-icons/io";
-import AuthStatus from "@/components/transcript/AuthStatus";
 import { useGetTransactions } from "@/services/api/admin";
 import { useRouter } from "next/router";
 import {
@@ -25,6 +23,8 @@ import Pagination from "@/components/tables/Pagination";
 import { useDebouncedCallback } from "use-debounce";
 import { UI_CONFIG } from "@/config/ui-config";
 import { RefetchButton } from "@/components/tables/TableItems";
+import { useHasPermission } from "@/hooks/useHasPermissions";
+import AuthStatus from "@/components/transcript/AuthStatus";
 
 // eslint-disable-next-line no-unused-vars
 type OnSelect<T> = (name: string, item: T) => void;
@@ -79,16 +79,14 @@ const Transactions = () => {
   const queryString = router.asPath.split("?").slice(1).join("");
   const urlParams = new URLSearchParams(queryString);
 
+  const canAccessTransactions = useHasPermission("accessTransactions");
+
   const userFilter = urlParams.get(FilterQueryNames.user);
   const txIdFilter = urlParams.get(FilterQueryNames.txId);
   const typeFilter = urlParams.get(FilterQueryNames.type);
   const statusFilter = urlParams.get(FilterQueryNames.status);
   const pageQuery = urlParams.get(FilterQueryNames.page);
 
-  const { data: sessionData } = useSession();
-
-  const isAdmin = sessionData?.user?.permissions === "admin";
-
   const {
     data: transactionResponse,
     isLoading,
@@ -148,7 +146,7 @@ const Transactions = () => {
     UI_CONFIG.DEBOUNCE_DELAY
   );
 
-  if (!isAdmin) {
+  if (!canAccessTransactions) {
     return (
       <AuthStatus
         title="Unauthorized"
@@ -156,7 +154,6 @@ const Transactions = () => {
       />
     );
   }
-
   return (
     <>
       <Flex flexDir="column">
diff --git a/src/pages/admin/users.tsx b/src/pages/admin/users.tsx
index 32f44e8f..1cf78f38 100644
--- a/src/pages/admin/users.tsx
+++ b/src/pages/admin/users.tsx
@@ -1,15 +1,12 @@
 import { Flex, Heading } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
-import AuthStatus from "@/components/transcript/AuthStatus";
 import { useGetUsers } from "@/services/api/admin/useUsers";
 import UsersTable from "@/components/tables/UsersTable";
+import { useHasPermission } from "@/hooks/useHasPermissions";
+import AuthStatus from "@/components/transcript/AuthStatus";
 
 const Users = () => {
-  const { data: sessionData } = useSession();
-
-  const isAdmin = sessionData?.user?.permissions === "admin";
-
   const { data: usersResponse, isLoading, isError, refetch } = useGetUsers();
+  const canAccessUser = useHasPermission("accessUsers");
 
   const sortedData = usersResponse?.sort((a, b) => {
     if (a.createdAt > b.createdAt) return -1;
@@ -17,7 +14,7 @@ const Users = () => {
     return 0;
   });
 
-  if (!isAdmin) {
+  if (!canAccessUser) {
     return (
       <AuthStatus
         title="Unauthorized"
@@ -25,7 +22,6 @@ const Users = () => {
       />
     );
   }
-
   return (
     <>
       <Flex flexDir="column">
diff --git a/types.ts b/types.ts
index eadd4e18..1058e264 100644
--- a/types.ts
+++ b/types.ts
@@ -111,7 +111,13 @@ export type IDir = {
   nestDir?: IDir[];
 };
 
-export type UserRole = "reviewer" | "admin";
+export const UserRoles = {
+  reviewer: "reviewer",
+  evaluator: "evaluator",
+  admin: "admin",
+};
+
+export type UserRole = keyof typeof UserRoles;
 
 export type UserData = {
   permissions: UserRole;