fix popover ref issue

update test

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

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import key from "keymaster";
@@ -9,7 +8,6 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from "react";
 
 import { MediaContainer } from "coral-admin/components/MediaContainer";
@@ -43,12 +41,9 @@ import MarkersContainer from "./MarkersContainer";
 import RejectButton from "./RejectButton";
 
 import { RejectCommentReasonInput } from "coral-stream/__generated__/RejectCommentMutation.graphql";
-import { default as ModerationReasonComponent, Props as ModerationReasonProps } from "../ModerationReason/ModerationReason";
+import ModerationReason from "../ModerationReason/ModerationReason";
 import styles from "./ModerateCard.css";
 
-const ModerationReason: FunctionComponent<ModerationReasonProps> = (props) =>
-  <Card className={styles.moderationReasonCard}><ModerationReasonComponent {...props} /></Card>;
-
 interface Props {
   id: string;
   username: string;
@@ -187,8 +182,6 @@ const ModerateCard: FunctionComponent<Props> = ({
     }
   }, [selected, div]);
 
-  const [showModerationReason, setShowModerationReason] = useState(false);
-
   const commentBody = useMemo(
     () =>
       deleted ? (
@@ -359,32 +352,32 @@ const ModerateCard: FunctionComponent<Props> = ({
           <Flex itemGutter style={{ position: "relative" }}>
             <Popover
               id={`reject-reason-${id}`}
-              // modifiers={{ arrow: { enabled: false }, offset: { offset: "0, 4" } }}
+              modifiers={{
+                arrow: { enabled: false },
+                offset: { offset: "0, 4" },
+              }}
               body={({ toggleVisibility, visible }) => {
                 return (
-                  <ClickOutside
-                    onClickOutside={toggleVisibility}
-                  >
+                  <ClickOutside onClickOutside={toggleVisibility}>
                     <Dropdown className={styles.moderationReasonDropdown}>
-                      <ModerationReason onReason={onReason} onCancel={toggleVisibility}/>
+                      <ModerationReason
+                        onReason={onReason}
+                        onCancel={toggleVisibility}
+                        id={id}
+                      />
                     </Dropdown>
                   </ClickOutside>
                 );
               }}
-              placement="bottom-end"
+              placement="bottom-start"
             >
-              {({ toggleVisibility, visible }) => {
+              {({ toggleVisibility, visible, ref }) => {
                 return (
                   <RejectButton
+                    ref={ref}
                     toggle={dsaFeaturesEnabled}
-                    open={showModerationReason}
-                    onClick={
-                      dsaFeaturesEnabled
-                        ? () => {
-                            setShowModerationReason(!showModerationReason);// toggleVisibility();
-                          }
-                        : onReject
-                    }
+                    open={visible}
+                    onClick={dsaFeaturesEnabled ? toggleVisibility : onReject}
                     invert={status === "rejected"}
                     disabled={
                       status === "rejected" ||
@@ -418,7 +411,6 @@ const ModerateCard: FunctionComponent<Props> = ({
                 [styles.miniButton]: mini,
               })}
             />
-            {showModerationReason && <ModerationReason onReason={onReason} onCancel={() => setShowModerationReason(false)} /> }
           </Flex>
           {moderatedBy}
         </Flex>

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

@@ -11,13 +11,15 @@ import {
 } from "coral-ui/components/icons";
 import { BaseButton } from "coral-ui/components/v2";
 
+import { withForwardRef } from "coral-ui/hocs";
 import styles from "./RejectButton.css";
 
 interface Props extends Omit<PropTypesOf<typeof BaseButton>, "ref"> {
   toggle?: boolean;
   open?: boolean;
   invert?: boolean;
   readOnly?: boolean;
+  forwardRef: React.Ref<any>;
 }
 
 const RejectButton: FunctionComponent<Props> = ({
@@ -26,11 +28,13 @@ const RejectButton: FunctionComponent<Props> = ({
   className,
   open = false,
   toggle = false,
+  forwardRef,
   ...rest
 }) => (
   <Localized id="moderate-comment-rejectButton" attrs={{ "aria-label": true }}>
     <BaseButton
       {...rest}
+      ref={forwardRef}
       className={cn(className, styles.root, {
         [styles.open]: toggle && open,
         [styles.invert]: invert,
@@ -50,4 +54,4 @@ const RejectButton: FunctionComponent<Props> = ({
   </Localized>
 );
 
-export default RejectButton;
+export default withForwardRef(RejectButton);

client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx

@@ -18,12 +18,17 @@ type ReasonCode = GQLREJECTION_REASON_CODE;
 export interface Props {
   onCancel: () => void;
   onReason: (reason: Reason) => void;
+  id: string;
 }
 
-const ModerationReason: FunctionComponent<Props> = ({ onCancel, onReason }) => {
+const ModerationReason: FunctionComponent<Props> = ({
+  onCancel,
+  onReason,
+  id,
+}) => {
   const [view, setView] = useState<"REASON" | "EXPLANATION">("REASON");
   const [reasonCode, setReasonCode] = useState<ReasonCode | null>(null);
-  // TODO (marcushaddon): will we ever submit legal grounds via this component?
+
   const [legalGrounds] = useState<string | null>(null);
   const [detailedExplanation, setDetailedExplanation] = useState<string | null>(
     null
@@ -41,7 +46,7 @@ const ModerationReason: FunctionComponent<Props> = ({ onCancel, onReason }) => {
   }, [reasonCode, legalGrounds, detailedExplanation, onReason]);
 
   return (
-    <Box className={styles.root} data-testid="moderation-reason-modal">
+    <Box className={styles.root} data-testid={`moderation-reason-modal-${id}`}>
       {view === "REASON" ? (
         <Reasons
           selected={reasonCode}
@@ -72,7 +77,11 @@ const ModerationReason: FunctionComponent<Props> = ({ onCancel, onReason }) => {
         <Localized id="common-moderationReason-reject">
           <Button
             className={styles.rejectButton}
-            disabled={reasonCode === null}
+            disabled={
+              reasonCode === null ||
+              (reasonCode === GQLREJECTION_REASON_CODE.OTHER &&
+                !detailedExplanation)
+            }
             onClick={submitReason}
             color="alert"
           >

client/src/core/client/admin/test/moderate/regularQueue.spec.tsx

@@ -1,4 +1,10 @@
-import { act, screen, waitFor, within } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { commitLocalUpdate } from "relay-runtime";
 
@@ -937,8 +943,10 @@ it("requires moderation reason when DSA features enabled", async () => {
     }),
   });
 
+  const comment = reportedComments[0];
+
   const modCard = await screen.findByTestId(
-    `moderate-comment-card-${reportedComments[0].id}`
+    `moderate-comment-card-${comment.id}`
   );
 
   expect(modCard).toBeInTheDocument();
@@ -950,11 +958,13 @@ it("requires moderation reason when DSA features enabled", async () => {
     userEvent.click(rejectButton);
   });
 
+  const reasonModalID = `moderation-reason-modal-${comment.id}`;
+
   await waitFor(() => {
-    expect(screen.queryByTestId("moderation-reason-modal")).toBeVisible();
+    expect(screen.queryByTestId(reasonModalID)).toBeInTheDocument();
   });
 
-  const reasonModal = screen.queryByTestId("moderation-reason-modal")!;
+  const reasonModal = screen.queryByTestId(reasonModalID)!;
 
   const submitReasonButton = within(reasonModal).getByRole("button", {
     name: "Reject",
@@ -967,9 +977,13 @@ it("requires moderation reason when DSA features enabled", async () => {
 
   expect(abusiveOption).toBeInTheDocument();
 
-  act(() => userEvent.click(abusiveOption));
+  await act(async () => {
+    fireEvent.click(abusiveOption);
+  });
 
   expect(submitReasonButton).toBeEnabled();
 
-  act(() => userEvent.click(submitReasonButton));
+  await act(async () => {
+    fireEvent.click(submitReasonButton);
+  });
 });