Improve import project user experience

gulpfile.js

@@ -22,7 +22,6 @@ var sources = {
     core: {
         'js/readthedocs-doc-embed.js': {expose: false},
         'js/autocomplete.js': {},
-        'js/projectimport.js': {},
         'css/badge_only.css': {src: 'bower_components/sphinx-rtd-theme/sphinx_rtd_theme/static/css/badge_only.css'},
         'css/theme.css': {src: 'bower_components/sphinx-rtd-theme/sphinx_rtd_theme/static/css/theme.css'},
 
@@ -40,7 +39,11 @@ var sources = {
         'font/fontawesome-webfont.woff': {src: 'bower_components/font-awesome/fonts/fontawesome-webfont.woff'},
         'font/FontAwesome.otf': {src: 'bower_components/font-awesome/fonts/FontAwesome.otf'}
     },
-    projects: {'js/tools.js': {}},
+    projects: {
+        'js/tools.js': {},
+        'js/import.js': {},
+        'css/import.less': {},
+    },
     gold: {'js/gold.js': {}},
     donate: {'js/donate.js': {}}
 };
@@ -129,7 +132,9 @@ function build_app_sources (application, minify) {
 function browserify_stream (file, config, cb_output) {
     bower_resolve.offline = true;
     bower_resolve.init(function () {
-        var bundle_stream = browserify();
+        var bundle_stream = browserify({
+            paths: ['./']
+        });
 
         Object.keys(standalone).map(function (module) {
             bundle_stream = bundle_stream.external(module);

media/css/core.css

@@ -52,6 +52,13 @@ pre { margin: 15px 0; white-space: pre; overflow: auto; }
 pre, code, tt { font-family: "inconsolata", "inconsolata-1", "inconsolata-2", 'bitstream vera sans mono', 'andale mono', 'lucida console', monospace; line-height: 20px; }
 textarea, input, select { font-family: "inconsolata", "inconsolata-1", "inconsolata-2", 'bitstream vera sans mono', 'andale mono', 'lucida console', monospace; font-size: 16px; line-height: 20px; }
 
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
 
 /* tables */
 
@@ -593,6 +600,86 @@ div.project-version-list span.version-branch {
     font-size: .9em;
 }
 
+/* Project import */
+div.project-import-remote h1 {
+    margin: 0em 0em .5em 0em;
+}
+
+div.project-import-remote li.remote-repo a.remote-repo-view {
+    background: none;
+    color: #443;
+    box-shadow: none;
+    -moz-box-shadow: none;
+    -ms-box-shadow: none;
+    -webkit-box-shadow: none;
+    text-shadow: none;
+}
+
+div.project-import-remote li.remote-repo a.remote-repo-import,
+div.project-import-remote li.remote-repo a.remote-repo-view,
+div.project-import-remote li.remote-repo span.remote-repo-locked {
+    display: block;
+    margin: .25em 0em;
+    height: 1em;
+    padding: .5em .75em;
+    font-size: 1em;
+    font-weight: normal;
+}
+
+div.project-import-remote li.remote-repo a.remote-repo-import span,
+div.project-import-remote li.remote-repo a.remote-repo-view span,
+div.project-import-remote li.remote-repo span.remote-repo-locked span,
+div.project-import-remote button.remote-sync span {
+    display: none;
+}
+
+div.project-import-remote li.remote-repo a.remote-repo-import:before {
+    font-family: FontAwesome;
+    font-weight: normal;
+    content: "\f067";
+}
+div.project-import-remote li.remote-repo a.remote-repo-view:before {
+    font-family: FontAwesome;
+    font-weight: normal;
+    content: "\f08e";
+}
+div.project-import-remote li.remote-repo span.remote-repo-locked:before {
+    font-family: FontAwesome;
+    font-weight: normal;
+    content: "\f023";
+}
+div.project-import-remote button.remote-sync:before {
+    font-family: FontAwesome;
+    content: "\f021";
+}
+
+div.project-import-remote form.import-connect-github button:before {
+    font-family: FontAwesome;
+    content: "\f09b";
+}
+
+div.project-import-remote form.import-connect-bitbucket button:before {
+    font-family: FontAwesome;
+    content: "\f171";
+}
+
+div.project-import-remote li.remote-repo span.remote-repo-extra-url:before {
+    padding-right: .5em;
+    font-family: FontAwesome;
+    font-size: 1.2em;
+    content: '\f126';
+}
+div.project-import-remote li.remote-repo span.remote-repo-extra-locked:before {
+    padding-right: .5em;
+    font-family: FontAwesome;
+    font-size: 1.2em;
+    content: '\f071';
+}
+
+div.project-import-sidebar form.import-manual input {
+    margin: .5em 0em 1.5em 0em;
+}
+
 /* Donate */
 div.donate-stats {
     padding: 2em;

readthedocs/core/static-src/core/js/django-csrf.js

@@ -3,28 +3,31 @@ function csrfSafeMethod(method) {
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
 }
 
+function get_cookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie != '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = jQuery.trim(cookies[i]);
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
 
 $.ajaxSetup({
     beforeSend: function(xhr, settings) {
         if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
-            function getCookie(name) {
-                var cookieValue = null;
-                if (document.cookie && document.cookie != '') {
-                    var cookies = document.cookie.split(';');
-                    for (var i = 0; i < cookies.length; i++) {
-                        var cookie = jQuery.trim(cookies[i]);
-                        // Does this cookie string begin with the name we want?
-                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
-                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                            break;
-                        }
-                    }
-                }
-                return cookieValue;
-            }
-            var csrftoken = getCookie('csrftoken');
-
+            var csrftoken = get_cookie('csrftoken');
             xhr.setRequestHeader("X-CSRFToken", csrftoken);
         }
     }
 });
+
+module.exports = {
+    get_cookie: get_cookie
+};

readthedocs/core/static-src/core/js/tasks.js

@@ -0,0 +1,72 @@
+/* Public task tracking */
+
+var jquery = require('jquery');
+
+function poll_task (data) {
+    var defer = jquery.Deferred(),
+        tries = 5;
+
+    function poll_task_loop () {
+        jquery
+            .getJSON(data.url)
+            .success(function (task) {
+                if (task.finished) {
+                    if (task.success) {
+                        defer.resolve();
+                    }
+                    else {
+                        defer.reject({message: task.error});
+                    }
+                }
+                else {
+                    setTimeout(poll_task_loop, 2000);
+                }
+            })
+            .error(function (error) {
+                console.error('Error polling task:', error);
+                tries -= 1;
+                if (tries > 0) {
+                    setTimeout(poll_task_loop, 2000);
+                }
+                else {
+                    var error_msg = error.responseJSON.detail || error.statusText;
+                    defer.reject({message: error_msg});
+                }
+            });
+    }
+
+    setTimeout(poll_task_loop, 2000);
+
+    return defer;
+}
+
+function trigger_task (url) {
+    var defer = jquery.Deferred();
+
+    $.ajax({
+        method: 'POST',
+        url: url,
+        success: function (data) {
+            poll_task(data)
+                .then(function () {
+                    defer.resolve();
+                })
+                .fail(function (error) {
+                    // The poll_task function defer will only reject with
+                    // normalized error objects
+                    defer.reject(error);
+                });
+        },
+        error: function (error) {
+            var error_msg = error.responseJSON.detail || error.statusText;
+            defer.reject({message: error_msg});
+        }
+    });
+
+    return defer;
+}
+
+module.exports = {
+    poll_task: poll_task,
+    trigger_task: trigger_task
+};