chore: Custom Roles to manage permissions [ UI ] (#9865)

In admin settings, this Pr will add the UI for managing custom roles (
ref: https://github.com/chatwoot/chatwoot/pull/9995 ). It also handles
the routing logic changes to accommodate fine-tuned permissions.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Sojan Jose
2024-09-17 11:40:11 -07:00
committed by GitHub
parent fba73c7186
commit 58e78621ba
74 changed files with 2423 additions and 558 deletions

View File

@@ -27,6 +27,7 @@ import conversationTypingStatus from './modules/conversationTypingStatus';
import conversationWatchers from './modules/conversationWatchers';
import csat from './modules/csat';
import customViews from './modules/customViews';
import customRole from './modules/customRole';
import dashboardApps from './modules/dashboardApps';
import globalConfig from 'shared/store/globalConfig';
import inboxAssignableAgents from './modules/inboxAssignableAgents';
@@ -77,6 +78,7 @@ export default new Vuex.Store({
conversationWatchers,
csat,
customViews,
customRole,
dashboardApps,
globalConfig,
inboxAssignableAgents,

View File

@@ -66,6 +66,14 @@ export const getters = {
return currentAccount.role;
},
getCurrentCustomRoleId($state, $getters) {
const { accounts = [] } = $state.currentUser;
const [currentAccount = {}] = accounts.filter(
account => account.id === $getters.getCurrentAccountId
);
return currentAccount.custom_role_id;
},
getCurrentUser($state) {
return $state.currentUser;
},

View File

@@ -0,0 +1,100 @@
import { throwErrorMessage } from 'dashboard/store/utils/api';
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import * as types from '../mutation-types';
import CustomRoleAPI from '../../api/customRole';
export const state = {
records: [],
uiFlags: {
fetchingList: false,
creatingItem: false,
updatingItem: false,
deletingItem: false,
},
};
export const getters = {
getCustomRoles($state) {
return $state.records;
},
getUIFlags($state) {
return $state.uiFlags;
},
};
export const actions = {
getCustomRole: async function getCustomRole({ commit }) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: true });
try {
const response = await CustomRoleAPI.get();
commit(types.default.SET_CUSTOM_ROLE, response.data);
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false });
} catch (error) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false });
}
},
createCustomRole: async function createCustomRole({ commit }, customRoleObj) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: true });
try {
const response = await CustomRoleAPI.create(customRoleObj);
commit(types.default.ADD_CUSTOM_ROLE, response.data);
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false });
return response.data;
} catch (error) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false });
return throwErrorMessage(error);
}
},
updateCustomRole: async function updateCustomRole(
{ commit },
{ id, ...updateObj }
) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: true });
try {
const response = await CustomRoleAPI.update(id, updateObj);
commit(types.default.EDIT_CUSTOM_ROLE, response.data);
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false });
return response.data;
} catch (error) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false });
return throwErrorMessage(error);
}
},
deleteCustomRole: async function deleteCustomRole({ commit }, id) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true });
try {
await CustomRoleAPI.delete(id);
commit(types.default.DELETE_CUSTOM_ROLE, id);
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true });
return id;
} catch (error) {
commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true });
return throwErrorMessage(error);
}
},
};
export const mutations = {
[types.default.SET_CUSTOM_ROLE_UI_FLAG](_state, data) {
_state.uiFlags = {
..._state.uiFlags,
...data,
};
},
[types.default.SET_CUSTOM_ROLE]: MutationHelpers.set,
[types.default.ADD_CUSTOM_ROLE]: MutationHelpers.create,
[types.default.EDIT_CUSTOM_ROLE]: MutationHelpers.update,
[types.default.DELETE_CUSTOM_ROLE]: MutationHelpers.destroy,
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

View File

@@ -42,6 +42,26 @@ describe('#getters', () => {
});
});
describe('#getCurrentCustomRoleId', () => {
it('returns current custom role id', () => {
expect(
getters.getCurrentCustomRoleId(
{ currentUser: { accounts: [{ id: 1, custom_role_id: 1 }] } },
{ getCurrentAccountId: 1 }
)
).toEqual(1);
});
it('returns undefined if account is not available', () => {
expect(
getters.getCurrentCustomRoleId(
{ currentUser: { accounts: [{ id: 1, custom_role_id: 1 }] } },
{ getCurrentAccountId: 2 }
)
).toEqual(undefined);
});
});
describe('#getCurrentUserAvailability', () => {
it('returns correct availability status', () => {
expect(

View File

@@ -0,0 +1,97 @@
import axios from 'axios';
import { actions } from '../../customRole';
import * as types from '../../../mutation-types';
import { customRoleList } from './fixtures';
const commit = vi.fn();
global.axios = axios;
vi.mock('axios');
describe('#actions', () => {
describe('#getCustomRole', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: customRoleList });
await actions.getCustomRole({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: true }],
[types.default.SET_CUSTOM_ROLE, customRoleList],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.getCustomRole({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: true }],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false }],
]);
});
});
describe('#createCustomRole', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: customRoleList[0] });
await actions.createCustomRole({ commit }, customRoleList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: true }],
[types.default.ADD_CUSTOM_ROLE, customRoleList[0]],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.createCustomRole({ commit })).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: true }],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false }],
]);
});
});
describe('#updateCustomRole', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({ data: customRoleList[0] });
await actions.updateCustomRole(
{ commit },
{ id: 1, ...customRoleList[0] }
);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: true }],
[types.default.EDIT_CUSTOM_ROLE, customRoleList[0]],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.updateCustomRole({ commit }, { id: 1 })
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: true }],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false }],
]);
});
});
describe('#deleteCustomRole', () => {
it('sends correct actions if API is success', async () => {
axios.delete.mockResolvedValue({ data: customRoleList[0] });
await actions.deleteCustomRole({ commit }, 1);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
[types.default.DELETE_CUSTOM_ROLE, 1],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.deleteCustomRole({ commit }, 1)).rejects.toThrow(
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
[types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
]);
});
});
});

