Migrate repository page to Boostrap

Design of the page has been changed:

- Show repositories in a nicer way, using the space more efficiently
- Integrated expert mode in the page.
- Integrate addition of additional paths the page.

TODO:

- Add DoD Repository
- Add from a distribution page
- Tests
- Order of repository path
- Improve Javascript
- Remove repository path

Co-authored-by: Ana María Martínez Gómez <ammartinez@suse.de>

src/api/app/assets/javascripts/webui2/autocomplete.js

@@ -60,3 +60,64 @@ function autocompleteSpinner(spinnerId, searching) {
     icon.next().addClass('d-none');
   }
 }
+
+function suggestRepositoryName(id, projectName, repositoryName){
+  $(id + ' #repo_name').val(projectName.replace(/:/g, '_') + '_' + repositoryName);
+}
+
+function autocompleteRepositories(id, projectName) {
+  var repositoriesId = (id + ' #target_repo');
+
+  $(repositoriesId).html('');
+  $(id + ' #repo_name').val('');
+  $(repositoriesId).prop('disabled', true);
+
+  if (projectName === '') return;
+
+  $.ajax({
+    url: $(repositoriesId).data('ajaxurl'),
+    data: { project: projectName },
+    success: function (data) {
+      if(data.length === 0) {
+        $(repositoriesId).append(new Option('No repositories found'));
+      } else {
+      $.each(data, function (idx, val) {
+        $(repositoriesId).append(new Option(val));
+      });
+
+      suggestRepositoryName(id, projectName, data[0]);
+
+      $(repositoriesId).prop('disabled', false);
+      }
+    }
+  });
+}
+
+function repositoriesSetupAutocomplete(id) { // jshint ignore:line
+  var inputId = (id + ' #target_project');
+  var icon = $(id + ' .project-search-icon i:first-child');
+
+  $(inputId).autocomplete({
+    appendTo: (id + ' .modal-body'),
+    source: $(inputId).data('ajaxurl'),
+    minLength: 2,
+    select: function(event, ui) {
+      autocompleteRepositories(id, ui.item.value);
+    },
+    change: function() {
+      autocompleteRepositories(id, $(inputId).val());
+    },
+    search: function() {
+      icon.addClass('d-none');
+      icon.next().removeClass('d-none');
+    },
+    response: function() {
+      icon.removeClass('d-none');
+      icon.next().addClass('d-none');
+    }
+  });
+
+  $(id + ' #target_repo').change(function () {
+    suggestRepositoryName(id, $(inputId).val(), $(this).val());
+  });
+}

src/api/app/controllers/webui/repositories_controller.rb

@@ -18,6 +18,15 @@ def index
     @user_can_set_flags = policy(@project).update?
 
     switch_to_webui2 if @package
+
+    # TODO: Remove the `return unless` and the flash once this should be available to all beta users on production
+    return unless User.current.try(:in_beta?) && Rails.env.development?
+
+    flash[:notice] = 'We are currently migrating the project pages to Bootstrap. This page is only seen on the development environment.'
+
+    @repositories = @project.repositories.includes(:path_elements, :download_repositories)
+
+    switch_to_webui2
   end
 
   # GET project/add_repository/:project

src/api/app/views/webui2/webui/repositories/_add_repository_from_project_modal.html.haml

@@ -0,0 +1,46 @@
+.modal.fade#add-repository-from-project{ tabindex: -1, role: 'dialog', aria: { labelledby: 'add_repo_from_project', hidden: 'true' } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      = form_tag(action: :create, project: project) do
+        .modal-header
+          %h5.modal-title Add Repository to #{project}
+        .modal-body
+          .form-group
+            = label_tag :project do
+              %strong Project:
+            .input-group
+              .input-group-prepend
+                %span.input-group-text.project-search-icon
+                  %i.fa.fa-search
+                  %i.fas.fa-spinner.fa-spin.d-none
+              = text_field_tag 'target_project', '', id: 'target_project',
+                                                     class: 'form-control',
+                                                     required: true,
+                                                     placeholder: 'Type to autocomplete...',
+                                                     data: { 'ajaxurl': url_for(controller: 'project', action: 'autocomplete_projects') }
+          .form-group
+            = label_tag :repositories do
+              %strong Repositories:
+            = select_tag 'target_repo', options_for_select(['']), id: 'target_repo',
+                                                                  required: true,
+                                                                  disabled: true,
+                                                                  class: 'custom-select',
+                                                                  data: { 'ajaxurl': url_for(controller: :project,
+                                                                                              action: :autocomplete_repositories) }
+          .form-group
+            = label_tag :name do
+              %strong Name:
+            = text_field_tag :repository, '', size: 60, disabled: false, required: true, class: 'form-control', id: 'repo_name'
+          .form-group
+            = label_tag :architectures, class: 'w-100' do
+              %strong Architectures:
+            - Architecture.available.each do |architecture|
+              .custom-control.custom-checkbox.custom-control-inline
+                = check_box_tag 'architectures[]', architecture.name, true, id: "architecture_#{architecture.name}", class: 'custom-control-input'
+                = label_tag :architecture, architecture.name, class: 'custom-control-label', for: "architecture_#{architecture.name}"
+
+        .modal-footer
+          = render partial: 'webui2/shared/dialog_action_buttons'
+
+= content_for :ready_function do
+  repositoriesSetupAutocomplete('#add-repository-from-project');

