FIX: review q issues (#20558)

* DEV: specify type of flag in status

* FIX: passing missing parameter

* DEV: pass type for reviewable score table

* UX: add missing queued-topic styling

* UX: fix img overflow

* UX: add styling for queued user

* UX: fix user flag color

* UX: prevent overflow

* UX: add copy for filters

* FIX: fix typo in css for akismet flagging

* UX: copy change for flag something else

* UX: prevent overflow

* Fixing reviewable-status css classes

* Changes based on no longer using humanType

* Need to use type rather than humanType for reviewable-status

* FIX: linting

---------

Co-authored-by: Martin Brennan <martin@discourse.org>

app/assets/javascripts/discourse/app/components/reviewable-item.hbs

@@ -19,7 +19,7 @@
       >{{age-with-tooltip this.reviewable.created_at}}</LinkTo>
     </span>
     <span class="status">
-      {{reviewable-status this.reviewable.status}}
+      {{reviewable-status this.reviewable.status this.reviewable.type}}
     </span>
     <a
       href

app/assets/javascripts/discourse/app/components/reviewable-score.hbs

@@ -34,7 +34,7 @@
     </td>
 
     <td>
-      {{reviewable-status this.rs.status}}
+      {{reviewable-status this.rs.status this.reviewable.type}}
     </td>
 
   {{else}}

app/assets/javascripts/discourse/app/helpers/reviewable-status.js

@@ -9,23 +9,64 @@ import I18n from "I18n";
 import { htmlHelper } from "discourse-common/lib/helpers";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
-function dataFor(status) {
+function dataFor(status, type) {
   switch (status) {
     case PENDING:
       return { name: "pending" };
     case APPROVED:
-      return { icon: "check", name: "approved" };
+      switch (type) {
+        case "ReviewableQueuedPost":
+          return {
+            icon: "check",
+            name: "approved_post",
+            cssClass: "approved",
+          };
+        case "User":
+          return {
+            icon: "check",
+            name: "approved_user",
+            cssClass: "approved",
+          };
+        default:
+          return {
+            icon: "check",
+            name: "approved_flag",
+            cssClass: "approved",
+          };
+      }
     case REJECTED:
-      return { icon: "times", name: "rejected" };
+      switch (type) {
+        case "ReviewableQueuedPost":
+          return {
+            icon: "times",
+            name: "rejected_post",
+            cssClass: "rejected",
+          };
+        case "User":
+          return {
+            icon: "times",
+            name: "rejected_user",
+            cssClass: "rejected",
+          };
+        default:
+          return {
+            icon: "times",
+            name: "rejected_flag",
+            cssClass: "rejected",
+          };
+      }
     case IGNORED:
-      return { icon: "external-link-alt", name: "ignored" };
+      return {
+        icon: "external-link-alt",
+        name: "ignored",
+      };
     case DELETED:
       return { icon: "trash-alt", name: "deleted" };
   }
 }
 
-export function htmlStatus(status) {
+export function htmlStatus(status, type) {
-  let data = dataFor(status);
+  let data = dataFor(status, type);
   if (!data) {
     return;
   }
@@ -33,13 +74,13 @@ export function htmlStatus(status) {
   let icon = data.icon ? iconHTML(data.icon) : "";
 
   return `
-      <span class="${data.name}">
+      <span class="${data.cssClass || data.name}">
         ${icon}
         ${I18n.t("review.statuses." + data.name + ".title")}
       </span>
   `;
 }
 
-export default htmlHelper((status) => {
+export default htmlHelper((status, type) => {
-  return htmlStatus(status);
+  return htmlStatus(status, type);
 });

app/assets/stylesheets/common/base/reviewables.scss

@@ -76,6 +76,7 @@
 }
 
 .reviewable-user-info {
+  max-width: 100%;
   margin: 0.5em 0;
   .reviewable-user-fields {
     margin-bottom: 2em;
@@ -231,13 +232,14 @@
       color: var(--secondary);
       border-radius: 8px;
       &.-flagged-post,
-      &.-user,
       &.-flagged-chat-message,
-      &.-aksimet-flagged-post,
+      &.-akismet-flagged-post,
-      &.-aksimet-flagged-user {
+      &.-akismet-flagged-user {
         background-color: var(--danger-medium);
       }
-      &.-queued-post {
+      &.-queued-post,
+      &.-queued-topic,
+      &.-user {
         background-color: var(--tertiary);
       }
     }
@@ -446,6 +448,7 @@
     justify-content: space-between;
     width: var(--topic-body-width);
     align-items: center;
+    max-width: 100%;
 
     .reviewable-reply-to {
       display: flex;
@@ -490,6 +493,11 @@
       margin: 0 0 1em 0;
     }
 
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
     pre,
     code {
       word-break: break-all;

config/locales/client.en.yml

@@ -592,22 +592,34 @@ en:
         pending:
           title: "Pending"
         approved:
+          title: "Approved"
+        approved_flag:
           title: "Flag approved"
+        approved_user:
+          title: "User approved"
+        approved_post:
+          title: "Post approved"
         rejected:
+          title: "Rejected"
+        rejected_flag:
           title: "Flag rejected"
+        rejected_user:
+          title: "User rejected"
+        rejected_post:
+          title: "Post rejected"
         ignored:
           title: "Flag ignored"
         deleted:
           title: "Topic or post deleted"
         reviewed:
-          title: "(all reviewed)"
+          title: "All reviewed"
         all:
-          title: "(everything)"
+          title: "Everything"
 
       context_question:
         is_this_post: "Is this post %{reviewable_human_score_types}?"
         delimiter: "or"
-        something_else_wrong: "Is there something else wrong with this post?"
+        something_else_wrong: "Is there something wrong with this post?"
 
       types:
         reviewable_flagged_post: