feat(client): handle nav tabs admin access and add admin column for u…

…sers list

packages/client/src/elements/AppBar/index.tsx

@@ -37,7 +37,7 @@ const defaultTabs: Array<AppBarItem> = [
     path: mapRoutesToArray(admin),
     label: 'menu.admin',
     icon: <AdminIcon />,
-    onlyAdmin: false,
+    onlyAdmin: true,
     component: AdminDashboard,
     exact: true,
   },

packages/client/src/elements/layouts/TabbedLayout/Tabs/Tabs.utils.ts

@@ -1,7 +1,7 @@
 import { Children, isValidElement, ReactNode } from 'react';
 
-import { Role } from '../../../../enums/role.enum';
 import { ApiUser } from '../../../../interfaces/api.types';
+import isAdmin from '../../../../utils/isAdmin';
 import { TabProps } from '../Tab/Tab.types';
 import { GetIndicatorAnimationSpace, GetIndicatorSizeProps, IndicatorSize } from './Tabs.types';
 
@@ -30,8 +30,13 @@ export const getIndicatorAnimationSpace = ({
   return emptyWidthForValue + tabsWidthForValue + additionalSpaceForIndicatorWidth;
 };
 
-export const hasAccess = (onlyAdmin?: boolean, user?: ApiUser) =>
-  !(onlyAdmin && !user?.roles?.includes(Role.Admin));
+export const hasAccess = (onlyAdmin?: boolean, user?: ApiUser) => {
+  if (!onlyAdmin) {
+    return true;
+  }
+
+  return isAdmin(user?.roles);
+};
 
 export const countAvailableChildren = (children: ReactNode, user?: ApiUser) =>
   Children.count(

packages/client/src/enums/role.enum.ts

@@ -1,4 +1,5 @@
 export enum Role {
   User = 'user',
   Admin = 'admin',
+  SuperAdmin = 'superAdmin',
 }

packages/client/src/pages/authorized/Admin/Users/Users.styled.ts

@@ -1,4 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import { KeyIcon } from '../../../../icons';
 
 export const Wrapper = styled.div`
   height: 100%;
@@ -15,3 +17,15 @@ export const ListContainer = styled.div`
   overflow-x: auto;
   padding-top: 60px;
 `;
+
+export const AdminAccessIcon = styled(KeyIcon)(
+  ({ theme: { palette } }) => css`
+    color: ${palette.colors.orange};
+  `,
+);
+
+export const UserAccessIcon = styled(KeyIcon)(
+  ({ theme: { palette } }) => css`
+    color: ${palette.text.secondary};
+  `,
+);

packages/client/src/pages/authorized/Admin/Users/index.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { CardList, DateField, DetailedList, FunctionField, TextField } from '../../../../elements';
 import { useMediaQuery } from '../../../../hooks';
 import { ApiUser } from '../../../../interfaces/api.types';
-import { ListContainer, Wrapper } from './Users.styled';
+import { isAdmin } from '../../../../utils';
+import { AdminAccessIcon, ListContainer, UserAccessIcon, Wrapper } from './Users.styled';
 
 const Users = () => {
   const isMobile = useMediaQuery(({ breakpoints, down }) => down(breakpoints.lg));
@@ -27,6 +28,15 @@ const Users = () => {
               label="user.name"
               render={({ firstName, lastName }) => `${firstName} ${lastName}`}
             />
+            <FunctionField<ApiUser>
+              label="Is admin"
+              render={({ roles }) => {
+                if (isAdmin(roles)) {
+                  return <AdminAccessIcon />;
+                }
+                return <UserAccessIcon />;
+              }}
+            />
             <TextField source="email" />
             <DateField source="createdAt" showTime />
           </DetailedList>

packages/client/src/utils/index.ts

@@ -2,6 +2,7 @@ export { default as getCssColor } from './getCssColor';
 export { default as getLabelFromSource } from './getLabelFromSource';
 export { default as getPlaceholderFromSource } from './getPlaceholderFromSource';
 export { default as hexToRgba } from './hexToRgba';
+export { default as isAdmin } from './isAdmin';
 export { default as mapHistoryEventToLabel } from './mapHistoryEventToLabel';
 export { default as onlyOnDevEnv } from './onlyOnDevEnv';
 export { default as registerWebPush } from './registerWebPush';

packages/client/src/utils/isAdmin.ts

@@ -0,0 +1,14 @@
+import { Role } from '../enums/role.enum';
+
+const isAdmin = (roles?: Role[]): boolean => {
+  if (!roles) {
+    return false;
+  }
+
+  const hasAdminRole = roles.includes(Role.Admin);
+  const hasSuperAdminRole = roles.includes(Role.SuperAdmin);
+
+  return hasAdminRole || hasSuperAdminRole;
+};
+
+export default isAdmin;