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>

app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js

@@ -5,6 +5,11 @@ import {
   getAlertAudio,
   initOnEvents,
 } from 'shared/helpers/AudioNotificationHelper';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
+import { getUserPermissions } from 'dashboard/helper/permissionsHelper.js';
 
 const NOTIFICATION_TIME = 30000;
 
@@ -14,12 +19,13 @@ class DashboardAudioNotificationHelper {
     this.audioAlertType = 'none';
     this.playAlertOnlyWhenHidden = true;
     this.alertIfUnreadConversationExist = false;
+    this.currentUser = null;
     this.currentUserId = null;
     this.audioAlertTone = 'ding';
   }
 
   setInstanceValues = ({
-    currentUserId,
+    currentUser,
     alwaysPlayAudioAlert,
     alertIfUnreadConversationExist,
     audioAlertType,
@@ -28,7 +34,8 @@ class DashboardAudioNotificationHelper {
     this.audioAlertType = audioAlertType;
     this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
     this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
-    this.currentUserId = currentUserId;
+    this.currentUser = currentUser;
+    this.currentUserId = currentUser.id;
     this.audioAlertTone = audioAlertTone;
     initOnEvents.forEach(e => {
       document.addEventListener(e, this.onAudioListenEvent, false);
@@ -112,6 +119,20 @@ class DashboardAudioNotificationHelper {
     return message?.sender_id === this.currentUserId;
   };
 
+  isUserHasConversationPermission = () => {
+    const currentAccountId = window.WOOT.$store.getters.getCurrentAccountId;
+    // Get the user permissions for the current account
+    const userPermissions = getUserPermissions(
+      this.currentUser,
+      currentAccountId
+    );
+    // Check if the user has the required permissions
+    const hasRequiredPermission = [...ROLES, ...CONVERSATION_PERMISSIONS].some(
+      permission => userPermissions.includes(permission)
+    );
+    return hasRequiredPermission;
+  };
+
   shouldNotifyOnMessage = message => {
     if (this.audioAlertType === 'mine') {
       return this.isConversationAssignedToCurrentUser(message);
@@ -120,6 +141,11 @@ class DashboardAudioNotificationHelper {
   };
 
   onNewMessage = message => {
+    // If the user does not have the permission to view the conversation, then dismiss the alert
+    if (!this.isUserHasConversationPermission()) {
+      return;
+    }
+
     // If the message is sent by the current user or the
     // correct notification is not enabled, then dismiss the alert
     if (

app/javascript/dashboard/helper/permissionsHelper.js

@@ -41,3 +41,32 @@ export const buildPermissionsFromRouter = (routes = []) =>
 
     return acc;
   }, {});
+
+/**
+ * Filters and transforms items based on user permissions.
+ *
+ * @param {Object} items - An object containing items to be filtered.
+ * @param {Array} userPermissions - Array of permissions the user has.
+ * @param {Function} getPermissions - Function to extract required permissions from an item.
+ * @param {Function} [transformItem] - Optional function to transform each item after filtering.
+ * @returns {Array} Filtered and transformed items.
+ */
+export const filterItemsByPermission = (
+  items,
+  userPermissions,
+  getPermissions,
+  transformItem = (key, item) => ({ key, ...item })
+) => {
+  // Helper function to check if an item has the required permissions
+  const hasRequiredPermissions = item => {
+    const requiredPermissions = getPermissions(item);
+    return (
+      requiredPermissions.length === 0 ||
+      hasPermissions(requiredPermissions, userPermissions)
+    );
+  };
+
+  return Object.entries(items)
+    .filter(([, item]) => hasRequiredPermissions(item)) // Keep only items with required permissions
+    .map(([key, item]) => transformItem(key, item)); // Transform each remaining item
+};

app/javascript/dashboard/helper/routeHelpers.js

@@ -4,11 +4,39 @@ import {
   getCurrentAccount,
 } from './permissionsHelper';
 
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+  CONTACT_PERMISSIONS,
+  REPORTS_PERMISSIONS,
+  PORTAL_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
+
 export const routeIsAccessibleFor = (route, userPermissions = []) => {
   const { meta: { permissions: routePermissions = [] } = {} } = route;
   return hasPermissions(routePermissions, userPermissions);
 };
 
+export const defaultRedirectPage = (to, permissions) => {
+  const { accountId } = to.params;
+
+  const permissionRoutes = [
+    {
+      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+      path: 'dashboard',
+    },
+    { permissions: [CONTACT_PERMISSIONS], path: 'contacts' },
+    { permissions: [REPORTS_PERMISSIONS], path: 'reports/overview' },
+    { permissions: [PORTAL_PERMISSIONS], path: 'portals' },
+  ];
+
+  const route = permissionRoutes.find(({ permissions: routePermissions }) =>
+    hasPermissions(routePermissions, permissions)
+  );
+
+  return `accounts/${accountId}/${route ? route.path : 'dashboard'}`;
+};
+
 const validateActiveAccountRoutes = (to, user) => {
   // If the current account is active, then check for the route permissions
   const accountDashboardURL = `accounts/${to.params.accountId}/dashboard`;
@@ -22,7 +50,7 @@ const validateActiveAccountRoutes = (to, user) => {
 
   const isAccessible = routeIsAccessibleFor(to, userPermissions);
   // If the route is not accessible for the user, return to dashboard screen
-  return isAccessible ? null : accountDashboardURL;
+  return isAccessible ? null : defaultRedirectPage(to, userPermissions);
 };
 
 export const validateLoggedInRoutes = (to, user) => {

app/javascript/dashboard/helper/scriptHelpers.js

@@ -26,7 +26,7 @@ const initializeAudioAlerts = user => {
   } = uiSettings || {};
 
   DashboardAudioNotificationHelper.setInstanceValues({
-    currentUserId: user.id,
+    currentUser: user,
     audioAlertType: audioAlertType || 'none',
     audioAlertTone: audioAlertTone || 'ding',
     alwaysPlayAudioAlert: alwaysPlayAudioAlert || false,

app/javascript/dashboard/helper/specs/permissionsHelper.spec.js

@@ -3,6 +3,7 @@ import {
   getCurrentAccount,
   getUserPermissions,
   hasPermissions,
+  filterItemsByPermission,
 } from '../permissionsHelper';
 
 describe('#getCurrentAccount', () => {
@@ -105,3 +106,113 @@ describe('buildPermissionsFromRouter', () => {
     }).toThrow("The route doesn't have the required permissions defined");
   });
 });
+
+describe('filterItemsByPermission', () => {
+  const items = {
+    item1: { name: 'Item 1', permissions: ['agent', 'administrator'] },
+    item2: {
+      name: 'Item 2',
+      permissions: [
+        'conversation_manage',
+        'conversation_unassigned_manage',
+        'conversation_participating_manage',
+      ],
+    },
+    item3: { name: 'Item 3', permissions: ['contact_manage'] },
+    item4: { name: 'Item 4', permissions: ['report_manage'] },
+    item5: { name: 'Item 5', permissions: ['knowledge_base_manage'] },
+    item6: {
+      name: 'Item 6',
+      permissions: [
+        'agent',
+        'administrator',
+        'conversation_manage',
+        'conversation_unassigned_manage',
+        'conversation_participating_manage',
+        'contact_manage',
+        'report_manage',
+        'knowledge_base_manage',
+      ],
+    },
+    item7: { name: 'Item 7', permissions: [] },
+  };
+
+  const getPermissions = item => item.permissions;
+
+  it('filters items based on user permissions', () => {
+    const userPermissions = ['agent', 'contact_manage', 'report_manage'];
+    const result = filterItemsByPermission(
+      items,
+      userPermissions,
+      getPermissions
+    );
+
+    expect(result).toHaveLength(5);
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item1', name: 'Item 1' })
+    );
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item3', name: 'Item 3' })
+    );
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item4', name: 'Item 4' })
+    );
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item6', name: 'Item 6' })
+    );
+  });
+
+  it('includes items with empty permissions', () => {
+    const userPermissions = [];
+    const result = filterItemsByPermission(
+      items,
+      userPermissions,
+      getPermissions
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item7', name: 'Item 7' })
+    );
+  });
+
+  it('uses custom transform function when provided', () => {
+    const userPermissions = ['agent', 'contact_manage'];
+    const customTransform = (key, item) => ({ id: key, title: item.name });
+    const result = filterItemsByPermission(
+      items,
+      userPermissions,
+      getPermissions,
+      customTransform
+    );
+
+    expect(result).toHaveLength(4);
+    expect(result).toContainEqual({ id: 'item1', title: 'Item 1' });
+    expect(result).toContainEqual({ id: 'item3', title: 'Item 3' });
+    expect(result).toContainEqual({ id: 'item6', title: 'Item 6' });
+  });
+
+  it('handles empty items object', () => {
+    const result = filterItemsByPermission({}, ['agent'], getPermissions);
+
+    expect(result).toHaveLength(0);
+  });
+
+  it('handles custom getPermissions function', () => {
+    const customItems = {
+      item1: { name: 'Item 1', requiredPerms: ['agent', 'administrator'] },
+      item2: { name: 'Item 2', requiredPerms: ['contact_manage'] },
+    };
+    const customGetPermissions = item => item.requiredPerms;
+    const result = filterItemsByPermission(
+      customItems,
+      ['agent'],
+      customGetPermissions
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item1', name: 'Item 1' })
+    );
+  });
+});

app/javascript/dashboard/helper/specs/routeHelpers.spec.js

@@ -1,6 +1,7 @@
 import {
   getConversationDashboardRoute,
   isAConversationRoute,
+  defaultRedirectPage,
   routeIsAccessibleFor,
   validateLoggedInRoutes,
   isAInboxViewRoute,
@@ -14,6 +15,57 @@ describe('#routeIsAccessibleFor', () => {
   });
 });
 
+describe('#defaultRedirectPage', () => {
+  const to = {
+    params: { accountId: '2' },
+    fullPath: '/app/accounts/2/dashboard',
+    name: 'home',
+  };
+
+  it('should return dashboard route for users with conversation permissions', () => {
+    const permissions = ['conversation_manage', 'agent'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+
+  it('should return contacts route for users with contact permissions', () => {
+    const permissions = ['contact_manage'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/contacts');
+  });
+
+  it('should return reports route for users with report permissions', () => {
+    const permissions = ['report_manage'];
+    expect(defaultRedirectPage(to, permissions)).toBe(
+      'accounts/2/reports/overview'
+    );
+  });
+
+  it('should return portals route for users with portal permissions', () => {
+    const permissions = ['knowledge_base_manage'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/portals');
+  });
+
+  it('should return dashboard route as default for users with custom roles', () => {
+    const permissions = ['custom_role'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+
+  it('should return dashboard route for users with administrator role', () => {
+    const permissions = ['administrator'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+
+  it('should return dashboard route for users with multiple permissions', () => {
+    const permissions = [
+      'contact_manage',
+      'custom_role',
+      'conversation_manage',
+      'agent',
+      'administrator',
+    ];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+});
+
 describe('#validateLoggedInRoutes', () => {
   describe('when account access is missing', () => {
     it('should return the login route', () => {