Merge branch 'feat/roles' into 'main'

Implemented roles management

See merge request stackspin/dashboard!29

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 import { useAuth } from 'src/services/auth';
@@ -10,7 +10,13 @@ import { LoginCallback } from './modules/login/LoginCallback';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function App() {
-  const { authToken } = useAuth();
+  const { authToken, currentUser, isAdmin } = useAuth();
+
+  const redirectToLogin = !authToken || !currentUser?.app_roles;
+
+  const ProtectedRoute = () => {
+    return isAdmin ? <Outlet /> : <Navigate to="/dashboard" />;
+  };
 
   return (
     <>
@@ -26,7 +32,7 @@ function App() {
       </Helmet>
 
       <div className="app bg-gray-50 min-h-screen flex flex-col">
-        {!authToken ? (
+        {redirectToLogin ? (
           <Routes>
             <Route path="/login" element={<Login />} />
             <Route path="/login-callback" element={<LoginCallback />} />
@@ -36,7 +42,9 @@ function App() {
           <Layout>
             <Routes>
               <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/users" element={<ProtectedRoute />}>
                 <Route path="/users" element={<Users />} />
+              </Route>
               <Route path="*" element={<Navigate to="/dashboard" />} />
             </Routes>
           </Layout>

src/components/Header/Header.tsx

@@ -8,20 +8,28 @@ import clsx from 'clsx';
 import { CurrentUserModal } from './components/CurrentUserModal';
 
 const navigation = [
-  { name: 'Dashboard', to: '/dashboard' },
+  { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
-  { name: 'Users', to: '/users' },
+  { name: 'Users', to: '/users', requiresAdmin: true },
 ];
 
 function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+function filterNavigationByDashboardRole(isAdmin: boolean) {
+  if (isAdmin) {
+    return navigation;
+  }
+
+  return navigation.filter((item) => !item.requiresAdmin);
+}
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
 const Header: React.FC<HeaderProps> = () => {
   const [currentUserModal, setCurrentUserModal] = useState(false);
-  const { logOut, currentUser } = useAuth();
+  const { logOut, currentUser, isAdmin } = useAuth();
 
   const { pathname } = useLocation();
 
@@ -30,6 +38,8 @@ const Header: React.FC<HeaderProps> = () => {
   };
   const currentUserModalClose = () => setCurrentUserModal(false);
 
+  const navigationItems = filterNavigationByDashboardRole(isAdmin);
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -55,7 +65,7 @@ const Header: React.FC<HeaderProps> = () => {
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {navigation.map((item) => (
+                    {navigationItems.map((item) => (
                       <Link
                         key={item.name}
                         to={item.to}

src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx

@@ -1,31 +1,33 @@
+import _ from 'lodash';
 import React, { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
-import { Modal, Banner } from 'src/components';
+import { Modal } from 'src/components';
 import { Input, Select } from 'src/components/Form';
+import { useAuth } from 'src/services/auth';
 import { User, UserRole, useUsers } from 'src/services/users';
-import { appAccessList } from './consts';
+import { appAccessList, initialUserForm } from './consts';
 import { UserModalProps } from './types';
 
 export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
   const { editUserById, userModalLoading } = useUsers();
+  const { isAdmin } = useAuth();
 
   const { control, reset, handleSubmit } = useForm<User>({
-    defaultValues: {
+    defaultValues: initialUserForm,
-      name: null,
+  });
-      email: null,
+
-      id: null,
+  const { fields } = useFieldArray({
-      role_id: null,
+    control,
-      status: null,
+    name: 'app_roles',
-    },
   });
 
   useEffect(() => {
-    if (user) {
+    if (user && !_.isEmpty(user)) {
       reset(user);
     }
 
     return () => {
-      reset({ name: null, email: null, id: null });
+      reset(initialUserForm);
     };
   }, [user, reset]);
 
@@ -54,7 +56,7 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
   return (
     <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
       <div className="bg-white px-4">
-        <div className="space-y-4 divide-y divide-gray-200">
+        <div className="space-y-10 divide-y divide-gray-200">
           <div>
             <div>
               <h3 className="text-lg leading-6 font-medium text-gray-900">Profile</h3>
@@ -69,20 +71,23 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
                 <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
               </div>
 
-              <div className="sm:col-span-6">
+              {isAdmin && (
+                <>
+                  <div className="sm:col-span-3">
+                    {fields
+                      .filter((field) => field.name === 'dashboard')
+                      .map((item, index) => (
                         <Select
+                          key={item.id}
                           control={control}
-                  name="role_id"
+                          name={`app_roles.${index}.role`}
                           label="Role"
                           options={[
                             { value: UserRole.Admin, name: 'Admin' },
                             { value: UserRole.User, name: 'User' },
                           ]}
                         />
-              </div>
+                      ))}
-
-              <div className="sm:col-span-6">
-                <Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
                   </div>
 
                   <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
@@ -102,44 +107,54 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
                       </select>
                     </div>
                   </div>
+                </>
+              )}
             </div>
           </div>
 
-          <div className="opacity-40 cursor-default pointer-events-none select-none">
+          {isAdmin && (
-            <div className="mt-4">
+            <div>
+              <div className="mt-8">
                 <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
               </div>
 
               <div>
                 <div className="flow-root mt-6">
                   <ul className="-my-5 divide-y divide-gray-200 ">
-                  {appAccessList.map((app: any) => {
+                    {fields
-                    return (
+                      .filter((field) => field.name !== 'dashboard')
-                      <li className="py-4" key={app.name}>
+                      .map((item, index) => (
+                        <li className="py-4" key={item.name}>
                           <div className="flex items-center space-x-4">
                             <div className="flex-shrink-0 flex-1 flex items-center">
-                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
+                              <img
-                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
+                                className="h-10 w-10 rounded-md overflow-hidden"
+                                src={_.find(appAccessList, ['name', item.name!])?.image}
+                                alt={item.name ?? 'Image'}
+                              />
+                              <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                                {_.find(appAccessList, ['name', item.name!])?.label}
+                              </h3>
                             </div>
                             <div>
-                            <select
+                              <Select
-                              id={app.name}
+                                key={item.id}
-                              name={app.name}
+                                control={control}
-                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                name={`app_roles.${index}.role`}
-                            >
+                                options={[
-                              <option>User</option>
+                                  { value: UserRole.Admin, name: 'Admin' },
-                              <option>Admin</option>
+                                  { value: UserRole.User, name: 'User' },
-                              <option>Super Admin</option>
+                                ]}
-                            </select>
+                              />
                             </div>
                           </div>
                         </li>
-                    );
+                      ))}
-                  })}
                   </ul>
                 </div>
               </div>
             </div>
+          )}
         </div>
       </div>
     </Modal>

src/components/Header/components/CurrentUserModal/consts.ts

@@ -1,18 +1,55 @@
+import { UserRole } from 'src/services/users';
+
 export const appAccessList = [
   {
+    name: 'wekan',
     image: '/assets/wekan.svg',
-    name: 'Wekan',
+    label: 'Wekan',
   },
   {
+    name: 'wordpress',
     image: '/assets/wordpress.svg',
-    name: 'Wordpress',
+    label: 'Wordpress',
   },
   {
+    name: 'next-cloud',
     image: '/assets/nextcloud.svg',
-    name: 'NextCloud',
+    label: 'NextCloud',
   },
   {
+    name: 'zulip',
     image: '/assets/zulip.svg',
-    name: 'Zulip',
+    label: 'Zulip',
   },
 ];
+
+const initialAppRoles = [
+  {
+    name: 'dashboard',
+    role: UserRole.User,
+  },
+  {
+    name: 'wekan',
+    role: UserRole.User,
+  },
+  {
+    name: 'wordpress',
+    role: UserRole.User,
+  },
+  {
+    name: 'next-cloud',
+    role: UserRole.User,
+  },
+  {
+    name: 'zulip',
+    role: UserRole.User,
+  },
+];
+
+export const initialUserForm = {
+  id: '',
+  name: '',
+  email: '',
+  app_roles: initialAppRoles,
+  status: '',
+};

src/components/Header/components/CurrentUserModal/types.ts

@@ -3,5 +3,5 @@ import { User } from 'src/services/users';
 export type UserModalProps = {
   open: boolean;
   onClose: () => void;
-  user: User;
+  user: User | null;
 };

src/components/Table/Table.tsx

@@ -148,6 +148,7 @@ export const Table = <T extends Record<string, unknown>>({
               );
             })
           ) : (
+            <tr>
               <td colSpan={4} className="py-24">
                 <div className="flex flex-col justify-center items-center">
                   <div className="flex justify-center items-center border border-transparent text-base font-medium rounded-md text-white transition ease-in-out duration-150">
@@ -168,6 +169,7 @@ export const Table = <T extends Record<string, unknown>>({
                   <p className="text-sm text-primary-600 mt-2">Loading users</p>
                 </div>
               </td>
+            </tr>
           )}
         </tbody>
       </table>

src/modules/users/Users.tsx

@@ -5,6 +5,7 @@ import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
 import { debounce } from 'lodash';
+import { useAuth } from 'src/services/auth';
 import { UserModal } from './components/UserModal';
 
 export const Users: React.FC = () => {
@@ -13,6 +14,7 @@ export const Users: React.FC = () => {
   const [userId, setUserId] = useState(null);
   const [search, setSearch] = useState('');
   const { users, loadUsers, userTableLoading } = useUsers();
+  const { isAdmin } = useAuth();
 
   const handleSearch = (event: any) => {
     setSearch(event.target.value);
@@ -60,6 +62,7 @@ export const Users: React.FC = () => {
         Cell: (props: any) => {
           const { row } = props;
 
+          if (isAdmin) {
             return (
               <div className="text-right lg:opacity-0 group-hover:opacity-100 transition-opacity">
                 <button
@@ -72,11 +75,14 @@ export const Users: React.FC = () => {
                 </button>
               </div>
             );
+          }
+
+          return null;
         },
         width: 'auto',
       },
     ],
-    [],
+    [isAdmin],
   );
 
   const selectedRows = useCallback((rows: Record<string, boolean>) => {
@@ -88,6 +94,8 @@ export const Users: React.FC = () => {
       <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
         <div className="pb-5 mt-6 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
           <h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
+
+          {isAdmin && (
             <div className="mt-3 sm:mt-0 sm:ml-4">
               <button
                 onClick={() => configureModalOpen(null)}
@@ -98,6 +106,7 @@ export const Users: React.FC = () => {
                 Add new user
               </button>
             </div>
+          )}
         </div>
 
         <div className="flex justify-between w-100 my-3 items-center mb-5 ">
@@ -153,7 +162,7 @@ export const Users: React.FC = () => {
           </div>
         </div>
 
-        <UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
+        <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
       </div>
     </div>
   );

src/modules/users/components/UserModal/UserModal.tsx

@@ -1,26 +1,27 @@
 import React, { useEffect, useState } from 'react';
+import _ from 'lodash';
 import { TrashIcon } from '@heroicons/react/outline';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
-import { Modal, Banner, ConfirmationModal } from 'src/components';
+import { Modal, ConfirmationModal } from 'src/components';
 import { Input, Select } from 'src/components/Form';
 import { User, UserRole, useUsers } from 'src/services/users';
 import { useAuth } from 'src/services/auth';
-import { appAccessList } from './consts';
+import { appAccessList, initialUserForm } from './consts';
 import { UserModalProps } from './types';
 
-export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
+export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => {
   const [deleteModal, setDeleteModal] = useState(false);
-  const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
+  const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById, clearSelectedUser } =
-  const { currentUser } = useAuth();
+    useUsers();
+  const { currentUser, isAdmin } = useAuth();
 
   const { control, reset, handleSubmit } = useForm<User>({
-    defaultValues: {
+    defaultValues: initialUserForm,
-      name: null,
+  });
-      email: null,
+
-      id: null,
+  const { fields } = useFieldArray({
-      role_id: null,
+    control,
-      status: null,
+    name: 'app_roles',
-    },
   });
 
   useEffect(() => {
@@ -28,19 +29,19 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
       loadUser(userId);
     }
 
-    reset({ name: null, email: null, id: null, status: null });
+    reset(initialUserForm);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userId]);
+  }, [userId, open]);
 
   useEffect(() => {
-    if (user) {
+    if (!_.isEmpty(user)) {
       reset(user);
     }
 
     return () => {
-      reset({ name: null, email: null, id: null, status: null });
+      reset(initialUserForm);
     };
-  }, [user, reset]);
+  }, [user, reset, open]);
 
   const handleSave = async () => {
     try {
@@ -48,13 +49,14 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
         await handleSubmit((data) => editUserById(data))();
       } else {
         await handleSubmit((data) => createNewUser(data))();
-        reset({ name: null, email: null, id: null, status: null });
       }
-
-      onClose();
     } catch (e: any) {
       // Continue
     }
+
+    onClose();
+    clearSelectedUser();
+    setUserId(null);
   };
 
   const handleKeyPress = (e: any) => {
@@ -65,6 +67,8 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
 
   const handleClose = () => {
     onClose();
+    clearSelectedUser();
+    setUserId(null);
   };
 
   const deleteModalOpen = () => setDeleteModal(true);
@@ -74,6 +78,9 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
     if (userId) {
       deleteUserById(userId);
     }
+
+    clearSelectedUser();
+    setUserId(null);
     handleClose();
     deleteModalClose();
   };
@@ -87,7 +94,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
         isLoading={userModalLoading}
         leftActions={
           userId &&
-          user.email !== currentUser.email && (
+          user.email !== currentUser?.email && (
             <button
               onClick={deleteModalOpen}
               type="button"
@@ -101,7 +108,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
         useCancelButton
       >
         <div className="bg-white px-4">
-          <div className="space-y-4 divide-y divide-gray-200">
+          <div className="space-y-10 divide-y divide-gray-200">
             <div>
               <div>
                 <h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
@@ -116,24 +123,25 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
                   <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
                 </div>
 
-                <div className="sm:col-span-6">
+                <div className="sm:col-span-3">
+                  {fields
+                    .filter((field) => field.name === 'dashboard')
+                    .map((item, index) => (
                       <Select
+                        key={item.name}
                         control={control}
-                    name="role_id"
+                        name={`app_roles.${index}.role`}
                         label="Role"
                         options={[
-                      { value: UserRole.Admin, name: 'Admin' },
                           { value: UserRole.User, name: 'User' },
+                          { value: UserRole.Admin, name: 'Admin' },
                         ]}
                       />
+                    ))}
                 </div>
 
-                <div className="sm:col-span-6">
+                {isAdmin && (
-                  <Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
-                </div>
-
                   <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                  {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
                     <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                       Status
                     </label>
@@ -149,35 +157,47 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
                       </select>
                     </div>
                   </div>
+                )}
               </div>
             </div>
 
-            <div className="opacity-40 cursor-default pointer-events-none select-none">
+            {isAdmin && (
-              <div className="mt-4">
+              <div>
+                <div className="mt-8">
                   <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
                 </div>
 
                 <div>
                   <div className="flow-root mt-6">
                     <ul className="-my-5 divide-y divide-gray-200 ">
-                    {appAccessList.map((app: any) => {
+                      {fields.map((item, index) => {
+                        if (item.name === 'dashboard') {
+                          return null;
+                        }
+
                         return (
-                        <li className="py-4" key={app.name}>
+                          <li className="py-4" key={item.name}>
                             <div className="flex items-center space-x-4">
                               <div className="flex-shrink-0 flex-1 flex items-center">
-                              <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
+                                <img
-                              <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
+                                  className="h-10 w-10 rounded-md overflow-hidden"
+                                  src={_.find(appAccessList, ['name', item.name!])?.image}
+                                  alt={item.name ?? 'Image'}
+                                />
+                                <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                                  {_.find(appAccessList, ['name', item.name!])?.label}
+                                </h3>
                               </div>
                               <div>
-                              <select
+                                <Select
-                                id={app.name}
+                                  key={item.id}
-                                name={app.name}
+                                  control={control}
-                                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                                  name={`app_roles.${index}.role`}
-                              >
+                                  options={[
-                                <option>User</option>
+                                    { value: UserRole.User, name: 'User' },
-                                <option>Admin</option>
+                                    { value: UserRole.Admin, name: 'Admin' },
-                                <option>Super Admin</option>
+                                  ]}
-                              </select>
+                                />
                               </div>
                             </div>
                           </li>
@@ -187,6 +207,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
                   </div>
                 </div>
               </div>
+            )}
           </div>
         </div>
       </Modal>

src/modules/users/components/UserModal/consts.ts

@@ -1,18 +1,55 @@
+import { UserRole } from 'src/services/users';
+
 export const appAccessList = [
   {
+    name: 'wekan',
     image: '/assets/wekan.svg',
-    name: 'Wekan',
+    label: 'Wekan',
   },
   {
+    name: 'wordpress',
     image: '/assets/wordpress.svg',
-    name: 'Wordpress',
+    label: 'Wordpress',
   },
   {
+    name: 'nextcloud',
     image: '/assets/nextcloud.svg',
-    name: 'NextCloud',
+    label: 'NextCloud',
   },
   {
+    name: 'zulip',
     image: '/assets/zulip.svg',
-    name: 'Zulip',
+    label: 'Zulip',
   },
 ];
+
+const initialAppRoles = [
+  {
+    name: 'dashboard',
+    role: UserRole.User,
+  },
+  {
+    name: 'wekan',
+    role: UserRole.User,
+  },
+  {
+    name: 'wordpress',
+    role: UserRole.User,
+  },
+  {
+    name: 'nextcloud',
+    role: UserRole.User,
+  },
+  {
+    name: 'zulip',
+    role: UserRole.User,
+  },
+];
+
+export const initialUserForm = {
+  id: '',
+  name: '',
+  email: '',
+  app_roles: initialAppRoles,
+  status: '',
+};

src/modules/users/components/UserModal/types.ts

@@ -2,4 +2,5 @@ export type UserModalProps = {
   open: boolean;
   onClose: () => void;
   userId: string | null;
+  setUserId: any;
 };

src/services/auth/hooks/use-auth.ts

@@ -1,11 +1,12 @@
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { getAuthToken, getCurrentUser, signIn, signOut } from '../redux';
+import { getAuthToken, getCurrentUser, getIsAdmin, signIn, signOut } from '../redux';
 
 export function useAuth() {
   const dispatch = useDispatch();
   const currentUser = useSelector(getCurrentUser);
   const authToken = useSelector(getAuthToken);
+  const isAdmin = useSelector(getIsAdmin);
 
   const logIn = useCallback(
     (params) => {
@@ -21,6 +22,7 @@ export function useAuth() {
   return {
     authToken,
     currentUser,
+    isAdmin,
     logIn,
     logOut,
   };

src/services/auth/redux/index.ts

@@ -1,4 +1,4 @@
 export { signIn, signOut, AuthActionTypes } from './actions';
 export { default as reducer } from './reducers';
-export { getAuth, getIsAuthLoading, getAuthToken, getCurrentUser } from './selectors';
+export { getAuth, getIsAuthLoading, getAuthToken, getCurrentUser, getIsAdmin } from './selectors';
 export * from './types';

src/services/auth/redux/reducers.ts

@@ -6,12 +6,12 @@ import { AuthActionTypes } from './actions';
 import { transformAuthUser } from '../transformations';
 
 const initialCurrentUserState: User = {
-  email: null,
+  email: '',
-  name: null,
+  name: '',
-  id: null,
+  id: '',
-  role_id: null,
+  app_roles: [],
-  status: null,
+  status: '',
-  preferredUsername: null,
+  preferredUsername: '',
 };
 
 const initialState: AuthState = {

src/services/auth/redux/selectors.ts

@@ -1,6 +1,7 @@
 import { State } from 'src/redux';
 
 import { isLoading } from 'src/services/api';
+import { UserRole } from 'src/services/users';
 
 export const getAuth = (state: State) => state.auth;
 
@@ -8,6 +9,20 @@ export const getAuthToken = (state: State) => state.auth.token;
 
 export const getCurrentUser = (state: State) => state.auth.userInfo;
 
+export const getIsAdmin = (state: State) => {
+  // check since old users wont have this
+  if (state.auth.userInfo) {
+    if (!state.auth.userInfo.app_roles) {
+      return false;
+    }
+    const isAdmin = state.auth.userInfo.app_roles.find(
+      (role) => role.name === 'dashboard' && role.role === UserRole.Admin,
+    );
+    return !!isAdmin;
+  }
+  return false;
+};
+
 export const getIsAuthLoading = (state: State) => isLoading(getAuth(state));
 
 export const getToken = (state: State) => state.auth.token;

src/services/auth/transformations.ts

@@ -1,18 +1,21 @@
-import { UserRole } from '../users';
+import { User } from '../users';
 import { Auth } from './types';
+import { transformAppRoles } from '../users/transformations';
+
+const transformUser = (response: any): User => {
+  return {
+    id: response.id ?? '',
+    app_roles: response.app_roles ? response.app_roles.map(transformAppRoles) : [],
+    email: response.email ?? '',
+    name: response.name ?? '',
+    preferredUsername: response.preferredUsername ?? '',
+    status: response.state ?? '',
+  };
+};
 
 export const transformAuthUser = (response: any): Auth => {
-  const resolvedUserRole = !response.userInfo.role_id ? UserRole.User : response.userInfo.role_id;
-
   return {
     token: response.accessToken,
-    userInfo: {
+    userInfo: response.userInfo ? transformUser(response.userInfo) : null,
-      id: response.userInfo.id,
-      role_id: resolvedUserRole,
-      email: response.userInfo.email ?? null,
-      name: response.userInfo.name ?? null,
-      preferredUsername: response.userInfo.preferredUsername,
-      status: response.userInfo.state ?? null,
-    },
   };
 };

src/services/auth/types.ts

@@ -2,5 +2,5 @@ import { User } from '../users';
 
 export interface Auth {
   token: string | null;
-  userInfo: User;
+  userInfo: User | null;
 }

src/services/users/hooks/use-users.ts

@@ -1,5 +1,13 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { getUsers, fetchUsers, fetchUserById, updateUserById, createUser, deleteUser } from '../redux';
+import {
+  getUsers,
+  fetchUsers,
+  fetchUserById,
+  updateUserById,
+  createUser,
+  deleteUser,
+  clearCurrentUser,
+} from '../redux';
 import { getUserById, getUserModalLoading, getUserslLoading } from '../redux/selectors';
 
 export function useUsers() {
@@ -17,6 +25,10 @@ export function useUsers() {
     return dispatch(fetchUserById(id));
   }
 
+  function clearSelectedUser() {
+    return dispatch(clearCurrentUser());
+  }
+
   function editUserById(data: any) {
     return dispatch(updateUserById(data));
   }
@@ -39,5 +51,6 @@ export function useUsers() {
     userTableLoading,
     createNewUser,
     deleteUserById,
+    clearSelectedUser,
   };
 }

src/services/users/redux/actions.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from 'redux';
 import { showToast, ToastType } from 'src/common/util/show-toast';
+import { State } from 'src/redux/types';
 import { performApiCall } from 'src/services/api';
 import { AuthActionTypes } from 'src/services/auth';
 import { transformRequestUser, transformUser } from '../transformations';
@@ -68,9 +69,11 @@ export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) =>
   dispatch(setUserModalLoading(false));
 };
 
-export const updateUserById = (user: any) => async (dispatch: Dispatch<any>) => {
+export const updateUserById = (user: any) => async (dispatch: Dispatch<any>, getState: any) => {
   dispatch(setUserModalLoading(true));
 
+  const state: State = getState();
+
   try {
     const { data } = await performApiCall({
       path: `/users/${user.id}`,
@@ -83,10 +86,12 @@ export const updateUserById = (user: any) => async (dispatch: Dispatch<any>) =>
       payload: transformUser(data),
     });
 
+    if (state.auth.userInfo?.id === user.id) {
       dispatch({
         type: AuthActionTypes.UPDATE_AUTH_USER,
         payload: transformUser(data),
       });
+    }
 
     showToast('User updated successfully.', ToastType.Success);
 
@@ -148,3 +153,10 @@ export const deleteUser = (id: string) => async (dispatch: Dispatch<any>) => {
 
   dispatch(setUserModalLoading(false));
 };
+
+export const clearCurrentUser = () => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: UserActionTypes.DELETE_USER,
+    payload: {},
+  });
+};

src/services/users/transformations.ts

@@ -1,33 +1,38 @@
-import _ from 'lodash';
+import { AppRoles, User, UserRole } from './types';
 
-import { User, UserRole } from './types';
+export const transformAppRoles = (data: any): AppRoles => {
+  const resolvedAdminRole = data.role_id === 1 ? UserRole.Admin : UserRole.User;
+
+  return {
+    name: data.name ?? '',
+    role: resolvedAdminRole ?? UserRole.User,
+  };
+};
+
+export const transformRequestAppRoles = (data: AppRoles): any => {
+  const resolvedRequestRole = data.role === UserRole.Admin ? 1 : null;
+
+  return {
+    name: data.name ?? '',
+    role_id: resolvedRequestRole,
+  };
+};
 
 export const transformUser = (response: any): User => {
-  const userResponse = _.get(response, 'user', response);
-
-  const resolvedUserRole = !userResponse.traits.role_id ? UserRole.User : userResponse.traits.role_id;
-
   return {
-    id: userResponse.id,
+    id: response.id ?? '',
-    role_id: resolvedUserRole,
+    app_roles: response.traits.app_roles ? response.traits.app_roles.map(transformAppRoles) : [],
-    email: userResponse.traits.email,
+    email: response.traits.email ?? '',
-    name: userResponse.traits.name ?? null,
+    name: response.traits.name ?? '',
-    preferredUsername: userResponse.preferredUsername,
+    preferredUsername: response.preferredUsername ?? '',
-    status: userResponse.state,
+    status: response.state ?? '',
   };
 };
 
-export const transformRequestUser = (data: Pick<User, 'role_id' | 'name' | 'email'>) => {
+export const transformRequestUser = (data: Pick<User, 'app_roles' | 'name' | 'email'>) => {
-  if (data.role_id === UserRole.User) {
   return {
-      email: data.email,
+    app_roles: data.app_roles.map(transformRequestAppRoles),
-      name: data.name,
+    email: data.email ?? '',
-    };
+    name: data.name ?? '',
-  }
-
-  return {
-    role_id: Number(data.role_id),
-    email: data.email,
-    name: data.name,
   };
 };

src/services/users/types.ts

@@ -1,10 +1,10 @@
 export interface User {
-  id: number | null;
+  id: string;
-  role_id: UserRole | null;
+  app_roles: AppRoles[];
-  email: string | null;
+  email: string;
-  name: string | null;
+  name: string;
-  preferredUsername: string | null;
+  preferredUsername: string;
-  status: string | null;
+  status: string;
 }
 
 export interface FormUser extends User {
@@ -13,8 +13,13 @@ export interface FormUser extends User {
 }
 
 export enum UserRole {
-  Admin = '1',
+  Admin = 'admin',
-  User = '2',
+  User = 'user',
+}
+
+export interface AppRoles {
+  name: string | null;
+  role: UserRole | null;
 }
 
 export interface UserApiRequest {