Merge pull request #12492 from saraycp/watchlist_more_request_info_to…

…oltip

Add collapsible tooltips to display more info about requests in watchlist

src/api/app/assets/javascripts/webui/application.js

@@ -55,3 +55,4 @@
 //= require webui/navigation.js
 //= require webui/user_profile.js
 //= require webui/long_text.js
+//= require webui/new_watchlist/collapsible_tooltip.js

src/api/app/assets/javascripts/webui/new_watchlist/collapsible_tooltip.js

@@ -0,0 +1,15 @@
+function toggleTooltip() { // jshint ignore:line
+  $('.toggle-tooltip').on('click', function(){
+    var replaceTitle = $(this).attr('title') === 'Click to keep it open' ? 'Click to close it' : 'Click to keep it open';
+    var infoContainer = $(this).parents('.toggle-tooltip-parent').next();
+    $(infoContainer).toggleClass('collapsed');
+    $(infoContainer).removeClass('hover');
+    $(this).attr('title', replaceTitle);
+  });
+  $('.toggle-tooltip').on('mouseover', function(){
+    $(this).parents('.toggle-tooltip-parent').next().addClass('hover');
+  });
+  $('.toggle-tooltip').on('mouseout', function(){
+    $(this).parents('.toggle-tooltip-parent').next().removeClass('hover');
+  });
+}

src/api/app/assets/stylesheets/webui/new_watchlist/watchlist.scss

