Granular Import Export UIs

frontend_build/src/webpack.config.base.js

@@ -61,12 +61,6 @@ var config = {
         options: {
           preserveWhitespace: false,
           loaders: {
-            js: {
-              loader: 'buble-loader',
-              query: {
-                objectAssign: 'Object.assign',
-              },
-            },
             stylus: ExtractTextPlugin.extract({
               allChunks: true,
               use: vueStylusLoaders,
@@ -76,6 +70,9 @@ var config = {
               use: vueSassLoaders,
             }),
           },
+          buble: {
+            objectAssign: 'Object.assign',
+          },
           // handles <mat-svg/>, <ion-svg/>, <iconic-svg/>, and <file-svg/> svg inlining
           preLoaders: { html: 'svg-icon-inline-loader' },
         },

karma_config/testUtils.js

@@ -21,6 +21,7 @@ class MockResource {
     } else {
       fetchable.fetch = () => Promise.resolve(payload);
     }
+    sinon.spy(fetchable, 'fetch');
     return fetchable;
   }
 
@@ -35,7 +36,9 @@ class MockResource {
   }
 
   __getModelFetchReturns(payload, willReject = false) {
-    this.getModel.returns(this.__getFetchable(payload, willReject));
+    const fetchable = this.__getFetchable(payload, willReject);
+    this.getModel.returns(fetchable);
+    return fetchable;
   }
 
   __getModelSaveReturns(payload, willReject = false) {
@@ -45,7 +48,9 @@ class MockResource {
   }
 
   __getCollectionFetchReturns(payload, willReject = false) {
-    this.getCollection.returns(this.__getFetchable(payload, willReject));
+    const fetchable = this.__getFetchable(payload, willReject);
+    this.getCollection.returns(fetchable);
+    return fetchable;
   }
 }
 

karma_config/vueLocal.js

@@ -4,6 +4,9 @@ import router from 'vue-router';
 import vueintl from 'vue-intl';
 import 'intl';
 import 'intl/locale-data/jsonp/en.js';
+import kRouter from 'kolibri.coreVue.router';
+
+kRouter.init([]);
 
 vue.prototype.Kolibri = {};
 vue.config.silent = true;

kolibri/content/api.py

@@ -401,6 +401,7 @@ def _studio_response_to_kolibri_response(cls, studioresp):
             "thumbnail": studioresp.get("icon_encoding"),
             "public": studioresp.get("public", True),
             "total_resources": studioresp.get("total_resource_count", 0),
+            "total_file_size": studioresp.get("published_size"),
             "version": studioresp.get("version", 0),
             "included_languages": included_languages,
             "last_updated": studioresp.get("last_published"),

kolibri/content/serializers.py

@@ -51,8 +51,18 @@ def get_lang_name(self, instance):
 
     class Meta:
         model = ChannelMetadata
-        fields = ('root', 'id', 'name', 'description', 'author', 'last_updated', 'version', 'thumbnail',
-                  'lang_code', 'lang_name')
+        fields = (
+            'author',
+            'description',
+            'id',
+            'last_updated',
+            'lang_code',
+            'lang_name',
+            'name',
+            'root',
+            'thumbnail',
+            'version',
+        )
 
 
 class LowerCaseField(serializers.CharField):

kolibri/core/assets/src/api-resources/channel.js

@@ -3,6 +3,9 @@ import { Resource } from '../api-resource';
 /**
  * @example <caption>Delete a channel</caption>
  * ChannelResource.getModel(channel_id).delete()
+ *
+ * @example Only get the channels that are "available" (i.e. with resources on device)
+ * ChannelResource.getCollection().fetch({ available: true })
  */
 export default class ChannelResource extends Resource {
   static resourceName() {

kolibri/core/assets/src/api-resources/contentNodeGranular.js

@@ -0,0 +1,28 @@
+import { Resource } from '../api-resource';
+
+/**
+ * @example Get ContentNode from a local USB drive for the purposes of importing from that drive.
+ * ContentNodeGranular.getModel(pk).fetch({ importing_from_drive_id: 'drive_1' });
+ *
+ * @example Get ContentNode from a remote channel (whose content DB has been downloaded).
+ * OR exporting to a USB drive.
+ * ContentNodeGranular.getModel(pk).fetch();
+ *
+ * Note: if the top-level of the channel is desired, then `pk` must be the channels's `root` id.
+ */
+export default class ContentNodeGranularResource extends Resource {
+  static resourceName() {
+    return 'contentnode_granular';
+  }
+
+  static idKey() {
+    return 'pk';
+  }
+
+  // Given a node ID, returns the {total_file_size, on_device_file_size}
+  getFileSizes(pk) {
+    return this.client({
+      path: `${this.urls['contentnodefilesize_list']()}${pk}`,
+    });
+  }
+}

kolibri/core/assets/src/api-resources/index.js

@@ -1,5 +1,6 @@
 import ClassroomResource from './classroom';
 import ContentNodeResource from './contentNode';
+import ContentNodeGranular from './contentNodeGranular';
 import FacilityUserResource from './facilityUser';
 import FacilityUsernameResource from './facilityUsername';
 import LearnerGroupResource from './learnerGroup';
@@ -24,6 +25,7 @@ import UserProgressResource from './userProgress';
 import ContentNodeProgressResource from './contentNodeProgress';
 import DeviceProvisionResource from './deviceProvision';
 import DevicePermissionsResource, { NewDevicePermissionsResource } from './devicePermissions';
+import RemoteChannel from './remoteChannel';
 
 const classroomResource = new ClassroomResource();
 const contentNodeResource = new ContentNodeResource();
@@ -52,10 +54,14 @@ const contentNodeProgressResource = new ContentNodeProgressResource();
 const deviceProvisionResource = new DeviceProvisionResource();
 const devicePermissionsResource = new DevicePermissionsResource();
 const newDevicePermissionsResource = new NewDevicePermissionsResource();
+const ContentNodeGranularResource = new ContentNodeGranular();
+const RemoteChannelResource = new RemoteChannel();
 
 export {
   classroomResource as ClassroomResource,
   contentNodeResource as ContentNodeResource,
+  ContentNodeGranularResource,
+  RemoteChannelResource,
   facilityUserResource as FacilityUserResource,
   facilityUsernameResource as FacilityUsernameResource,
   learnerGroupResource as LearnerGroupResource,

kolibri/core/assets/src/api-resources/remoteChannel.js

@@ -0,0 +1,7 @@
+import { Resource } from '../api-resource';
+
+export default class RemoteChannelResource extends Resource {
+  static resourceName() {
+    return 'remotechannel';
+  }
+}

kolibri/core/assets/src/api-resources/task.js

@@ -1,32 +1,109 @@
 import { Resource } from '../api-resource';
+import pickBy from 'lodash/pickBy';
 
 export default class TaskResource extends Resource {
   static resourceName() {
     return 'task';
   }
 
-  localExportContent(driveId) {
-    const clientObj = {
-      path: this.localExportUrl(),
-      entity: { drive_id: driveId },
-    };
-    return this.client(clientObj);
+  /**
+   * Initiates a Task that imports a Channel Metadata DB from a remote source
+   *
+   * @param {string} channel_id -
+   *
+   */
+  startRemoteChannelImport({ channel_id }) {
+    return this.client({
+      path: this.urls[`${this.name}_startremotechannelimport`](),
+      method: 'POST',
+      entity: {
+        channel_id,
+      },
+    });
   }
 
-  localImportContent(driveId) {
-    const clientObj = {
-      path: this.localImportUrl(),
-      entity: { drive_id: driveId },
-    };
-    return this.client(clientObj);
+  /**
+   * Initiates a Task that imports a Channel Metadata DB from a local drive
+   *
+   * @param {string} params.channel_id -
+   * @param {string} params.drive_id -
+   *
+   */
+  startDiskChannelImport({ channel_id, drive_id }) {
+    return this.client({
+      path: this.urls[`${this.name}_startdiskchannelimport`](),
+      method: 'POST',
+      entity: {
+        channel_id,
+        drive_id,
+      },
+    });
   }
 
-  remoteImportContent(channelId) {
-    const clientObj = {
-      path: this.remoteImportUrl(),
-      entity: { channel_id: channelId },
-    };
-    return this.client(clientObj);
+  /**
+   * Initiates a Task that imports Channel Content from a remote source
+   *
+   * @param {string} params.channel_id -
+   * @param {string} [params.baseurl] - URL of remote source (defaults to Kolibri Studio)
+   * @param {Array<string>} [params.node_ids] -
+   * @param {Array<string>} [params.exclude_node_ids] -
+   * @returns {Promise}
+   *
+   */
+  startRemoteContentImport(params) {
+    return this.client({
+      path: this.urls[`${this.name}_startremotecontentimport`](),
+      method: 'POST',
+      entity: pickBy(params),
+    });
+  }
+
+  /**
+   * Initiates a Task that imports Channel Content from a local drive
+   *
+   * @param {string} params.channel_id -
+   * @param {string} params.drive_id -
+   * @param {Array<string>} [params.node_ids] -
+   * @param {Array<string>} [params.exclude_node_ids] -
+   * @returns {Promise}
+   *
+   */
+  startDiskContentImport(params) {
+    return this.client({
+      path: this.urls[`${this.name}_startdiskcontentimport`](),
+      method: 'POST',
+      entity: pickBy(params),
+    });
+  }
+
+  /**
+   * Initiates a Task that exports Channel Content to a local drive
+   *
+   * @param {string} params.channel_id -
+   * @param {string} params.drive_id -
+   * @param {Array<string>} [params.node_ids] -
+   * @param {Array<string>} [params.exclude_node_ids] -
+   * @returns {Promise}
+   *
+   */
+  startDiskContentExport(params) {
+    // Not naming it after URL to keep internal consistency
+    return this.client({
+      path: this.urls[`${this.name}_startdiskexport`](),
+      method: 'POST',
+      entity: pickBy(params),
+    });
+  }
+
+  /**
+   * Gets all the Tasks outside of the Resource Layer mechanism
+   *
+   */
+  getTasks() {
+    return this.client({
+      path: this.urls[`${this.name}_list`](),
+      method: 'GET',
+    });
   }
 
   deleteChannel(channelId) {
@@ -58,16 +135,6 @@ export default class TaskResource extends Resource {
     };
     return this.client(clientObj);
   }
-
-  get localExportUrl() {
-    return this.urls[`${this.name}_startlocalexport`];
-  }
-  get localImportUrl() {
-    return this.urls[`${this.name}_startlocalimport`];
-  }
-  get remoteImportUrl() {
-    return this.urls[`${this.name}_startremoteimport`];
-  }
   get deleteChannelUrl() {
     return this.urls[`${this.name}_startdeletechannel`];
   }

kolibri/core/assets/src/router.js

@@ -45,6 +45,10 @@ class Router {
   replace(location, onComplete, onAbort) {
     return this._vueRouter.replace(location, onComplete, onAbort);
   }
+
+  push(location, onComplete, onAbort) {
+    return this._vueRouter.push(location, onComplete, onAbort);
+  }
 }
 
 const router = new Router();

kolibri/core/assets/src/views/core-modal/index.vue

@@ -21,7 +21,7 @@
         :style="{ width: width, height: height }"
       >
 
-        <div class="top-buttons" @keydown.enter.stop>
+        <div class="top-buttons" @keydown.enter.stop v-if="!hideTopButtons">
           <button :aria-label="$tr('goBack')" @click="emitBackEvent" class="header-btn btn-back" v-if="enableBackBtn">
             <mat-svg category="navigation" name="arrow_back" />
           </button>
@@ -100,6 +100,10 @@
         type: String,
         required: false,
       },
+      hideTopButtons: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -221,9 +225,6 @@
   .btn-close
     right: -10px
 
-  .title
-    text-align: center
-
   .fade-enter-active, .fade-leave-active
     transition: all 0.3s ease
 

kolibri/core/assets/src/views/immersive-full-screen/index.vue

@@ -24,6 +24,7 @@
   import { validateLinkObject } from 'kolibri.utils.validators';
 
   export default {
+    name: 'immersiveFullScreen',
     props: {
       backPageLink: {
         type: Object,

kolibri/core/assets/src/views/k-breadcrumbs/index.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div v-show="crumbs.length > 1">
+  <div v-show="showAllCrumbs || crumbs.length > 1">
     <nav class="breadcrumbs">
       <div v-show="collapsedCrumbs.length" class="breadcrumbs-dropdown-wrapper">
         <ui-icon-button :hasDropdown="true" icon="expand_more" size="small">
@@ -110,6 +110,14 @@
           return crumbItems.slice(0, -1).every(crumb => validateLinkObject(crumb.link));
         },
       },
+      /**
+       * When set to 'true', a breadcrumb will be shown for each item in 'items' array.
+       * Otherwise, the first item will be omitted.
+       */
+      showAllCrumbs: {
+        type: Boolean,
+        default: false,
+      },
     },
 
     data: () => ({
@@ -135,6 +143,12 @@
         return Math.min(this.parentWidth - DROPDOWN_SIDE_PADDING, MAX_CRUMB_WIDTH);
       },
     },
+    watch: {
+      items(val) {
+        this.crumbs = Array.from(val);
+        this.attachSensors();
+      },
+    },
     created() {
       this.crumbs = Array.from(this.items);
     },