From af989df0ec0c15f269071080ab08417e688dabf7 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lbennett@gitlab.com>
Date: Wed, 7 Nov 2018 16:44:21 +0000
Subject: Improve the GitHub and Gitea import feature table interface

These are frontend changes.
Use Vue for the import feature UI for "githubish"
providers (GitHub and Gitea).
Add "Go to project" button after a successful import.
Use CI-style status icons and improve spacing of the
table and its component.
Adds ETag polling to the github and gitea import
jobs endpoint.
---
 app/views/import/_githubish_status.html.haml | 59 +++-------------------------
 app/views/import/github/new.html.haml        |  2 +-
 app/views/import/github/status.html.haml     |  4 +-
 app/views/import/manifest/status.html.haml   |  2 +-
 4 files changed, 10 insertions(+), 57 deletions(-)

(limited to 'app/views')

diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
index f4a29ed18dc..b05c039c85c 100644
--- a/app/views/import/_githubish_status.html.haml
+++ b/app/views/import/_githubish_status.html.haml
@@ -1,56 +1,9 @@
 - provider = local_assigns.fetch(:provider)
 - provider_title = Gitlab::ImportSources.title(provider)
 
-%p.light
-  = import_githubish_choose_repository_message
-%hr
-%p
-  = button_tag class: "btn btn-import btn-success js-import-all" do
-    = import_all_githubish_repositories_button_label
-    = icon("spinner spin", class: "loading-icon")
-
-.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 %{provider_title}') % { provider_title: provider_title }
-        %th= _('To GitLab')
-        %th= _('Status')
-    %tbody
-      - @already_added_projects.each do |project|
-        %tr{ id: "project_#{project.id}", class: project_status_css_class(project.import_status) }
-          %td
-            = provider_project_link(provider, project.import_source)
-          %td
-            = link_to project.full_path, [project.namespace.becomes(Namespace), project]
-          %td.job-status
-            = render 'import/project_status', project: project
-
-      - @repos.each do |repo|
-        %tr{ id: "repo_#{repo.id}", data: { qa: { repo_path: repo.full_name } } }
-          %td
-            = provider_project_link(provider, repo.full_name)
-          %td.import-target
-            %fieldset.row
-            .input-group
-              .project-path.input-group-prepend
-                - if current_user.can_select_namespace?
-                  - selected = params[:namespace_id] || :current_user
-                  - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
-                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'input-group-text select2 js-select-namespace qa-project-namespace-select', tabindex: 1 }
-                - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-group-text input-large form-control", tabindex: 1, disabled: true
-              %span.input-group-prepend
-                .input-group-text /
-              = text_field_tag :path, sanitize_project_name(repo.name), class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
-          %td.import-actions.job-status
-            = button_tag class: "btn btn-import js-add-to-import" do
-              = has_ci_cd_only_params? ? _('Connect') : _('Import')
-              = icon("spinner spin", class: "loading-icon")
-
-.js-importer-status{ data: { jobs_import_path: url_for([:jobs, :import, provider]),
-                             import_path: url_for([:import, provider]),
-                             ci_cd_only: has_ci_cd_only_params?.to_s } }
+#import-projects-mount-element{ data: { provider: provider, provider_title: provider_title,
+                               can_select_namespace: current_user.can_select_namespace?.to_s,
+                               ci_cd_only: has_ci_cd_only_params?.to_s,
+                               repos_path: url_for([:status, :import, provider, format: :json]),
+                               jobs_path: url_for([:realtime_changes, :import, provider, format: :json]),
+                               import_path: url_for([:import, provider, format: :json]) } }
diff --git a/app/views/import/github/new.html.haml b/app/views/import/github/new.html.haml
index 6ff25f2c842..cf32c5c9387 100644
--- a/app/views/import/github/new.html.haml
+++ b/app/views/import/github/new.html.haml
@@ -4,7 +4,7 @@
 - header_title _("Projects"), root_path
 
 %h3.page-title
-  = icon 'github', text: import_github_title
+  = icon 'github', text: _('Import repositories from GitHub')
 
 - if github_import_configured?
   %p
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index be057be6d1a..ee295e70cce 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -2,7 +2,7 @@
 - page_title title
 - breadcrumb_title title
 - header_title _("Projects"), root_path
-%h3.page-title
-  = icon 'github', text: import_github_title
+%h3.page-title.mb-0
+  = icon 'github', class: 'fa-2x', text: _('Import repositories from GitHub')
 
 = render 'import/githubish_status', provider: 'github'
diff --git a/app/views/import/manifest/status.html.haml b/app/views/import/manifest/status.html.haml
index 5b2e1005398..3d4abc32b88 100644
--- a/app/views/import/manifest/status.html.haml
+++ b/app/views/import/manifest/status.html.haml
@@ -7,7 +7,7 @@
 
 %p
   = button_tag class: "btn btn-import btn-success js-import-all" do
-    = import_all_githubish_repositories_button_label
+    = _('Import all repositories')
     = icon("spinner spin", class: "loading-icon")
 
 .table-responsive
-- 
cgit v1.2.3