feat: Replace rtlMixin to a composable (#9924)

This PR will replace the usage of `rtlMixin` to the `useUISettings` composable, and moved the method to component itself.

app/javascript/shared/mixins/rtlMixin.js

@@ -1,27 +0,0 @@
-import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
-
-    return {
-      uiSettings,
-      updateUISettings,
-    };
-  },
-  computed: {
-    isRTLView() {
-      const { rtl_view: isRTLView } = this.uiSettings;
-      return isRTLView;
-    },
-  },
-  methods: {
-    updateRTLDirectionView(locale) {
-      const isRTLSupported = getLanguageDirection(locale);
-      this.updateUISettings({
-        rtl_view: isRTLSupported,
-      });
-    },
-  },
-};

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

@@ -1,29 +0,0 @@
-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],
-    });
-  };
-
-  it('returns is direction right-to-left view', () => {
-    const wrapper = createComponent(true);
-    expect(wrapper.vm.isRTLView).toBe(true);
-  });
-
-  it('returns is direction left-to-right view', () => {
-    const wrapper = createComponent(false);
-    expect(wrapper.vm.isRTLView).toBe(false);
-  });
-});