deps: ui: minor updates, remove react-syntax-highlighter (#7162)

* deps: remove react-syntax-highlighter

* deps: yarn upgrade

Author: jharvey10

internal/web/ui/package.json

@@ -2,18 +2,22 @@
   "name": "grafana-agent",
   "private": true,
   "dependencies": {
+    "@babel/helpers": "^7.26.10",
+    "@babel/runtime": "^7.26.10",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@svgr/webpack": "^8.0.1",
     "d3": "^7.8.4",
     "d3-dag": "^0.11.5",
     "d3-zoom": "^3.0.0",
     "normalize.css": "^8.0.1",
+    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
-    "react-syntax-highlighter": "^15.5.0",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "ws": "^8.18.1"
   },
   "devDependencies": {
     "@types/d3": "^7.4.0",

internal/web/ui/src/features/component/ComponentBody.tsx

@@ -1,9 +1,7 @@
-import React, { Fragment } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Fragment } from 'react';
 
 import { riverStringify } from '../river-js/stringify';
 
-import { style } from './style';
 import Table from './Table';
 import { PartitionedBody } from './types';
 
@@ -24,11 +22,7 @@ const ComponentBody = ({ partition }: ComponentBodyProps) => {
         <tr key={name}>
           <td className={styles.nameColumn}>{name}</td>
           <td>
-            <pre className={styles.pre}>
-              <SyntaxHighlighter language="javascript" style={style}>
-                {riverStringify(value)}
-              </SyntaxHighlighter>
-            </pre>
+            <pre className={styles.pre}>{riverStringify(value)}</pre>
           </td>
         </tr>
       );

internal/web/ui/src/features/component/style.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 
 // Object for react-syntax-highlighter's custom theme
+// NOTE: This is not currently used due to removal of react-syntax-highlighter to fix a security
+// issue.
 export const style: {
   [key: string]: React.CSSProperties;
 } = {