chore: Move frontend authorization to permission based system (#9709)

We previously relied on user roles to determine whether to render
specific routes in our frontend components. A permissions-based model is replacing this approach.


Follow up: #9695

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/routes/dashboard/contacts/routes.js

@@ -7,13 +7,17 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts'),
     name: 'contacts_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactsView,
   },
   {
     path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
     name: 'contacts_segments_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactsView,
     props: route => {
       return { segmentsId: route.params.id };
@@ -22,7 +26,9 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/labels/:label/contacts'),
     name: 'contacts_labels_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactsView,
     props: route => {
       return { label: route.params.label };
@@ -31,7 +37,9 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
     name: 'contact_profile_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactManageView,
     props: route => {
       return { contactId: route.params.contactId };

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -7,7 +7,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => {
         return { inboxId: 0 };
@@ -16,7 +18,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/conversations/:conversation_id'),
       name: 'inbox_conversation',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => {
         return { inboxId: 0, conversationId: route.params.conversation_id };
@@ -25,7 +29,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
       name: 'inbox_dashboard',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => {
         return { inboxId: route.params.inbox_id };
@@ -36,7 +42,9 @@ export default {
         'accounts/:accountId/inbox/:inbox_id/conversations/:conversation_id'
       ),
       name: 'conversation_through_inbox',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => {
         return {
@@ -48,7 +56,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/label/:label'),
       name: 'label_conversations',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({ label: route.params.label }),
     },
@@ -57,7 +67,9 @@ export default {
         'accounts/:accountId/label/:label/conversations/:conversation_id'
       ),
       name: 'conversations_through_label',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversation_id,
@@ -67,7 +79,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/team/:teamId'),
       name: 'team_conversations',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({ teamId: route.params.teamId }),
     },
@@ -76,7 +90,9 @@ export default {
         'accounts/:accountId/team/:teamId/conversations/:conversationId'
       ),
       name: 'conversations_through_team',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -86,7 +102,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/custom_view/:id'),
       name: 'folder_conversations',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({ foldersId: route.params.id }),
     },
@@ -95,7 +113,9 @@ export default {
         'accounts/:accountId/custom_view/:id/conversations/:conversation_id'
       ),
       name: 'conversations_through_folders',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversation_id,
@@ -105,7 +125,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/mentions/conversations'),
       name: 'conversation_mentions',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => ({ conversationType: 'mention' }),
     },
@@ -114,7 +136,9 @@ export default {
         'accounts/:accountId/mentions/conversations/:conversationId'
       ),
       name: 'conversation_through_mentions',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -124,7 +148,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/unattended/conversations'),
       name: 'conversation_unattended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => ({ conversationType: 'unattended' }),
     },
@@ -133,7 +159,9 @@ export default {
         'accounts/:accountId/unattended/conversations/:conversationId'
       ),
       name: 'conversation_through_unattended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -143,7 +171,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/participating/conversations'),
       name: 'conversation_participating',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => ({ conversationType: 'participating' }),
     },
@@ -152,7 +182,9 @@ export default {
         'accounts/:accountId/participating/conversations/:conversationId'
       ),
       name: 'conversation_through_participating',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -28,7 +28,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/suspended'),
       name: 'account_suspended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: Suspended,
     },
   ],

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -30,13 +30,17 @@ const portalRoutes = [
   {
     path: getPortalRoute(''),
     name: 'default_portal_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator'],
+    },
     component: DefaultPortalArticles,
   },
   {
     path: getPortalRoute('all'),
     name: 'list_all_portals',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllPortals,
   },
   {
@@ -47,55 +51,73 @@ const portalRoutes = [
         path: '',
         name: 'new_portal_information',
         component: PortalDetails,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: ':portalSlug/customization',
         name: 'portal_customization',
         component: PortalCustomization,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: ':portalSlug/finish',
         name: 'portal_finish',
         component: PortalSettingsFinish,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
     ],
   },
   {
     path: getPortalRoute(':portalSlug'),
     name: 'portalSlug',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ShowPortal,
   },
   {
     path: getPortalRoute(':portalSlug/edit'),
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: EditPortal,
     children: [
       {
         path: '',
         name: 'edit_portal_information',
         component: EditPortalBasic,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: 'customizations',
         name: 'edit_portal_customization',
         component: EditPortalCustomization,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: 'locales',
         name: 'edit_portal_locales',
         component: EditPortalLocales,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: 'categories',
         name: 'list_all_locale_categories',
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: ['administrator', 'agent'],
+        },
         component: ListAllCategories,
       },
     ],
@@ -106,39 +128,51 @@ const articleRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/articles'),
     name: 'list_all_locale_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/new'),
     name: 'new_article',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: NewArticle,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/mine'),
     name: 'list_mine_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/archived'),
     name: 'list_archived_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/draft'),
     name: 'list_draft_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
     name: 'edit_article',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: EditArticle,
   },
 ];
