Replace KResponsiveWindow mixin by useKResponsiveWindow composable in…

… Facility plugin (#11346) * AnMi: Replaced KResponsiveWindow mixin by useKResponsiveWindow composable in Facility plugin * AnMi: Added setup method to the components * AnMi: Fixed unit test by adding missing mock * AnMi: Replaced wrong composable
learningequality · Oct 9, 2023 · aa59dc1 · aa59dc1
1 parent 3435a54
commit aa59dc1
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue b/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
@@ -39,7 +39,6 @@
   import { mapState } from 'vuex';
   import pickBy from 'lodash/pickBy';
   import debounce from 'lodash/debounce';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import UserTable from 'kolibri.coreVue.components.UserTable';
@@ -54,7 +53,7 @@
       UserTable,
       FilterTextbox,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       pageType: {
         type: String,

diff --git a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
@@ -188,7 +188,7 @@
   import urls from 'kolibri.urls';
   import { FacilityResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import validationConstants from 'kolibri-design-system/lib/KDateRange/validationConstants';
   import { currentLanguage } from 'kolibri.utils.i18n';
   import { now } from 'kolibri.utils.serverClock';
@@ -218,7 +218,11 @@
       LearnMoreModal,
       KDateRange,
     },
-    mixins: [commonCoreStrings, KResponsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
+      return { windowIsMedium, windowIsSmall };
+    },
     data() {
       return {
         showLearnMoreSummaryModal: false,

diff --git a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
@@ -213,7 +213,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import { createTranslator } from 'kolibri.utils.i18n';
 
   import camelCase from 'lodash/camelCase';
@@ -273,7 +273,11 @@
       ChangePinModal,
       RemovePinModal,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     data() {
       return {
         showModal: false,

diff --git a/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue b/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
@@ -24,14 +24,18 @@
 
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
 
   export default {
     name: 'IdentifierTextbox',
     components: {
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     props: {
       value: {
         type: String,

diff --git a/kolibri/plugins/facility/assets/test/views/facility-config-page.spec.js b/kolibri/plugins/facility/assets/test/views/facility-config-page.spec.js
@@ -1,7 +1,9 @@
 import { mount } from '@vue/test-utils';
+import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 import ConfigPage from '../../src/views/FacilityConfigPage';
 import makeStore from '../makeStore';
 
+jest.mock('kolibri-design-system/lib/useKResponsiveWindow');
 jest.mock('../../../../device/assets/src/views/DeviceSettingsPage/api.js', () => ({
   getDeviceSettings: jest.fn(),
 }));
@@ -31,6 +33,12 @@ function getElements(wrapper) {
 }
 
 describe('facility config page view', () => {
+  beforeAll(() => {
+    useKResponsiveWindow.mockImplementation(() => ({
+      windowIsSmall: false,
+    }));
+  });
+
   function assertModalIsUp(wrapper) {
     const { confirmResetModal } = getElements(wrapper);
     expect(confirmResetModal().exists()).toEqual(true);