Upgrade frontend dependencies

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/package.json

@@ -3,32 +3,33 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "apexcharts": "^3.43.0",
+    "apexcharts": "^3.44.0",
     "classnames": "^2.3.2",
-    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.1.17",
+    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.1.18",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "nth-check": "^2.0.1",
     "react": "^18.0.2",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.0.2",
     "react-icons": "^4.11.0",
-    "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.17.0",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-markdown": "^9.0.0",
+    "react-router-dom": "^6.18.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-external-links": "^3.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.5",
-    "@types/lodash": "^4.14.199",
-    "@types/node": "^20.8.6",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
+    "@types/jest": "^29.5.7",
+    "@types/lodash": "^4.14.200",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.36",
+    "@types/react-dom": "^18.2.14",
     "@types/react-router-dom": "^5.3.2",
-    "@types/react-syntax-highlighter": "^15.5.8",
+    "@types/react-syntax-highlighter": "^15.5.9",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -37,12 +38,12 @@
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "react-scripts": "5.0.1",
-    "sass": "^1.69.3",
+    "sass": "^1.69.5",
     "shx": "^0.3.4",
     "typescript": "^5.2.2"
   },
   "resolutions": {
-    "react-scripts/**/core-js-pure": "3.32.1",
+    "react-scripts/**/core-js-pure": "3.33.2",
     "react-scripts/**/nth-check": "^2.0.1"
   },
   "proxy": "http://127.0.0.1:8000",

web/src/layout/detail/index.test.tsx

@@ -9,6 +9,7 @@ import Detail from './index';
 jest.mock('../../utils/updateMetaIndex');
 jest.mock('../../api');
 jest.mock('react-markdown', () => () => <div />);
+jest.mock('rehype-external-links', () => () => <></>);
 
 jest.mock('react-router-dom', () => ({
   ...(jest.requireActual('react-router-dom') as any),

web/src/layout/detail/report/OptionCell.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { ReportOption } from '../../../types';
 import OptionCell from './OptionCell';
 jest.mock('react-markdown', () => () => <div>markdown</div>);
+jest.mock('rehype-external-links', () => () => <></>);
 
 const defaultProps = {
   label: ReportOption.Adopters,

web/src/layout/detail/report/OptionCell.tsx

@@ -7,6 +7,7 @@ import { FiExternalLink } from 'react-icons/fi';
 import { MdRemoveCircleOutline } from 'react-icons/md';
 import { RiErrorWarningLine } from 'react-icons/ri';
 import ReactMarkdown from 'react-markdown';
+import rehypeExternalLinks from 'rehype-external-links';
 
 import { AppContext } from '../../../context/AppContextProvider';
 import { REPORT_OPTIONS } from '../../../data';
@@ -104,9 +105,9 @@ const OptionCell = (props: Props) => {
           >
             <div ref={details} className={`overflow-auto pb-1 ${styles.detailsWrapper} ${styles.visibleScroll}`}>
               <ReactMarkdown
+                rehypePlugins={[[rehypeExternalLinks, { rel: ['nofollow noreferrer noopener'], target: '_blank' }]]}
                 className={styles.detailsContent}
                 children={props.check.details!}
-                linkTarget="_blank"
                 components={{
                   h1: Heading,
                   h2: Heading,

web/src/layout/detail/report/Row.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { ScoreType } from '../../../types';
 import Row from './Row';
 jest.mock('react-markdown', () => () => <div />);
+jest.mock('rehype-external-links', () => () => <></>);
 
 const defaultProps = {
   repoName: 'repo',

web/src/layout/detail/repositories/index.test.tsx

@@ -5,6 +5,7 @@ import ReactRouter, { BrowserRouter as Router } from 'react-router-dom';
 import { Repository } from '../../../types';
 import RepositoriesList from './index';
 jest.mock('react-markdown', () => () => <div />);
+jest.mock('rehype-external-links', () => () => <></>);
 
 const mockUseNavigate = jest.fn();