Merge pull request #13710 from dmarcoux/summary-of-reviews

Show reviews summary to help users take a decision on a request

src/api/app/assets/stylesheets/webui/accordion-reviews-component.scss

@@ -0,0 +1,35 @@
+#accordion-reviews-component {
+  // Remove the default rounded borders for the last accordion item to nicely fit on top of the next `.form-control` element
+  .accordion-item:last-of-type {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom: 0;
+
+    .accordion-button.collapsed {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  // Remove the default rounded borders for the `.form-control` element next to the last accordion item
+  // See https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
+  & ~ .request-decision form .form-control {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  // Replicate the borders styling of the next `.form-control` element
+  --bs-accordion-border-color: #{$input-border-color};
+  --bs-accordion-border-width: #{$input-border-width};
+
+  // Import the CSS variables from `.alert-*` classes to later use them in rules
+  // See https://getbootstrap.com/docs/5.2/components/alerts/#variables
+  #heading-accepted-reviews .accordion-button { @extend .alert-success; }
+  #heading-pending-reviews .accordion-button { @extend .alert-warning; }
+  #heading-declined-reviews .accordion-button { @extend .alert-danger; }
+
+  .accordion-button {
+    // Using the CSS variables from `.alert-*` classes
+    color: var(--bs-alert-color);
+    background-color: var(--bs-alert-bg);
+  }
+}

src/api/app/assets/stylesheets/webui/application.scss

@@ -72,6 +72,7 @@
 @import 'timeline';
 @import 'request_show_redesign/add_review';
 @import 'request_show_redesign/build_results';
+@import 'accordion-reviews-component';
 
 html {
     overflow-y: scroll !important;

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

@@ -0,0 +1,36 @@
+.accordion#accordion-reviews-component
+  - if @declined_reviews_count.positive?
+    .accordion-item
+      %h2.accordion-header#heading-declined-reviews
+        = button_tag(class: 'accordion-button',
+                     data: { 'bs-toggle': 'collapse', 'bs-target': '#collapse-declined-reviews' },
+                     aria: { expanded: 'true', controls: 'collapse-declined-reviews' }) do
+          %i.fas.fa-fw.fa-sm.fa-times.text-danger.align-middle.pe-4
+          = pluralize(@declined_reviews_count, 'Declined Review')
+      .accordion-collapse.collapse.show#collapse-declined-reviews{ 'aria-labelledby': 'heading-declined-reviews' }
+        .accordion-body
+          = render partial: 'webui/request/beta_show_tabs/review_summary', collection: @declined_reviews, as: :review
+
+  - if @pending_reviews_count.positive?
+    .accordion-item
+      %h2.accordion-header#heading-pending-reviews
+        = button_tag(class: 'accordion-button',
+                     data: { 'bs-toggle': 'collapse', 'bs-target': '#collapse-pending-reviews' },
+                     aria: { expanded: 'true', controls: 'collapse-pending-reviews' }) do
+          %i.fas.fa-fw.fa-2xs.fa-circle.text-warning.align-middle.pe-4
+          = pluralize(@pending_reviews_count, 'Pending Review')
+      .accordion-collapse.collapse.show#collapse-pending-reviews{ 'aria-labelledby': 'heading-pending-reviews' }
+        .accordion-body
+          = render partial: 'webui/request/beta_show_tabs/review_summary', collection: @pending_reviews, as: :review
+
+  - if @accepted_reviews_count.positive?
+    .accordion-item
+      %h2.accordion-header#heading-accepted-reviews
+        = button_tag(class: 'accordion-button collapsed',
+                     data: { 'bs-toggle': 'collapse', 'bs-target': '#collapse-accepted-reviews' },
+                     aria: { expanded: 'false', controls: 'collapse-accepted-reviews' }) do
+          %i.fas.fa-fw.fa-sm.fa-check.text-primary.align-middle.pe-4
+          = pluralize(@accepted_reviews_count, 'Accepted Review')
+      .accordion-collapse.collapse#collapse-accepted-reviews{ 'aria-labelledby': 'heading-accepted-reviews' }
+        .accordion-body
+          = render partial: 'webui/request/beta_show_tabs/review_summary', collection: @accepted_reviews, as: :review

src/api/app/components/accordion_reviews_component.rb

@@ -0,0 +1,19 @@
+class AccordionReviewsComponent < ApplicationComponent
+  def initialize(request_reviews, request_state)
+    super
+
+    @accepted_reviews = request_reviews.select(&:accepted?)
+    @accepted_reviews_count = @accepted_reviews.size
+    @pending_reviews = request_reviews.select(&:new?)
+    @pending_reviews_count = @pending_reviews.size
+    @declined_reviews = request_reviews.select(&:declined?)
+    @declined_reviews_count = @declined_reviews.size
+    @request_state = request_state
+  end
+
+  def render?
+    (@accepted_reviews_count + @pending_reviews_count + @declined_reviews_count).positive? &&
+      # Declined is not really a final state, since the request can always be reopened...
+      (BsRequest::FINAL_REQUEST_STATES.exclude?(@request_state) || @request_state == :declined)
+  end
+end

src/api/app/views/webui/request/beta_show_tabs/_conversation.html.haml

@@ -58,7 +58,7 @@
     %hr
 
     - if bs_request.accept_at.present?
-      .alert.alert-warning.p-2.mb-3
+      .alert.alert-warning.p-2
         %i.fas.fa-exclamation-triangle
         %span The current request
         - if BsRequest::FINAL_REQUEST_STATES.include?(bs_request.state)
@@ -78,6 +78,9 @@
           will be
           %strong auto-accepted
           in #{time_ago_in_words(bs_request.accept_at)}.
+
+    = render AccordionReviewsComponent.new(request_reviews, bs_request.state)
+
     = render RequestDecisionComponent.new(bs_request: bs_request, action: action,
                                           is_target_maintainer: is_target_maintainer,
                                           is_author: is_author)

src/api/spec/components/previews/accordion_reviews_component_preview.rb

@@ -0,0 +1,9 @@
+class AccordionReviewsComponentPreview < ViewComponent::Preview
+  # Preview at http://HOST:PORT/rails/view_components/accordion_reviews_component/preview
+  def preview
+    pending_reviews = Review.opened.take(3)
+    accepted_reviews = Review.accepted.take(2)
+    declined_review = Review.declined.take(1)
+    render(AccordionReviewsComponent.new(pending_reviews + accepted_reviews + declined_review, :review))
+  end
+end