fix: always show details on moderation card (#2946)

src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx

@@ -13,9 +13,6 @@ it("renders all markers", () => {
   const props: PropTypesOf<typeof MarkersContainerN> = {
     comment: {
       status: "PREMOD",
-      editing: {
-        edited: false,
-      },
       revision: {
         actionCounts: {
           flag: {
@@ -33,11 +30,6 @@ it("renders all markers", () => {
             },
           },
         },
-        metadata: {
-          perspective: {
-            score: 0,
-          },
-        },
       },
     },
     settings: {
@@ -58,9 +50,6 @@ it("renders some markers", () => {
   const props: PropTypesOf<typeof MarkersContainerN> = {
     comment: {
       status: "PREMOD",
-      editing: {
-        edited: false,
-      },
       revision: {
         actionCounts: {
           flag: {
@@ -78,11 +67,6 @@ it("renders some markers", () => {
             },
           },
         },
-        metadata: {
-          perspective: {
-            score: 1,
-          },
-        },
       },
     },
     settings: {

src/core/client/admin/components/ModerateCard/MarkersContainer.tsx

@@ -17,14 +17,6 @@ interface MarkersContainerProps {
   settings: MarkersContainer_settings;
 }
 
-function hasDetails(c: MarkersContainer_comment) {
-  return c.revision
-    ? c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_OFFENSIVE +
-        c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM >
-        0 || c.revision.metadata.perspective
-    : false;
-}
-
 let keyCounter = 0;
 const markers: Array<(
   c: MarkersContainer_comment
@@ -135,25 +127,15 @@ export const MarkersContainer: React.FunctionComponent<MarkersContainerProps> =
     () => markers.map((cb) => cb(props.comment)).filter((m) => m),
     [markers, props.comment]
   );
-  const doesHaveDetails = useMemo(() => hasDetails(props.comment), [
-    props.comment,
-  ]);
-  if (elements.length === 0 && !doesHaveDetails) {
-    return null;
-  }
 
   return (
     <Markers
       details={
-        doesHaveDetails || props.comment.editing.edited ? (
-          <ModerateCardDetailsContainer
-            hasDetails={!!doesHaveDetails}
-            hasRevisions={props.comment.editing.edited}
-            onUsernameClick={props.onUsernameClick}
-            comment={props.comment}
-            settings={props.settings}
-          />
-        ) : null
+        <ModerateCardDetailsContainer
+          onUsernameClick={props.onUsernameClick}
+          comment={props.comment}
+          settings={props.settings}
+        />
       }
     >
       {elements}
@@ -166,9 +148,6 @@ const enhanced = withFragmentContainer<MarkersContainerProps>({
     fragment MarkersContainer_comment on Comment {
       ...ModerateCardDetailsContainer_comment
       status
-      editing {
-        edited
-      }
       revision {
         actionCounts {
           flag {
@@ -186,11 +165,6 @@ const enhanced = withFragmentContainer<MarkersContainerProps>({
             }
           }
         }
-        metadata {
-          perspective {
-            score
-          }
-        }
       }
     }
   `,

src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx

@@ -1,5 +1,10 @@
 import { Localized } from "@fluent/react/compat";
-import React, { FunctionComponent, useCallback, useState } from "react";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
@@ -11,8 +16,8 @@ import {
   TabBar,
 } from "coral-ui/components/v2";
 
-import { ModerateCardDetailsContainer_comment as CommentData } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql";
-import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql";
+import { ModerateCardDetailsContainer_comment } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql";
+import { ModerateCardDetailsContainer_settings } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql";
 
 import CommentRevisionContainer from "./CommentRevisionContainer";
 import FlagDetailsContainer from "./FlagDetailsContainer";
@@ -21,43 +26,46 @@ import LinkDetailsContainer from "./LinkDetailsContainer";
 import styles from "./ModerateCardDetailsContainer.css";
 
 interface Props {
-  comment: CommentData;
-  settings: SettingsData;
+  comment: ModerateCardDetailsContainer_comment;
+  settings: ModerateCardDetailsContainer_settings;
   onUsernameClick: (id?: string) => void;
-  hasDetails: boolean;
-  hasRevisions: boolean;
 }
 
-type DetailsTabs = "DETAILS" | "HISTORY";
+type DetailsTabs = "INFO" | "HISTORY";
+
+function hasFlagDetails(c: ModerateCardDetailsContainer_comment) {
+  return c.revision
+    ? c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_OFFENSIVE +
+        c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM >
+        0 || c.revision.metadata.perspective
+    : false;
+}
 
 const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
   comment,
   onUsernameClick,
   settings,
-  hasDetails,
-  hasRevisions,
 }) => {
-  const [activeTab, setActiveTab] = useState<DetailsTabs>(
-    hasDetails ? "DETAILS" : "HISTORY"
-  );
+  const [activeTab, setActiveTab] = useState<DetailsTabs>("INFO");
 
   const onTabClick = useCallback((id) => setActiveTab(id as DetailsTabs), [
     setActiveTab,
   ]);
 
+  const doesHaveFlagDetails = useMemo(() => hasFlagDetails(comment), [comment]);
+  const hasRevisions = comment.editing.edited;
+
   return (
     <HorizontalGutter>
       <TabBar variant="default" activeTab={activeTab} onTabClick={onTabClick}>
-        {hasDetails && (
-          <Tab tabID="DETAILS" classes={styles}>
-            <Flex alignItems="center" itemGutter>
-              <Icon size="md">list</Icon>
-              <Localized id="moderateCardDetails-tab-info">
-                <span>Info</span>
-              </Localized>
-            </Flex>
-          </Tab>
-        )}
+        <Tab tabID="INFO" classes={styles}>
+          <Flex alignItems="center" itemGutter>
+            <Icon size="md">list</Icon>
+            <Localized id="moderateCardDetails-tab-info">
+              <span>Info</span>
+            </Localized>
+          </Flex>
+        </Tab>
         {hasRevisions && (
           <Tab tabID="HISTORY" classes={styles}>
             <Flex alignItems="center" itemGutter>
@@ -69,15 +77,19 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
           </Tab>
         )}
       </TabBar>
-      {activeTab === "DETAILS" && (
+      {activeTab === "INFO" && (
         <>
           <LinkDetailsContainer comment={comment} settings={settings} />
-          <hr />
-          <FlagDetailsContainer
-            comment={comment}
-            settings={settings}
-            onUsernameClick={onUsernameClick}
-          />
+          {doesHaveFlagDetails && (
+            <>
+              <hr />
+              <FlagDetailsContainer
+                comment={comment}
+                settings={settings}
+                onUsernameClick={onUsernameClick}
+              />
+            </>
+          )}
         </>
       )}
       {activeTab === "HISTORY" && (
@@ -90,6 +102,24 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
 const enhanced = withFragmentContainer<Props>({
   comment: graphql`
     fragment ModerateCardDetailsContainer_comment on Comment {
+      editing {
+        edited
+      }
+      revision {
+        actionCounts {
+          flag {
+            reasons {
+              COMMENT_REPORTED_OFFENSIVE
+              COMMENT_REPORTED_SPAM
+            }
+          }
+        }
+        metadata {
+          perspective {
+            score
+          }
+        }
+      }
       ...FlagDetailsContainer_comment
       ...CommentRevisionContainer_comment
       ...LinkDetailsContainer_comment

src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap

@@ -6,9 +6,6 @@ exports[`renders all markers 1`] = `
     <Relay(ModerateCardDetailsContainer)
       comment={
         Object {
-          "editing": Object {
-            "edited": false,
-          },
           "revision": Object {
             "actionCounts": Object {
               "flag": Object {
@@ -26,17 +23,10 @@ exports[`renders all markers 1`] = `
                 },
               },
             },
-            "metadata": Object {
-              "perspective": Object {
-                "score": 0,
-              },
-            },
           },
           "status": "PREMOD",
         }
       }
-      hasDetails={true}
-      hasRevisions={false}
       onUsernameClick={[Function]}
       settings={
         Object {
@@ -161,9 +151,6 @@ exports[`renders some markers 1`] = `
     <Relay(ModerateCardDetailsContainer)
       comment={
         Object {
-          "editing": Object {
-            "edited": false,
-          },
           "revision": Object {
             "actionCounts": Object {
               "flag": Object {
@@ -181,17 +168,10 @@ exports[`renders some markers 1`] = `
                 },
               },
             },
-            "metadata": Object {
-              "perspective": Object {
-                "score": 1,
-              },
-            },
           },
           "status": "PREMOD",
         }
       }
-      hasDetails={true}
-      hasRevisions={false}
       onUsernameClick={[Function]}
       settings={
         Object {