Merge pull request learningequality#10739 from nucleogenesis/enhancem…

…ent--py27-ie11-deprecation-warnings py27 ie11 deprecation warnings
dbnicholson · Jun 15, 2023 · 3a9bb05 · 3a9bb05
2 parents ffadd0e + 0affbf0
commit 3a9bb05
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 49 deletions.
diff --git a/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue b/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue
@@ -0,0 +1,84 @@
+<template>
+
+  <div
+    v-show="showBanner"
+    class="alert"
+    :style="{ backgroundColor: $themePalette.yellow.v_100 }"
+  >
+    <div style="display:flex">
+      <div>
+        <KIcon
+          icon="warning"
+          class="icon"
+          :color="$themePalette.amber.v_a400"
+        />
+      </div>
+
+      <div class="error-message">
+        <p v-if="py27Deprecated">
+          {{ coreString('pythonSupportWillBeDropped') }}
+        </p>
+        <p v-if="currentUserOnIE11">
+          {{ coreString('currentDeviceUsingIE11') }}
+        </p>
+        <p v-if="userDevicesUsingIE11">
+          {{ coreString('userDevicesUsingIE11') }}
+        </p>
+        <p v-if="currentUserOnIE11 || userDevicesUsingIE11">
+          {{ coreString('browserSupportWillBeDroppedIE11') }}
+        </p>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { browser } from 'kolibri.utils.browserInfo';
+  import plugin_data from 'plugin_data';
+
+  export default {
+    name: 'DeprecationWarningBanner',
+    mixins: [commonCoreStrings],
+    computed: {
+      showBanner() {
+        return this.currentUserOnIE11 || this.userDevicesUsingIE11 || this.py27Deprecated;
+      },
+      userDevicesUsingIE11() {
+        return plugin_data.deprecationWarnings.ie11;
+      },
+      py27Deprecated() {
+        return plugin_data.deprecationWarnings.py27;
+      },
+      currentUserOnIE11() {
+        return browser.name === 'IE';
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+.alert {
+  position: relative;
+  padding-left: 2em;
+  margin: 1em auto 0;
+  max-width: 1000px;
+  width: 100%;
+}
+.icon {
+  height: 24px;
+  width: 24px;
+  top: 1em;
+  left: 1em;
+  position: absolute;
+}
+.error-message {
+  font-size:14px;
+  margin: 0em 1em 0 2em;
+}
+</style>
diff --git a/kolibri/plugins/device/assets/src/views/DeviceAppBarPage.vue b/kolibri/plugins/device/assets/src/views/DeviceAppBarPage.vue
@@ -0,0 +1,37 @@
+<template>
+
+  <AppBarPage :title="title">
+
+    <template #subNav>
+      <DeviceTopNav />
+    </template>
+
+    <DeprecationWarningBanner style="margin-bottom: 1em" />
+
+    <div>
+      <slot></slot>
+    </div>
+
+  </AppBarPage>
+
+</template>
+
+
+<script>
+
+  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
+  import DeviceTopNav from './DeviceTopNav';
+  import DeprecationWarningBanner from './DeprecationWarningBanner';
+
+  export default {
+    name: 'DeviceAppBarPage',
+    components: { AppBarPage, DeprecationWarningBanner, DeviceTopNav },
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+
+</script>
diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -1,10 +1,6 @@
 <template>
 
-  <AppBarPage :title="pageTitle">
-
-    <template #subNav>
-      <DeviceTopNav />
-    </template>
+  <DeviceAppBarPage :title="pageTitle">
 
     <KPageContainer class="device-container">
       <div v-if="!$store.state.core.loading">
@@ -75,7 +71,7 @@
         />
       </div>
     </KPageContainer>
-  </AppBarPage>
+  </DeviceAppBarPage>
 
 </template>
 
@@ -86,9 +82,8 @@
   import TechnicalTextBlock from 'kolibri-common/components/AppError/TechnicalTextBlock';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
+  import DeviceAppBarPage from './DeviceAppBarPage';
   import { deviceString } from './commonDeviceStrings';
-  import DeviceTopNav from './DeviceTopNav';
   import DeviceNameModal from './DeviceNameModal';
 
   export default {
@@ -99,9 +94,8 @@
       };
     },
     components: {
-      AppBarPage,
+      DeviceAppBarPage,
       DeviceNameModal,
-      DeviceTopNav,
       TechnicalTextBlock,
     },
     mixins: [commonCoreStrings, responsiveWindowMixin],

diff --git a/...ri/plugins/device/assets/src/views/DeviceSettingsPage/__test__/DeviceSettingsPage.spec.js b/...ri/plugins/device/assets/src/views/DeviceSettingsPage/__test__/DeviceSettingsPage.spec.js
@@ -13,6 +13,15 @@ import { getFreeSpaceOnServer } from '../../AvailableChannelsPage/api';
 jest.mock('../../../composables/usePlugins');
 jest.mock('kolibri.urls');
 
+jest.mock('plugin_data', () => {
+  return {
+    __esModule: true,
+    default: {
+      deprecationWarnings: {},
+    },
+  };
+});
+
 jest.mock('../api.js', () => ({
   getPathPermissions: jest.fn(),
   getPathsPermissions: jest.fn(),

diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -1,10 +1,7 @@
 <template>
 
-  <AppBarPage :title="pageTitle">
+  <DeviceAppBarPage :title="pageTitle">
 
-    <template #subNav>
-      <DeviceTopNav />
-    </template>
     <KPageContainer class="device-container">
       <UiAlert
         v-if="showDisabledAlert && alertDismissed"
@@ -336,7 +333,7 @@
       />
 
     </KPageContainer>
-  </AppBarPage>
+  </DeviceAppBarPage>
 
 </template>
 
@@ -351,12 +348,11 @@
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   import sortLanguages from 'kolibri.utils.sortLanguages';
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonDeviceStrings from '../commonDeviceStrings';
+  import DeviceAppBarPage from '../DeviceAppBarPage';
   import { LandingPageChoices, MeteredConnectionDownloadOptions } from '../../constants';
-  import DeviceTopNav from '../DeviceTopNav';
   import { getFreeSpaceOnServer } from '../AvailableChannelsPage/api';
   import useDeviceRestart from '../../composables/useDeviceRestart';
   import usePlugins from '../../composables/usePlugins';
@@ -380,9 +376,8 @@
       };
     },
     components: {
-      AppBarPage,
+      DeviceAppBarPage,
       BottomAppBar,
-      DeviceTopNav,
       PrimaryStorageLocationModal,
       AddStorageLocationModal,
       RemoveStorageLocationModal,

diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
@@ -1,10 +1,6 @@
 <template>
 
-  <AppBarPage :title="pageTitle">
-
-    <template #subNav>
-      <DeviceTopNav />
-    </template>
+  <DeviceAppBarPage :title="pageTitle">
 
     <KPageContainer class="device-container">
       <HeaderWithOptions :headerText="coreString('facilitiesLabel')">
@@ -178,7 +174,7 @@
         @syncPeer="handlePeerSync"
       />
     </KPageContainer>
-  </AppBarPage>
+  </DeviceAppBarPage>
 
 </template>
 
@@ -188,7 +184,6 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import { FacilityResource } from 'kolibri.resources';
   import {
@@ -199,10 +194,10 @@
   } from 'kolibri.coreVue.componentSets.sync';
   import { TaskStatuses, TaskTypes } from 'kolibri.utils.syncTaskUtils';
   import some from 'lodash/some';
+  import DeviceAppBarPage from '../DeviceAppBarPage';
   import { PageNames } from '../../constants';
   import { deviceString } from '../commonDeviceStrings';
   import TasksBar from '../ManageContentPage/TasksBar';
-  import DeviceTopNav from '../DeviceTopNav';
   import HeaderWithOptions from '../HeaderWithOptions';
   import RemoveFacilityModal from './RemoveFacilityModal';
   import SyncAllFacilitiesModal from './SyncAllFacilitiesModal';
@@ -223,10 +218,9 @@
       };
     },
     components: {
-      AppBarPage,
+      DeviceAppBarPage,
       ConfirmationRegisterModal,
       CoreTable,
-      DeviceTopNav,
       HeaderWithOptions,
       FacilityNameAndSyncStatus,
       ImportFacilityModalGroup,

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/index.vue
@@ -1,10 +1,6 @@
 <template>
 
-  <AppBarPage :title="pageTitle">
-
-    <template #subNav>
-      <DeviceTopNav />
-    </template>
+  <DeviceAppBarPage :title="pageTitle">
 
     <KPageContainer class="device-container">
 
@@ -77,7 +73,7 @@
 
     </KPageContainer>
 
-  </AppBarPage>
+  </DeviceAppBarPage>
 
 </template>
 
@@ -90,14 +86,13 @@
   import sortBy from 'lodash/sortBy';
   import { mapState, mapGetters, mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import { TaskResource } from 'kolibri.resources';
   import { TaskStatuses, TaskTypes } from 'kolibri.utils.syncTaskUtils';
+  import DeviceAppBarPage from '../DeviceAppBarPage';
   import taskNotificationMixin from '../taskNotificationMixin';
   import useContentTasks from '../../composables/useContentTasks';
   import { PageNames } from '../../constants';
   import HeaderWithOptions from '../HeaderWithOptions';
-  import DeviceTopNav from '../DeviceTopNav';
   import { deviceString } from '../commonDeviceStrings';
   import SelectTransferSourceModal from './SelectTransferSourceModal';
   import ChannelPanel from './ChannelPanel/WithSizeAndOptions';
@@ -112,10 +107,9 @@
       };
     },
     components: {
-      AppBarPage,
+      DeviceAppBarPage,
       ChannelPanel,
       DeleteChannelModal,
-      DeviceTopNav,
       HeaderWithOptions,
       SelectTransferSourceModal,
       TasksBar,

diff --git a/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/index.vue b/kolibri/plugins/device/assets/src/views/ManagePermissionsPage/index.vue
@@ -1,10 +1,6 @@
 <template>
 
-  <AppBarPage :title="pageTitle">
-
-    <template #subNav>
-      <DeviceTopNav />
-    </template>
+  <DeviceAppBarPage :title="pageTitle">
 
     <KPageContainer class="device-container">
       <div class="description">
@@ -55,7 +51,7 @@
       </PaginatedListContainer>
 
     </KPageContainer>
-  </AppBarPage>
+  </DeviceAppBarPage>
 
 </template>
 
@@ -67,8 +63,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import PaginatedListContainer from 'kolibri.coreVue.components.PaginatedListContainer';
   import { PermissionTypes, UserKinds } from 'kolibri.coreVue.vuex.constants';
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
-  import DeviceTopNav from '../DeviceTopNav';
+  import DeviceAppBarPage from '../DeviceAppBarPage';
   import { deviceString } from '../commonDeviceStrings';
   import UserGrid from './UserGrid';
 
@@ -82,8 +77,7 @@
       };
     },
     components: {
-      AppBarPage,
-      DeviceTopNav,
+      DeviceAppBarPage,
       PaginatedListContainer,
       UserGrid,
     },