Merge pull request #933 from docat-org/feature/web-cleanup

Cleanup dependencies a bit more

Author: fliiiix

web/package.json

@@ -8,25 +8,15 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
-    "@types/lodash": "^4.17.24",
-    "@types/node": "^25.4.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.3",
     "fuse.js": "^7.1.0",
-    "jsdom": "^28.1.0",
-    "lodash": "^4.17.23",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "react-router": "^7.13.1",
     "react-router-dom": "^7.13.1",
     "semver": "^7.7.4",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^4.0.18",
-    "web-vitals": "^5.1.0"
+    "vite": "^7.3.1"
   },
   "scripts": {
     "start": "VITE_DOCAT_VERSION=$(git describe --tags --always) vite",
@@ -48,14 +38,20 @@
     ]
   },
   "devDependencies": {
+    "@vitejs/plugin-react-swc": "^4.3.0",
     "@eslint/js": "^9.17.0",
     "@types/semver": "^7.7.1",
+    "@types/node": "^25.4.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^28.1.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.4.0",
     "prettier": "^3.8.1",
-    "typescript-eslint": "^8.57.0"
+    "typescript-eslint": "^8.57.0",
+    "vitest": "^4.0.18"
   }
 }

web/src/components/DocumentControlButtons.tsx

@@ -19,6 +19,7 @@ interface Props {
   version: string
   versions: ProjectDetails[]
   onVersionChange: (version: string) => void
+  getShareUrl: (options: { useLatest: boolean, hideUi: boolean }) => string
 }
 
 export default function DocumentControlButtons(props: Props): React.JSX.Element {
@@ -31,25 +32,6 @@ export default function DocumentControlButtons(props: Props): React.JSX.Element
   // Cannot copy when page is served over HTTP
   const canCopy = navigator.clipboard !== undefined
 
-  const getShareUrl = (): string => {
-    // adapt the current URL so we can leave Docs.tsx's state as refs
-    // (which means if the page was passed down as a prop it wouldn't update correctly)
-
-    let url = window.location.href
-
-    if (shareModalUseLatest) {
-      url = url.replace(props.version, 'latest')
-    }
-
-    if (shareModalHideUi) {
-      const urlObject = new URL(url)
-      urlObject.search = 'hide-ui'
-      url = urlObject.toString()
-    }
-
-    return url
-  }
-
   return (
     <div className={styles.controls}>
       <Tooltip title="Docs Overview" placement="top" arrow>
@@ -111,14 +93,14 @@ export default function DocumentControlButtons(props: Props): React.JSX.Element
       >
         <div className={styles['share-modal']}>
           <div className={styles['share-modal-link-container']}>
-            <p className={styles['share-modal-link']}>{getShareUrl()}</p>
+            <p className={styles['share-modal-link']}>{props.getShareUrl({ useLatest: shareModalUseLatest, hideUi: shareModalHideUi })}</p>
             {canCopy && (
               <div className={styles['share-modal-copy-container']}>
                 <button
                   className={styles['share-modal-copy']}
                   onClick={() => {
                     void (async () => {
-                      await navigator.clipboard.writeText(getShareUrl())
+                      await navigator.clipboard.writeText(props.getShareUrl({ useLatest: shareModalUseLatest, hideUi: shareModalHideUi }))
                     })()
                   }}
                 >

web/src/components/IFrame.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { uniqueId } from 'lodash'
+import { generateKey } from '../data-providers/RandomId'
 
 import styles from '../style/components/IFrame.module.css'
 interface Props {
@@ -146,7 +146,7 @@ export default function IFrame(props: Props): React.JSX.Element {
   return (
     <iframe
       ref={iFrameRef}
-      key={uniqueId()}
+      key={generateKey()}
       className={styles['docs-iframe']}
       src={props.src}
       title="docs"

web/src/components/InfoBanner.tsx

@@ -1,7 +1,7 @@
 import { Alert, Snackbar } from '@mui/material'
-import { uniqueId } from 'lodash'
 import React, { useState } from 'react'
 import { type Message } from '../data-providers/MessageBannerProvider'
+import { generateKey } from '../data-providers/RandomId'
 
 interface Props {
   message: Message
@@ -18,7 +18,7 @@ export default function Banner(props: Props): React.JSX.Element {
 
   return (
     <Snackbar
-      key={uniqueId()}
+      key={generateKey()}
       open={show && props.message.content != null}
       autoHideDuration={props.message.showMs}
       onClose={() => {

web/src/data-providers/RandomId.tsx

@@ -0,0 +1,10 @@
+// Generate a mostly random key
+export const generateKey = () => {
+  // Use the native function not available in http mode
+  if (window.crypto && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+
+  // Fallback
+  return Date.now().toString(36) + Math.random().toString(36).substring(2);
+}