From 3cfbd2b1601842feea0a7739098a90e2d1dccec4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 11 Apr 2016 18:27:34 +0100
Subject: [PATCH 1/5] Added loading icon to import buttons

See #14488 for more details
---
 .../javascripts/importer_status.js.coffee     | 37 +++++++++++++------
 app/assets/stylesheets/pages/import.scss      | 21 +++++++++++
 app/views/import/bitbucket/status.html.haml   | 20 +++++++---
 app/views/import/fogbugz/status.html.haml     | 15 ++++++--
 app/views/import/github/status.html.haml      | 15 ++++++--
 app/views/import/gitlab/status.html.haml      | 15 ++++++--
 app/views/import/gitorious/status.html.haml   | 15 ++++++--
 app/views/import/google_code/status.html.haml | 19 +++++++---
 8 files changed, 119 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/importer_status.js.coffee b/app/assets/javascripts/importer_status.js.coffee
index be8d225e73b..c51c4a1a182 100644
--- a/app/assets/javascripts/importer_status.js.coffee
+++ b/app/assets/javascripts/importer_status.js.coffee
@@ -4,18 +4,33 @@ class @ImporterStatus
     this.setAutoUpdate()
 
   initStatusPage: ->
-    $(".js-add-to-import").click (event) =>
-      new_namespace = null
-      tr = $(event.currentTarget).closest("tr")
-      id = tr.attr("id").replace("repo_", "")
-      if tr.find(".import-target input").length > 0
-        new_namespace = tr.find(".import-target input").prop("value")
-        tr.find(".import-target").empty().append(new_namespace + "/" + tr.find(".import-target").data("project_name"))
-      $.post @import_url, {repo_id: id, new_namespace: new_namespace}, dataType: 'script'
+    $(".js-add-to-import")
+      .off 'click'
+      .on 'click', (event) =>
+        new_namespace = null
+        $btn = $(event.currentTarget)
+        $tr = $btn.closest("tr")
+        id = $tr.attr("id").replace("repo_", "")
+        if $tr.find(".import-target input").length > 0
+          new_namespace = $tr.find(".import-target input").prop("value")
+          $tr.find(".import-target").empty().append(new_namespace + "/" + $tr.find(".import-target").data("project_name"))
 
-    $(".js-import-all").click (event) =>
-      $(".js-add-to-import").each ->
-        $(this).click()
+        $btn
+          .disable()
+          .addClass 'is-loading'
+
+        $.post @import_url, {repo_id: id, new_namespace: new_namespace}, dataType: 'script'
+
+    $(".js-import-all")
+      .off 'click'
+      .on 'click', (event) =>
+        $btn = $(event.currentTarget)
+        $btn
+          .disable()
+          .addClass 'is-loading'
+
+        $(".js-add-to-import").each ->
+          $(this).click()
 
   setAutoUpdate: ->
     setInterval (=>
diff --git a/app/assets/stylesheets/pages/import.scss b/app/assets/stylesheets/pages/import.scss
index 6a99cd9cb94..84cc35239f9 100644
--- a/app/assets/stylesheets/pages/import.scss
+++ b/app/assets/stylesheets/pages/import.scss
@@ -16,3 +16,24 @@ i.icon-gitorious-big {
   width: 18px;
   height: 18px;
 }
+
+.import-jobs-from-col,
+.import-jobs-to-col {
+  width: 40%;
+}
+
+.import-jobs-status-col {
+  width: 20%;
+}
+
+.btn-import {
+  .loading-icon {
+    display: none;
+  }
+
+  &.is-loading {
+    .loading-icon {
+      display: inline-block;
+    }
+  }
+}
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index aec2e836c9f..134d88481db 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -10,13 +10,19 @@
   %hr
   %p
   - if @incompatible_repos.any?
-    = button_tag 'Import all compatible projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-import btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all compatible projects
   - else
-    = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all projects
 
-
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From Bitbucket
@@ -28,7 +34,7 @@
           %td
             = link_to project.import_source, "https://bitbucket.org/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -47,7 +53,9 @@
           %td.import-target
             = "#{repo["owner"]}/#{repo["slug"]}"
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
           %td
diff --git a/app/views/import/fogbugz/status.html.haml b/app/views/import/fogbugz/status.html.haml
index 6ee16c8be4b..f5966fac65b 100644
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@@ -13,10 +13,15 @@
     how FogBugz email addresses and usernames are imported into GitLab.
   %hr
   %p
-  = button_tag 'Import all projects', class: 'btn btn-success js-import-all'
+  = button_tag class: 'btn btn-import btn-success js-import-all' do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From FogBugz
@@ -28,7 +33,7 @@
           %td
             = project.import_source
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -47,7 +52,9 @@
           %td.import-target
             = "#{current_user.username}/#{repo.name}"
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_fogbugz_path}", "#{import_fogbugz_path}");
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index 1416ee5bd5a..65432951ec8 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -8,10 +8,15 @@
   Select projects you want to import.
 %hr
 %p
