Merge pull request #8169 from AkA84/TNL-925-import-module-amendments

TNL-925: Import module amendments

cms/static/js/factories/import.js

 define([
-    'js/views/import', 'jquery', 'gettext', 'jquery.fileupload', 'jquery.cookie'
-], function(Import, $, gettext) {
+    'domReady', 'js/views/import', 'jquery', 'gettext', 'jquery.fileupload', 'jquery.cookie'
+], function(domReady, Import, $, gettext) {
+
     'use strict';
+
     return function (feedbackUrl, library) {
         var dbError;
+
         if (library) {
             dbError = gettext('There was an error while importing the new library to our database.');
         } else {
             dbError = gettext('There was an error while importing the new course to our database.');
         }
+
         var bar = $('.progress-bar'),
             fill = $('.progress-fill'),
             submitBtn = $('.submit-button'),
-            chooseBtn = $('.choose-file-button'),
+            chooseBtn = $('.view-import .choose-file-button'),
             defaults = [
                 gettext('There was an error during the upload process.') + '\n',
                 gettext('There was an error while unpacking the file.') + '\n',
                 gettext('There was an error while verifying the file you submitted.') + '\n',
                 dbError + '\n'
             ],
-            // Display the status of last file upload on page load
-            lastFileUpload = $.cookie('lastfileupload'),
+            unloading = false,
+            previousImport = Import.storedImport(),
             file;
 
-        if (lastFileUpload){
-            Import.getAndStartUploadFeedback(feedbackUrl.replace('fillerName', lastFileUpload), lastFileUpload);
+        var onComplete = function () {
+            bar.hide();
+            chooseBtn
+                .find('.copy').html(gettext("Choose new file")).end()
+                .show();
+        }
+
+        $(window).on('beforeunload', function (event) { unloading = true; });
+
+        // Display the status of last file upload on page load
+        if (previousImport) {
+            $('.file-name-block')
+                .find('.file-name').html(previousImport.file.name).end()
+                .show();
+
+            if (previousImport.completed !== true) {
+                chooseBtn.hide();
+            }
+
+            Import.resume().then(onComplete);
         }
 
         $('#fileupload').fileupload({
@@ -33,39 +55,48 @@ define([
             maxChunkSize: 20 * 1000000, // 20 MB
             autoUpload: false,
             add: function(e, data) {
-                Import.clearImportDisplay();
-                Import.okayToNavigateAway = false;
+                Import.reset();
                 submitBtn.unbind('click');
+
                 file = data.files[0];
+
                 if (file.name.match(/tar\.gz$/)) {
-                    submitBtn.click(function(event){
+                    submitBtn.click(function(event) {
                         event.preventDefault();
-                        $.cookie('lastfileupload', file.name);
+
+                        Import.start(
+                            file.name,
+                            feedbackUrl.replace('fillerName', file.name)
+                        ).then(onComplete);
+
                         submitBtn.hide();
-                        Import.startUploadFeedback();
-                        data.submit().complete(function(result, textStatus, xhr) {
-                            window.onbeforeunload = null;
-                            if (xhr.status != 200) {
+                        data.submit().complete(function (result, textStatus, xhr) {
+                            if (xhr.status !== 200) {
                                 var serverMsg, errMsg, stage;
+
                                 try{
-                                    serverMsg = $.parseJSON(result.responseText);
+                                    serverMsg = $.parseJSON(result.responseText) || {};
                                 } catch (e) {
                                     return;
                                 }
-                                errMsg = serverMsg.hasOwnProperty('ErrMsg') ?  serverMsg.ErrMsg : '' ;
+
+                                errMsg = serverMsg.hasOwnProperty('ErrMsg') ? serverMsg.ErrMsg : '';
+
                                 if (serverMsg.hasOwnProperty('Stage')) {
                                     stage = Math.abs(serverMsg.Stage);
-                                    Import.stageError(stage, defaults[stage] + errMsg);
+                                    Import.cancel(defaults[stage] + errMsg, stage);
                                 }
-                                else {
+                                // It could be that the user is simply refreshing the page
+                                // so we need to be sure this is an actual error from the server
+                                else if (!unloading) {
+                                    $(window).off('beforeunload.import');
+
+                                    Import.reset();
+                                    onComplete();
+
                                     alert(gettext('Your import has failed.') + '\n\n' + errMsg);
                                 }
-                                chooseBtn.html(gettext('Choose new file')).show();
-                                bar.hide();
                             }
-                            Import.stopGetStatus = true;
-                            chooseBtn.html(gettext('Choose new file')).show();
-                            bar.hide();
                         });
                     });
                 } else {
@@ -87,30 +118,45 @@ define([
                 }
                 if (percentInt >= doneAt) {
                     bar.hide();
-                    // Start feedback with delay so that current stage of import properly updates in session
-                    setTimeout(
-                        function () { Import.startServerFeedback(feedbackUrl.replace('fillerName', file.name));},
-                        3000
-                    );
+
+                    // Start feedback with delay so that current stage of
+                    // import properly updates in session
+                    setTimeout(function () { Import.pollStatus(); }, 3000);
                 } else {
                     bar.show();
                     fill.width(percentVal).html(percentVal);
                 }
             },
-            done: function(event, data){
-                bar.hide();
-                window.onbeforeunload = null;
-                Import.displayFinishedImport();
-            },
-            start: function(event) {
-                window.onbeforeunload = function() {
-                    if (!Import.okayToNavigateAway) {
-                        return "${_('Your import is in progress; navigating away will abort it.')}";
-                    }
-                };
-            },
             sequentialUploads: true,
             notifyOnError: false
         });
+
+
+        var showImportSubmit = function (e) {
+            var filepath = $(this).val();
+
+            if (filepath.substr(filepath.length - 6, 6) === 'tar.gz') {
+                $('.error-block').hide();
+                $('.file-name').html($(this).val().replace('C:\\fakepath\\', ''));
+                $('.file-name-block').show();
+                chooseBtn.hide();
+                submitBtn.show();
+                $('.progress').show();
+            } else {
+                var msg = gettext('File format not supported. Please upload a file with a {file_extension} extension.')
+                    .replace('{file_extension}', '<code>tar.gz</code>');
+
+                $('.error-block').html(msg).show();
+            }
+        };
+
+        domReady(function () {
+            // import form setup
+            $('.view-import .file-input').bind('change', showImportSubmit);
+            $('.view-import .choose-file-button, .view-import .choose-file-button-inline').bind('click', function (e) {
+                e.preventDefault();
+                $('.view-import .file-input').click();
+            });
+        });
     };
 });

cms/static/require-config.js

@@ -27,6 +27,7 @@ require.config({
         "jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
         "datepair": "js/vendor/timepicker/datepair",
         "date": "js/vendor/date",
+        "moment": "js/vendor/moment.min",
         "underscore": "js/vendor/underscore-min",
         "underscore.string": "js/vendor/underscore.string.min",
         "backbone": "js/vendor/backbone-min",

cms/static/sass/views/_import.scss

@@ -186,6 +186,17 @@
         // TYPE: success
         &.item-progresspoint-success {
 
+          .item-progresspoint-success-date {
+            @include margin-left($baseline/4);
+            display: none;
+          }
+
+          &.is-complete {
+
+            .item-progresspoint-success-date {
+              display: inline;
+            }
+          }
         }
 
 
@@ -217,6 +228,8 @@
           }
 
           .fa-cog {
+            @include animation(fa-spin 2s infinite linear);
+
             visibility: visible;
             opacity: 1.0;
           }

cms/templates/import.html

@@ -115,7 +115,7 @@ else:
 
             <li class="item-progresspoint item-progresspoint-unpack is-started">
               <span class="deco status-visual">
-                <i class="icon fa fa-cog fa-spin"></i>
+                <i class="icon fa fa-cog"></i>
                 <i class="icon fa fa-warning"></i>
               </span>
 
@@ -167,7 +167,10 @@ else:
               </span>
 
               <div class="status-detail">
-                <h3 class="title">${_("Success")}</h3>
+                <h3 class="title">
+                  ${_("Success")}
+                  <span class="item-progresspoint-success-date"></span>
+                </h3>
                 <p class="copy">
                     %if library:
                         ${_("Your imported content has now been integrated into this library")}

common/test/acceptance/pages/studio/import_export.py

@@ -3,6 +3,7 @@ Import/Export pages.
 """
 from bok_choy.promise import EmptyPromise
 import os
+import re
 import requests
 from .utils import click_css
 from .library import LibraryPage
@@ -118,6 +119,16 @@ class ImportMixin(object):
 
     url_path = "import"
 
+    @property
+    def timestamp(self):
+        """
+        The timestamp is displayed on the page as "(MM/DD/YYYY at HH:mm)"
+        It parses the timestamp and returns a (date, time) tuple
+        """
+        string = self.q(css='.item-progresspoint-success-date').text[0]
+
+        return re.match(r'\(([^ ]+).+?(\d{2}:\d{2})', string).groups()
+
     def is_browser_on_page(self):
         """
         Verify this is the export page
@@ -226,6 +237,12 @@ class ImportMixin(object):
         """
         return self.q(css='.wrapper-status').visible
 
+    def is_timestamp_visible(self):
+        """
+        Checks if the UTC timestamp of the last successfull import is visible
+        """
+        return self.q(css='.item-progresspoint-success-date').visible
+
     def wait_for_filename_error(self):
         """
         Wait for the upload field to display an error.

common/test/acceptance/tests/studio/test_import_export.py

@@ -3,6 +3,7 @@ Acceptance tests for the Import and Export pages
 """
 from abc import abstractmethod
 from bok_choy.promise import EmptyPromise
+from datetime import datetime
 from .base_studio_test import StudioLibraryTest, StudioCourseTest
 from ...fixtures.course import XBlockFixtureDesc
 from ...pages.studio.import_export import ExportLibraryPage, ExportCoursePage, ImportLibraryPage, ImportCoursePage
@@ -183,6 +184,27 @@ class ImportTestMixin(object):
         self.import_page.upload_tarball(self.tarball_name)
         self.import_page.wait_for_upload()
 
+    def test_import_timestamp(self):
+        """
+        Scenario: I perform a course / library import
+            On import success, the page displays a UTC timestamp previously not visible
+            And if I refresh the page, the timestamp is still displayed
+        """
+        self.assertFalse(self.import_page.is_timestamp_visible())
+        self.import_page.upload_tarball(self.tarball_name)
+        self.import_page.wait_for_upload()
+
+        utc_now = datetime.utcnow()
+        import_date, import_time = self.import_page.timestamp
+
+        self.assertTrue(self.import_page.is_timestamp_visible())
+        self.assertEqual(utc_now.strftime('%m/%d/%Y'), import_date)
+        self.assertEqual(utc_now.strftime('%H:%M'), import_time)
+
+        self.import_page.visit()
+        self.import_page.wait_for_tasks(completed=True)
+        self.assertTrue(self.import_page.is_timestamp_visible())
+
     def test_landing_url(self):
         """
         Scenario: When uploading a library or course, a link appears for me to view the changes.