@@ -1,4 +1,67 @@
-.color-inverted {
-  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
-  filter: invert(100%);
+body.new-watchlist {
+  .color-inverted {
+    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
+    filter: invert(100%);
+  }
+
+  // TODO: the following rules are mostly duplicated from build-results.scss.
+  // Please try to unify both when new_watchlist feature is rolled out.
+
+  .toggle-tooltip { cursor: pointer; }
+  .toggle-tooltip-parent { z-index: 2; }
+
+  .extended-info {
+    @extend .d-flex;
+    @extend .flex-column;
+    position: relative;
+    background-color: lighten($dark, 10%);
+    max-height: 100vh;
+    transition: max-height .3s 0s ease-in-out, margin-bottom .1s .1s linear;
+
+    .triangle {
+      position: absolute;
+      width: 0;
+      height: 0;
+      top: -.5rem;
+      border-left: .5rem solid transparent;
+      border-right: .5rem solid transparent;
+      border-bottom: .5rem solid lighten($dark, 10%);
+      transition: top .3s .1s ease-in-out, opacity 0.1s .2s ease-in-out;
+
+      &.left { left: .5rem; }
+    }
+
+    .extended-info-content {
+      overflow-y: hidden;
+    }
+
+    &.collapsed {
+      max-height: 0;
+      @extend .mb-0;
+
+      .triangle {
+        top: 0;
+        opacity: 0;
+      }
+    }
+
+    &.hover {
+      max-height: 100vh;
+
+      .triangle {
+        top: -.5rem;
+        opacity: 1;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .main-info .triangle.left { left: .25rem; }
+  }
+
+  @include media-breakpoint-between(sm, md) {
+    .extended-info .triangle {
+      &.left { left: .5rem; }
+    }
+  }
 }

src/api/app/components/bs_request_action_source_and_target_component.rb

@@ -0,0 +1,37 @@
+class BsRequestActionSourceAndTargetComponent < ApplicationComponent
+  attr_reader :bs_request_action, :number_of_bs_request_actions
+
+  def initialize(bs_request)
+    super
+
+    @bs_request = bs_request
+    @bs_request_action = @bs_request.bs_request_actions.first
+    @number_of_bs_request_actions = @bs_request.bs_request_actions.size
+  end
+
+  def call
+    capture do
+      if source.present?
+        concat(tag.span(source))
+        concat(tag.i(nil, class: 'fas fa-long-arrow-alt-right text-info mx-2'))
+      end
+      concat(tag.span(target))
+    end
+  end
+
+  private
+
+  def source
+    @source ||= if number_of_bs_request_actions > 1
+                  ''
+                else
+                  [bs_request_action.source_project, bs_request_action.source_package].compact.join(' / ')
+                end
+  end
+
+  def target
+    return bs_request_action.target_project if number_of_bs_request_actions > 1
+
+    [bs_request_action.target_project, bs_request_action.target_package].compact.join(' / ')
+  end
+end

src/api/app/components/bs_request_state_badge_component.rb

@@ -0,0 +1,13 @@
+class BsRequestStateBadgeComponent < ApplicationComponent
+  def initialize(bs_request:, css_class: nil)
+    super
+
+    @bs_request = bs_request
+    @css_class = css_class
+  end
+
+  def call
+    tag.span(@bs_request.state,
+             class: ['badge', "badge-#{helpers.request_badge_color(@bs_request.state)}", @css_class])
+  end
+end

src/api/app/components/notification_action_description_component.rb

@@ -9,7 +9,7 @@ def call
     tag.div(class: ['smart-overflow']) do
       case @notification.event_type
       when 'Event::RequestStatechange', 'Event::RequestCreate', 'Event::ReviewWanted', 'Event::CommentForRequest'
-        source_and_target
+        BsRequestActionSourceAndTargetComponent.new(bs_request).call
       when 'Event::CommentForProject'
         "#{@notification.notifiable.commentable.name}"
       when 'Event::CommentForPackage'
@@ -21,39 +21,7 @@ def call
 
   private
 
-  def source_and_target
-    capture do
-      if source.present?
-        concat(tag.span(source))
-        concat(tag.i(nil, class: 'fas fa-long-arrow-alt-right text-info mx-2'))
-      end
-      concat(tag.span(target))
-    end
-  end
-
-  def source
-    @source ||= if number_of_bs_request_actions > 1
-                  ''
-                else
-                  [bs_request_action.source_project, bs_request_action.source_package].compact.join(' / ')
-                end
-  end
-
-  def target
-    return bs_request_action.target_project if number_of_bs_request_actions > 1
-
-    [bs_request_action.target_project, bs_request_action.target_package].compact.join(' / ')
-  end
-
   def bs_request
     @bs_request ||= @notification.notifiable_type == 'BsRequest' ? @notification.notifiable : @notification.notifiable.commentable
   end
-
-  def bs_request_action
-    @bs_request_action ||= bs_request.bs_request_actions.first
-  end
-
-  def number_of_bs_request_actions
-    @number_of_bs_request_actions ||= bs_request.bs_request_actions.size
-  end
 end

src/api/app/components/notification_component.html.haml

@@ -12,8 +12,7 @@
             = image_tag('icons/request-icon.svg', height: 18, title: 'Request notification')
             = render NotificationNotifiableLinkComponent.new(@notification)
             %small.text-nowrap #{time_ago_in_words(@notification.created_at)} ago
-            %span.badge.ml-1{ class: "badge badge-#{helpers.request_badge_color(@notification.notifiable.state)}" }
-              = @notification.notifiable.state
+            = render BsRequestStateBadgeComponent.new(bs_request: @notification.notifiable, css_class: 'ml-1')
           - else
             %i.fas.fa-comments{ title: 'Comment notification' }
             = render NotificationNotifiableLinkComponent.new(@notification)

src/api/app/components/watched_items_list_component.html.haml

@@ -11,8 +11,15 @@
           %i.fas.fa-cubes.mr-1
           #{item}
       - when 'BsRequest'
-        = link_to(request_show_path(item.number), class: 'text-word-break-all') do
-          = image_tag('icons/request-icon.svg', height: 18, class: 'mr-1 color-inverted')
-          = "##{item.number} #{helpers.request_type_of_action(item)}"
+        .d-flex.flex-row.flex-wrap.align-items-baseline.toggle-tooltip-parent
+          = link_to(request_show_path(item.number), class: 'text-word-break-all') do
+            = image_tag('icons/request-icon.svg', height: 18, class: 'mr-1 color-inverted')
+            = "##{item.number} #{helpers.request_type_of_action(item)}"
+          %i.fa.fa-question-circle.text-light.px-2.toggle-tooltip{ title: 'Click to keep it open' }
+        .extended-info.mt-2.mb-3.collapsed
+          .triangle.left
+          .extended-info-content
+            = render BsRequestStateBadgeComponent.new(bs_request: item, css_class: 'mt-2 ml-2')
+            %p.px-2.pt-2= render(BsRequestActionSourceAndTargetComponent.new(item))
 - else
   %p.text-muted= empty_list_text

src/api/app/helpers/webui/request_helper.rb

@@ -170,7 +170,7 @@ def list_maintainers(maintainers)
 
   # Returns strings like "Add Role", "Submit", etc.
   def request_type_of_action(bs_request)
-    return 'Multiple Actions\'' if bs_request.bs_request_actions.size > 1
+    return 'Multiple Actions' if bs_request.bs_request_actions.size > 1
 
     bs_request.bs_request_actions.first.type.titleize
   end

src/api/app/helpers/webui/webui_helper.rb

@@ -291,6 +291,7 @@ def feature_enabled?(feature)
   def feature_css_class
     css_classes = []
     css_classes << 'notifications-redesign' if feature_enabled?(:notifications_redesign)
+    css_classes << 'new-watchlist' if feature_enabled?(:new_watchlist)
     css_classes.join(' ')
   end
 

src/api/app/views/webui/package/_buildstatus.html.haml

@@ -63,4 +63,5 @@
       %strong excluded/disabled
 
 :javascript
+  // TODO: call toggleTooltip() as soon as the new_watchlist fature is rolled out. Changing the classes in the view is also needed.
   toggleBuildInfo();

src/api/spec/components/notification_notifiable_link_component_spec.rb

@@ -13,7 +13,7 @@
     end
 
     it 'renders a link to the BsRequest with a generic text and its number' do
-      expect(rendered_component).to have_link("Multiple Actions' Request #456345", href: "/request/show/456345?notification_id=#{notification.id}")
+      expect(rendered_component).to have_link('Multiple Actions Request #456345', href: "/request/show/456345?notification_id=#{notification.id}")
     end
   end