-  = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From GitHub
@@ -23,7 +28,7 @@
           %td
             = link_to project.import_source, "https://github.com/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -42,7 +47,9 @@
           %td.import-target
             = repo.full_name
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_github_path}", "#{import_github_path}");
diff --git a/app/views/import/gitlab/status.html.haml b/app/views/import/gitlab/status.html.haml
index 911a55eb85d..f20011f5684 100644
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@@ -8,10 +8,15 @@
   Select projects you want to import.
 %hr
 %p
-  = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From GitLab.com
@@ -23,7 +28,7 @@
           %td
             = link_to project.import_source, "https://gitlab.com/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -42,7 +47,9 @@
           %td.import-target
             = repo["path_with_namespace"]
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_gitlab_path}", "#{import_gitlab_path}");
diff --git a/app/views/import/gitorious/status.html.haml b/app/views/import/gitorious/status.html.haml
index 6b0fa1edf8c..725910ed213 100644
--- a/app/views/import/gitorious/status.html.haml
+++ b/app/views/import/gitorious/status.html.haml
@@ -8,10 +8,15 @@
   Select projects you want to import.
 %hr
 %p
-  = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From Gitorious.org
@@ -23,7 +28,7 @@
           %td
             = link_to project.import_source, "https://gitorious.org/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -42,7 +47,9 @@
           %td.import-target
             = repo.full_name
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_gitorious_path}", "#{import_gitorious_path}");
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index 175ef6921cd..2cb0931838b 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -14,12 +14,19 @@
   %hr
   %p
   - if @incompatible_repos.any?
-    = button_tag 'Import all compatible projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-import btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all compatible projects
   - else
-    = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-import btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From Google Code
@@ -31,7 +38,7 @@
           %td
             = link_to project.import_source, "https://code.google.com/p/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -50,7 +57,9 @@
           %td.import-target
             = "#{current_user.username}/#{repo.name}"
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo.id}"}
           %td

From a650af12261b850d9565cbfc473ea82db59f2e3d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 12 Apr 2016 09:48:39 +0100
Subject: [PATCH 2/5] Moved loading icon to match todo loading icon

---
 app/views/import/base/create.js.haml          | 4 ++--
 app/views/import/bitbucket/status.html.haml   | 6 +++---
 app/views/import/fogbugz/status.html.haml     | 4 ++--
 app/views/import/github/status.html.haml      | 4 ++--
 app/views/import/gitlab/status.html.haml      | 4 ++--
 app/views/import/gitorious/status.html.haml   | 4 ++--
 app/views/import/google_code/status.html.haml | 6 +++---
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/views/import/base/create.js.haml b/app/views/import/base/create.js.haml
index d8af0295b2d..ec7a2b86566 100644
--- a/app/views/import/base/create.js.haml
+++ b/app/views/import/base/create.js.haml
@@ -20,10 +20,10 @@
     job.attr("id", "project_#{@project.id}")
     target_field = job.find(".import-target")
     target_field.empty()
-    target_field.append('<strong>#{link_to @project.path_with_namespace, namespace_project_path(@project.namespace, @project)}</strong>')
+    target_field.append('#{link_to @project.path_with_namespace, namespace_project_path(@project.namespace, @project)}')
     $("table.import-jobs tbody").prepend(job)
     job.addClass("active").find(".import-actions").html("<i class='fa fa-spinner fa-spin'></i> started")
 - else
   :plain
     job = $("tr#repo_#{@repo_id}")
-    job.find(".import-actions").html("<i class='fa fa-exclamation-circle'> Error saving project: #{escape_javascript(@project.errors.full_messages.join(','))}</i>")
+    job.find(".import-actions").html("<i class='fa fa-exclamation-circle'></i> Error saving project: #{escape_javascript(@project.errors.full_messages.join(','))}</i>")
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index 134d88481db..e24c01f3e0f 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -11,12 +11,12 @@
   %p
   - if @incompatible_repos.any?
     = button_tag class: "btn btn-import btn-success js-import-all" do
