Group canned responses by decision type

src/api/app/views/webui/users/canned_responses/index.html.haml

@@ -4,31 +4,35 @@
   .card-body#canned-responses
     %h4 Your canned responses
     - if @canned_responses.present?
-      .d-flex.flex-wrap.gap-4.align-self-stretch.pt-4
-        - @canned_responses.each do |canned_response|
-          = render(CardComponent.new) do |component|
-            - if canned_response.decision_type
-              %p.card-text
-                %b Decision's reason:
-                %span.mb-2= canned_response.decision_type.humanize
-            %p.card-text
-              %b Content:
-              .canned-response-card-text.mb-2
-                = render partial: 'webui/shared/collapsible_text', locals: { text: canned_response.content, render_markdown: true }
+      %ul.list-group.list-group-flush
+        - canned_responses_decision_types = @canned_responses.pluck(:decision_type).uniq
+        - canned_responses_decision_types.each do |decision_type|
+          %li.list-group-item.py-4
+            - if decision_type
+              %h5= decision_type.humanize
+            - else
+              .pb-2
+                Decision's reason:
+                %em Undefined
+            .d-flex.flex-wrap.gap-4.align-self-stretch
+              - @canned_responses.filter { |cr| cr.decision_type == decision_type }.each do |canned_response|
+                = render(CardComponent.new) do |component|
+                  .canned-response-card-text.mb-2
+                    = render partial: 'webui/shared/collapsible_text', locals: { text: canned_response.content, render_markdown: true }
 
-            - component.with_header do
-              = canned_response.title
+                  - component.with_header do
+                    = canned_response.title
 
-            - component.with_delete_button do
-              = link_to '#', title: 'Delete Canned Response',
-                data: { 'bs-toggle': 'modal', 'bs-target': '#delete-canned-response-modal',
-                        canned_response_title: canned_response.title, action: canned_response_path(canned_response) } do
-                %i.fas.fa-times-circle.text-danger
+                  - component.with_delete_button do
+                    = link_to '#', title: 'Delete Canned Response',
+                      data: { 'bs-toggle': 'modal', 'bs-target': '#delete-canned-response-modal',
+                              canned_response_title: canned_response.title, action: canned_response_path(canned_response) } do
+                      %i.fas.fa-times-circle.text-danger
 
-            - component.with_action do
-              = link_to(edit_canned_response_path(canned_response), title: 'Edit Canned Response', class: 'nav-link p-1') do
-                %i.fas.fa-edit
-                Edit
+                  - component.with_action do
+                    = link_to(edit_canned_response_path(canned_response), title: 'Edit Canned Response', class: 'nav-link p-1') do
+                      %i.fas.fa-edit
+                      Edit
 
       .modal.fade#delete-canned-response-modal{ tabindex: -1, role: 'dialog',
                                                 aria: { labelledby: 'delete-canned-response-modal-label', hidden: true } }

src/api/spec/features/webui/canned_responses_spec.rb

@@ -22,6 +22,7 @@
       within('#canned-responses') do
         expect(page).to have_css('.card-header', text: 'wow')
         expect(page).to have_css('.card-body', text: 'a canned response')
+        expect(page).to have_css('.list-group-item.py-4', text: "Decision's reason: Undefined")
       end
     end
   end
@@ -89,8 +90,8 @@
     it do
       within('#canned-responses') do
         expect(page).to have_css('.card-header', text: 'wow')
-        expect(page).to have_css('.card-body', text: "Decision's reason:")
-        expect(page).to have_css('.card-body', text: 'Favored')
+        expect(page).to have_css('.card-body', text: 'a decision-related canned response')
+        expect(page).to have_css('.list-group-item.py-4 h5', text: 'Favored')
       end
     end
   end