src/api/app/views/webui2/webui/repositories/_add_repository_path_modal.html.haml

@@ -0,0 +1,37 @@
+.modal.fade{ id: "add-repository-path-#{repository.id}", tabindex: -1, role: 'dialog', aria: { labelledby: 'add_repository_path', hidden: 'true' } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      = form_tag(action: :create, project: project) do
+        .modal-header
+          %h5.modal-title Add additional path to #{repository}
+        .modal-body
+          .form-group
+            = label_tag :project do
+              %strong Project:
+            .input-group
+              .input-group-prepend
+                %span.input-group-text.project-search-icon
+                  %i.fa.fa-search
+                  %i.fas.fa-spinner.fa-spin.d-none
+              = text_field_tag 'target_project', '', id: 'target_project',
+                                                     class: 'form-control',
+                                                     required: true,
+                                                     placeholder: 'Type to autocomplete...',
+                                                     data: { 'ajaxurl': url_for(controller: 'project', action: 'autocomplete_projects') }
+          .form-group
+            = label_tag :repositories do
+              %strong Repositories:
+            = select_tag 'target_repo', options_for_select(['']), id: 'target_repo',
+                                                                  required: true,
+                                                                  disabled: true,
+                                                                  class: 'custom-select',
+                                                                  data: { 'ajaxurl': url_for(controller: :project,
+                                                                                              action: :autocomplete_repositories) }
+          = hidden_field_tag :repository, repository
+
+        .modal-footer
+          = render partial: 'webui2/shared/dialog_action_buttons'
+
+= content_for :ready_function do
+  repositoriesSetupAutocomplete("#add-repository-path-#{repository.id}");
+

src/api/app/views/webui2/webui/repositories/_delete_repository_modal.html.haml

@@ -0,0 +1,13 @@
+.modal.fade{ id: "delete-repository-#{repository.id}", tabindex: -1, role: 'dialog', aria: { labelledby: 'delete-repository-label', hidden: true } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      .modal-header
+        %h5.modal-title
+          Delete repository?
+      .modal-body
+        %p Please confirm deletion of '#{repository}' repository
+        = form_tag(destroy_repository_path(project: project, target: repository.name), method: :post) do
+          .modal-footer
+            %a.btn.btn-sm.btn-outline-secondary.px-4{ data: { dismiss: 'modal' } }
+              Cancel
+            = submit_tag('Delete', class: 'btn btn-sm btn-danger px-4')

src/api/app/views/webui2/webui/repositories/_edit_repository_modal.html.haml

@@ -0,0 +1,21 @@
+.modal.fade{ id: "edit-repository-#{repository.id}", tabindex: -1, role: 'dialog', aria: { labelledby: "edit-#{repository.id}", hidden: 'true' } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      = form_tag({ action: :update }, id: "update_target_form-#{valid_xml_id(repository)}") do
+        .modal-header
+          %h5.modal-title{ id: "edit-#{repository.id}" } Edit #{repository}
+        .modal-body
+          .form-group
+            = label_tag :architectures, class: 'w-100' do
+              %strong Architectures:
+            - Architecture.available.each do |architecture|
+              .custom-control.custom-checkbox.custom-control-inline
+                = check_box_tag "arch[#{architecture}]", '', repository.architectures.include?(architecture),
+                                                             class: 'custom-control-input',
+                                                             id: "#{repository.id}-architecture-#{architecture}"
+                = label_tag :architecture, architecture, class: 'custom-control-label', for: "#{repository.id}-architecture-#{architecture}"
+            = hidden_field_tag :project, project
+            = hidden_field_tag :repo, repository
+
+        .modal-footer
+          = render partial: 'webui2/shared/dialog_action_buttons'

src/api/app/views/webui2/webui/repositories/_repository_card_content.html.haml

@@ -0,0 +1,43 @@
+.card-body
+  - if repository.path_elements.present?
+    Repository paths:
+    %ul.list-unstyled.ml-3
+      - repository.path_elements.each do |path|
+        %li
+          %small.font-weight-bold
+            - if path.link.project == 'deleted'
+              %i.fas.fa-exclamation-circle.text-warning
+              Target repository has been removed
+            - else
+              #{path.link.project}/#{path.link.name}
+.card-footer.text-center
+  .row
+    - if User.current.can_modify?(project) && !repository.is_dod_repository?
+      .col
+        = link_to('#', title: 'Edit Repository',
+                       data: { toggle: 'modal', target: "#edit-repository-#{repository.id}" }) do
+          %i.fas.fa-edit.text-secondary
+      .col
+        = link_to('#', title: 'Add Repository Path',
+                       data: { toggle: 'modal', target: "#add-repository-path-#{repository.id}" }) do
+          %i.fas.fa-plus-circle.text-primary
+    .col
+      - url = "#{download_url}/#{project.to_s.gsub(/:/, ':/')}/#{repository}"
+      = link_to(url, title: 'Download Repository') do
+        %i.fas.fa-download.text-secondary
+
+    - if User.current.can_modify?(project)
+      .col
+        = link_to('#', title: 'Delete Repository',
+                       data: { toggle: 'modal', target: "#delete-repository-#{repository.id}" }) do
+          %i.fas.fa-times-circle.text-danger
+    - elsif !User.current.is_nobody?
+      .col
+        = link_to('#', title: 'Request Delete Repository',
+                       data: { toggle: 'modal', target: "#request-delete-repository-#{repository.id}" }) do
+          %i.fas.fa-user-times.text-danger
+
+= render partial: 'edit_repository_modal', locals: { repository: repository, project: project }
+= render partial: 'add_repository_path_modal', locals: { repository: repository, project: project }
+= render partial: 'delete_repository_modal', locals: { repository: repository, project: project }
+= render partial: 'request_delete_repository_modal', locals: { repository: repository, project: project }

src/api/app/views/webui2/webui/repositories/_repository_entry.html.haml

@@ -0,0 +1,10 @@
+.col-12.col-md-6.col-lg-4
+  .card.mb-3
+    .card-header
+      = link_to(repository, project_repository_state_path(project: project, repository: repository.name), class: 'font-weight-bold')
+      .small
+        - if repository.architectures.size.zero?
+          No architecture selected
+        - else
+          #{repository.architectures.pluck(:name).join(', ')}
+    = render partial: 'repository_card_content', locals: { project: project, repository: repository, download_url: download_url }

src/api/app/views/webui2/webui/repositories/_request_delete_repository_modal.html.haml

@@ -0,0 +1,17 @@
+.modal.fade{ id: "request-delete-repository-#{repository.id}", tabindex: -1, role: 'dialog',
+             aria: { labelledby: 'request-delete-repository-label', hidden: true } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      .modal-header
+        %h5.modal-title
+          Do you really want to request the deletion of repository #{repository}
+      .modal-body
+        %p Please confirm deletion of '#{repository}' repository
+        = form_tag(project_remove_target_request_path(project: project, target: repository), method: :post) do
+          = hidden_field_tag :project, project
+          = hidden_field_tag :repository, repository
+          .form-group
+            = label_tag :description
+            = text_area_tag :description, '', row: 3, class: 'form-control'
+          .modal-footer
+            = render partial: 'webui2/shared/dialog_action_buttons'

src/api/app/views/webui2/webui/repositories/index.html.haml

@@ -1,5 +1,5 @@
-.card.mb-3
-  - if @package
+- if @package
+  .card.mb-3
     - @pagetitle = "Repositories for #{@package}"
     = render partial: 'webui/package/tabs', locals: { project: @project, package: @package }
     .card-body
@@ -16,27 +16,48 @@
           This package is inherited from the project
           = link_to @package.project, action: :index, controller: :repositories, project: @package.project
           and changing repository flags has no effect.
-  - else
+- else
+  .card.mb-3
     - @pagetitle = "Repositories for #{@project}"
     = render partial: 'webui/project/tabs', locals: { project: @project }
     .card-body
-      %h3= @pagetitle
-      %p
-        You can configure individual flags for this project here.
+      %h3.pb-2= @pagetitle
 
-      #repository-list
-        - @project.repositories.includes(:path_elements, :download_repositories).each do |repository|
-          = render partial: 'repository_entry', locals: { repository: repository }
+      %ul.list-inline.mb-0
+        - if User.current.can_modify?(@project)
+          %li.list-inline-item
+            = link_to(repositories_distributions_path(project: @project), class: 'nav-link') do
+              %i.fas.fa-plus-circle.text-success
+              Add from a Distribution
 
-      - if User.current.is_admin?
-        .hidden.add-dod-repository-form
-          = render partial: 'dod_repository_form', locals: { project: @project, download_on_demand: DownloadRepository.new }
-        %p
-          = link_to(sprite_tag('drive_add', title: 'Add DoD repository') + ' Add DoD repository', '#', id: 'add-dod-repository-link')
-      - if User.current.can_modify?(@project)
-        %p
-          = link_to(sprite_tag('drive_add', title: 'Add repository') + ' Add repositories', action: :distributions, project: @project)
+          %li.list-inline-item
+            = link_to('#', data: { toggle: 'modal', target: '#add-repository-from-project' }, class: 'nav-link') do
+              %i.fas.fa-plus-circle.text-success
+              Add from a Project
+            = render partial: 'add_repository_from_project_modal', locals: { project: @project }
+
+        - if User.current.is_admin?
+          %li.list-inline-item
+            = link_to('#', data: { toggle: 'modal', target: '#add-dod-repository-modal' }, class: 'nav-link') do
+              %i.fas.fa-plus-circle.text-success
+              Add DoD Repository
+            =# render partial: 'add_dod_repository_modal', locals: { project: @project }
 
+  .card.mb-3
+    .card-header.d-flex.justify-content-between
+      %h5 My Repositories
+
+    .card-body
+      .row.pt-2
+        - @repositories.each do |repository|
+          = render partial: 'repository_entry', locals: { repository: repository, project: @project, download_url: @configuration['download_url'] }
+
+  .card.mb-3
+    .card-header.d-flex.justify-content-between
+      %h5 Repositories Flags
+    .card-body
+      %p
+        You can configure individual flags for this project here.
       = render partial: 'shared/repositories',
                locals: { project: @project, package: @package, build: @build, publish: @publish, debuginfo: @debuginfo,
                          useforbuild: @useforbuild, architectures: @architectures, user_can_set_flags: @user_can_set_flags }

src/api/config/routes.rb

@@ -174,6 +174,7 @@ def self.public_or_about_path?(request)
       get 'patchinfo/new_tracker' => :new_tracker
       get 'patchinfo/delete_dialog' => :delete_dialog
     end
+
     controller 'webui/repositories' do
       get 'repositories/:project(/:package)' => :index, constraints: cons, as: 'repositories', defaults: { format: 'html' }
       get 'project/repositories/:project' => :index, constraints: cons, as: 'project_repositories'
@@ -182,7 +183,7 @@ def self.public_or_about_path?(request)
       post 'project/save_repository' => :create
       post 'project/update_target/:project' => :update, constraints: cons
       get 'project/repository_state/:project/:repository' => :state, constraints: cons, as: 'project_repository_state'
-      post 'project/remove_target' => :destroy
+      post 'project/remove_target' => :destroy, as: 'destroy_repository'
       post 'project/create_dod_repository' => :create_dod_repository
       post 'project/create_image_repository' => :create_image_repository
 
@@ -271,7 +272,7 @@ def self.public_or_about_path?(request)
       get 'project/requests/:project' => :requests, constraints: cons, as: 'project_requests'
       post 'project/save_path_element' => :save_path_element
       get 'project/remove_target_request_dialog' => :remove_target_request_dialog
-      post 'project/remove_target_request' => :remove_target_request
+      post 'project/remove_target_request' => :remove_target_request, as: 'project_remove_target_request'
       post 'project/remove_path_from_target' => :remove_path_from_target
       post 'project/release_repository/:project/:repository' => :release_repository, constraints: cons
       get 'project/release_repository_dialog/:project/:repository' => :release_repository_dialog, constraints: cons