@@ -147,19 +181,25 @@ const categoryRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
     name: 'all_locale_categories',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllCategories,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/new'),
     name: 'new_category_in_locale',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: NewCategory,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'show_category',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
   {
@@ -167,13 +207,17 @@ const categoryRoutes = [
       ':portalSlug/:locale/categories/:categorySlug/articles'
     ),
     name: 'show_category_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListCategoryArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'edit_category',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: EditCategory,
   },
 ];

app/javascript/dashboard/routes/dashboard/inbox/routes.js

@@ -12,13 +12,17 @@ export const routes = [
         path: '',
         name: 'inbox_view',
         component: InboxEmptyStateView,
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: ['administrator', 'agent'],
+        },
       },
       {
         path: ':notification_id',
         name: 'inbox_view_conversation',
         component: InboxDetailView,
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: ['administrator', 'agent'],
+        },
       },
     ],
   },

app/javascript/dashboard/routes/dashboard/notifications/routes.js

@@ -18,7 +18,9 @@ export const routes = [
         path: '',
         name: 'notifications_index',
         component: NotificationsView,
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: ['administrator', 'agent'],
+        },
       },
     ],
   },

app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js

@@ -6,7 +6,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/general'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['administrator'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
           path: '',
           name: 'general_settings_index',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js

