feat: Update the design for canned responses (#9903)

This is the continuation of the design update series. Canned responses listing page is rewritten with the design change.
---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

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

@@ -18,6 +18,15 @@ const getters = {
   getCannedResponses(_state) {
     return _state.records;
   },
+  getSortedCannedResponses(_state) {
+    return sortOrder =>
+      [..._state.records].sort((a, b) => {
+        if (sortOrder === 'asc') {
+          return a.short_code.localeCompare(b.short_code);
+        }
+        return b.short_code.localeCompare(a.short_code);
+      });
+  },
   getUIFlags(_state) {
     return _state.uiFlags;
   },

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

@@ -0,0 +1,43 @@
+import CannedResponses from '../../cannedResponse';
+
+const CANNED_RESPONSES = [
+  { short_code: 'hello', content: 'Hi ' },
+  { short_code: 'ask', content: 'Ask questions' },
+  { short_code: 'greet', content: 'Good morning' },
+];
+
+const getters = CannedResponses.getters;
+
+describe('#getCannedResponses', () => {
+  it('returns canned responses', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getCannedResponses(state)).toEqual(CANNED_RESPONSES);
+  });
+});
+
+describe('#getSortedCannedResponses', () => {
+  it('returns sort canned responses in ascending order', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getSortedCannedResponses(state)('asc')).toEqual([
+      CANNED_RESPONSES[1],
+      CANNED_RESPONSES[2],
+      CANNED_RESPONSES[0],
+    ]);
+  });
+
+  it('returns sort canned responses in descending order', () => {
+    const state = { records: CANNED_RESPONSES };
+    expect(getters.getSortedCannedResponses(state)('desc')).toEqual([
+      CANNED_RESPONSES[0],
+      CANNED_RESPONSES[2],
+      CANNED_RESPONSES[1],
+    ]);
+  });
+});
+
+describe('#getUIFlags', () => {
+  it('returns uiFlags', () => {
+    const state = { uiFlags: { isFetching: true } };
+    expect(getters.getUIFlags(state)).toEqual({ isFetching: true });
+  });
+});