-      = icon('spinner spin', class: 'loading-icon')
       Import all compatible projects
+      = icon('spinner spin', class: 'loading-icon')
   - else
     = button_tag class: "btn btn-success js-import-all" do
-      = icon('spinner spin', class: 'loading-icon')
       Import all projects
+      = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -54,8 +54,8 @@
             = "#{repo["owner"]}/#{repo["slug"]}"
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
-              = icon('spinner spin', class: 'loading-icon')
               Import
+              = icon('spinner spin', class: 'loading-icon')
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
           %td
diff --git a/app/views/import/fogbugz/status.html.haml b/app/views/import/fogbugz/status.html.haml
index f5966fac65b..d842d1cbd94 100644
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@@ -14,8 +14,8 @@
   %hr
   %p
   = button_tag class: 'btn btn-import btn-success js-import-all' do
-    = icon('spinner spin', class: 'loading-icon')
     Import all projects
+    = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -53,8 +53,8 @@
             = "#{current_user.username}/#{repo.name}"
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
-              = icon('spinner spin', class: 'loading-icon')
               Import
+              = icon('spinner spin', class: 'loading-icon')
 
 :javascript
   new ImporterStatus("#{jobs_import_fogbugz_path}", "#{import_fogbugz_path}");
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index 65432951ec8..d6fa0d8023b 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -9,8 +9,8 @@
 %hr
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
-    = icon('spinner spin', class: 'loading-icon')
     Import all projects
+    = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -48,8 +48,8 @@
             = repo.full_name
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
-              = icon('spinner spin', class: 'loading-icon')
               Import
+              = icon('spinner spin', class: 'loading-icon')
 
 :javascript
   new ImporterStatus("#{jobs_import_github_path}", "#{import_github_path}");
diff --git a/app/views/import/gitlab/status.html.haml b/app/views/import/gitlab/status.html.haml
index f20011f5684..8f79f385610 100644
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@@ -9,8 +9,8 @@
 %hr
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
-    = icon('spinner spin', class: 'loading-icon')
     Import all projects
+    = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -48,8 +48,8 @@
             = repo["path_with_namespace"]
           %td.import-actions.job-status
             = button_tag class: "btn js-add-to-import" do
-              = icon('spinner spin', class: 'loading-icon')
               Import
+              = icon('spinner spin', class: 'loading-icon')
 
 :javascript
   new ImporterStatus("#{jobs_import_gitlab_path}", "#{import_gitlab_path}");
diff --git a/app/views/import/gitorious/status.html.haml b/app/views/import/gitorious/status.html.haml
index 725910ed213..f0256e0f934 100644
--- a/app/views/import/gitorious/status.html.haml
+++ b/app/views/import/gitorious/status.html.haml
@@ -9,8 +9,8 @@
 %hr
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
-    = icon('spinner spin', class: 'loading-icon')
     Import all projects
+    = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -48,8 +48,8 @@
             = repo.full_name
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
-              = icon('spinner spin', class: 'loading-icon')
               Import
+              = icon('spinner spin', class: 'loading-icon')
 
 :javascript
   new ImporterStatus("#{jobs_import_gitorious_path}", "#{import_gitorious_path}");
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index 2cb0931838b..c4ac1b4f9b7 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -15,12 +15,12 @@
   %p
   - if @incompatible_repos.any?
     = button_tag class: "btn btn-import btn-success js-import-all" do
-      = icon('spinner spin', class: 'loading-icon')
       Import all compatible projects
+      = icon('spinner spin', class: 'loading-icon')
   - else
     = button_tag class: "btn btn-import btn-success js-import-all" do
-      = icon('spinner spin', class: 'loading-icon')
       Import all projects
+      = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -58,8 +58,8 @@
             = "#{current_user.username}/#{repo.name}"
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
-              = icon('spinner spin', class: 'loading-icon')
               Import
+              = icon('spinner spin', class: 'loading-icon')
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo.id}"}
           %td

From 3d438870f34cb1bd5667bc5db2f848c4f82d5d25 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 14 Apr 2016 09:32:02 +0100
Subject: [PATCH 3/5] Updated based on feedback

