chore: bump the react group in /site with 4 updates (#10869)

* chore: bump the react group in /site with 3 updates

Bumps the react group in /site with 3 updates: [react-helmet-async](https://github.com/staylor/react-helmet-async), [react-markdown](https://github.com/remarkjs/react-markdown) and [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom).


Updates `react-helmet-async` from 1.3.0 to 2.0.1
- [Release notes](https://github.com/staylor/react-helmet-async/releases)
- [Commits](https://github.com/staylor/react-helmet-async/commits)

Updates `react-markdown` from 8.0.7 to 9.0.1
- [Release notes](https://github.com/remarkjs/react-markdown/releases)
- [Changelog](https://github.com/remarkjs/react-markdown/blob/main/changelog.md)
- [Commits](https://github.com/remarkjs/react-markdown/compare/8.0.7...9.0.1)

Updates `react-router-dom` from 6.16.0 to 6.20.0
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.20.0/packages/react-router-dom)

---
updated-dependencies:
- dependency-name: react-helmet-async
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: react
- dependency-name: react-markdown
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: react
- dependency-name: react-router-dom
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: react
...

Signed-off-by: dependabot[bot] <support@github.com>

* fix lint

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Atif Ali <atif@coder.com>

site/package.json

@@ -71,15 +71,15 @@
     "react-confetti": "6.1.0",
     "react-date-range": "1.4.0",
     "react-dom": "18.2.0",
-    "react-helmet-async": "1.3.0",
-    "react-markdown": "8.0.7",
+    "react-helmet-async": "2.0.1",
+    "react-markdown": "9.0.1",
     "react-query": "npm:@tanstack/react-query@4.35.3",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.20.0",
     "react-syntax-highlighter": "15.5.0",
     "react-use": "17.4.0",
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "1.8.8",
-    "remark-gfm": "3.0.1",
+    "remark-gfm": "4.0.0",
     "rollup-plugin-visualizer": "5.9.0",
     "semver": "7.5.3",
     "ts-proto": "1.164.0",

site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

@@ -57,7 +57,6 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
       >
         <ReactMarkdown
           allowedElements={markdownElementsAllowed}
-          linkTarget="_blank"
           unwrapDisallowed
         >
           {message}

site/src/components/Markdown/Markdown.tsx

@@ -12,7 +12,7 @@ import ReactMarkdown, { type Options } from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import gfm from "remark-gfm";
 import colors from "theme/tailwind";
-import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 interface MarkdownProps {
   /**
@@ -44,6 +44,9 @@ export const Markdown: FC<MarkdownProps> = (props) => {
         ),
 
         pre: ({ node, children }) => {
+          if (!node || !node.children) {
+            return <pre>{children}</pre>;
+          }
           const firstChild = node.children[0];
           // When pre is wrapping a code, the SyntaxHighlighter is already going
           // to wrap it with a pre so we don't need it
@@ -53,19 +56,16 @@ export const Markdown: FC<MarkdownProps> = (props) => {
           return <pre>{children}</pre>;
         },
 
-        code: ({ node, inline, className, children, style, ...props }) => {
+        code: ({ node, className, children, style, ref, ...restProps }) => {
           const match = /language-(\w+)/.exec(className || "");
 
-          return !inline && match ? (
+          return match ? (
             <SyntaxHighlighter
-              style={darcula}
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
+              style={dracula}
               language={match[1].toLowerCase() ?? "language-shell"}
               useInlineStyles={false}
-              // Use inline styles does not work correctly
-              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329
               codeTagProps={{ style: {} }}
-              {...props}
+              {...restProps} // Exclude 'ref' from being passed here
             >
               {String(children)}
             </SyntaxHighlighter>
@@ -136,7 +136,7 @@ interface MarkdownInlineProps {
 }
 
 /**
- * Supports a strict subset of Markdown that bahaves well as inline/confined content.
+ * Supports a strict subset of Markdown that behaves well as inline/confined content.
  */
 export const InlineMarkdown: FC<MarkdownInlineProps> = (props) => {
   const { children, className, components = {} } = props;