From e2773e904d5e72decd1e4f9e78372d851e600ded Mon Sep 17 00:00:00 2001 From: Alyssa Wang Date: Fri, 29 Nov 2024 15:46:48 -0500 Subject: [PATCH] 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 --- client/src/components/InputsModal/InputsModal.tsx | 4 ++-- .../src/components/SuiteOptionsPage/SuiteOptionsPage.tsx | 6 +++--- .../ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx | 4 ++-- .../TestSuite/TestSuiteDetails/TestGroupCard.tsx | 4 ++-- .../TestGroupListItem/NestedDescriptionPanel.tsx | 6 +++--- .../TestSuiteDetails/TestListItem/MessageList.tsx | 4 ++-- .../TestSuiteDetails/TestListItem/TestListItem.tsx | 6 +++--- .../TestSuiteDetails/TestListItem/TestRunDetail.tsx | 4 ++-- client/src/components/_common/ActionModal.tsx | 4 ++-- client/src/index.css | 9 +++++++++ dev_suites/dev_demo_ig_stu1/groups/demo_group.rb | 5 +++++ 11 files changed, 35 insertions(+), 21 deletions(-) diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx index 0c4cce1fb..142fad170 100644 --- 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 = ({
- {instructions} + {instructions} {inputType === 'Field' ? ( diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx index 9a32e2a29..66fe11998 100644 --- 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 = ({ testSuite }) => { wordBreak: 'break-word', }} > - + {testSuite?.suite_summary || testSuite?.description || ''} - + diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx index 5474bfbc5..92216d8b2 100644 --- 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 = ({ testSuite: ru {messages.length > 0 ? ( messages.map((message, index) => ( - {message.message} + {message.message} )) ) : ( diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupCard.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupCard.tsx index 1c956280b..76f7eab0d 100644 --- 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 = ({ children, runnable, runTests, v // render markdown once on mount - it's too slow with re-rendering const description = useMemo(() => { return runnable.description ? ( - {runnable.description} + {runnable.description} ) : undefined; }, [runnable.description]); diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx index 7fd5878ab..5223528a3 100644 --- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NestedDescriptionPanel.tsx +++ b/client/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 = ({ testGroup }) title={descriptionMouseHover ? '' : `${testGroup.id}-description-detail`} className={classes.descriptionDetailContainer} > - {testGroup.description as string} - + diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/MessageList.tsx index 4b0d0257b..e6e3a2f1b 100644 --- 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 = ({ messages }) => { - {message.message} + {message.message} ); diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestListItem.tsx index f9db63495..852c4bc1c 100644 --- 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 = ({ primary={testLabel} secondary={ test.result?.result_message && ( - + {test.result.result_message} - + ) } secondaryTypographyProps={{ component: 'div' }} diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx index a5a5c841c..5f3a75a91 100644 --- 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 = ({ {useMemo( () => ( - {test.description || ''} + {test.description || ''} ), [test.description], )} diff --git a/client/src/components/_common/ActionModal.tsx b/client/src/components/_common/ActionModal.tsx index 5647d37ef..2bbb70ea4 100644 --- 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 = ({ modalVisible, message, cancelTestRu User Action Required - {message || ''} + {message || ''} diff --git a/client/src/index.css b/client/src/index.css index 84dfdd1df..514cc7d41 100644 --- 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 index a6109c1a8..19788486c 100644 --- 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