Chore: Contact Sidebar, conversation cleanup (#908)

- Update sidebar design
- Move every contact data to contacts module
- Revert go to next conversation feature
- Fix issues with new conversation in action cable
- Escape HTML content
- Broadcast event when conversation.contact changes.

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js

@@ -4,14 +4,14 @@ import contactList from './fixtures';
 describe('#getters', () => {
   it('getContacts', () => {
     const state = {
-      records: contactList,
+      records: { 1: contactList[0] },
     };
-    expect(getters.getContacts(state)).toEqual(contactList);
+    expect(getters.getContacts(state)).toEqual([contactList[0]]);
   });
 
   it('getContact', () => {
     const state = {
-      records: contactList,
+      records: { 2: contactList[1] },
     };
     expect(getters.getContact(state)(2)).toEqual(contactList[1]);
   });

app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js

@@ -4,50 +4,54 @@ import { mutations } from '../../contacts';
 describe('#mutations', () => {
   describe('#SET_CONTACTS', () => {
     it('set contact records', () => {
-      const state = { records: [] };
+      const state = { records: {} };
       mutations[types.default.SET_CONTACTS](state, [
         { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
       ]);
-      expect(state.records).toEqual([
-        {
+      expect(state.records).toEqual({
+        1: {
           id: 1,
           name: 'contact1',
           email: 'contact1@chatwoot.com',
         },
-      ]);
+      });
     });
   });
 
   describe('#SET_CONTACT_ITEM', () => {
     it('push contact data to the store', () => {
       const state = {
-        records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
       };
       mutations[types.default.SET_CONTACT_ITEM](state, {
         id: 2,
         name: 'contact2',
         email: 'contact2@chatwoot.com',
       });
-      expect(state.records).toEqual([
-        { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
-        { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
-      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        2: { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
     });
   });
 
   describe('#EDIT_CONTACT', () => {
     it('update contact', () => {
       const state = {
-        records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
       };
       mutations[types.default.EDIT_CONTACT](state, {
         id: 1,
         name: 'contact2',
         email: 'contact2@chatwoot.com',
       });
-      expect(state.records).toEqual([
-        { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
-      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
     });
   });
 });

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

@@ -9,10 +9,16 @@ jest.mock('axios');
 describe('#actions', () => {
   describe('#getConversation', () => {
     it('sends correct actions if API is success', async () => {
-      axios.get.mockResolvedValue({ data: { id: 1, meta: {} } });
+      axios.get.mockResolvedValue({
+        data: { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+      });
       await actions.getConversation({ commit }, 1);
       expect(commit.mock.calls).toEqual([
-        [types.default.ADD_CONVERSATION, { id: 1, meta: {} }],
+        [
+          types.default.ADD_CONVERSATION,
+          { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+        ],
+        ['contacts/SET_CONTACT_ITEM', { id: 1, name: 'Contact 1' }],
       ]);
     });
     it('sends correct actions if API is error', async () => {