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/components/layout/sidebarComponents/Secondary.vue

@@ -29,6 +29,8 @@ import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
 import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { hasPermissions } from '../../../helper/permissionsHelper';
+import { routesWithPermissions } from '../../../routes';
 
 export default {
   components: {
@@ -60,9 +62,9 @@ export default {
       type: Object,
       default: () => {},
     },
-    currentRole: {
-      type: String,
-      default: '',
+    currentUser: {
+      type: Object,
+      default: () => {},
     },
     isOnChatwootCloud: {
       type: Boolean,
@@ -80,16 +82,16 @@ export default {
       return this.customViews.filter(view => view.filter_type === 'contact');
     },
     accessibleMenuItems() {
-      if (!this.currentRole) {
-        return [];
-      }
-      const menuItemsFilteredByRole = this.menuConfig.menuItems.filter(
-        menuItem =>
-          window.roleWiseRoutes[this.currentRole].indexOf(
-            menuItem.toStateName
-          ) > -1
+      const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
+        menuItem => {
+          const { permissions: userPermissions = [] } = this.currentUser;
+          return hasPermissions(
+            routesWithPermissions[menuItem.toStateName],
+            userPermissions
+          );
+        }
       );
-      return menuItemsFilteredByRole.filter(item => {
+      return menuItemsFilteredByPermissions.filter(item => {
         if (item.showOnlyOnCloud) {
           return this.isOnChatwootCloud;
         }

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -65,27 +65,29 @@
         :show-child-count="showChildCount(child.count)"
         :child-item-count="child.count"
       />
-      <router-link
-        v-if="showItem(menuItem)"
-        v-slot="{ href, navigate }"
-        :to="menuItem.toState"
-        custom
-      >
-        <li class="pl-1">
-          <a :href="href">
-            <woot-button
-              size="tiny"
-              variant="clear"
-              color-scheme="secondary"
-              icon="add"
-              :data-testid="menuItem.dataTestid"
-              @click="e => newLinkClick(e, navigate)"
-            >
-              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-            </woot-button>
-          </a>
-        </li>
-      </router-link>
+      <Policy :permissions="['administrator']">
+        <router-link
+          v-if="menuItem.newLink"
+          v-slot="{ href, navigate }"
+          :to="menuItem.toState"
+          custom
+        >
+          <li class="pl-1">
+            <a :href="href">
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
+                :data-testid="menuItem.dataTestid"
+                @click="e => newLinkClick(e, navigate)"
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
+            </a>
+          </li>
+        </router-link>
+      </Policy>
     </ul>
   </li>
 </template>
@@ -105,9 +107,10 @@ import {
   isOnMentionsView,
   isOnUnattendedView,
 } from '../../../store/modules/conversations/helpers/actionHelpers';
+import Policy from '../../policy.vue';
 
 export default {
-  components: { SecondaryChildNavItem },
+  components: { SecondaryChildNavItem, Policy },
   mixins: [adminMixin, configMixin],
   props: {
     menuItem: {