feat: Add global message search (#1385)

* feat: Search messages by content

* Fix search UI

* Add specs

* chore: Filter search results

* Update highlight logic

* Rename query to searchTerm

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

app/javascript/dashboard/store/modules/conversationSearch.js

@@ -0,0 +1,54 @@
+import ConversationAPI from '../../api/inbox/conversation';
+import types from '../mutation-types';
+export const initialState = {
+  records: [],
+  uiFlags: {
+    isFetching: false,
+  },
+};
+
+export const getters = {
+  getConversations(state) {
+    return state.records;
+  },
+  getUIFlags(state) {
+    return state.uiFlags;
+  },
+};
+
+export const actions = {
+  async get({ commit }, { q }) {
+    commit(types.SEARCH_CONVERSATIONS_SET, []);
+    if (!q) {
+      return;
+    }
+    commit(types.SEARCH_CONVERSATIONS_SET_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: { payload },
+      } = await ConversationAPI.search({ q });
+      commit(types.SEARCH_CONVERSATIONS_SET, payload);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.SEARCH_CONVERSATIONS_SET_UI_FLAG, { isFetching: false });
+    }
+  },
+};
+
+export const mutations = {
+  [types.SEARCH_CONVERSATIONS_SET](state, records) {
+    state.records = records;
+  },
+  [types.SEARCH_CONVERSATIONS_SET_UI_FLAG](state, uiFlags) {
+    state.uiFlags = { ...state.uiFlags, ...uiFlags };
+  },
+};
+
+export default {
+  namespaced: true,
+  state: initialState,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -0,0 +1,44 @@
+import { actions } from '../../conversationSearch';
+import types from '../../../mutation-types';
+import axios from 'axios';
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if no query param is provided', () => {
+      actions.get({ commit }, { q: '' });
+      expect(commit.mock.calls).toEqual([[types.SEARCH_CONVERSATIONS_SET, []]]);
+    });
+
+    it('sends correct actions if query param is provided and API call is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          payload: [{ messages: [{ id: 1, content: 'value testing' }], id: 1 }],
+        },
+      });
+
+      await actions.get({ commit }, { q: 'value' });
+      expect(commit.mock.calls).toEqual([
+        [types.SEARCH_CONVERSATIONS_SET, []],
+        [types.SEARCH_CONVERSATIONS_SET_UI_FLAG, { isFetching: true }],
+        [
+          types.SEARCH_CONVERSATIONS_SET,
+          [{ messages: [{ id: 1, content: 'value testing' }], id: 1 }],
+        ],
+        [types.SEARCH_CONVERSATIONS_SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+
+    it('sends correct actions if query param is provided and API call is errored', async () => {
+      axios.get.mockRejectedValue({});
+      await actions.get({ commit }, { q: 'value' });
+      expect(commit.mock.calls).toEqual([
+        [types.SEARCH_CONVERSATIONS_SET, []],
+        [types.SEARCH_CONVERSATIONS_SET_UI_FLAG, { isFetching: true }],
+        [types.SEARCH_CONVERSATIONS_SET_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,19 @@
+import { getters } from '../../conversationSearch';
+
+describe('#getters', () => {
+  it('getConversations', () => {
+    const state = {
+      records: [{ id: 1, messages: [{ id: 1, content: 'value' }] }],
+    };
+    expect(getters.getConversations(state)).toEqual([
+      { id: 1, messages: [{ id: 1, content: 'value' }] },
+    ]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: { isFetching: false },
+    };
+    expect(getters.getUIFlags(state)).toEqual({ isFetching: false });
+  });
+});

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

@@ -0,0 +1,22 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../conversationSearch';
+
+describe('#mutations', () => {
+  describe('#SEARCH_CONVERSATIONS_SET', () => {
+    it('set records correctly', () => {
+      const state = { records: [] };
+      mutations[types.SEARCH_CONVERSATIONS_SET](state, [{ id: 1 }]);
+      expect(state.records).toEqual([{ id: 1 }]);
+    });
+  });
+
+  describe('#SEARCH_CONVERSATIONS_SET', () => {
+    it('set uiFlags correctly', () => {
+      const state = { uiFlags: { isFetching: true } };
+      mutations[types.SEARCH_CONVERSATIONS_SET_UI_FLAG](state, {
+        isFetching: false,
+      });
+      expect(state.uiFlags).toEqual({ isFetching: false });
+    });
+  });
+});