Bump react-markdown and remark-gfm packages to resolve transitive dep vulns (#38411)

# Checklist for submitter

## Testing

- [ ] Added/updated automated tests

- [ ] QA'd all new/changed functionality manually

---------

Co-authored-by: Gabriel Hernandez <ghernandez345@gmail.com>

frontend/components/FleetMarkdown/FleetMarkdown.tsx

@@ -23,58 +23,70 @@ const FleetMarkdown = ({ markdown, className, name }: IFleetMarkdownProps) => {
   const classNames = classnames(baseClass, className);
 
   return (
-    <ReactMarkdown
-      className={classNames}
-      // enables some more markdown features such as direct urls and strikethroughts.
-      // more info here: https://github.com/remarkjs/remark-gfm
-      remarkPlugins={[remarkGfm]}
-      components={{
-        a: ({ href = "", children }) => {
-          return <CustomLink text={String(children)} url={href} newTab />;
-        },
+    <div className={classNames}>
+      <ReactMarkdown
+        // enables some more markdown features such as direct urls and strikethroughs.
+        // more info here: https://github.com/remarkjs/remark-gfm
+        remarkPlugins={[remarkGfm]}
+        components={{
+          a: ({ href = "", children }) => {
+            return <CustomLink text={String(children)} url={href} newTab />;
+          },
 
-        // Overrides code display to use SQLEditor with Readonly overrides.
-        code: ({ inline, children, ...props }) => {
-          const onEditorBlur = (editor?: IAceEditor) => {
-            editor && editor.clearSelection();
-          };
+          // handles code blocks
+          pre: ({ children }) => {
+            const onEditorBlur = (editor?: IAceEditor) => {
+              editor && editor.clearSelection();
+            };
 
-          const onEditorLoad = (editor: IAceEditor) => {
-            editor.setOptions({
-              indentedSoftWrap: false, // removes automatic indentation when wrapping
-            });
+            const onEditorLoad = (editor: IAceEditor) => {
+              editor.setOptions({
+                indentedSoftWrap: false, // removes automatic indentation when wrapping
+              });
 
-            // removes focus UI styling
-            editor.renderer.visualizeFocus = noop;
-          };
+              // removes focus UI styling
+              editor.renderer.visualizeFocus = noop;
+            };
 
-          // Dont render the fleet ace code block for simple inline code blocks.
-          // e.g. `x = 1`
-          if (inline) {
+            // Extract the text content from the code element inside pre
+            // children is typically <code>...</code>
+            let codeContent = "";
+            if (React.isValidElement(children)) {
+              const codeChildren = children.props?.children;
+              codeContent = String(codeChildren || "");
+            } else {
+              codeContent = String(children || "");
+            }
+
+            // full code blocks we want to use Fleet Ace.
+            // e.g. ```SELECT * FROM USERS```
+            return (
+              <pre>
+                <SQLEditor
+                  wrapperClassName={`${baseClass}__ace-display`}
+                  // Remove trailing newline added by markdown parser, preserving newlines within the code block
+                  value={codeContent.replace(/\n$/, "")}
+                  showGutter={false}
+                  onBlur={onEditorBlur}
+                  onLoad={onEditorLoad}
+                  style={{ border: "none" }}
+                  wrapEnabled
+                  readOnly
+                  name={name}
+                />
+              </pre>
+            );
+          },
+
+          // Inline code only (since block code is now handled by `pre`)
+          code: ({ children, ...props }) => {
             return <code {...props}>{children}</code>;
-          }
-
-          // full code blocks we want to use Fleet Ace.
-          // e.g. ```SELECT * FROM USERS```
-          return (
-            <SQLEditor
-              wrapperClassName={`${baseClass}__ace-display`}
-              // Remove trailing newline added by markdown parser, preserving newlines within the code block
-              value={String(children).replace(/\n$/, "")}
-              showGutter={false}
-              onBlur={onEditorBlur}
-              onLoad={onEditorLoad}
-              style={{ border: "none" }}
-              wrapEnabled
-              readOnly
-              name={name}
-            />
-          );
-        },
-      }}
-    >
-      {markdown}
-    </ReactMarkdown>
+          },
+        }}
+      >
+        {markdown}
+      </ReactMarkdown>
+    </div>
   );
 };
 

frontend/components/PaginatedList/PaginatedList.tsx

@@ -4,9 +4,9 @@ import React, {
   useImperativeHandle,
   forwardRef,
   Ref,
+  ReactElement,
 } from "react";
 import classnames from "classnames";
-import { ReactElement } from "react-markdown/lib/react-markdown";
 import Checkbox from "components/forms/fields/Checkbox";
 import Spinner from "components/Spinner";
 import TooltipTruncatedText from "components/TooltipTruncatedText";

frontend/pages/policies/ManagePoliciesPage/components/PoliciesPaginatedList/PoliciesPaginatedList.tsx

@@ -6,8 +6,8 @@ import React, {
   useContext,
   forwardRef,
   Ref,
+  ReactElement,
 } from "react";
-import { ReactElement } from "react-markdown/lib/react-markdown";
 import { AppContext } from "context/app";
 import PaginatedList, { IPaginatedListHandle } from "components/PaginatedList";
 import { useQuery } from "react-query";

frontend/test/jest.config.js

@@ -5,7 +5,7 @@ const esModules = [
   "react-markdown",
   "vfile",
   "vfile-message",
-  "micromark.+",
+  "micromark.*",
   "unist-.+",
   "unified",
   "bail",
@@ -25,6 +25,18 @@ const esModules = [
   "escape-string-regexp",
   "markdown-table",
   "trim-lines",
+  "hast-util-.+",
+  "html-url-attributes",
+  "devlop",
+  "estree-.+",
+  "estree-util-.+",
+  "periscopic",
+  "is-reference",
+  "stringify-entities",
+  "character-entities-html4",
+  "character-entities-legacy",
+  "zwitch",
+  "longest-streak",
 ].join("|");
 
 const config = {
@@ -36,6 +48,9 @@ const config = {
       "<rootDir>/frontend/__mocks__/fileMock.js",
     "\\.(sh|ps1)$": "<rootDir>/frontend/__mocks__/fileMock.js",
     "\\.(css|scss|sass)$": "identity-obj-proxy",
+    "#minpath": "<rootDir>/node_modules/vfile/lib/minpath.browser.js",
+    "#minproc": "<rootDir>/node_modules/vfile/lib/minproc.browser.js",
+    "#minurl": "<rootDir>/node_modules/vfile/lib/minurl.browser.js",
     "^node-sql-parser$":
       "<rootDir>/node_modules/@sgress454/node-sql-parser/umd/sqlite.umd.js",
   },

package.json

@@ -43,7 +43,7 @@
     "react-ace": "9.3.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
-    "react-markdown": "8.0.3",
+    "react-markdown": "10.1.0",
     "react-query": "3.39.3",
     "react-router": "3.2.6",
     "react-router-transition": "1.2.1",
@@ -53,7 +53,7 @@
     "react-tabs": "3.2.3",
     "react-tooltip": "4.2.21",
     "react-tooltip-5": "npm:react-tooltip@5.29.1",
-    "remark-gfm": "3.0.1",
+    "remark-gfm": "4.0.1",
     "sass": "1.83.4",
     "select": "1.1.2",
     "sockjs-client": "1.6.1",