feat: Save rich content editor state to user.uiSettings (#1736)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

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

@@ -88,6 +88,7 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin from 'shared/mixins/inboxMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -99,7 +100,7 @@ export default {
     ReplyBottomPanel,
     WootMessageEditor,
   },
-  mixins: [clickaway, inboxMixin],
+  mixins: [clickaway, inboxMixin, uiSettingsMixin],
   props: {
     inReplyTo: {
       type: [String, Number],
@@ -115,7 +116,6 @@ export default {
       attachedFiles: [],
       isUploading: false,
       replyType: REPLY_EDITOR_MODES.REPLY,
-      isFormatMode: false,
       mentionSearchKey: '',
       hasUserMention: false,
       hasSlashCommand: false,
@@ -123,15 +123,12 @@ export default {
   },
   computed: {
     showRichContentEditor() {
-      if (this.isOnPrivateNote) {
+      const {
-        return true;
+        display_rich_content_editor: displayRichContentEditor,
-      }
+      } = this.uiSettings;
-      return this.isFormatMode;
+      return this.isOnPrivateNote || displayRichContentEditor;
     },
-    ...mapGetters({
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
-      currentChat: 'getSelectedChat',
-      uiSettings: 'getUISettings',
-    }),
     enterToSendEnabled() {
       return !!this.uiSettings.enter_to_send_enabled;
     },
@@ -281,12 +278,7 @@ export default {
       }
     },
     toggleEnterToSend(enterToSendEnabled) {
-      this.$store.dispatch('updateUISettings', {
+      this.updateUISettings({ enter_to_send_enabled: enterToSendEnabled });
-        uiSettings: {
-          ...this.uiSettings,
-          enter_to_send_enabled: enterToSendEnabled,
-        },
-      });
     },
     async sendMessage() {
       if (this.isReplyButtonDisabled) {
@@ -314,7 +306,10 @@ export default {
       const { can_reply: canReply } = this.currentChat;
 
       if (canReply) this.replyType = mode;
-      this.$refs.messageInput.focus();
+      if (this.showRichContentEditor) {
+        return;
+      }
+      this.$nextTick(() => this.$refs.messageInput.focus());
     },
     emojiOnClick(emoji) {
       this.message = `${this.message}${emoji} `;
@@ -396,7 +391,7 @@ export default {
       return messagePayload;
     },
     setFormatMode(value) {
-      this.isFormatMode = value;
+      this.updateUISettings({ display_rich_content_editor: value });
     },
   },
 };

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

@@ -0,0 +1,56 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import uiSettingsMixin from '../uiSettings';
+import Vuex from 'vuex';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('uiSettingsMixin', () => {
+  let getters;
+  let actions;
+  let store;
+
+  beforeEach(() => {
+    actions = { updateUISettings: jest.fn() };
+    getters = {
+      getUISettings: () => ({
+        display_rich_content_editor: false,
+        enter_to_send_enabled: false,
+      }),
+    };
+    store = new Vuex.Store({ actions, getters });
+  });
+
+  it('returns uiSettings', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [uiSettingsMixin],
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.uiSettings).toEqual({
+      display_rich_content_editor: false,
+      enter_to_send_enabled: false,
+    });
+  });
+
+  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,
+        },
+      },
+      undefined
+    );
+  });
+});

app/javascript/dashboard/mixins/uiSettings.js

@@ -0,0 +1,19 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      uiSettings: 'getUISettings',
+    }),
+  },
+  methods: {
+    updateUISettings(uiSettings = {}) {
+      this.$store.dispatch('updateUISettings', {
+        uiSettings: {
+          ...this.uiSettings,
+          ...uiSettings,
+        },
+      });
+    },
+  },
+};

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -38,6 +38,7 @@ import ChatList from '../../../components/ChatList';
 import ContactPanel from './ContactPanel';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
 import Search from './search/Search.vue';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -46,6 +47,7 @@ export default {
     ConversationBox,
     Search,
   },
+  mixins: [uiSettingsMixin],
   props: {
     inboxId: {
       type: [String, Number],
@@ -60,7 +62,6 @@ export default {
       default: '',
     },
   },
-
   data() {
     return {
       showSearchModal: false,
@@ -68,7 +69,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      uiSettings: 'getUISettings',
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
     }),
@@ -100,7 +100,6 @@ export default {
       this.$store.dispatch('setActiveInbox', this.inboxId);
       this.setActiveChat();
     },
-
     fetchConversationIfUnavailable() {
       if (!this.conversationId) {
         return;
@@ -115,7 +114,6 @@ export default {
       const [chat] = this.chatList.filter(c => c.id === conversationId);
       return chat;
     },
-
     setActiveChat() {
       if (this.conversationId) {
         const chat = this.findConversation();
@@ -130,11 +128,8 @@ export default {
       }
     },
     onToggleContactPanel() {
-      this.$store.dispatch('updateUISettings', {
+      this.updateUISettings({
-        uiSettings: {
-          ...this.uiSettings,
         is_contact_sidebar_open: !this.isContactPanelOpen,
-        },
       });
     },
     onSearch() {