Merge pull request #15299 from dmarcoux/report-ux

Instantly display the 'You reported the X' message

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

@@ -40,6 +40,28 @@ function hideReportButton(element) {
   $(element).addClass('d-none');
 }
 
+/* exported showYouReportedMessage */
+function showYouReportedMessage(reportLinkId, reportableType, reportableId, message) {
+  switch(reportableType) {
+    case 'Comment':
+      // Comments differ depending on where they are, so this is why we have two ways. If an element isn't found, nothing will happen...
+      // For comments on a project/package - In the comment, insert the 'You reported the comment' message after 'User X wrote (...)'
+      $('#comment-' + reportableId + '-user').after(message);
+      // For comments on a request - In the comment, insert the 'You reported the comment' message before the comment body
+      $('#comment-' + reportableId + '-body').prepend(message);
+      break;
+    case 'Project':
+    case 'Package':
+      // The 'You reported the project/package' is displayed in the side links of the project/package
+      $('ul.side_links').append(message);
+      break;
+    case 'User':
+      // The 'You reported the user' message is displayed after the (now) hidden 'Report' link
+      $(reportLinkId).after(message);
+      break;
+  }
+}
+
 $(document).ready(function(){
   $('#report-category').on('change', '.form-check-input', function(e) {
     $('#report-reason textarea').attr('required', (e.target.value !== 'other' ? null : true));

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

@@ -38,7 +38,7 @@
           = link_to request_changes_path(number: action.bs_request, request_action_id: action, anchor: comment.diff_ref) do
             = render(DiffSubjectComponent.new(state: diff['state'], old_filename: diff.dig('old', 'name'), new_filename: diff.dig('new', 'name')))
         = render(DiffComponent.new(diff: diff.dig('diff', '_content'), range:))
-      .comment-bubble-content
+      .comment-bubble-content{ id: "comment-#{comment.id}-body" }
         = render ReportsNoticeComponent.new(reportable: comment, user: User.session)
         = helpers.render_as_markdown(comment)
 

src/api/app/controllers/webui/reports_controller.rb

@@ -3,16 +3,16 @@ class Webui::ReportsController < Webui::WebuiController
   after_action :verify_authorized
 
   def create
-    user = User.session!
-    report = user.submitted_reports.new(report_params)
-    authorize report
+    @user = User.session!
+    @report = @user.submitted_reports.new(report_params)
+    authorize @report
 
     @link_id = params[:link_id]
 
-    if report.save
-      flash[:success] = "#{report.reportable_type} reported successfully"
+    if @report.save
+      flash[:success] = "#{@report.reportable_type} reported successfully"
     else
-      flash[:error] = report.errors.full_messages.to_sentence
+      flash[:error] = @report.errors.full_messages.to_sentence
     end
 
     respond_to do |format|

src/api/app/views/webui/comment/_content.html.haml

@@ -3,7 +3,7 @@
   .flex-shrink-0
     = image_tag_for(comment.user, size: 35, custom_class: 'me-3 d-none d-sm-block')
   .comment.flex-grow-1.text-break
-    .mb-3
+    .mb-3{ id: "comment-#{comment.id}-user" }
       = link_to(comment.user, user_path(comment.user))
       wrote
       = link_to("#comment-#{comment.id}", title: I18n.l(comment.created_at.utc), name: "comment-#{comment.id}") do

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

@@ -1,4 +1,4 @@
-%ul.list-unstyled
+%ul.side_links.list-unstyled
   - if failures.positive?
     = render partial: 'webui/package/side_links/show_failures', locals: { failures: failures, package_name: package.name, project: project }
 

src/api/app/views/webui/project/_side_links.html.haml

@@ -1,4 +1,4 @@
-%ul.list-unstyled
+%ul.side_links.list-unstyled
   - if project.is_maintenance?
     = render partial: 'webui/project/side_links/maintenance_project', locals: { open_maintenance_incidents: open_maintenance_incidents,
                                                                                 project: project,

src/api/app/views/webui/reports/create.js.erb

@@ -2,4 +2,7 @@ $('#report-modal').modal('hide');
 $('#flash').html("<%= escape_javascript(render(partial: 'layouts/webui/flash'))%>")
 
 hideReportButton("#<%= @link_id %>");
+showYouReportedMessage("#<%= @link_id %>", "<%= @report.reportable_type %>",
+                       "<%= @report.reportable_id %>",
+                       "<%= escape_javascript(render ReportsNoticeComponent.new(reportable: @report.reportable, user: @user)) %>");
 collectReportModalsAndSetValues();