feat: add changeRole (#768)

* feat: add changeRole in project

* fix: update PR based on feedback

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/src/component/project/ProjectAccess/ProjectAccess.tsx

@@ -1,23 +1,21 @@
 /* eslint-disable react/jsx-no-target-blank */
 import React, { useState } from 'react';
 import { Alert } from '@material-ui/lab';
-
 import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
-
 import PageContent from '../../common/PageContent';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useStyles } from './ProjectAccess.styles';
 import { useParams } from 'react-router-dom';
-import { IProjectViewParams } from '../../../interfaces/params';
-import usePagination from '../../../hooks/usePagination';
-import PaginateUI from '../../common/PaginateUI/PaginateUI';
-import useToast from '../../../hooks/useToast';
-import ConfirmDialogue from '../../common/Dialogue';
+import { IProjectViewParams } from 'interfaces/params';
+import usePagination from 'hooks/usePagination';
+import PaginateUI from 'component/common/PaginateUI/PaginateUI';
+import useToast from 'hooks/useToast';
+import ConfirmDialogue from 'component/common/Dialogue';
 import useProjectAccess, {
     IProjectAccessUser,
-} from '../../../hooks/api/getters/useProjectAccess/useProjectAccess';
-import useProjectApi from '../../../hooks/api/actions/useProjectApi/useProjectApi';
-import HeaderTitle from '../../common/HeaderTitle';
+} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
+import HeaderTitle from 'component/common/HeaderTitle';
 import { ProjectAccessList } from './ProjectAccessList/ProjectAccessList';
 
 export const ProjectAccess = () => {
@@ -28,7 +26,7 @@ export const ProjectAccess = () => {
     const { isOss } = useUiConfig();
     const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
         usePagination(access.users, 10);
-    const { removeUserFromRole, addUserToRole } = useProjectApi();
+    const { removeUserFromRole, changeUserRole } = useProjectApi();
     const [showDelDialogue, setShowDelDialogue] = useState(false);
     const [user, setUser] = useState<IProjectAccessUser | undefined>();
 
@@ -48,7 +46,7 @@ export const ProjectAccess = () => {
     }
 
     const handleRoleChange =
-        (userId: number, currRoleId: number) =>
+        (userId: number) =>
         async (
             evt: React.ChangeEvent<{
                 name?: string;
@@ -57,13 +55,12 @@ export const ProjectAccess = () => {
         ) => {
             const roleId = Number(evt.target.value);
             try {
-                await removeUserFromRole(projectId, currRoleId, userId);
-                await addUserToRole(projectId, roleId, userId);
+                await changeUserRole(projectId, roleId, userId);
                 refetchProjectAccess();
-
                 setToastData({
                     type: 'success',
-                    title: 'User role changed successfully',
+                    title: 'Success',
+                    text: 'User role changed successfully',
                 });
             } catch (err: any) {
                 setToastData({

frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessList.tsx

@@ -2,16 +2,13 @@ import { List } from '@material-ui/core';
 import {
     IProjectAccessOutput,
     IProjectAccessUser,
-} from '../../../../hooks/api/getters/useProjectAccess/useProjectAccess';
+} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
 import { ProjectAccessListItem } from './ProjectAccessListItem/ProjectAccessListItem';
 import React from 'react';
 
 interface IProjectAccesListProps {
     page: IProjectAccessUser[];
-    handleRoleChange: (
-        userId: number,
-        currRoleId: number
-    ) => (
+    handleRoleChange: (userId: number) => (
         evt: React.ChangeEvent<{
             name?: string;
             value: unknown;

frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx

@@ -11,20 +11,17 @@ import { useParams } from 'react-router-dom';
 import {
     IProjectAccessOutput,
     IProjectAccessUser,
-} from '../../../../../hooks/api/getters/useProjectAccess/useProjectAccess';
-import { IProjectViewParams } from '../../../../../interfaces/params';
-import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
-import { UPDATE_PROJECT } from '../../../../providers/AccessProvider/permissions';
+} from 'hooks/api/getters/useProjectAccess/useProjectAccess';
+import { IProjectViewParams } from 'interfaces/params';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
 import { ProjectRoleSelect } from '../../ProjectRoleSelect/ProjectRoleSelect';
 import { useStyles } from '../ProjectAccessListItem/ProjectAccessListItem.styles';
 import React from 'react';
 
 interface IProjectAccessListItemProps {
     user: IProjectAccessUser;
-    handleRoleChange: (
-        userId: number,
-        currRoleId: number
-    ) => (
+    handleRoleChange: (userId: number) => (
         evt: React.ChangeEvent<{
             name?: string;
             value: unknown;
@@ -61,7 +58,7 @@ export const ProjectAccessListItem = ({
                     id={`role-${user.id}-select`}
                     key={user.id}
                     placeholder="Choose role"
-                    onChange={handleRoleChange(user.id, user.roleId)}
+                    onChange={handleRoleChange(user.id)}
                     roles={access.roles}
                     value={user.roleId || -1}
                 >

frontend/src/hooks/api/actions/useProjectApi/useProjectApi.ts

@@ -155,6 +155,17 @@ const useProjectApi = () => {
         }
     };
 
+    const changeUserRole = (
+        projectId: string,
+        roleId: number,
+        userId: number
+    ) => {
+        const path = `api/admin/projects/${projectId}/users/${userId}/roles/${roleId}`;
+        const req = createRequest(path, { method: 'PUT' });
+
+        return makeRequest(req.caller, req.id);
+    };
+
     return {
         createProject,
         validateId,
@@ -164,6 +175,7 @@ const useProjectApi = () => {
         removeEnvironmentFromProject,
         addUserToRole,
         removeUserFromRole,
+        changeUserRole,
         errors,
         loading,
         searchProjectUser,