From d0dbe97f28dfabad6682047c5c5b27125c48970d Mon Sep 17 00:00:00 2001
From: Alyssa Wang <alyssa.c.wang@gmail.com>
Date: Wed, 31 Jan 2024 15:45:52 -0500
Subject: [PATCH] FI-2202: Add reactgfm to ReactMarkdown components (#421)

* add reactgfm to markdown

* remove comment

---------

Co-authored-by: Alyssa Wang <awang@mitre.org>
---
 client/src/components/InputsModal/InputsModal.tsx           | 3 ++-
 client/src/components/Skeletons/AppSkeleton.tsx             | 1 -
 client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx | 3 ++-
 .../ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx    | 3 ++-
 .../TestGroupListItem/NestedDescriptionPanel.tsx            | 6 +++++-
 .../TestSuiteDetails/TestListItem/InputOutputList.tsx       | 3 ++-
 .../TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx | 3 ++-
 .../TestSuiteDetails/TestListItem/TestListItem.tsx          | 3 ++-
 client/src/components/_common/ActionModal.tsx               | 3 ++-
 9 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
index 48f7186ed..a79e170ac 100644
--- a/client/src/components/InputsModal/InputsModal.tsx
+++ b/client/src/components/InputsModal/InputsModal.tsx
@@ -27,6 +27,7 @@ import InputTextArea from './InputTextArea';
 import InputTextField from './InputTextField';
 import CustomTooltip from '../_common/CustomTooltip';
 import useStyles from './styles';
+import remarkGfm from 'remark-gfm';
 
 export interface InputsModalProps {
   runnableType: RunnableType;
@@ -327,7 +328,7 @@ const InputsModal: FC<InputsModalProps> = ({
       <DialogContent>
         <main>
           <DialogContentText component="div" style={{ wordBreak: 'break-word' }}>
-            <ReactMarkdown>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
               {instructions +
                 (inputType === 'Field'
                   ? ''
diff --git a/client/src/components/Skeletons/AppSkeleton.tsx b/client/src/components/Skeletons/AppSkeleton.tsx
index 7b89653b0..1c853761d 100644
--- a/client/src/components/Skeletons/AppSkeleton.tsx
+++ b/client/src/components/Skeletons/AppSkeleton.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Box } from '@mui/material';
 import lightTheme from '~/styles/theme';
-// import { AppBar, Box, Skeleton, Toolbar } from '@mui/material';
 import { useAppStore } from '~/store/app';
 import useStyles from '~/components/TestSuite/styles';
 import DrawerSkeleton from '~/components/Skeletons/DrawerSkeleton';
diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
index b59cd0ae6..67564763e 100644
--- a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
+++ b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -15,6 +15,7 @@ import lightTheme from '~/styles/theme';
 import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel';
 import useStyles from './styles';
 import { basePath } from '~/api/infernoApiService';
+import remarkGfm from 'remark-gfm';
 
 export interface SuiteOptionsPageProps {
   testSuite?: TestSuite;
@@ -163,7 +164,7 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
               wordBreak: 'break-word',
             }}
           >
-            <ReactMarkdown>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
               {testSuite?.suite_summary || testSuite?.description || ''}
             </ReactMarkdown>
           </Typography>
diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
index 6ab2d33a4..86f6199ff 100644
--- a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
+++ b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
@@ -5,6 +5,7 @@ import { Message, TestSuite } from '~/models/testSuiteModels';
 import CustomTab from '~/components/_common/CustomTab';
 import TabPanel from '../TestSuiteDetails/TestListItem/TabPanel';
 import useStyles from './styles';
+import remarkGfm from 'remark-gfm';
 
 interface ConfigDetailsPanelProps {
   testSuite: TestSuite;
@@ -24,7 +25,7 @@ const ConfigMessagesDetailsPanel: FC<ConfigDetailsPanelProps> = ({ testSuite: ru
       {messages.length > 0 ? (
         messages.map((message, index) => (
           <Card key={index} variant="outlined" sx={{ px: 2, my: 2, overflow: 'auto' }}>
-            <ReactMarkdown>{message.message}</ReactMarkdown>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.message}</ReactMarkdown>
           </Card>
         ))
       ) : (
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
index 911e5f48d..8a5b4a1fb 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
@@ -14,6 +14,7 @@ import {
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { TestGroup } from '~/models/testSuiteModels';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 interface NestedDescriptionPanelProps {
   testGroup: TestGroup;
@@ -56,7 +57,10 @@ const NestedDescriptionPanel: FC<NestedDescriptionPanelProps> = ({ testGroup })
           title={descriptionMouseHover ? '' : `${testGroup.id}-description-detail`}
           className={classes.accordionDetailContainer}
         >
-          <ReactMarkdown className={`${classes.accordionDetail} ${classes.nestedDescription}`}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            className={`${classes.accordionDetail} ${classes.nestedDescription}`}
+          >
             {testGroup.description as string}
           </ReactMarkdown>
         </AccordionDetails>
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/InputOutputList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/InputOutputList.tsx
index 2f4452081..2a0839802 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/InputOutputList.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/InputOutputList.tsx
@@ -3,6 +3,7 @@ import useStyles from './styles';
 import { Table, TableBody, TableRow, TableCell, Typography, TableHead, Box } from '@mui/material';
 import { TestInput, TestOutput } from '~/models/testSuiteModels';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 interface InputOutputListProps {
   inputOutputs: TestInput[] | TestOutput[];
@@ -43,7 +44,7 @@ const InputOutputList: FC<InputOutputListProps> = ({
             </Typography>
           </TableCell>
           <TableCell className={classes.inputOutputsValue}>
-            <ReactMarkdown className={classes.wordWrap}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]} className={classes.wordWrap}>
               {(inputOutputs?.value as string) || ''}
             </ReactMarkdown>
           </TableCell>
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx
index ce759304b..4b0d0257b 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx
@@ -6,6 +6,7 @@ import ReactMarkdown from 'react-markdown';
 
 import MessageType from './MessageType';
 import { sortByMessageType } from './helper';
+import remarkGfm from 'remark-gfm';
 
 interface MessageListProps {
   messages: Message[];
@@ -34,7 +35,7 @@ const MessageList: FC<MessageListProps> = ({ messages }) => {
           <MessageType type={message.type} />
         </TableCell>
         <TableCell className={classes.messageMessage}>
-          <ReactMarkdown>{message.message}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.message}</ReactMarkdown>
         </TableCell>
       </TableRow>
     );
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
index 7fb97afb1..bcddd45a0 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
@@ -27,6 +27,7 @@ import type { TabProps } from './TestRunDetail';
 import { MessageCounts, countMessageTypes } from './helper';
 import CustomTooltip from '~/components/_common/CustomTooltip';
 import useStyles from './styles';
+import remarkGfm from 'remark-gfm';
 
 interface TestListItemProps {
   test: Test;
@@ -84,7 +85,7 @@ const TestListItem: FC<TestListItemProps> = ({
       primary={testLabel}
       secondary={
         test.result?.result_message && (
-          <ReactMarkdown className={classes.resultMessageMarkdown}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]} className={classes.resultMessageMarkdown}>
             {test.result.result_message}
           </ReactMarkdown>
         )
diff --git a/client/src/components/_common/ActionModal.tsx b/client/src/components/_common/ActionModal.tsx
index 9eb82fac4..5647d37ef 100644
--- a/client/src/components/_common/ActionModal.tsx
+++ b/client/src/components/_common/ActionModal.tsx
@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import React, { FC } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 export interface ActionModalProps {
   modalVisible: boolean;
@@ -21,7 +22,7 @@ const ActionModal: FC<ActionModalProps> = ({ modalVisible, message, cancelTestRu
       <DialogTitle>User Action Required</DialogTitle>
       <DialogContent>
         <DialogContentText component="div">
-          <ReactMarkdown>{message || ''}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message || ''}</ReactMarkdown>
         </DialogContentText>
       </DialogContent>
       <DialogActions>