---
 .../javascripts/importer_status.js.coffee     | 20 +++++++++----------
 app/views/import/base/create.js.haml          |  2 +-
 app/views/import/bitbucket/status.html.haml   |  6 +++---
 app/views/import/fogbugz/status.html.haml     |  4 ++--
 app/views/import/github/status.html.haml      |  4 ++--
 app/views/import/gitlab/status.html.haml      |  4 ++--
 app/views/import/gitorious/status.html.haml   |  4 ++--
 app/views/import/google_code/status.html.haml |  6 +++---
 8 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/importer_status.js.coffee b/app/assets/javascripts/importer_status.js.coffee
index c51c4a1a182..95f9f86c0ad 100644
--- a/app/assets/javascripts/importer_status.js.coffee
+++ b/app/assets/javascripts/importer_status.js.coffee
@@ -4,16 +4,16 @@ class @ImporterStatus
     this.setAutoUpdate()
 
   initStatusPage: ->
-    $(".js-add-to-import")
+    $('.js-add-to-import')
       .off 'click'
       .on 'click', (event) =>
         new_namespace = null
         $btn = $(event.currentTarget)
-        $tr = $btn.closest("tr")
-        id = $tr.attr("id").replace("repo_", "")
-        if $tr.find(".import-target input").length > 0
-          new_namespace = $tr.find(".import-target input").prop("value")
-          $tr.find(".import-target").empty().append(new_namespace + "/" + $tr.find(".import-target").data("project_name"))
+        $tr = $btn.closest('tr')
+        id = $tr.attr('id').replace('repo_', '')
+        if $tr.find('.import-target input').length > 0
+          new_namespace = $tr.find('.import-target input').prop('value')
+          $tr.find('.import-target').empty().append("#{new_namespace} / #{$tr.find('.import-target').data('project_name')}")
 
         $btn
           .disable()
@@ -21,15 +21,15 @@ class @ImporterStatus
 
         $.post @import_url, {repo_id: id, new_namespace: new_namespace}, dataType: 'script'
 
-    $(".js-import-all")
+    $('.js-import-all')
       .off 'click'
-      .on 'click', (event) =>
-        $btn = $(event.currentTarget)
+      .on 'click', (e) =>
+        $btn = $(e.currentTarget)
         $btn
           .disable()
           .addClass 'is-loading'
 
-        $(".js-add-to-import").each ->
+        $('.js-add-to-import').each ->
           $(this).click()
 
   setAutoUpdate: ->
diff --git a/app/views/import/base/create.js.haml b/app/views/import/base/create.js.haml
index ec7a2b86566..dfebf7768d9 100644
--- a/app/views/import/base/create.js.haml
+++ b/app/views/import/base/create.js.haml
@@ -26,4 +26,4 @@
 - else
   :plain
     job = $("tr#repo_#{@repo_id}")
-    job.find(".import-actions").html("<i class='fa fa-exclamation-circle'></i> Error saving project: #{escape_javascript(@project.errors.full_messages.join(','))}</i>")
+    job.find(".import-actions").html("<i class='fa fa-exclamation-circle'></i> Error saving project: #{escape_javascript(@project.errors.full_messages.join(','))}")
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index e24c01f3e0f..6e993e58f0d 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -12,11 +12,11 @@
   - if @incompatible_repos.any?
     = button_tag class: "btn btn-import btn-success js-import-all" do
       Import all compatible projects
-      = icon('spinner spin', class: 'loading-icon')
+      = icon("spinner spin", class: "loading-icon")
   - else
     = button_tag class: "btn btn-success js-import-all" do
       Import all projects
-      = icon('spinner spin', class: 'loading-icon')
+      = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
   %table.table.import-jobs
@@ -55,7 +55,7 @@
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
-              = icon('spinner spin', class: 'loading-icon')
+              = icon("spinner spin", class: "loading-icon")
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
           %td
diff --git a/app/views/import/fogbugz/status.html.haml b/app/views/import/fogbugz/status.html.haml
index d842d1cbd94..d3d3c595c17 100644
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@@ -15,7 +15,7 @@
   %p
   = button_tag class: 'btn btn-import btn-success js-import-all' do
     Import all projects
-    = icon('spinner spin', class: 'loading-icon')
+    = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
   %table.table.import-jobs
@@ -54,7 +54,7 @@
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
-              = icon('spinner spin', class: 'loading-icon')
+              = icon("spinner spin", class: "loading-icon")
 
 :javascript
   new ImporterStatus("#{jobs_import_fogbugz_path}", "#{import_fogbugz_path}");
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index d6fa0d8023b..9639da4cb58 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -10,7 +10,7 @@
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
     Import all projects
