Add typing: /src/components/auth

src/components/auth/AccessControl/AccessControl.tsx

-import { useContext } from "react";
+import { useContext, type ReactNode } from "react";
 import { userContext } from "@ess-ics/ce-ui-common";
 import { AccessDenied } from "../AccessDenied";
+import { UserContext } from "../../../types/common";
 
-const checkPermissions = (userRoles, allowedRoles) => {
+interface AllowedUserWithRoles {
+  user: string;
+  role: string;
+}
+
+interface AccessControlProps {
+  allowedRoles: string[];
+  allowedUsersWithRoles?: AllowedUserWithRoles[];
+  children: ReactNode;
+  renderNoAccess?: () => ReactNode;
+}
+
+const checkPermissions = (
+  userRoles: UserContext["userRoles"],
+  allowedRoles: string[]
+) => {
   if (allowedRoles.length === 0) {
     return true;
   }
@@ -10,15 +26,23 @@ const checkPermissions = (userRoles, allowedRoles) => {
   return userRoles?.some((role) => allowedRoles.includes(role));
 };
 
-const checkUser = (user, userRoles, allowedUsersWithRoles) => {
-  if (!allowedUsersWithRoles || allowedUsersWithRoles.length === 0) {
+const checkUser = (
+  user: UserContext["user"],
+  userRoles: UserContext["userRoles"],
+  allowedUsersWithRoles?: AllowedUserWithRoles[]
+) => {
+  if (
+    !allowedUsersWithRoles ||
+    allowedUsersWithRoles.length === 0 ||
+    (userRoles && userRoles.length === 0)
+  ) {
     return false;
   }
 
   return allowedUsersWithRoles.find(
     (userWithRole) =>
       userWithRole.user === user?.loginName &&
-      userRoles.includes(userWithRole.role)
+      userRoles?.includes(userWithRole.role)
   );
 };
 
@@ -27,8 +51,8 @@ export const AccessControl = ({
   allowedUsersWithRoles,
   children,
   renderNoAccess
-}) => {
-  const { user, userRoles } = useContext(userContext);
+}: AccessControlProps) => {
+  const { user, userRoles } = useContext<UserContext>(userContext);
 
   const permitted =
     checkPermissions(userRoles, allowedRoles) ||

src/components/auth/TokenRenew/TokenRenew.tsx

@@ -2,9 +2,10 @@ import { useContext, useEffect } from "react";
 import { userContext } from "@ess-ics/ce-ui-common";
 import env from "../../../config/env";
 import { useTokenRenewMutation } from "../../../store/deployApi";
+import { UserContext } from "../../../types/common";
 
 export const TokenRenew = () => {
-  const { user } = useContext(userContext);
+  const { user } = useContext<UserContext>(userContext);
 
   const [renewToken] = useTokenRenewMutation();