Merge branch 'import-feedback' into 'master'

Added loading icon to import buttons See #14488 for more details See merge request !3662
2016-04-18 13:30:16 +00:00 · 2016-04-18 13:30:16 +00:00 · 2c8c898318
parent d337d27e1c fe3ac403b9
commit 2c8c898318
9 changed files with 121 additions and 40 deletions
--- 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', (e) =>
+        new_namespace = null
+        $btn = $(e.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', (e) ->
+        $btn = $(@)
+        $btn
+          .disable()
+          .addClass 'is-loading'
+
+        $('.js-add-to-import').each ->
+          $(this).trigger('click')

  setAutoUpdate: ->
    setInterval (=>
--- 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;
+    }
+  }
+}
--- 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(','))}")
--- 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
+      Import all compatible projects
+      = icon("spinner spin", class: "loading-icon")
  - else
-    = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-success js-import-all" do
+      Import all projects
+      = icon("spinner spin", class: "loading-icon")

-
-.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
+              Import
+              = icon("spinner spin", class: "loading-icon")
      - @incompatible_repos.each do |repo|
        %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
          %td
--- 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
+    Import all projects
+    = icon("spinner spin", class: "loading-icon")

-.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
+              Import
+              = icon("spinner spin", class: "loading-icon")

 :javascript
  new ImporterStatus("#{jobs_import_fogbugz_path}", "#{import_fogbugz_path}");
--- 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
+    Import all projects
+    = icon("spinner spin", class: "loading-icon")

-.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
+              Import
+              = icon("spinner spin", class: "loading-icon")

 :javascript
  new ImporterStatus("#{jobs_import_github_path}", "#{import_github_path}");
--- 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
+    Import all projects
+    = icon("spinner spin", class: "loading-icon")

-.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
+              Import
+              = icon("spinner spin", class: "loading-icon")

 :javascript
  new ImporterStatus("#{jobs_import_gitlab_path}", "#{import_gitlab_path}");
--- 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
+    Import all projects
+    = icon("spinner spin", class: "loading-icon")

-.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
+              Import
+              = icon("spinner spin", class: "loading-icon")

 :javascript
  new ImporterStatus("#{jobs_import_gitorious_path}", "#{import_gitorious_path}");
--- 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
+      Import all compatible projects
+      = icon("spinner spin", class: "loading-icon")
  - 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
+      Import all projects
+      = icon("spinner spin", class: "loading-icon")

-.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
+              Import
+              = icon("spinner spin", class: "loading-icon")
      - @incompatible_repos.each do |repo|
        %tr{id: "repo_#{repo.id}"}
          %td