-    = icon('spinner spin', class: 'loading-icon')
+    = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
   %table.table.import-jobs
@@ -49,7 +49,7 @@
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
-              = icon('spinner spin', class: 'loading-icon')
+              = icon("spinner spin", class: "loading-icon")
 
 :javascript
   new ImporterStatus("#{jobs_import_github_path}", "#{import_github_path}");
diff --git a/app/views/import/gitlab/status.html.haml b/app/views/import/gitlab/status.html.haml
index 8f79f385610..e3a356b5379 100644
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@@ -10,7 +10,7 @@
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
     Import all projects
-    = icon('spinner spin', class: 'loading-icon')
+    = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
   %table.table.import-jobs
@@ -49,7 +49,7 @@
           %td.import-actions.job-status
             = button_tag class: "btn js-add-to-import" do
               Import
-              = icon('spinner spin', class: 'loading-icon')
+              = icon("spinner spin", class: "loading-icon")
 
 :javascript
   new ImporterStatus("#{jobs_import_gitlab_path}", "#{import_gitlab_path}");
diff --git a/app/views/import/gitorious/status.html.haml b/app/views/import/gitorious/status.html.haml
index f0256e0f934..267eee4f262 100644
--- a/app/views/import/gitorious/status.html.haml
+++ b/app/views/import/gitorious/status.html.haml
@@ -10,7 +10,7 @@
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
     Import all projects
-    = icon('spinner spin', class: 'loading-icon')
+    = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
   %table.table.import-jobs
@@ -49,7 +49,7 @@
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
-              = icon('spinner spin', class: 'loading-icon')
+              = icon("spinner spin", class: "loading-icon")
 
 :javascript
   new ImporterStatus("#{jobs_import_gitorious_path}", "#{import_gitorious_path}");
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index c4ac1b4f9b7..5ada6b174eb 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -16,11 +16,11 @@
   - if @incompatible_repos.any?
     = button_tag class: "btn btn-import btn-success js-import-all" do
       Import all compatible projects
-      = icon('spinner spin', class: 'loading-icon')
+      = icon("spinner spin", class: "loading-icon")
   - else
     = button_tag class: "btn btn-import btn-success js-import-all" do
       Import all projects
-      = icon('spinner spin', class: 'loading-icon')
+      = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
   %table.table.import-jobs
@@ -59,7 +59,7 @@
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
-              = icon('spinner spin', class: 'loading-icon')
+              = icon("spinner spin", class: "loading-icon")
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo.id}"}
           %td

From 65410e63ac8c2e4e25acabb73ede6a2dfdc3d829 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 14 Apr 2016 10:15:38 +0100
Subject: [PATCH 4/5] Variable name

---
 app/assets/javascripts/importer_status.js.coffee | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/importer_status.js.coffee b/app/assets/javascripts/importer_status.js.coffee
index 95f9f86c0ad..2eb151a641b 100644
--- a/app/assets/javascripts/importer_status.js.coffee
+++ b/app/assets/javascripts/importer_status.js.coffee
@@ -6,9 +6,9 @@ class @ImporterStatus
   initStatusPage: ->
     $('.js-add-to-import')
       .off 'click'
-      .on 'click', (event) =>
+      .on 'click', (e) =>
         new_namespace = null
-        $btn = $(event.currentTarget)
+        $btn = $(e.currentTarget)
         $tr = $btn.closest('tr')
         id = $tr.attr('id').replace('repo_', '')
         if $tr.find('.import-target input').length > 0

From fe3ac403b97eb8dbe45189ba3737537a536b8956 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 18 Apr 2016 13:45:26 +0100
Subject: [PATCH 5/5] Addressed feedback

---
 app/assets/javascripts/importer_status.js.coffee | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/importer_status.js.coffee b/app/assets/javascripts/importer_status.js.coffee
index 2eb151a641b..b0edc895649 100644
--- a/app/assets/javascripts/importer_status.js.coffee
+++ b/app/assets/javascripts/importer_status.js.coffee
@@ -23,14 +23,14 @@ class @ImporterStatus
 
     $('.js-import-all')
       .off 'click'
-      .on 'click', (e) =>
-        $btn = $(e.currentTarget)
+      .on 'click', (e) ->
+        $btn = $(@)
         $btn
           .disable()
           .addClass 'is-loading'
 
         $('.js-add-to-import').each ->
-          $(this).click()
+          $(this).trigger('click')
 
   setAutoUpdate: ->
     setInterval (=>