View File

@@ -0,0 +1,77 @@
export const customRoleList = [
{
id: 1,
name: 'Super Custom Role',
description: 'Role with all available custom role permissions',
permissions: [
'conversation_participating_manage',
'conversation_unassigned_manage',
'conversation_manage',
'contact_manage',
'report_manage',
'knowledge_base_manage',
],
created_at: '2024-09-04T05:30:22.282Z',
updated_at: '2024-09-05T09:21:02.844Z',
},
{
id: 2,
name: 'Conversation Manager Role',
description: 'Role for managing all aspects of conversations',
permissions: [
'conversation_unassigned_manage',
'conversation_participating_manage',
'conversation_manage',
],
created_at: '2024-09-05T09:21:38.692Z',
updated_at: '2024-09-05T09:21:38.692Z',
},
{
id: 3,
name: 'Participating Agent Role',
description: 'Role for agents participating in conversations',
permissions: ['conversation_participating_manage'],
created_at: '2024-09-06T08:03:14.550Z',
updated_at: '2024-09-06T08:03:14.550Z',
},
{
id: 4,
name: 'Contact Manager Role',
description: 'Role for managing contacts only',
permissions: ['contact_manage'],
created_at: '2024-09-06T08:15:56.877Z',
updated_at: '2024-09-06T09:53:28.103Z',
},
{
id: 5,
name: 'Report Analyst Role',
description: 'Role for accessing and managing reports',
permissions: ['report_manage'],
created_at: '2024-09-06T09:53:58.277Z',
updated_at: '2024-09-06T09:53:58.277Z',
},
{
id: 6,
name: 'Knowledge Base Editor Role',
description: 'Role for managing the knowledge base',
permissions: ['knowledge_base_manage'],
created_at: '2024-09-06T09:54:27.649Z',
updated_at: '2024-09-06T09:54:27.649Z',
},
{
id: 7,
name: 'Unassigned Queue Manager Role',
description: 'Role for managing unassigned conversations',
permissions: ['conversation_unassigned_manage'],
created_at: '2024-09-06T09:55:00.503Z',
updated_at: '2024-09-06T09:55:00.503Z',
},
{
id: 8,
name: 'Basic Conversation Handler Role',
description: 'Role for basic conversation management',
permissions: ['conversation_manage'],
created_at: '2024-09-06T09:55:19.519Z',
updated_at: '2024-09-06T09:55:19.519Z',
},
];

View File

@@ -0,0 +1,26 @@
import { getters } from '../../customRole';
import { customRoleList } from './fixtures';
describe('#getters', () => {
it('getCustomRoles', () => {
const state = { records: customRoleList };
expect(getters.getCustomRoles(state)).toEqual(customRoleList);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
fetchingList: true,
creatingItem: false,
updatingItem: false,
deletingItem: false,
},
};
expect(getters.getUIFlags(state)).toEqual({
fetchingList: true,
creatingItem: false,
updatingItem: false,
deletingItem: false,
});
});
});

View File

@@ -0,0 +1,48 @@
import types from '../../../mutation-types';
import { mutations } from '../../customRole';
import { customRoleList } from './fixtures';
describe('#mutations', () => {
describe('#SET_CUSTOM_ROLE', () => {
it('set custom role records', () => {
const state = { records: [] };
mutations[types.SET_CUSTOM_ROLE](state, customRoleList);
expect(state.records).toEqual(customRoleList);
});
});
describe('#ADD_CUSTOM_ROLE', () => {
it('push newly created custom role to the store', () => {
const state = { records: [customRoleList[0]] };
mutations[types.ADD_CUSTOM_ROLE](state, customRoleList[1]);
expect(state.records).toEqual([customRoleList[0], customRoleList[1]]);
});
});
describe('#EDIT_CUSTOM_ROLE', () => {
it('update custom role record', () => {
const state = { records: [customRoleList[0]] };
const updatedRole = { ...customRoleList[0], name: 'Updated Role' };
mutations[types.EDIT_CUSTOM_ROLE](state, updatedRole);
expect(state.records).toEqual([updatedRole]);
});
});
describe('#DELETE_CUSTOM_ROLE', () => {
it('delete custom role record', () => {
const state = { records: [customRoleList[0], customRoleList[1]] };
mutations[types.DELETE_CUSTOM_ROLE](state, customRoleList[0].id);
expect(state.records).toEqual([customRoleList[1]]);
});
});
describe('#SET_CUSTOM_ROLE_UI_FLAG', () => {
it('set custom role UI flags', () => {
const state = { uiFlags: {} };
mutations[types.SET_CUSTOM_ROLE_UI_FLAG](state, {
fetchingList: true,
});
expect(state.uiFlags).toEqual({ fetchingList: true });
});
});
});

View File

@@ -98,6 +98,13 @@ export default {
EDIT_CANNED: 'EDIT_CANNED',
DELETE_CANNED: 'DELETE_CANNED',
// Custom Role
SET_CUSTOM_ROLE_UI_FLAG: 'SET_CUSTOM_ROLE_UI_FLAG',
SET_CUSTOM_ROLE: 'SET_CUSTOM_ROLE',
ADD_CUSTOM_ROLE: 'ADD_CUSTOM_ROLE',
EDIT_CUSTOM_ROLE: 'EDIT_CUSTOM_ROLE',
DELETE_CUSTOM_ROLE: 'DELETE_CUSTOM_ROLE',
// Labels
SET_LABEL_UI_FLAG: 'SET_LABEL_UI_FLAG',
SET_LABELS: 'SET_LABELS',