Merge pull request #11349 from thesujai/userResponseWindow-device-plugin

Replace KResponseWindow with useKResponseWindow in Device plugin
learningequality · Oct 26, 2023 · 1bf619c · 1bf619c
2 parents 545323a + 20ea01f
commit 1bf619c
Show file tree

Hide file tree

Showing 17 changed files with 95 additions and 34 deletions.
diff --git a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
@@ -139,7 +139,6 @@
   import omit from 'lodash/omit';
   import some from 'lodash/some';
   import uniqBy from 'lodash/uniqBy';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { TaskResource } from 'kolibri.resources';
@@ -176,7 +175,7 @@
       SelectionBottomBar,
       UiAlert,
     },
-    mixins: [commonCoreStrings, commonDeviceStrings, responsiveWindowMixin, taskNotificationMixin],
+    mixins: [commonCoreStrings, commonDeviceStrings, taskNotificationMixin],
     setup() {
       useContentTasks();
     },

diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -81,7 +81,7 @@
   import { mapGetters, mapState } from 'vuex';
   import TechnicalTextBlock from 'kolibri-common/components/AppError/TechnicalTextBlock';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import DeviceAppBarPage from './DeviceAppBarPage';
   import { deviceString } from './commonDeviceStrings';
   import DeviceNameModal from './DeviceNameModal';
@@ -98,7 +98,13 @@
       DeviceNameModal,
       TechnicalTextBlock,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         advancedShown: false,

diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
@@ -193,7 +193,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import { FacilityResource } from 'kolibri.resources';
@@ -243,7 +243,13 @@
       SyncAllFacilitiesModal,
       TasksBar,
     },
-    mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         showSyncAllModal: false,

diff --git a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
@@ -24,11 +24,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'HeaderWithOptions',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       headerText: {
         type: String,

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
@@ -58,15 +58,20 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
 
   export default {
     name: 'ChannelDetails',
     components: {
       CoachContentLabel,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
@@ -38,15 +38,20 @@
 
   // Channel Panel with Details and Checkbox
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import ChannelDetails from './ChannelDetails';
 
   export default {
     name: 'WithCheckbox',
     components: {
       ChannelDetails,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
@@ -85,7 +85,7 @@
   // Resources on Device Indicator
   import { mapGetters } from 'vuex';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { selectContentPageLink } from '../manageContentLinks';
   import NewBadge from '../NewBadge';
@@ -99,7 +99,13 @@
       ChannelDetails,
       NewBadge,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,

diff --git a/...bri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue b/...bri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
@@ -51,7 +51,7 @@
 
   // ChannelPanel with Details, On-Device Size, and Options Dropdown
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import NewBadge from '../NewBadge';
@@ -64,7 +64,13 @@
       ChannelDetails,
       NewBadge,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
@@ -54,7 +54,6 @@
 
   import { mapGetters } from 'vuex';
   import find from 'lodash/find';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import { TaskResource } from 'kolibri.resources';
@@ -85,7 +84,7 @@
       DeleteChannelModal,
       SelectDriveModal,
     },
-    mixins: [KResponsiveWindowMixin, taskNotificationMixin],
+    mixins: [taskNotificationMixin],
     setup() {
       useContentTasks();
     },

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
@@ -61,7 +61,7 @@
   import differenceBy from 'lodash/differenceBy';
   import unionBy from 'lodash/unionBy';
   import uniqBy from 'lodash/uniqBy';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
@@ -70,7 +70,13 @@
     components: {
       FilterTextbox,
     },
-    mixins: [KResponsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     props: {
       channels: {
         type: Array,

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
@@ -40,7 +40,6 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
 
   // Shows a 'EXPORT', 'IMPORT', or 'DELETE' button next to a message
   // of how many items are selected plus their size.
@@ -49,7 +48,7 @@
     components: {
       BottomAppBar,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       // TODO remove this and only pass in resourceCounts object
       selectedObjects: {

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
@@ -36,15 +36,14 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import some from 'lodash/some';
   import sumBy from 'lodash/sumBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonTaskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
 
   export default {
     name: 'TasksBar',
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonTaskStrings],
+    mixins: [commonCoreStrings, commonTaskStrings],
     props: {
       tasks: {
         type: Array,

diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
@@ -89,7 +89,7 @@
   // Displays a single Task and its metadata, and provides buttons
   // to cancel or clear it.
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
 
@@ -130,7 +130,13 @@
 
   export default {
     name: 'TaskPanel',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       task: {
         type: Object,

diff --git a/...ins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap b/...ins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TaskPanel renders correctly when it is a canceled DISKCONTENTEXPORT task 1`] = `
-<div class="task-panel">
+<div class="task-panel task-panel-sm">
   <div class="icon">
     <transition-stub mode="out-in"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #c62828;">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
@@ -31,7 +31,7 @@ exports[`TaskPanel renders correctly when it is a canceled DISKCONTENTEXPORT tas
 `;
 
 exports[`TaskPanel renders correctly when it is a canceled DISKEXPORT task (bulk export) 1`] = `
-<div class="task-panel">
+<div class="task-panel task-panel-sm">
   <div class="icon">
     <transition-stub mode="out-in"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #c62828;">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>

diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
@@ -60,7 +60,7 @@
   import { mapGetters } from 'vuex';
   import { TaskResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonDeviceStrings from '../commonDeviceStrings';
@@ -82,9 +82,13 @@
       BottomAppBar,
       ImmersivePage,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
     setup() {
       useContentTasks();
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
     },
     data() {
       return {

diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -84,15 +84,21 @@
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import plugin_data from 'plugin_data';
 
   export default {
     name: 'ChannelContentsSummary',
     components: {
       TextTruncatorCss,
     },
-    mixins: [commonCoreStrings, KResponsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,

diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
@@ -84,7 +84,7 @@
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import { TaskTypes } from 'kolibri.utils.syncTaskUtils';
   import find from 'lodash/find';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { TaskResource } from 'kolibri.resources';
   import commonDeviceStrings from '../commonDeviceStrings';
   import TaskProgress from '../ManageContentPage/TaskProgress';
@@ -119,9 +119,13 @@
       TaskProgress,
       UiAlert,
     },
-    mixins: [commonDeviceStrings, responsiveWindowMixin, taskNotificationMixin],
+    mixins: [commonDeviceStrings, taskNotificationMixin],
     setup() {
       useContentTasks();
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
     },
     data() {
       return {