Merge branch 'develop' into feat/reload-banner-chat-list

app/javascript/dashboard/components/ChatList.vue

@@ -82,6 +82,17 @@
       @chatTabChange="updateAssigneeTab"
     />
 
+    <banner
+      v-if="hasNewConversationAvailable && hasAppliedFiltersOrActiveFolders"
+      color-scheme="secondary"
+      :banner-message="$t('CHAT_LIST.NEW_CONVERSATION_CREATED')"
+      :action-button-label="
+        $t('CHAT_LIST.NEW_CONVERSATION_CREATED_RELOAD_BUTTON')
+      "
+      :has-action-button="true"
+      @click="onClickRefreshFolder"
+    />
+
     <p v-if="!chatListLoading && !conversationList.length" class="content-box">
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
@@ -152,6 +163,7 @@ import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
+import Banner from 'dashboard/components/ui/Banner.vue';
 
 import {
   hasPressedAltAndJKey,
@@ -166,6 +178,7 @@ export default {
     ChatFilter,
     ConversationAdvancedFilter,
     DeleteCustomViews,
+    Banner,
   },
   mixins: [timeMixin, conversationMixin, eventListenerMixins],
   props: {
@@ -202,6 +215,8 @@ export default {
       foldersQuery: {},
       showAddFoldersModal: false,
       showDeleteFoldersModal: false,
+      hasNewConversationAvailable: false,
+      isRefreshFolderButtonClicked: false,
     };
   },
   computed: {
@@ -227,13 +242,6 @@ export default {
     hasAppliedFiltersOrActiveFolders() {
       return this.hasAppliedFilters || this.hasActiveFolders;
     },
-    savedFoldersValue() {
-      if (this.hasActiveFolders) {
-        const payload = this.activeFolder.query;
-        this.fetchSavedFilteredConversations(payload);
-      }
-      return {};
-    },
     assigneeTabItems() {
       return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => {
         const count = this.conversationStats[item.COUNT_KEY] || 0;
@@ -284,7 +292,6 @@ export default {
         conversationType: this.conversationType
           ? this.conversationType
           : undefined,
-        folders: this.hasActiveFolders ? this.savedFoldersValue : undefined,
       };
     },
     pageTitle() {
@@ -316,12 +323,35 @@ export default {
         } else {
           conversationList = [...this.allChatList(filters)];
         }
+      } else if (this.hasAppliedFiltersOrActiveFolders) {
+        const converstionsCreatedWhenFilterActive = this.chatLists.find(
+          conversation => conversation && conversation.hasActiveFilter === true
+        );
+        if (converstionsCreatedWhenFilterActive) {
+          conversationList = [
+            ...this.chatLists.filter(
+              conversation => !conversation.hasActiveFilter
+            ),
+          ];
+          if (this.isRefreshFolderButtonClicked === false) {
+            this.showReloadBanner();
+          }
+        } else {
+          conversationList = [...this.chatLists];
+        }
       } else {
         conversationList = [...this.chatLists];
       }
 
       return conversationList;
     },
+    getLastSavedFolderId() {
+      const lastItemOfFolder = this.folders[this.folders.length - 1];
+      return lastItemOfFolder.id;
+    },
+    isLastSavedFolderOpen() {
+      return this.getLastSavedFolderId === Number(this.foldersId);
+    },
     activeFolder() {
       if (this.foldersId) {
         const activeView = this.folders.filter(
@@ -339,6 +369,7 @@ export default {
       return {};
     },
   },
+
   watch: {
     activeTeam() {
       this.resetAndFetchData();
@@ -353,7 +384,10 @@ export default {
       this.resetAndFetchData();
     },
     activeFolder() {
-      if (!this.hasAppliedFilters) {
+      if (
+        !this.hasAppliedFilters ||
+        (!this.isLastSavedFolderOpen && this.$route.name !== 'home')
+      ) {
         this.resetAndFetchData();
       }
     },
@@ -391,6 +425,13 @@ export default {
     onToggleAdvanceFiltersModal() {
       this.showAdvancedFilters = !this.showAdvancedFilters;
     },
+    showReloadBanner() {
+      this.hasNewConversationAvailable = true;
+    },
+    closeReloadBanner() {
+      this.hasNewConversationAvailable = false;
+      this.isRefreshFolderButtonClicked = true;
+    },
     getKeyboardListenerParams() {
       const allConversations = this.$refs.activeConversation.querySelectorAll(
         'div.conversations-list div.conversation'
@@ -442,6 +483,9 @@ export default {
       if (this.hasActiveFolders) {
         const payload = this.activeFolder.query;
         this.fetchSavedFilteredConversations(payload);
+        this.$store.dispatch('hasActiveFolder', this.foldersId);
+        this.isRefreshFolderButtonClicked = false;
+        this.hasNewConversationAvailable = false;
       }
       if (this.foldersId) {
         return;
@@ -499,12 +543,21 @@ export default {
         this.resetAndFetchData();
       }
     },
+    onClickRefreshFolder() {
+      this.closeReloadBanner();
+      const payload = this.activeFolder.query;
+      const page = 1;
+      this.$store
+        .dispatch('fetchFilteredConversations', {
+          queryData: payload,
+          page,
+        })
+        .then(() => this.$emit('conversation-load'));
+    },
     openLastSavedItemInFolder() {
-      const lastItemOfFolder = this.folders[this.folders.length - 1];
-      const lastItemId = lastItemOfFolder.id;
       this.$router.push({
         name: 'folder_conversations',
-        params: { id: lastItemId },
+        params: { id: this.getLastSavedFolderId },
       });
     },
     openLastItemAfterDeleteInFolder() {

app/javascript/dashboard/components/ui/Banner.vue

@@ -15,7 +15,7 @@
       v-if="hasActionButton"
       size="small"
       variant="link"
-      icon="arrow-right"
+      :icon="actionButtonIcon"
       color-scheme="primary"
       class-names="banner-action__button"
       @click="onClick"
@@ -58,6 +58,10 @@ export default {
       type: String,
       default: '',
     },
+    actionButtonIcon: {
+      type: String,
+      default: '',
+    },
     colorScheme: {
       type: String,
       default: '',

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -6,6 +6,7 @@
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
       :has-action-button="true"
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+      action-button-icon="arrow-right"
       @click="onClickSelfAssign"
     />
     <reply-top-panel

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -81,6 +81,8 @@
     "NO_MESSAGES": "No Messages",
     "NO_CONTENT": "No content available",
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
-    "SHOW_QUOTED_TEXT": "Show Quoted Text"
+    "SHOW_QUOTED_TEXT": "Show Quoted Text",
+    "NEW_CONVERSATION_CREATED": "New conversations available.",
+    "NEW_CONVERSATION_CREATED_RELOAD_BUTTON": "Click here to refresh."
   }
 }

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -218,23 +218,33 @@ const actions = {
   },
 
   addConversation({ commit, state, dispatch, rootState }, conversation) {
-    const { currentInbox, appliedFilters } = state;
+    const { currentInbox, appliedFilters, activeFolder } = state;
     const {
       inbox_id: inboxId,
       meta: { sender },
     } = conversation;
 
     const hasAppliedFilters = !!appliedFilters.length;
+    const hasActiveFolder = activeFolder;
     const isMatchingInboxFilter =
       !currentInbox || Number(currentInbox) === inboxId;
     if (
       !hasAppliedFilters &&
+      !hasActiveFolder &&
       !isOnMentionsView(rootState) &&
       isMatchingInboxFilter
     ) {
       commit(types.ADD_CONVERSATION, conversation);
       dispatch('contacts/setContact', sender);
     }
+    if (hasAppliedFilters || hasActiveFolder) {
+      const conversationData = conversation;
+      commit(types.ADD_CONVERSATION, {
+        ...conversationData,
+        hasActiveFilter: true,
+      });
+      dispatch('contacts/setContact', sender);
+    }
   },
 
   addMentions({ dispatch, rootState }, conversation) {
@@ -330,6 +340,10 @@ const actions = {
   clearConversationFilters({ commit }) {
     commit(types.CLEAR_CONVERSATION_FILTERS);
   },
+
+  hasActiveFolder({ commit }, folderId) {
+    commit(types.HAS_ACTIVE_FILTER, folderId);
+  },
 };
 
 export default actions;

app/javascript/dashboard/store/modules/conversations/index.js

@@ -13,6 +13,7 @@ const state = {
   currentInbox: null,
   selectedChatId: null,
   appliedFilters: [],
+  activeFolder: '',
 };
 
 // mutations
@@ -195,6 +196,10 @@ export const mutations = {
   [types.CLEAR_CONVERSATION_FILTERS](_state) {
     _state.appliedFilters = [];
   },
+
+  [types.HAS_ACTIVE_FILTER](_state, folderId) {
+    _state.activeFolder = folderId;
+  },
 };
 
 export default {

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -91,7 +91,7 @@ describe('#actions', () => {
           commit,
           rootState: { route: { name: 'home' } },
           dispatch,
-          state: { currentInbox: 1, appliedFilters: [] },
+          state: { currentInbox: 1, appliedFilters: [], activeFolder: '' },
         },
         conversation
       );
@@ -111,12 +111,72 @@ describe('#actions', () => {
           commit,
           rootState: { route: { name: 'home' } },
           dispatch,
-          state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
+          state: {
+            currentInbox: 1,
+            appliedFilters: [{ id: 'random-filter' }],
+            activeFolder: '1',
+          },
         },
         conversation
       );
-      expect(commit.mock.calls).toEqual([]);
-      expect(dispatch.mock.calls).toEqual([]);
+      expect(commit.mock.calls).toEqual([
+        [
+          types.ADD_CONVERSATION,
+          {
+            ...conversation,
+            hasActiveFilter: true,
+          },
+        ],
+      ]);
+      expect(dispatch.mock.calls).toEqual([
+        [
+          'contacts/setContact',
+          {
+            id: 1,
+            name: 'john-doe',
+          },
+        ],
+      ]);
+    });
+
+    it('doesnot send mutation if the view is in folder', () => {
+      const conversation = {
+        id: 1,
+        messages: [],
+        meta: { sender: { id: 1, name: 'john-doe' } },
+        inbox_id: 1,
+      };
+      actions.addConversation(
+        {
+          commit,
+          rootState: { route: { name: 'folder_conversations' } },
+          dispatch,
+          state: {
+            currentInbox: 1,
+            appliedFilters: [],
+            activeFolder: '1',
+          },
+        },
+        conversation
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.ADD_CONVERSATION,
+          {
+            ...conversation,
+            hasActiveFilter: true,
+          },
+        ],
+      ]);
+      expect(dispatch.mock.calls).toEqual([
+        [
+          'contacts/setContact',
+          {
+            id: 1,
+            name: 'john-doe',
+          },
+        ],
+      ]);
     });
 
     it('doesnot send mutation if the view is conversation mentions', () => {
@@ -131,7 +191,7 @@ describe('#actions', () => {
           commit,
           rootState: { route: { name: 'conversation_mentions' } },
           dispatch,
-          state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
+          state: { currentInbox: 1, appliedFilters: [], activeFolder: '' },
         },
         conversation
       );
@@ -139,6 +199,46 @@ describe('#actions', () => {
       expect(dispatch.mock.calls).toEqual([]);
     });
 
+    it('send mutation if conversation filters are applied or the view is in folder', () => {
+      const conversation = {
+        id: 1,
+        messages: [],
+        meta: { sender: { id: 1, name: 'john-doe' } },
+        inbox_id: 1,
+      };
+      actions.addConversation(
+        {
+          commit,
+          rootState: { route: { name: 'home' } },
+          dispatch,
+          state: {
+            currentInbox: 1,
+            appliedFilters: [{ id: 'random-filter' }],
+            activeFolder: '1',
+          },
+        },
+        conversation
+      );
+      expect(commit.mock.calls).toEqual([
+        [
+          types.ADD_CONVERSATION,
+          {
+            ...conversation,
+            hasActiveFilter: true,
+          },
+        ],
+      ]);
+      expect(dispatch.mock.calls).toEqual([
+        [
+          'contacts/setContact',
+          {
+            id: 1,
+            name: 'john-doe',
+          },
+        ],
+      ]);
+    });
+
     it('sends correct mutations', () => {
       const conversation = {
         id: 1,
@@ -151,7 +251,7 @@ describe('#actions', () => {
           commit,
           rootState: { route: { name: 'home' } },
           dispatch,
-          state: { currentInbox: 1, appliedFilters: [] },
+          state: { currentInbox: 1, appliedFilters: [], activeFolder: '' },
         },
         conversation
       );
@@ -372,6 +472,14 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([[types.CLEAR_CONVERSATION_FILTERS]]);
     });
   });
+
+  describe('#hasActiveFolder', () => {
+    it('commits the correct mutation and check has filter', () => {
+      const folderId = '1';
+      actions.hasActiveFolder({ commit }, folderId);
+      expect(commit.mock.calls).toEqual([[types.HAS_ACTIVE_FILTER, folderId]]);
+    });
+  });
 });
 
 describe('#deleteMessage', () => {

app/javascript/dashboard/store/mutation-types.js

@@ -21,6 +21,7 @@ export default {
   CLEAR_CONTACT_CONVERSATIONS: 'CLEAR_CONTACT_CONVERSATIONS',
   SET_CONVERSATION_FILTERS: 'SET_CONVERSATION_FILTERS',
   CLEAR_CONVERSATION_FILTERS: 'CLEAR_CONVERSATION_FILTERS',
+  HAS_ACTIVE_FILTER: 'HAS_ACTIVE_FILTER',
 
   SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -12,6 +12,7 @@
   "arrow-swap-outline": "m14.783 2.22 4.495 4.494a.75.75 0 0 1 .073.976l-.072.085-4.495 4.504a.75.75 0 0 1-1.135-.975l.073-.084 3.217-3.223H5.243A.75.75 0 0 1 4.5 7.35l-.007-.101a.75.75 0 0 1 .648-.743l.102-.007 11.697-.001-3.218-3.217a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.495 4.494-4.495-4.494ZM19.5 16.65l.006.1a.75.75 0 0 1-.648.744l-.102.007L7.063 17.5l3.22 3.22a.75.75 0 0 1 .074.976l-.073.084a.75.75 0 0 1-.976.073l-.085-.072-4.5-4.497a.75.75 0 0 1-.073-.976l.073-.084 4.5-4.504a.75.75 0 0 1 1.134.976l-.073.084L7.066 16h11.692a.75.75 0 0 1 .743.65l.006.1-.006-.1Z",
   "arrow-trending-lines-outline": "M16.749 2h4.554l.1.014.099.028.06.026c.08.034.153.085.219.15l.04.044.044.057.054.09.039.09.019.064.014.064.009.095v4.532a.75.75 0 0 1-1.493.102l-.007-.102V4.559l-6.44 6.44a.75.75 0 0 1-.976.073L13 11 9.97 8.09l-5.69 5.689a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.22a.75.75 0 0 1 .976-.072l.084.072 3.03 2.91L19.438 3.5h-2.69a.75.75 0 0 1-.742-.648l-.007-.102a.75.75 0 0 1 .648-.743L16.75 2ZM3.75 17a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Zm5.75-3.25a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM13.75 15a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5a.75.75 0 0 1 .75-.75Zm5.75-4.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Z",
   "arrow-up-outline": "M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
+  "reload-arrow-outline": "M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z",
   "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
   "autocorrect-outline": "M13.461 4.934c.293.184.548.42.752.698l.117.171 2.945 4.696H21.5a.75.75 0 0 1 .743.649l.007.102a.75.75 0 0 1-.75.75l-3.284-.001.006.009-.009-.01a4.75 4.75 0 1 1-3.463-1.5h.756L13.059 6.6a1.25 1.25 0 0 0-2.04-.112l-.078.112-7.556 12.048a.75.75 0 0 1-1.322-.699l.052-.098L9.67 5.803a2.75 2.75 0 0 1 3.791-.869ZM14.751 12a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z",
   "automation-outline": [