feat: Adds the ability to have custom view for conversations (#3666)

* feat: Adds the ability to save custom filters and display folders on the sidebar

* Minor fixes

* Review fixes

* Review fixes

* i18n fixes

* Shows conversations when the user click on the folder sidebar item

* Spacing fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -14,6 +14,7 @@
       :inboxes="inboxes"
       :labels="labels"
       :teams="teams"
+      :custom-views="customViews"
       :menu-config="activeSecondaryMenu"
       :current-role="currentRole"
       @add-label="showAddLabelPopup"
@@ -87,6 +88,7 @@ export default {
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',
+      customViews: 'customViews/getCustomViews',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
       labels: 'labels/getLabelsOnSidebar',
@@ -122,6 +124,7 @@ export default {
   mounted() {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('inboxes/get');
+    this.$store.dispatch('customViews/get');
     this.$store.dispatch('notifications/unReadCount');
     this.$store.dispatch('teams/get');
     this.$store.dispatch('attributes/get');

app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js

@@ -14,6 +14,8 @@ const conversations = accountId => ({
     'conversations_through_team',
     'conversation_mentions',
     'conversation_through_mentions',
+    'custom_view_conversations',
+    'conversations_through_custom_view',
   ],
   menuItems: [
     {

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

@@ -40,6 +40,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    customViews: {
+      type: Array,
+      default: () => [],
+    },
     menuConfig: {
       type: Object,
       default: () => {},
@@ -150,11 +154,35 @@ export default {
         })),
       };
     },
+    customViewsSection() {
+      return {
+        icon: 'folder',
+        label: 'CUSTOM_VIEWS',
+        hasSubMenu: true,
+        key: 'custom_view',
+        children: this.customViews
+          .filter(view => view.filter_type === 'conversation')
+          .map(view => ({
+            id: view.id,
+            label: view.name,
+            truncateLabel: true,
+            toState: frontendURL(
+              `accounts/${this.accountId}/custom_view/${view.id}`
+            ),
+          })),
+      };
+    },
     additionalSecondaryMenuItems() {
       let conversationMenuItems = [this.inboxSection, this.labelSection];
       if (this.teams.length) {
         conversationMenuItems = [this.teamSection, ...conversationMenuItems];
       }
+      if (this.customViews.length) {
+        conversationMenuItems = [
+          this.customViewsSection,
+          ...conversationMenuItems,
+        ];
+      }
       return {
         conversations: conversationMenuItems,
         contacts: [this.contactLabelSection],

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

@@ -7,7 +7,7 @@
       v-else
       class="secondary-menu--title secondary-menu--link fs-small"
       :class="computedClass"
-      :to="menuItem.toState"
+      :to="menuItem && menuItem.toState"
     >
       <fluent-icon
         :icon="menuItem.icon"