Merge pull request #6471 from Ana06/repositories_bootstrap

Migrate repository page to Boostrap

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/assets/stylesheets/webui2/repositories.scss

@@ -2,3 +2,12 @@
     background-color: rgba($success, 0.2);
 }
 
+details.repository-path .less{
+  display: none;
+}
+
+details[open].repository-path {
+  .less{ display: inline; }
+  .more{ display: none; }
+}
+

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/_delete_repository_path_modal.html.haml

@@ -0,0 +1,13 @@
+.modal.fade{ id: "delete-path-#{path.id}", tabindex: -1, role: 'dialog', aria: { labelledby: 'delete-repository-path-label', hidden: true } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      .modal-header
+        %h5.modal-title
+          Delete repository path?
+      .modal-body
+        %p Please confirm deletion of '#{path.link.project}/#{path.link.name}' repository path from #{repository}
+        = form_tag(remove_repository_path_path(project: project, repository: repository, path: path), 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,49 @@
+- number_paths = 3
+.card-body
+  - if repository.path_elements.present?
+    Repository paths:
+    %ul.list-unstyled.ml-3
+      - repository.path_elements.each_with_index do |path, index|
+        - if index < number_paths
+          = render partial: 'repository_path_item', locals: { project: project, repository: repository, path: path }
+        - else
+          - content_for :repository_path_item do
+            = render partial: 'repository_path_item', locals: { project: project, repository: repository, path: path }
+      - if repository.path_elements.size > number_paths
+        %details.repository-path
+          %summary.small
+            %span.more More
+            %span.less Less
+          = yield :repository_path_item
+
+.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.repository-card
+    .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/_repository_path_item.html.haml

@@ -0,0 +1,21 @@
+%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}
+      - if repository.path_elements.size > 1
+        - unless path == repository.path_elements.first
+          = link_to(move_repository_path_path(project: project, repository: repository, path: path, direction: 'up'), method: :post,
+                    title: 'Move Up the Repository Path') do
+            %i.fas.fa-arrow-alt-circle-up.fa-lg.text-info
+        - unless path == repository.path_elements.last
+          = link_to(move_repository_path_path(project: project, repository: repository, path: path, direction: 'down'), method: :post,
+                    title: 'Move Down the Repository Path') do
+            %i.fas.fa-arrow-alt-circle-down.fa-lg.text-info
+      = link_to('#', title: "Delete '#{path.link.project}/#{path.link.name}' repository path",
+                 data: { toggle: 'modal', target: "#delete-path-#{path.id}" }) do
+        %i.fas.fa-times-circle.fa-lg.text-danger
+
+= render partial: 'delete_repository_path_modal', locals: { repository: repository, project: project, path: path }

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'