Migrate search owners to Bootstrap

src/api/app/assets/stylesheets/webui2/borders.scss

@@ -1,3 +1,7 @@
 .border-dotted {
   border-style: dotted !important;
 }
+
+.border-2 {
+  border-width: 2px !important;
+}

src/api/app/assets/stylesheets/webui2/search.scss

@@ -0,0 +1,5 @@
+#search-results {
+  .search-result {
+    min-width: 22rem;
+  }
+}

src/api/app/assets/stylesheets/webui2/webui2.css.scss

@@ -56,6 +56,7 @@
 @import 'groups';
 @import 'patchinfo';
 @import 'image_templates';
+@import 'search';
 
 html {
     overflow-y: scroll !important;

src/api/app/views/webui2/webui/search/_request_bugowner_change_dialog.html.haml

@@ -0,0 +1,39 @@
+.modal.fade#request-bugowner-change-modal{ tabindex: -1, role: 'dialog', aria: { labelledby: 'request-bugowner-change-modal-label', hidden: true } }
+  .modal-dialog.modal-dialog-centered{ role: 'document' }
+    .modal-content
+      = form_tag(request_set_bugowner_request_path, method: :post) do
+        .modal-header
+          %h5.modal-title#request-bugowner-change-modal-label Submit Request to Change Bugowner
+        .modal-body
+          %p.font-italic
+            A user or a group is required.
+          .form-group
+            = render partial: 'webui/autocomplete', locals: { html_id: 'user', label: 'User:', required: false,
+                                                              data: { source: autocomplete_users_path } }
+          .form-group
+            = render partial: 'webui/autocomplete', locals: { html_id: 'group', label: 'Group:', required: false,
+                                                              data: { source: autocomplete_groups_path } }
+          .form-group
+            For:
+            - projects_and_packages.each do |project_and_package|
+              :ruby
+                project = project_and_package[:project]
+                package = project_and_package[:package]
+                tag = "#{project}/#{package}"
+
+              - if projects_and_packages.length > 1
+                .custom-control.custom-checkbox
+                  = check_box_tag('project[]', tag, false, class: 'custom-control-input')
+                  = label_tag(project, tag, class: 'custom-control-label')
+              - else
+                .custom-control.custom-checkbox
+                  = check_box_tag('project', project, true, class: 'custom-control-input')
+                  = label_tag(project, tag, class: 'custom-control-label')
+                = hidden_field_tag('package', package)
+          .form-group
+            = label_tag(:description, 'Description:')
+            %abbr.text-danger{ title: 'required' } *
+            ~ text_area_tag(:description, nil, size: '40x3', class: 'form-control', required: true)
+
+        .modal-footer
+          = render partial: 'webui2/shared/dialog_action_buttons', locals: { submit_tag_text: 'Submit' }

src/api/app/views/webui2/webui/search/_results_owner.html.haml

@@ -0,0 +1,38 @@
+.mt-4#search-results
+  %h4 Results:
+  - results.each do |result|
+    .search_result.mt-3
+      %h6
+        Responsible for
+        #{project_or_package_link project: result.project, package: result.package, short: false}
+        in #{result.rootproject}
+
+      %ul.list-unstyled
+        - users_and_groups = result.users.merge(result.groups) { |_role, user, group| user.concat(group) }
+        - users_and_groups.each do |role, records|
+          %li.mt-3
+            :ruby
+              emails = records.map(&:email).reject(&:blank?).join(', ')
+            = role.capitalize.pluralize
+            - if emails.present? && User.session
+              = mail_to(emails) do
+                %i.far.fa-envelope.ml-1{ title: "Send email to #{role.pluralize(records.size)}" }
+            .d-flex.flex-wrap.flex-column.flex-md-row
+              - records.each do |record|
+                .card.m-1.p-2.search-result
+                  .row.no-gutters
+                    .col-auto
+                      = link_to(user_or_group_show_path(record)) do
+                        = image_tag_for(record, size: 60, custom_class: 'align-self-center shadow-lg border border-secondary rounded border-2')
+                    .col
+                      .card-body.p-0.pl-2
+                        %ul.list-unstyled
+                          %li{ title: record.name }
+                            = truncate(record.name, length: 40)
+                          - if record.is_a?(User) && record.realname.present?
+                            %li.small
+                              = record.login
+                          %li.float-right
+                            - if record.email.present? && User.session
+                              = mail_to(record.email) do
+                                %i.far.fa-envelope{ title: "Send email to #{record.class.name.downcase}" }

src/api/app/views/webui2/webui/search/owner.html.haml

@@ -4,3 +4,47 @@
   = render partial: 'tabs'
   .card-body
     %h3 Search for people responsible for package:
+    .d-flex.justify-content-center
+      = form_tag(search_owner_path, method: :get, class: 'my-3 w-75') do
+        %input{ name: 'owner', type: 'hidden', value: '1' }
+        .form-group.d-flex
+          = text_field_tag('search_text', params[:search_text], placeholder: 'Search', autofocus: true, required: true, class: 'form-control')
+          %button.btn.btn-primary.ml-1{ type: 'submit', title: 'Search' }
+            %i.fa.fa-search
+        .form-row
+          .d-flex.flex-wrap.flex-column.flex-sm-row
+            .form-group.form-inline
+              .custom-control.custom-switch.ml-1.mr-4
+                = hidden_field_tag('devel', 'off', id: 'nodevel')
+                = check_box_tag('devel', 'on', @owner_devel.nil? || @owner_devel == '1', id: 'devel', class: 'custom-control-input')
+                %label.custom-control-label{ for: 'devel' } Follow Devel Projects
+
+            .form-group.form-inline
+              - limit_options = options_for_select([['Newest', '1'], ['Oldest', '-1'], ['All', '0']], @owner_limit)
+              = select_tag('limit', limit_options, class: 'custom-select border-0 pl-0 w-auto')
+              %label#limit-label{ for: 'limit' }
+                = 'package'.pluralize(@owner_limit.to_i.abs)
+    -# TODO: Ajaxify this section, so whenever changing the filters above, it fetches and refreshes the results
+    - if @results.present?
+      = render partial: 'results_owner', locals: { results: @results }
+
+      -# FIXME: This is also broken in Bento: https://github.com/openSUSE/open-build-service/issues/7616
+      - if User.session
+        %ul.nav
+          %li.nav-item
+            = link_to('#', class: 'nav-link', data: { toggle: 'modal', target: '#request-bugowner-change-modal' }) do
+              %i.fas.fa-exchange-alt.text-primary
+              Request bugowner change
+        - projects_and_packages = @results.map { |result| { project: result.project, package: result.package } }
+        = render partial: 'request_bugowner_change_dialog', locals: { projects_and_packages: projects_and_packages }
+
+= content_for(:ready_function) do
+  :plain
+    $('#limit').change(function() {
+      if ($(this).val() === '0') {
+        $('#limit-label').text('packages');
+      }
+      else {
+        $('#limit-label').text('package');
+      }
+    });