chore: Update contact sidebar with accordion (#3002)

app/javascript/dashboard/mixins/specs/uiSettings.spec.js

@@ -11,11 +11,12 @@ describe('uiSettingsMixin', () => {
   let store;
 
   beforeEach(() => {
-    actions = { updateUISettings: jest.fn() };
+    actions = { updateUISettings: jest.fn(), toggleSidebarUIState: jest.fn() };
     getters = {
       getUISettings: () => ({
         display_rich_content_editor: false,
         enter_to_send_enabled: false,
+        is_ct_labels_open: true,
       }),
     };
     store = new Vuex.Store({ actions, getters });
@@ -31,26 +32,70 @@ describe('uiSettingsMixin', () => {
     expect(wrapper.vm.uiSettings).toEqual({
       display_rich_content_editor: false,
       enter_to_send_enabled: false,
+      is_ct_labels_open: true,
     });
   });
 
-  it('dispatches store actions correctly', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [uiSettingsMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    wrapper.vm.updateUISettings({ enter_to_send_enabled: true });
-    expect(actions.updateUISettings).toHaveBeenCalledWith(
-      expect.anything(),
-      {
-        uiSettings: {
-          display_rich_content_editor: false,
-          enter_to_send_enabled: true,
+  describe('#updateUISettings', () => {
+    it('dispatches store actions correctly', () => {
+      const Component = {
+        render() {},
+        title: 'TestComponent',
+        mixins: [uiSettingsMixin],
+      };
+      const wrapper = shallowMount(Component, { store, localVue });
+      wrapper.vm.updateUISettings({ enter_to_send_enabled: true });
+      expect(actions.updateUISettings).toHaveBeenCalledWith(
+        expect.anything(),
+        {
+          uiSettings: {
+            display_rich_content_editor: false,
+            enter_to_send_enabled: true,
+            is_ct_labels_open: true,
+          },
         },
-      },
-      undefined
-    );
+        undefined
+      );
+    });
+  });
+
+  describe('#toggleSidebarUIState', () => {
+    it('dispatches store actions correctly', () => {
+      const Component = {
+        render() {},
+        title: 'TestComponent',
+        mixins: [uiSettingsMixin],
+      };
+      const wrapper = shallowMount(Component, { store, localVue });
+      wrapper.vm.toggleSidebarUIState('is_ct_labels_open');
+      expect(actions.updateUISettings).toHaveBeenCalledWith(
+        expect.anything(),
+        {
+          uiSettings: {
+            display_rich_content_editor: false,
+            enter_to_send_enabled: false,
+            is_ct_labels_open: false,
+          },
+        },
+        undefined
+      );
+    });
+  });
+
+  describe('#isContactSidebarItemOpen', () => {
+    it('returns correct values', () => {
+      const Component = {
+        render() {},
+        title: 'TestComponent',
+        mixins: [uiSettingsMixin],
+      };
+      const wrapper = shallowMount(Component, { store, localVue });
+      expect(wrapper.vm.isContactSidebarItemOpen('is_ct_labels_open')).toEqual(
+        true
+      );
+      expect(
+        wrapper.vm.isContactSidebarItemOpen('is_ct_prev_conv_open')
+      ).toEqual(false);
+    });
   });
 });

app/javascript/dashboard/mixins/uiSettings.js

@@ -15,5 +15,12 @@ export default {
         },
       });
     },
+    isContactSidebarItemOpen(key) {
+      const { [key]: isOpen } = this.uiSettings;
+      return !!isOpen;
+    },
+    toggleSidebarUIState(key) {
+      this.updateUISettings({ [key]: !this.isContactSidebarItemOpen(key) });
+    },
   },
 };