[frontend] Fix markdown not correctly display (#14640)

opencti-platform/opencti-front/src/private/components/common/drawer/HistoryDrawer.tsx

@@ -7,6 +7,7 @@ import ChangesTable, { Change } from '../../../../components/common/table/Change
 import Loader from '../../../../components/Loader';
 import useAuth from '../../../../utils/hooks/useAuth';
 import { HistoryDrawerQuery } from './__generated__/HistoryDrawerQuery.graphql';
+import MarkdownDisplay from '../../../../components/MarkdownDisplay';
 
 interface HistoryDrawerProps {
   open: boolean;
@@ -58,7 +59,11 @@ const HistoryDrawerContent: FunctionComponent<HistoryDrawerContentProps> = ({ lo
       <Alert
         content={(
           <>
-            <strong>{data?.log?.user?.name}</strong> {data?.log?.context_data?.message ?? ''}
+            <MarkdownDisplay
+              content={data?.log?.context_data?.message ?? ''}
+              remarkGfmPlugin={true}
+              commonmark={true}
+            />
           </>
         )}
       />

opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectHistoryLine.jsx

@@ -155,7 +155,11 @@ const StixCoreObjectHistoryLine = ({ node, isRelation }) => {
           </div>
           <Tooltip sx={{ maxWidth: '80%', lineHeight: 2, padding: 10 }} title={<><b>{data.user?.name}</b> {data.context_data.message}</>}>
             <div style={{ height: '100%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              <b>{data.user?.name}</b> {data.context_data.message}
+              <MarkdownDisplay
+                content={`\`${data.user?.name}\` ${data.context_data.message}`}
+                remarkGfmPlugin={true}
+                commonmark={true}
+              />
             </div>
           </Tooltip>
           {hasExternalRefs && (

opencti-platform/opencti-front/src/private/components/settings/activity/audit/AuditDrawer.tsx

@@ -11,6 +11,7 @@ import { useFormatter } from '../../../../../components/i18n';
 import { useGenerateAuditMessage } from '../../../../../utils/history';
 import useAuth from '../../../../../utils/hooks/useAuth';
 import { AuditDrawerQuery } from './__generated__/AuditDrawerQuery.graphql';
+import MarkdownDisplay from '../../../../../components/MarkdownDisplay';
 
 interface AuditDrawerProps {
   open: boolean;
@@ -77,7 +78,13 @@ const AuditDrawerContent: FunctionComponent<{ logId: string }> = ({ logId }) =>
       <Alert
         content={(
           <>
-            <strong>{data?.audit?.user?.name}</strong> {message}
+            <div>
+              <MarkdownDisplay
+                content={`\`${data?.audit?.user?.name}\` ${message}`}
+                remarkGfmPlugin={true}
+                commonmark={true}
+              />
+            </div>
           </>
         )}
       />

opencti-platform/opencti-front/src/private/components/settings/activity/audit/AuditLine.tsx

@@ -16,6 +16,7 @@ import { useGenerateAuditMessage } from '../../../../../utils/history';
 import { HandleAddFilter } from '../../../../../utils/hooks/useLocalStorage';
 import AuditDrawer from './AuditDrawer';
 import { EMPTY_VALUE } from '../../../../../utils/String';
+import MarkdownDisplay from '../../../../../components/MarkdownDisplay';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -135,7 +136,11 @@ export const AuditLine: FunctionComponent<AuditLineProps> = ({
                 style={{ width: dataColumns.message.width }}
               >
                 <span style={{ color }}>
-                  <b>{data.user?.name}</b> {message}
+                  <MarkdownDisplay
+                    content={`\`${data.user?.name}\` ${message}`}
+                    remarkGfmPlugin={true}
+                    commonmark={true}
+                  />
                 </span>
               </div>
             </div>

opencti-platform/opencti-front/tests_e2e/incidentResponse/incidentResponse.spec.ts

@@ -172,7 +172,7 @@ test('Incident Response Creation', { tag: ['@ce'] }, async ({ page }) => {
   const updateDate = incidentResponseDetailsPage.getTextForHeading('Modification date', now);
   await expect(updateDate).toBeVisible();
 
-  const historyDescription = cardPage.getTextInCard('Most recent history', `creates a Case-Incident \`${incidentResponseName}\``);
+  const historyDescription = cardPage.getTextInCard('Most recent history', `creates a Case-Incident ${incidentResponseName}`);
   await expect(historyDescription).toBeVisible();
   const historyDate = cardPage.getTextInCard('Most recent history', format(new Date(), 'MMM d, yyyy'));
   await expect(historyDate).toBeVisible();

opencti-platform/opencti-front/tests_e2e/report/report.spec.ts

@@ -181,7 +181,7 @@ test('Report CRUD', { tag: ['@report', '@knowledge', '@mutation', '@ce'] }, asyn
   const updateDate = reportDetailsPage.getTextForHeading('Modification date', now);
   await expect(updateDate).toBeVisible();
 
-  const historyDescription = reportDetailsPage.getTextForCard('Most recent history', `creates a Report \`${reportName}\``);
+  const historyDescription = reportDetailsPage.getTextForCard('Most recent history', `creates a Report ${reportName}`);
   await expect(historyDescription).toBeVisible();
   const historyDate = reportDetailsPage.getTextForCard('Most recent history', format(new Date(), 'MMM d, yyyy'));
   await expect(historyDate).toBeVisible();