FI-3019: Add custom blockquote styles (#556)

* move markdown to css rule * rename ReactMarkdown to Markdown * Add example back into demo suite to see what it looks like. --------- Co-authored-by: Rob Scanlon <robscanlon@gmail.com>
inferno-framework · Nov 29, 2024 · e2773e9 · e2773e9
1 parent 18bc135
commit e2773e9
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 21 deletions.
diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
@@ -15,7 +15,7 @@ import {
   IconButton,
 } from '@mui/material';
 import { Close } from '@mui/icons-material';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Runnable, RunnableType, TestInput } from '~/models/testSuiteModels';
 import CopyButton from '~/components/_common/CopyButton';
@@ -192,7 +192,7 @@ const InputsModal: FC<InputsModalProps> = ({
       <DialogContent>
         <main>
           <DialogContentText component="div" sx={{ wordBreak: 'break-word' }}>
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{instructions}</ReactMarkdown>
+            <Markdown remarkPlugins={[remarkGfm]}>{instructions}</Markdown>
           </DialogContentText>
           {inputType === 'Field' ? (
             <InputFields inputs={inputs} inputsMap={inputsMap} setInputsMap={handleSetInputsMap} />

diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Typography, Box, Container } from '@mui/material';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import { useSnackbar } from 'notistack';
 import { postTestSessions } from '~/api/TestSessionApi';
 import { TestSuite, TestSession, SuiteOption } from '~/models/testSuiteModels';
@@ -165,9 +165,9 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
               wordBreak: 'break-word',
             }}
           >
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            <Markdown remarkPlugins={[remarkGfm]}>
               {testSuite?.suite_summary || testSuite?.description || ''}
-            </ReactMarkdown>
+            </Markdown>
           </Typography>
         </Box>
       </Box>

diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import { Box, Card, Chip, Divider, Tabs, Typography } from '@mui/material';
 import { Message, TestSuite } from '~/models/testSuiteModels';
 import CustomTab from '~/components/_common/CustomTab';
@@ -25,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 remarkPlugins={[remarkGfm]}>{message.message}</ReactMarkdown>
+            <Markdown remarkPlugins={[remarkGfm]}>{message.message}</Markdown>
           </Card>
         ))
       ) : (

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupCard.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupCard.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Box, Card, Divider, Typography } from '@mui/material';
 import useStyles from './styles';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import { TestGroup, RunnableType, TestSuite } from '~/models/testSuiteModels';
 import InputOutputList from './TestListItem/InputOutputList';
 import ResultIcon from './ResultIcon';