@@ -8,7 +8,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/agent-bots'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['administrator'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_BOTS.HEADER',
@@ -20,19 +22,25 @@ export default {
           path: '',
           name: 'agent_bots',
           component: Bot,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'csml/new',
           name: 'agent_bots_csml_new',
           component: CsmlNewBot,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'csml/:botId',
           name: 'agent_bots_csml_edit',
           component: CsmlEditBot,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js

@@ -15,14 +15,15 @@ export default {
       children: [
         {
           path: '',
-          name: 'agents_wrapper',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'agent_list',
           component: AgentHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js

@@ -15,14 +15,15 @@ export default {
       children: [
         {
           path: '',
-          name: 'attributes_wrapper',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'attributes_list',
           component: AttributesHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js

@@ -16,13 +16,14 @@ export default {
       children: [
         {
           path: '',
-          name: 'auditlogs_wrapper',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'auditlogs_list',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: AuditLogsHome,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js

@@ -15,14 +15,15 @@ export default {
       children: [
         {
           path: '',
-          name: 'automation_wrapper',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'automation_list',
           component: Automation,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js

@@ -6,7 +6,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/billing'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['administrator'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'BILLING_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
           path: '',
           name: 'billing_settings_index',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js

@@ -19,7 +19,9 @@ export default {
         {
           path: 'ongoing',
           name: 'ongoing_campaigns',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: Index,
         },
       ],
@@ -35,7 +37,9 @@ export default {
         {
           path: 'one_off',
           name: 'one_off',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: Index,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js

@@ -16,13 +16,14 @@ export default {
       children: [
         {
           path: '',
-          name: 'canned_wrapper',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'canned_list',
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
           component: CannedHome,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js

@@ -28,14 +28,15 @@ export default {
       children: [
         {
           path: '',
-          name: 'settings_inbox',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'settings_inbox_list',
           component: InboxHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'new',
@@ -45,19 +46,25 @@ export default {
               path: '',
               name: 'settings_inbox_new',
               component: ChannelList,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
             },
             {
               path: ':inbox_id/finish',
               name: 'settings_inbox_finish',
               component: FinishSetup,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
             },
             {
               path: ':sub_page',
               name: 'settings_inboxes_page_channel',
               component: channelFactory.create(),
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
               props: route => {
                 return { channel_name: route.params.sub_page };
               },
@@ -65,7 +72,9 @@ export default {
             {
               path: ':inbox_id/agents',
               name: 'settings_inboxes_add_agents',
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
               component: AddAgents,
             },
           ],
@@ -74,7 +83,9 @@ export default {
           path: ':inboxId',
           name: 'settings_inbox_show',
           component: Settings,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js

@@ -26,13 +26,17 @@ export default {
           path: '',
           name: 'settings_applications',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: ':integration_id',
           name: 'settings_applications_integration',
           component: IntegrationHooks,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           props: route => ({
             integrationId: route.params.integration_id,
           }),

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -30,32 +30,42 @@ export default {
           path: '',
           name: 'settings_integrations',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'webhook',
           component: Webhook,
           name: 'settings_integrations_webhook',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'dashboard-apps',
           component: DashboardApps,
           name: 'settings_integrations_dashboard_apps',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'slack',
           name: 'settings_integrations_slack',
           component: Slack,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           props: route => ({ code: route.query.code }),
         },
         {
           path: ':integration_id',
           name: 'settings_integrations_integration',
           component: ShowIntegration,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           props: route => {
             return {
               integrationId: route.params.integration_id,

app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js

@@ -17,13 +17,17 @@ export default {
         {
           path: '',
           name: 'labels_wrapper',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'labels_list',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: Index,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js

@@ -23,19 +23,25 @@ export default {
           path: '',
           name: 'macros_wrapper',
           component: Macros,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
         },
         {
           path: 'new',
           name: 'macros_new',
           component: MacroEditor,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
         },
         {
           path: ':macroId/edit',
           name: 'macros_edit',
           component: MacroEditor,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js

@@ -8,14 +8,18 @@ export default {
     {
       path: frontendURL('accounts/:accountId/profile'),
       name: 'profile_settings',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: SettingsContent,
       children: [
         {
           path: 'settings',
           name: 'profile_settings_index',
           component: Index,
-          roles: ['administrator', 'agent'],
+          meta: {
+            permissions: ['administrator', 'agent'],
+          },
         },
       ],
     },

app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js

@@ -29,7 +29,9 @@ export default {
         {
           path: 'overview',
           name: 'account_overview_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: LiveReports,
         },
       ],
@@ -46,7 +48,9 @@ export default {
         {
           path: 'conversation',
           name: 'conversation_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: Index,
         },
       ],
@@ -63,7 +67,9 @@ export default {
         {
           path: 'csat',
           name: 'csat_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: CsatResponses,
         },
       ],
@@ -80,7 +86,9 @@ export default {
         {
           path: 'bot',
           name: 'bot_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: BotReports,
         },
       ],
@@ -97,7 +105,9 @@ export default {
         {
           path: 'agent',
           name: 'agent_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: AgentReports,
         },
       ],
@@ -114,7 +124,9 @@ export default {
         {
           path: 'label',
           name: 'label_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: LabelReports,
         },
       ],
@@ -131,7 +143,9 @@ export default {
         {
           path: 'inboxes',
           name: 'inbox_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: InboxReports,
         },
       ],
@@ -147,7 +161,9 @@ export default {
         {
           path: 'teams',
           name: 'team_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: TeamReports,
         },
       ],
@@ -164,7 +180,9 @@ export default {
         {
           path: 'sla',
           name: 'sla_reports',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: SLAReports,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/settings.routes.js

@@ -24,7 +24,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/settings'),
       name: 'settings_home',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       redirect: () => {
         if (store.getters.getCurrentRole === 'administrator') {
           return frontendURL('accounts/:accountId/settings/general');

app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js

@@ -13,13 +13,17 @@ export default {
         {
           path: '',
           name: 'sla_wrapper',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'sla_list',
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
           component: Index,
         },
       ],

app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js

@@ -29,14 +29,15 @@ export default {
       children: [
         {
           path: '',
-          name: 'settings_teams',
           redirect: 'list',
         },
         {
           path: 'list',
           name: 'settings_teams_list',
           component: TeamsHome,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
         {
           path: 'new',
@@ -46,18 +47,24 @@ export default {
               path: '',
               name: 'settings_teams_new',
               component: CreateTeam,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
             },
             {
               path: ':teamId/finish',
               name: 'settings_teams_finish',
               component: FinishSetup,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
             },
             {
               path: ':teamId/agents',
               name: 'settings_teams_add_agents',
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
               component: AddAgents,
             },
           ],
@@ -70,18 +77,24 @@ export default {
               path: '',
               name: 'settings_teams_edit',
               component: EditTeam,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
             },
             {
               path: 'agents',
               name: 'settings_teams_edit_members',
               component: EditAgents,
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
             },
             {
               path: 'finish',
               name: 'settings_teams_edit_finish',
-              roles: ['administrator'],
+              meta: {
+                permissions: ['administrator'],
+              },
               component: FinishSetup,
             },
           ],

app/javascript/dashboard/routes/index.js

@@ -5,33 +5,12 @@ import dashboard from './dashboard/dashboard.routes';
 import store from '../store';
 import { validateLoggedInRoutes } from '../helper/routeHelpers';
 import AnalyticsHelper from '../helper/AnalyticsHelper';
+import { buildPermissionsFromRouter } from '../helper/permissionsHelper';
 
 const routes = [...dashboard.routes];
 
-window.roleWiseRoutes = {
-  agent: [],
-  administrator: [],
-};
-
-// generateRoleWiseRoute - updates window object with agent/admin route
-const generateRoleWiseRoute = route => {
-  route.forEach(element => {
-    if (element.children) {
-      generateRoleWiseRoute(element.children);
-    }
-    if (element.roles) {
-      element.roles.forEach(roleEl => {
-        window.roleWiseRoutes[roleEl].push(element.name);
-      });
-    }
-  });
-};
-// Create a object of routes
-// accessible by each role.
-// returns an object with roles as keys and routeArr as values
-generateRoleWiseRoute(routes);
-
 export const router = new VueRouter({ mode: 'history', routes });
+export const routesWithPermissions = buildPermissionsFromRouter(routes);
 
 export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
   const { isLoggedIn, getCurrentUser: user } = getters;
@@ -45,11 +24,7 @@ export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
     return next(frontendURL(`accounts/${user.account_id}/dashboard`));
   }
 
-  const nextRoute = validateLoggedInRoutes(
-    to,
-    getters.getCurrentUser,
-    window.roleWiseRoutes
-  );
+  const nextRoute = validateLoggedInRoutes(to, getters.getCurrentUser);
   return nextRoute ? next(frontendURL(nextRoute)) : next();
 };