From aa59dc1821444f596d124e83002341ff69c42060 Mon Sep 17 00:00:00 2001
From: Andrea Misuraca <38749880+andreamisuraca@users.noreply.github.com>
Date: Mon, 9 Oct 2023 19:32:31 +0200
Subject: [PATCH] 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
---
 .../plugins/facility/assets/src/views/ClassEnrollForm.vue | 3 +--
 .../plugins/facility/assets/src/views/DataPage/index.vue  | 8 ++++++--
 .../assets/src/views/FacilityConfigPage/index.vue         | 8 ++++++--
 .../facility/assets/src/views/IdentifierTextbox.vue       | 8 ++++++--
 .../assets/test/views/facility-config-page.spec.js        | 8 ++++++++
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue b/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
index ccf93336ad..2f7da371ef 100644
--- 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
index 751c0b1b30..66f1924cd2 100644
--- 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
index 1f130e81e0..ea2501a95e 100644
--- 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
index c62c12452c..476706fc7d 100644
--- 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
index 37eef0f06f..859e478294 100644
--- 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);