@@ -24,7 +24,7 @@ const TestGroupCard: FC<TestGroupCardProps> = ({ children, runnable, runTests, v
   // render markdown once on mount - it's too slow with re-rendering
   const description = useMemo(() => {
     return runnable.description ? (
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>{runnable.description}</ReactMarkdown>
+      <Markdown remarkPlugins={[remarkGfm]}>{runnable.description}</Markdown>
     ) : undefined;
   }, [runnable.description]);
 

diff --git a/...nt/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx b/...nt/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { TestGroup } from '~/models/testSuiteModels';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 interface NestedDescriptionPanelProps {
@@ -58,12 +58,12 @@ const NestedDescriptionPanel: FC<NestedDescriptionPanelProps> = ({ testGroup })
           title={descriptionMouseHover ? '' : `${testGroup.id}-description-detail`}
           className={classes.descriptionDetailContainer}
         >
-          <ReactMarkdown
+          <Markdown
             remarkPlugins={[remarkGfm]}
             className={`${classes.accordionDetail} ${classes.description}`}
           >
             {testGroup.description as string}
-          </ReactMarkdown>
+          </Markdown>
         </AccordionDetails>
       </Accordion>
     </Box>

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import useStyles from './styles';
 import { Table, TableBody, TableRow, TableCell, Typography, TableHead, Box } from '@mui/material';
 import { Message } from '~/models/testSuiteModels';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 
 import MessageType from './MessageType';
 import { sortByMessageType } from './helper';
@@ -35,7 +35,7 @@ const MessageList: FC<MessageListProps> = ({ messages }) => {
           <MessageType type={message.type} />
         </TableCell>
         <TableCell className={classes.messageMessage}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.message}</ReactMarkdown>
+          <Markdown remarkPlugins={[remarkGfm]}>{message.message}</Markdown>
         </TableCell>
       </TableRow>
     );

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx
@@ -16,7 +16,7 @@ import Error from '@mui/icons-material/Error';
 import Warning from '@mui/icons-material/Warning';
 import Info from '@mui/icons-material/Info';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import TestRunButton from '~/components/TestSuite/TestRunButton/TestRunButton';
 import MessageList from './MessageList';
 import RequestList from './RequestList';
@@ -85,9 +85,9 @@ const TestListItem: FC<TestListItemProps> = ({
       primary={testLabel}
       secondary={
         test.result?.result_message && (
-          <ReactMarkdown remarkPlugins={[remarkGfm]} className={classes.resultMessageMarkdown}>
+          <Markdown remarkPlugins={[remarkGfm]} className={classes.resultMessageMarkdown}>
             {test.result.result_message}
-          </ReactMarkdown>
+          </Markdown>
         )
       }
       secondaryTypographyProps={{ component: 'div' }}

diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx
@@ -9,7 +9,7 @@ import MessageList from '~/components/TestSuite/TestSuiteDetails/TestListItem/Me
 import RequestList from '~/components/TestSuite/TestSuiteDetails/TestListItem/RequestList';
 import InputOutputList from '~/components/TestSuite/TestSuiteDetails/TestListItem/InputOutputList';
 import useStyles from './styles';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 interface TestRunDetailProps {
@@ -43,7 +43,7 @@ const TestRunDetail: FC<TestRunDetailProps> = ({
       <Typography variant="subtitle2" component="div">
         {useMemo(
           () => (
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{test.description || ''}</ReactMarkdown>
+            <Markdown remarkPlugins={[remarkGfm]}>{test.description || ''}</Markdown>
           ),
           [test.description],
         )}

diff --git a/client/src/components/_common/ActionModal.tsx b/client/src/components/_common/ActionModal.tsx
@@ -7,7 +7,7 @@ import {
   DialogTitle,
 } from '@mui/material';
 import React, { FC } from 'react';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 export interface ActionModalProps {
@@ -22,7 +22,7 @@ const ActionModal: FC<ActionModalProps> = ({ modalVisible, message, cancelTestRu
       <DialogTitle>User Action Required</DialogTitle>
       <DialogContent>
         <DialogContentText component="div">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message || ''}</ReactMarkdown>
+          <Markdown remarkPlugins={[remarkGfm]}>{message || ''}</Markdown>
         </DialogContentText>
       </DialogContent>
       <DialogActions>

diff --git a/client/src/index.css b/client/src/index.css
@@ -25,6 +25,15 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+blockquote {
+  /* Left bar should match theme grayLight */
+  border-left: 0.25em solid #F0F2F1;
+  /* Text should match theme grayDark */
+  color: #616161;
+  margin: 0;
+  padding-left: 8px;
+}
+
 /* Keyboard-only focus indicator */
 button:focus-visible {
   border: 1px solid #707070;

diff --git a/dev_suites/dev_demo_ig_stu1/groups/demo_group.rb b/dev_suites/dev_demo_ig_stu1/groups/demo_group.rb
@@ -17,6 +17,11 @@ class DemoGroup < Inferno::TestGroup
 
     This is a dummy canonical link http://hl7.org/fhir/ValueSet/my-valueset|0.8 that should not be
     interpreted as a table
+
+    > This is a blockquote.
+    >
+    > Blockquotes are useful for quoting standards or other references.
+
     )
 
     # Inputs and outputs