Onboarding import facility - Mostly designs

kolibri/core/assets/src/core-app/apiSpec.js

@@ -65,6 +65,7 @@ import redirectBrowser from '../utils/redirectBrowser';
 import * as licenseTranslations from '../utils/licenseTranslations';
 import bytesForHumans from '../utils/bytesForHumans';
 import UserType from '../utils/UserType';
+import * as syncTaskUtils from '../utils/syncTaskUtils';
 import samePageCheckGenerator from '../utils/samePageCheckGenerator';
 import Backdrop from '../views/Backdrop';
 import CoreSnackbar from '../views/CoreSnackbar';
@@ -245,6 +246,7 @@ export default {
     serverClock,
     shuffled,
     sortLanguages,
+    syncTaskUtils,
     UserType,
     validators,
     coreStrings,

kolibri/core/assets/src/mixins/commonSyncElements.js

@@ -25,7 +25,7 @@ const syncStrings = createTranslator('CommonSyncStrings', {
     context: 'Label for a button that opens a menu to save a new network address.',
   },
   selectFacilityTitle: {
-    message: 'Select facility',
+    message: 'Select learning facility',
     context:
       'Title of the modal window where the user selects a facility to import from the source device, if there are multiple facilities available to import.',
   },

kolibri/plugins/device/assets/src/views/syncTaskUtils.js → kolibri/core/assets/src/utils/syncTaskUtils.js

@@ -1,7 +1,45 @@
-import coreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-import taskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
-import bytesForHumans from 'kolibri.utils.bytesForHumans';
-import { TaskStatuses, TaskTypes } from '../constants';
+import commonCoreStrings from '../mixins/commonCoreStrings';
+import { getTaskString } from '../mixins/taskStrings';
+import bytesForHumans from '../utils/bytesForHumans';
+
+export const TaskTypes = {
+  REMOTECHANNELIMPORT: 'kolibri.core.content.tasks.remotechannelimport',
+  REMOTECONTENTIMPORT: 'kolibri.core.content.tasks.remotecontentimport',
+  REMOTEIMPORT: 'kolibri.core.content.tasks.remoteimport',
+  DISKCHANNELIMPORT: 'kolibri.core.content.tasks.diskchannelimport',
+  DISKCONTENTIMPORT: 'kolibri.core.content.tasks.diskcontentimport',
+  DISKIMPORT: 'kolibri.core.content.tasks.diskimport',
+  DISKCONTENTEXPORT: 'kolibri.core.content.tasks.diskcontentexport',
+  DISKEXPORT: 'kolibri.core.content.tasks.diskexport',
+  DELETECHANNEL: 'kolibri.core.content.tasks.deletechannel',
+  UPDATECHANNEL: 'kolibri.core.content.tasks.updatechannel',
+  REMOTECHANNELDIFFSTATS: 'kolibri.core.content.tasks.remotechanneldiffstats',
+  LOCALCHANNELDIFFSTATS: 'kolibri.core.content.tasks.localchanneldiffstats',
+  SYNCDATAPORTAL: 'kolibri.core.auth.tasks.dataportalsync',
+  SYNCPEERFULL: 'kolibri.core.auth.tasks.peerfacilitysync',
+  SYNCPEERPULL: 'kolibri.core.auth.tasks.peerfacilityimport',
+  DELETEFACILITY: 'kolibri.core.auth.tasks.deletefacility',
+};
+
+// identical to facility constants.js
+export const TaskStatuses = Object.freeze({
+  IN_PROGRESS: 'INPROGRESS',
+  COMPLETED: 'COMPLETED',
+  FAILED: 'FAILED',
+  PENDING: 'PENDING',
+  RUNNING: 'RUNNING',
+  QUEUED: 'QUEUED',
+  SCHEDULED: 'SCHEDULED',
+  CANCELED: 'CANCELED',
+  CANCELING: 'CANCELING',
+});
+
+export const TransferTypes = {
+  LOCALEXPORT: 'localexport',
+  LOCALIMPORT: 'localimport',
+  PEERIMPORT: 'peerimport',
+  REMOTEIMPORT: 'remoteimport',
+};
 
 export const SyncTaskStatuses = {
   SESSION_CREATION: 'SESSION_CREATION',
@@ -18,8 +56,7 @@ export const SyncTaskStatuses = {
   FAILED: 'FAILED',
 };
 
-const { getTaskString } = taskStrings.methods;
-const { coreString } = coreStrings.methods;
+const { coreString } = commonCoreStrings.methods;
 
 const syncTaskStatusToStepMap = {
   [SyncTaskStatuses.SESSION_CREATION]: 1,
@@ -31,24 +68,25 @@ const syncTaskStatusToStepMap = {
   [SyncTaskStatuses.REMOTE_DEQUEUING]: 7,
 };
 
+// getTaskString is wrapped in an arrow func to avoid evaluation before i18n is ready
 const genericStatusToDescriptionMap = {
-  [TaskStatuses.PENDING]: getTaskString('taskWaitingStatus'),
-  [TaskStatuses.QUEUED]: getTaskString('taskWaitingStatus'),
-  [TaskStatuses.COMPLETED]: getTaskString('taskFinishedStatus'),
-  [TaskStatuses.CANCELED]: getTaskString('taskCanceledStatus'),
-  [TaskStatuses.CANCELING]: getTaskString('taskCancelingStatus'),
-  [TaskStatuses.FAILED]: getTaskString('taskFailedStatus'),
+  [TaskStatuses.PENDING]: () => getTaskString('taskWaitingStatus'),
+  [TaskStatuses.QUEUED]: () => getTaskString('taskWaitingStatus'),
+  [TaskStatuses.COMPLETED]: () => getTaskString('taskFinishedStatus'),
+  [TaskStatuses.CANCELED]: () => getTaskString('taskCanceledStatus'),
+  [TaskStatuses.CANCELING]: () => getTaskString('taskCancelingStatus'),
+  [TaskStatuses.FAILED]: () => getTaskString('taskFailedStatus'),
 };
 
 export const syncStatusToDescriptionMap = {
   ...genericStatusToDescriptionMap,
-  [SyncTaskStatuses.SESSION_CREATION]: getTaskString('establishingConnectionStatus'),
-  [SyncTaskStatuses.REMOTE_QUEUING]: getTaskString('remotelyPreparingDataStatus'),
-  [SyncTaskStatuses.PULLING]: getTaskString('receivingDataStatus'),
-  [SyncTaskStatuses.LOCAL_DEQUEUING]: getTaskString('locallyIntegratingDataStatus'),
-  [SyncTaskStatuses.LOCAL_QUEUING]: getTaskString('locallyPreparingDataStatus'),
-  [SyncTaskStatuses.PUSHING]: getTaskString('sendingDataStatus'),
-  [SyncTaskStatuses.REMOTE_DEQUEUING]: getTaskString('remotelyIntegratingDataStatus'),
+  [SyncTaskStatuses.SESSION_CREATION]: () => getTaskString('establishingConnectionStatus'),
+  [SyncTaskStatuses.REMOTE_QUEUING]: () => getTaskString('remotelyPreparingDataStatus'),
+  [SyncTaskStatuses.PULLING]: () => getTaskString('receivingDataStatus'),
+  [SyncTaskStatuses.LOCAL_DEQUEUING]: () => getTaskString('locallyIntegratingDataStatus'),
+  [SyncTaskStatuses.LOCAL_QUEUING]: () => getTaskString('locallyPreparingDataStatus'),
+  [SyncTaskStatuses.PUSHING]: () => getTaskString('sendingDataStatus'),
+  [SyncTaskStatuses.REMOTE_DEQUEUING]: () => getTaskString('remotelyIntegratingDataStatus'),
 };
 
 function formatNameWithId(name, id) {
@@ -85,20 +123,20 @@ export function syncFacilityTaskDisplayInfo(task) {
   const statusDescription =
     syncStatusToDescriptionMap[task.extra_metadata.sync_state] ||
     syncStatusToDescriptionMap[task.status] ||
-    getTaskString('taskUnknownStatus');
+    (() => getTaskString('taskUnknownStatus'));
 
   if (task.status === TaskStatuses.COMPLETED) {
     statusMsg = getTaskString('taskFinishedStatus');
   } else if (syncStep) {
     statusMsg = getTaskString('syncStepAndDescription', {
       step: syncStep,
       total: task.type === TaskTypes.SYNCPEERPULL ? PULLSTEPS : PUSHPULLSTEPS,
-      description: statusDescription,
+      description: statusDescription(),
     });
   } else {
     if (task.type === TaskTypes.SYNCLOD && task.status === TaskStatuses.FAILED)
-      statusMsg = `${statusDescription}: ${task.exception}`;
-    else statusMsg = statusDescription;
+      statusMsg = `${statusDescription()}: ${task.exception}`;
+    else statusMsg = statusDescription();
   }
 
   if (task.status === TaskStatuses.COMPLETED) {
@@ -127,7 +165,7 @@ export function syncFacilityTaskDisplayInfo(task) {
 
 export const removeStatusToDescriptionMap = {
   ...genericStatusToDescriptionMap,
-  [TaskStatuses.RUNNING]: getTaskString('removingFacilityStatus'),
+  [TaskStatuses.RUNNING]: () => getTaskString('removingFacilityStatus'),
 };
 
 // Consolidates logic on how Remove-Facility Tasks should be displayed
@@ -137,7 +175,7 @@ export function removeFacilityTaskDisplayInfo(task) {
     task.extra_metadata.facility
   );
   const statusDescription =
-    removeStatusToDescriptionMap[task.status] || getTaskString('taskUnknownStatus');
+    removeStatusToDescriptionMap[task.status]() || getTaskString('taskUnknownStatus');
 
   return {
     headingMsg: getTaskString('removeFacilityTaskLabel', { facilityName }),

kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue

@@ -1,34 +1,42 @@
 <template>
 
-  <KModal
-    :title="$tr('changeLanguageModalHeader')"
-    :submitText="coreString('confirmAction')"
-    :cancelText="coreString('cancelAction')"
-    :size="600"
-    @cancel="cancel"
-    @submit="setLang"
+  <FocusTrap
+    @shouldFocusFirstEl="focusFirstEl"
+    @shouldFocusLastEl="focusLastEl"
   >
-    <KGrid>
-      <KGridItem
-        v-for="(languageCol, index) in splitLanguageOptions"
-        :key="index"
-        :class="{ 'offset-col': windowIsSmall && index === 1 }"
-        :layout8="{ span: 4 }"
-        :layout12="{ span: 6 }"
-      >
-        <KRadioButton
-          v-for="language in languageCol"
-          :key="language.id"
-          v-model="selectedLanguage"
-          :value="language.id"
-          :label="language.lang_name"
-          :title="language.english_name"
-          class="language-name"
-        />
-      </KGridItem>
-    </KGrid>
-
-  </KModal>
+
+    <KModal
+      :title="$tr('changeLanguageModalHeader')"
+      :submitText="coreString('confirmAction')"
+      :cancelText="coreString('cancelAction')"
+      :size="600"
+      @cancel="cancel"
+      @submit="setLang"
+    >
+      <KGrid>
+        <KGridItem
+          v-for="(languageCol, index) in splitLanguageOptions"
+          :key="index"
+          :class="{ 'offset-col': windowIsSmall && index === 1 }"
+          :layout8="{ span: 4 }"
+          :layout12="{ span: 6 }"
+        >
+          <KRadioButton
+            v-for="language in languageCol"
+            :key="language.id"
+            ref="languageItem"
+            v-model="selectedLanguage"
+            :value="language.id"
+            :label="language.lang_name"
+            :title="language.english_name"
+            class="language-name"
+          />
+        </KGridItem>
+      </KGrid>
+
+    </KModal>
+
+  </FocusTrap>
 
 </template>
 
@@ -38,10 +46,12 @@
   import { currentLanguage } from 'kolibri.utils.i18n';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import languageSwitcherMixin from './mixin';
 
   export default {
     name: 'LanguageSwitcherModal',
+    components: { FocusTrap },
     mixins: [commonCoreStrings, languageSwitcherMixin, responsiveWindowMixin],
     data() {
       return {
@@ -57,6 +67,12 @@
       },
     },
     methods: {
+      focusFirstEl() {
+        this.$refs.languageItem[0].focus();
+      },
+      focusLastEl() {
+        this.$refs.languageItem[this.$refs.languageItem.length - 1].focus();
+      },
       setLang() {
         if (currentLanguage === this.selectedLanguage) {
           this.cancel();

kolibri/core/assets/src/views/sync/FacilityAdminCredentialsForm.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div>
+  <form>
     <p v-if="singleFacility && facility.name" class="facility-name">
       {{ formatNameAndId(facility.name, facility.id) }}
     </p>
@@ -31,7 +31,7 @@
       :showConfirmationInput="false"
       :disabled="$attrs.disabled"
     />
-  </div>
+  </form>
 
 </template>
 

kolibri/plugins/device/assets/src/views/FacilitiesPage/FacilityTaskPanel.vue → kolibri/core/assets/src/views/sync/FacilityTaskPanel.vue

@@ -25,8 +25,8 @@
     syncFacilityTaskDisplayInfo,
     removeFacilityTaskDisplayInfo,
     importFacilityTaskDisplayInfo,
-  } from '../syncTaskUtils';
-  import { TaskTypes } from '../../constants';
+    TaskTypes,
+  } from '../../utils/syncTaskUtils';
   import FacilityTaskPanelDetails from './FacilityTaskPanelDetails';
 
   const indeterminateSyncStatuses = [

kolibri/plugins/device/assets/src/views/FacilitiesPage/FacilityTaskPanelDetails.vue → kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue

@@ -108,7 +108,7 @@
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonTaskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
-  import { TaskStatuses, TaskTypes } from '../../constants';
+  import { TaskStatuses, TaskTypes } from '../../utils/syncTaskUtils';
 
   export default {
     name: 'FacilityTaskPanelDetails',

kolibri/core/assets/src/views/sync/SelectAddressModalGroup/SelectAddressForm.vue

@@ -30,14 +30,6 @@
         />
       </UiAlert>
 
-      <KButton
-        v-show="!newAddressButtonDisabled && !formDisabled"
-        class="new-address-button"
-        :text="$tr('newAddressButtonLabel')"
-        appearance="basic-link"
-        @click="$emit('click_add_address')"
-      />
-
       <!-- Static Addresses -->
       <template v-for="(a, idx) in savedAddresses">
         <div :key="`div-${idx}`">
@@ -115,6 +107,15 @@
       </KFixedGrid>
     </template>
 
+    <KButton
+      v-show="!newAddressButtonDisabled && !formDisabled"
+      class="new-address-button"
+      :text="$tr('newAddressButtonLabel')"
+      appearance="basic-link"
+      @click="$emit('click_add_address')"
+    />
+
+
   </KModal>
 
 </template>
@@ -231,12 +232,12 @@
         };
       },
       submitDisabled() {
-        return (
+        return Boolean(
           this.selectedAddressId === '' ||
-          this.fetchingAddresses & !this.filterLODAvailable ||
-          this.deletingAddress ||
-          this.discoveryFailed ||
-          this.availableAddressIds.length === 0
+            this.fetchingAddresses & !this.filterLODAvailable ||
+            this.deletingAddress ||
+            this.discoveryFailed ||
+            this.availableAddressIds.length === 0
         );
       },
       newAddressButtonDisabled() {
@@ -361,7 +362,7 @@
 <style lang="scss" scoped>
 
   .new-address-button {
-    margin-bottom: 16px;
+    margin: 0 0 1em;
   }
 
   .radio-button {

kolibri/core/assets/src/views/sync/syncComponentSet.js

@@ -1,5 +1,6 @@
 export { default as SelectAddressForm } from './SelectAddressModalGroup/SelectAddressForm';
 export { default as SelectAddressModalGroup } from './SelectAddressModalGroup';
+export { default as FacilityTaskPanel } from './FacilityTaskPanel';
 export { default as ConfirmationRegisterModal } from './ConfirmationRegisterModal';
 export { default as FacilityAdminCredentialsForm } from './FacilityAdminCredentialsForm';
 export { default as FacilityNameAndSyncStatus } from './FacilityNameAndSyncStatus/index';

kolibri/plugins/device/assets/src/views/__test__/syncTaskUtils.spec.js → kolibri/core/assets/test/utils/syncTaskUtils.spec.js

@@ -4,8 +4,9 @@ import {
   removeStatusToDescriptionMap,
   removeFacilityTaskDisplayInfo,
   SyncTaskStatuses,
-} from '../syncTaskUtils';
-import { TaskStatuses, TaskTypes } from '../../constants';
+  TaskStatuses,
+  TaskTypes,
+} from '../../src/utils/syncTaskUtils';
 
 const CLEARABLE_STATUSES = ['COMPLETED', 'CANCELED', 'FAILED'];