Show media in the moderate view conversation modal (#3088)

src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.tsx

@@ -3,6 +3,7 @@ import cn from "classnames";
 import React, { FunctionComponent, useCallback, useState } from "react";
 import { graphql } from "react-relay";
 
+import { MediaContainer } from "coral-admin/components/MediaContainer";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import {
   Button,
@@ -95,6 +96,7 @@ const ConversationModalCommentContainer: FunctionComponent<Props> = ({
                 {comment.body}
               </CommentContent>
             )}
+            <MediaContainer comment={comment} />
           </div>
         </HorizontalGutter>
       </Flex>
@@ -153,6 +155,7 @@ const enhanced = withFragmentContainer<Props>({
           id
         }
       }
+      ...MediaContainer_comment
     }
   `,
 })(ConversationModalCommentContainer);

src/core/client/admin/components/MediaContainer/index.ts

@@ -0,0 +1,4 @@
+export { default as MediaContainer } from "./MediaContainer";
+export { default as GiphyMedia } from "./GiphyMedia";
+export { default as TwitterMedia } from "./TwitterMedia";
+export { default as YouTubeMedia } from "./YouTubeMedia";

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

@@ -10,6 +10,7 @@ import React, {
   useRef,
 } from "react";
 
+import { MediaContainer } from "coral-admin/components/MediaContainer";
 import { HOTKEYS } from "coral-admin/constants";
 import { GetPhrasesRegExpOptions } from "coral-admin/helpers";
 import { PropTypesOf } from "coral-framework/types";
@@ -29,7 +30,6 @@ import ApproveButton from "./ApproveButton";
 import CommentAuthorContainer from "./CommentAuthorContainer";
 import FeatureButton from "./FeatureButton";
 import MarkersContainer from "./MarkersContainer";
-import MediaContainer from "./MediaContainer";
 import RejectButton from "./RejectButton";
 
 import styles from "./ModerateCard.css";