feat: Add visibility checks for installation types (#10773)

This pull request includes multiple changes to the sidebar and route
metas to configure visibility of features on the dashboard.

Here's a summary of the changes

1. Added `installationTypes`, field to routes `meta`, this works along
side `permissions` and `featureFlags`
This allows us to decide weather a particular feature is accessible on a
particular type. For instance, the Billing pages should only be
available on Cloud
2. Updated `usePolicy` and `policy.vue` to use the new
`installationTypes` config
3. Updated Sidebar related components to remove `showOnlyOnCloud` to use
the new policy updates.

Testing the PR

Here's the matrix of cases:
https://docs.google.com/spreadsheets/d/15AAJntJZoyudaby77BOnRcC4435FGuT7PXbUXoTyU50/edit?usp=sharing

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

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

@@ -3,6 +3,12 @@ import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import CampaignsPageRouteView from './pages/CampaignsPageRouteView.vue';
 import LiveChatCampaignsPage from './pages/LiveChatCampaignsPage.vue';
 import SMSCampaignsPage from './pages/SMSCampaignsPage.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+const meta = {
+  featureFlag: FEATURE_FLAGS.CAMPAIGNS,
+  permissions: ['administrator'],
+};
 
 const campaignsRoutes = {
   routes: [
@@ -19,9 +25,7 @@ const campaignsRoutes = {
         {
           path: 'ongoing',
           name: 'campaigns_ongoing_index',
-          meta: {
-            permissions: ['administrator'],
-          },
+          meta,
           redirect: to => {
             return { name: 'campaigns_livechat_index', params: to.params };
           },
@@ -29,9 +33,7 @@ const campaignsRoutes = {
         {
           path: 'one_off',
           name: 'campaigns_one_off_index',
-          meta: {
-            permissions: ['administrator'],
-          },
+          meta,
           redirect: to => {
             return { name: 'campaigns_sms_index', params: to.params };
           },
@@ -39,17 +41,13 @@ const campaignsRoutes = {
         {
           path: 'live_chat',
           name: 'campaigns_livechat_index',
-          meta: {
-            permissions: ['administrator'],
-          },
+          meta,
           component: LiveChatCampaignsPage,
         },
         {
           path: 'sms',
           name: 'campaigns_sms_index',
-          meta: {
-            permissions: ['administrator'],
-          },
+          meta,
           component: SMSCampaignsPage,
         },
       ],

app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue

@@ -78,8 +78,8 @@ onMounted(() => store.dispatch('captainAssistants/get'));
     :button-policy="['administrator']"
     :show-pagination-footer="false"
     :is-fetching="isFetching"
-    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     :is-empty="!assistants.length"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     @click="handleCreate"
   >
     <template #emptyState>

app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue

@@ -72,8 +72,8 @@ onMounted(() =>
     :button-policy="['administrator']"
     :is-fetching="isFetchingAssistant || isFetching"
     :is-empty="!captainInboxes.length"
-    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     :show-pagination-footer="false"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     @click="handleCreate"
   >
     <template v-if="!isFetchingAssistant" #headerTitle>

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

@@ -1,4 +1,5 @@
-// import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { frontendURL } from '../../../helper/URLHelper';
 import AssistantIndex from './assistants/Index.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
@@ -12,6 +13,11 @@ export const routes = [
     name: 'captain_assistants_index',
     meta: {
       permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
     },
   },
   {
@@ -22,6 +28,11 @@ export const routes = [
     name: 'captain_assistants_inboxes_index',
     meta: {
       permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
     },
   },
   {
@@ -30,6 +41,11 @@ export const routes = [
     name: 'captain_documents_index',
     meta: {
       permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
     },
   },
   {
@@ -38,6 +54,11 @@ export const routes = [
     name: 'captain_responses_index',
     meta: {
       permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
     },
   },
 ];

app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue

@@ -163,8 +163,8 @@ onMounted(() => {
     :button-label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
     :is-fetching="isFetching"
     :is-empty="!responses.length"
-    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     :show-pagination-footer="!isFetching && !!responses.length"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     @update:current-page="onPageChange"
     @click="handleCreate"
   >

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

@@ -1,8 +1,10 @@
 import { frontendURL } from '../../../helper/URLHelper';
 import ContactsIndex from './pages/ContactsIndex.vue';
 import ContactManageView from './pages/ContactManageView.vue';
+import { FEATURE_FLAGS } from '../../../featureFlags';
 
 const commonMeta = {
+  featureFlag: FEATURE_FLAGS.CRM,
   permissions: ['administrator', 'agent', 'contact_manage'],
 };
 

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

@@ -1,3 +1,4 @@
+import { FEATURE_FLAGS } from '../../../featureFlags';
 import { getPortalRoute } from './helpers/routeHelper';
 
 import HelpCenterPageRouteView from './pages/HelpCenterPageRouteView.vue';
@@ -21,21 +22,21 @@ const PortalsLocalesIndexPage = () =>
 const PortalsSettingsIndexPage = () =>
   import('./pages/PortalsSettingsIndexPage.vue');
 
+const meta = {
+  featureFlag: FEATURE_FLAGS.HELP_CENTER,
+  permissions: ['administrator', 'agent', 'knowledge_base_manage'],
+};
 const portalRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/:tab?'),
     name: 'portals_articles_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsArticlesIndexPage,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/new'),
     name: 'portals_articles_new',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsArticlesNewPage,
   },
   {
@@ -43,18 +44,14 @@ const portalRoutes = [
       ':portalSlug/:locale/:categorySlug?/articles/:tab?/edit/:articleSlug'
     ),
     name: 'portals_articles_edit',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsArticlesEditPage,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
     name: 'portals_categories_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsCategoriesIndexPage,
   },
   {
@@ -62,9 +59,7 @@ const portalRoutes = [
       ':portalSlug/:locale/categories/:categorySlug/articles'
     ),
     name: 'portals_categories_articles_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsArticlesIndexPage,
   },
   {
@@ -72,31 +67,26 @@ const portalRoutes = [
       ':portalSlug/:locale/categories/:categorySlug/articles/:articleSlug'
     ),
     name: 'portals_categories_articles_edit',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsArticlesEditPage,
   },
   {
     path: getPortalRoute(':portalSlug/locales'),
     name: 'portals_locales_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsLocalesIndexPage,
   },
   {
     path: getPortalRoute(':portalSlug/settings'),
     name: 'portals_settings_index',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
+    meta,
     component: PortalsSettingsIndexPage,
   },
   {
     path: getPortalRoute('new'),
     name: 'portals_new',
     meta: {
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
       permissions: ['administrator', 'knowledge_base_manage'],
     },
     component: PortalsNew,
@@ -105,6 +95,7 @@ const portalRoutes = [
     path: getPortalRoute(':navigationPath'),
     name: 'portals_index',
     meta: {
+      featureFlag: FEATURE_FLAGS.HELP_CENTER,
       permissions: ['administrator', 'knowledge_base_manage'],
     },
     component: PortalsIndex,

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

@@ -1,4 +1,5 @@
 import { FEATURE_FLAGS } from '../../../../featureFlags';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 import SettingsWrapper from '../SettingsWrapper.vue';
@@ -21,6 +22,10 @@ export default {
           name: 'auditlogs_list',
           meta: {
             featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
+            installationTypes: [
+              INSTALLATION_TYPES.CLOUD,
+              INSTALLATION_TYPES.ENTERPRISE,
+            ],
             permissions: ['administrator'],
           },
           component: AuditLogsHome,

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

@@ -1,4 +1,5 @@
 import { frontendURL } from '../../../../helper/URLHelper';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import SettingsWrapper from '../SettingsWrapper.vue';
 import Index from './Index.vue';
 
@@ -8,6 +9,7 @@ export default {
       path: frontendURL('accounts/:accountId/settings/billing'),
       meta: {
         permissions: ['administrator'],
+        installationTypes: [INSTALLATION_TYPES.CLOUD],
       },
       component: SettingsWrapper,
       props: {
@@ -21,6 +23,7 @@ export default {
           name: 'billing_settings_index',
           component: Index,
           meta: {
+            installationTypes: [INSTALLATION_TYPES.CLOUD],
             permissions: ['administrator'],
           },
         },

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

@@ -1,4 +1,5 @@
 import { FEATURE_FLAGS } from '../../../../featureFlags';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
 import SettingsWrapper from '../SettingsWrapper.vue';
@@ -19,6 +20,10 @@ export default {
           name: 'custom_roles_list',
           meta: {
             featureFlag: FEATURE_FLAGS.CUSTOM_ROLES,
+            installationTypes: [
+              INSTALLATION_TYPES.CLOUD,
+              INSTALLATION_TYPES.ENTERPRISE,
+            ],
             permissions: ['administrator'],
           },
           component: CustomRolesHome,

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

@@ -22,37 +22,34 @@ import BotReports from './BotReports.vue';
 import LiveReports from './LiveReports.vue';
 import SLAReports from './SLAReports.vue';
 
+const meta = {
+  featureFlag: FEATURE_FLAGS.REPORTS,
+  permissions: ['administrator', 'report_manage'],
+};
+
 const oldReportRoutes = [
   {
     path: 'agent',
     name: 'agent_reports',
-    meta: {
-      permissions: ['administrator', 'report_manage'],
-    },
+    meta,
     component: AgentReports,
   },
   {
     path: 'inboxes',
     name: 'inbox_reports',
-    meta: {
-      permissions: ['administrator', 'report_manage'],
-    },
+    meta,
     component: InboxReports,
   },
   {
     path: 'label',
     name: 'label_reports',
-    meta: {
-      permissions: ['administrator', 'report_manage'],
-    },
+    meta,
     component: LabelReports,
   },
   {
     path: 'teams',
     name: 'team_reports',
-    meta: {
-      permissions: ['administrator', 'report_manage'],
-    },
+    meta,
     component: TeamReports,
   },
 ];
@@ -124,17 +121,13 @@ export default {
         {
           path: 'overview',
           name: 'account_overview_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
+          meta,
           component: LiveReports,
         },
         {
           path: 'conversation',
           name: 'conversation_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
+          meta,
           component: Index,
         },
         ...oldReportRoutes,
@@ -142,26 +135,19 @@ export default {
         {
           path: 'sla',
           name: 'sla_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-            featureFlag: FEATURE_FLAGS.SLA,
-          },
+          meta,
           component: SLAReports,
         },
         {
           path: 'csat',
           name: 'csat_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
+          meta,
           component: CsatResponses,
         },
         {
           path: 'bot',
           name: 'bot_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
+          meta,
           component: BotReports,
         },
       ],

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

@@ -1,9 +1,16 @@
 import { FEATURE_FLAGS } from '../../../../featureFlags';
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 import SettingsWrapper from '../SettingsWrapper.vue';
 import Index from './Index.vue';
 
+const meta = {
+  featureFlag: FEATURE_FLAGS.SLA,
+  permissions: ['administrator'],
+  installationTypes: [INSTALLATION_TYPES.CLOUD, INSTALLATION_TYPES.ENTERPRISE],
+};
+
 export default {
   routes: [
     {
@@ -14,10 +21,7 @@ export default {
         {
           path: '',
           name: 'sla_wrapper',
-          meta: {
-            featureFlag: FEATURE_FLAGS.SLA,
-            permissions: ['administrator'],
-          },
+          meta,
           redirect: to => {
             return { name: 'sla_list', params: to.params };
           },
@@ -25,10 +29,7 @@ export default {
         {
           path: 'list',
           name: 'sla_list',
-          meta: {
-            featureFlag: FEATURE_FLAGS.SLA,
-            permissions: ['administrator'],
-          },
+          meta,
           component: Index,
         },
       ],