Merge pull request #4431 from coralproject/feat/CORL-2971-dsa-report-…

…rejected-link-state [CORL-2971] Show rejected state instead of stream link when DSA report comments are rejected
coralproject · Dec 4, 2023 · d117cbb · d117cbb
2 parents 8f0c3af + 9ebe6c8
commit d117cbb
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 19 deletions.
diff --git a/client/src/core/client/admin/routes/Reports/ReportedComment.css b/client/src/core/client/admin/routes/Reports/ReportedComment.css
@@ -47,3 +47,34 @@
   font-weight: var(--font-weight-primary-regular);
   white-space: pre-wrap;
 }
+
+.commentReported {
+  padding-top: calc(var(--spacing-1) / 2);
+  padding-bottom: calc(var(--spacing-1) / 2);
+  padding-right: calc(var(--spacing-1));
+  padding-left: calc(var(--spacing-1));
+
+  background-color: var(--palette-error-500);
+
+  border-color: var(--palette-error-500);
+  border-style: solid;
+  border-radius: 3px;
+
+  color: var(--palette-text-000);
+
+  text-transform: uppercase;
+
+  font-size: var(--font-size-1);
+  font-weight: var(--font-weight-primary-regular);
+  font-family: var(--font-family-primary);
+
+  margin-right: var(--spacing-1);
+}
+
+.commentNotAvailableInStream {
+  font-size: var(--font-size-1);
+  font-weight: var(--font-weight-primary-regular);
+  font-family: var(--font-family-primary);
+
+  color: var(--palette-grey-400);
+}
diff --git a/client/src/core/client/admin/routes/Reports/ReportedComment.tsx b/client/src/core/client/admin/routes/Reports/ReportedComment.tsx
@@ -15,6 +15,7 @@ import {
   getURLWithCommentID,
 } from "coral-framework/helpers";
 import { withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLCOMMENT_STATUS } from "coral-framework/schema";
 import {
   Button,
   Flex,
@@ -130,28 +131,45 @@ const ReportedComment: FunctionComponent<Props> = ({
                     </div>
                   </Flex>
                   <Flex>
-                    <Flex marginTop={2} marginRight={3}>
-                      <Localized id="reports-singleReport-comment-viewCommentStream">
-                        <Button
-                          variant="text"
-                          uppercase={false}
-                          color="mono"
-                          to={getURLWithCommentID(
-                            comment.story.url,
-                            comment.id
-                          )}
-                          target="_blank"
-                        >
-                          View comment in stream
-                        </Button>
-                      </Localized>
-                    </Flex>
+                    {comment.status === GQLCOMMENT_STATUS.REJECTED ? (
+                      <Flex marginTop={2} marginRight={3}>
+                        <Flex alignItems="center" justifyContent="flex-start">
+                          <Localized id="reports-singleReport-comment-rejected">
+                            <div className={styles.commentReported}>
+                              Rejected
+                            </div>
+                          </Localized>
+                          <Localized id="reports-singleReport-comment-unavailableInStream">
+                            <div className={styles.commentNotAvailableInStream}>
+                              Unavailable in stream
+                            </div>
+                          </Localized>
+                        </Flex>
+                      </Flex>
+                    ) : (
+                      <Flex marginTop={2} marginRight={3}>
+                        <Localized id="reports-singleReport-comment-viewCommentStream">
+                          <Button
+                            variant="text"
+                            uppercase={false}
+                            color="regular"
+                            to={getURLWithCommentID(
+                              comment.story.url,
+                              comment.id
+                            )}
+                            target="_blank"
+                          >
+                            View comment in stream
+                          </Button>
+                        </Localized>
+                      </Flex>
+                    )}
                     <Flex marginTop={2}>
                       <Localized id="reports-singleReport-comment-viewCommentModeration">
                         <Button
                           variant="text"
                           uppercase={false}
-                          color="mono"
+                          color="regular"
                           target="_blank"
                           to={getModerationLink({
                             commentID: comment.id,
@@ -201,6 +219,7 @@ const enhanced = withFragmentContainer<Props>({
             title
           }
         }
+        status
         ...CommentAuthorContainer_comment
         ...MediaContainer_comment
       }

diff --git a/client/src/core/client/admin/test/dsaReports/dsaReportsSingle.spec.tsx b/client/src/core/client/admin/test/dsaReports/dsaReportsSingle.spec.tsx
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 
 import { pureMerge } from "coral-common/common/lib/utils";
 import {
+  GQLCOMMENT_STATUS,
   GQLDSAReportDecisionLegality,
   GQLDSAReportHistoryType,
   GQLDSAReportStatus,
@@ -25,7 +26,8 @@ beforeEach(async () => {
 });
 
 const createTestRenderer = async (
-  params: CreateTestRendererParams<GQLResolver> = {}
+  params: CreateTestRendererParams<GQLResolver> = {},
+  commentStatus?: GQLCOMMENT_STATUS
 ) => {
   const { context } = createContext({
     ...params,
@@ -34,7 +36,17 @@ const createTestRenderer = async (
         Query: {
           settings: () => settings,
           viewer: () => adminViewer,
-          dsaReport: () => dsaReports[0],
+          dsaReport: () => {
+            return {
+              ...dsaReports[0],
+              comment: commentStatus
+                ? {
+                    ...dsaReports[0].comment,
+                    status: commentStatus,
+                  }
+                : dsaReports[0].comment,
+            };
+          },
         },
         Mutation: {
           addDSAReportNote: ({ variables }) => {
@@ -251,3 +263,20 @@ it("can make a legality decision on a report", async () => {
     )
   );
 });
+
+it("stream link is unavailable when comment is already rejected", async () => {
+  const { container } = await createTestRenderer(
+    undefined,
+    GQLCOMMENT_STATUS.REJECTED
+  );
+
+  expect(await within(container).findByText("Rejected"));
+  expect(await within(container).findByText("Unavailable in stream"));
+
+  expect(
+    within(container).getByRole("link", { name: "View comment in moderation" })
+  ).toHaveProperty(
+    "href",
+    "http://localhost/admin/moderate/comment/comment-regular-0"
+  );
+});
diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
@@ -1861,6 +1861,8 @@ reports-singleReport-comment-deleted = This comment is no longer available. The
 reports-singleReport-comment-edited = (edited)
 reports-singleReport-comment-viewCommentStream = View comment in stream
 reports-singleReport-comment-viewCommentModeration = View comment in moderation
+reports-singleReport-comment-rejected = Rejected
+reports-singleReport-comment-unavailableInStream = Unavailable in stream
 reports-singleReport-commentOn = Comment on
 reports-singleReport-history = History
 reports-singleReport-history-reportSubmitted = Illegal content report submitted