From 07f6b103cbc1803a4fc750d413c8bdea317da9e3 Mon Sep 17 00:00:00 2001
From: andreamisuraca <misuracandrea@gmail.com>
Date: Tue, 3 Oct 2023 15:47:49 +0200
Subject: [PATCH 1/4] AnMi: Replaced KResponsiveWindow mixin by
 useKResponsiveWindow composable in Facility plugin

---
 .../plugins/facility/assets/src/views/DataPage/index.vue   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
index 751c0b1b302..c8dec871f34 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.coreVue.composables.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,7 @@
       LearnMoreModal,
       KDateRange,
     },
-    mixins: [commonCoreStrings, KResponsiveWindowMixin],
+    mixins: [commonCoreStrings],
     data() {
       return {
         showLearnMoreSummaryModal: false,
@@ -249,7 +249,8 @@
         return this.$route.name === PageNames.DATA_EXPORT_PAGE;
       },
       windowSizeStyle() {
-        if (this.windowIsMedium || this.windowIsSmall) {
+        const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
+        if (windowIsMedium || windowIsSmall) {
           return 'section-buttons-flex';
         }
         return {};

From d1a305a2e240de9502ac52c255d11c4a9f390db8 Mon Sep 17 00:00:00 2001
From: andreamisuraca <misuracandrea@gmail.com>
Date: Fri, 6 Oct 2023 09:48:23 +0200
Subject: [PATCH 2/4] AnMi: Added setup method to the components

---
 .../facility/assets/src/views/ClassEnrollForm.vue        | 3 +--
 .../plugins/facility/assets/src/views/DataPage/index.vue | 9 ++++++---
 .../assets/src/views/FacilityConfigPage/index.vue        | 8 ++++++--
 .../facility/assets/src/views/IdentifierTextbox.vue      | 8 ++++++--
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue b/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
index ccf93336ad3..2f7da371ef6 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 c8dec871f34..14ddf4dadd1 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 useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  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';
@@ -219,6 +219,10 @@
       KDateRange,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+      return { windowIsLarge, windowIsSmall };
+    },
     data() {
       return {
         showLearnMoreSummaryModal: false,
@@ -249,8 +253,7 @@
         return this.$route.name === PageNames.DATA_EXPORT_PAGE;
       },
       windowSizeStyle() {
-        const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
-        if (windowIsMedium || windowIsSmall) {
+        if (this.windowIsMedium || this.windowIsSmall) {
           return 'section-buttons-flex';
         }
         return {};
diff --git a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
index 1f130e81e0c..ea2501a95ef 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 c62c12452cf..476706fc7d6 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,

From 587e22d47539cdd8b999d5b63a65e9a3c3c35e31 Mon Sep 17 00:00:00 2001
From: andreamisuraca <misuracandrea@gmail.com>
Date: Sat, 7 Oct 2023 12:28:11 +0200
Subject: [PATCH 3/4] AnMi: Fixed unit test by adding missing mock

---
 .../assets/test/views/facility-config-page.spec.js        | 8 ++++++++
 1 file changed, 8 insertions(+)

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 37eef0f06f2..859e4782940 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);

From 9a695d17a4abd8079221f0400a0f05ac171d90b5 Mon Sep 17 00:00:00 2001
From: andreamisuraca <misuracandrea@gmail.com>
Date: Mon, 9 Oct 2023 09:50:16 +0200
Subject: [PATCH 4/4] AnMi: Replaced wrong composable

---
 kolibri/plugins/facility/assets/src/views/DataPage/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
index 14ddf4dadd1..66f1924cd2a 100644
--- a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
@@ -220,8 +220,8 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
-      return { windowIsLarge, windowIsSmall };
+      const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
+      return { windowIsMedium, windowIsSmall };
     },
     data() {
       return {