feat: Rewrite uiSettings mixin to a composable (#9819)

app/javascript/shared/components/ResizableTextArea.vue

@@ -42,7 +42,7 @@ export default {
       type: Number,
       default: 2,
     },
-    // add this as a prop, so that we won't have to include uiSettingsMixin
+    // add this as a prop, so that we won't have to add useUISettings
     sendWithSignature: {
       type: Boolean,
       default: false,

app/javascript/shared/mixins/rtlMixin.js

@@ -1,8 +1,15 @@
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   computed: {
     isRTLView() {
       const { rtl_view: isRTLView } = this.uiSettings;

app/javascript/shared/mixins/specs/rtlMixin.spec.js

@@ -1,16 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+vi.mock('dashboard/composables/useUISettings');
 
 describe('rtlMixin', () => {
   const createComponent = rtl_view => {
+    useUISettings.mockReturnValue({
+      uiSettings: { rtl_view },
+      updateUISettings: vi.fn(),
+    });
+
     return shallowMount({
       render() {},
       mixins: [rtlMixin],
-      computed: {
-        uiSettings() {
-          return { rtl_view };
-        },
-      },
     });
   };