Update rest of web deps (#10588)

* Update easy deps

* Update shadcn deps

* Update date functions and fix breaking change

* Remove unused

web/package.json

@@ -34,23 +34,23 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "apexcharts": "^3.48.0",
-    "axios": "^1.6.2",
+    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.6.0",
     "hls.js": "^1.5.7",
     "idb-keyval": "^6.2.1",
-    "immer": "^10.0.3",
-    "lucide-react": "^0.359.0",
+    "immer": "^10.0.4",
+    "lucide-react": "^0.360.0",
     "monaco-yaml": "^5.1.1",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.3.0",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-day-picker": "^8.9.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.51.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.3",
     "react-swipeable": "^7.0.1",
@@ -60,11 +60,11 @@
     "react-zoom-pan-pinch": "^3.4.3",
     "recoil": "^0.7.7",
     "scroll-into-view-if-needed": "^3.1.0",
-    "sonner": "^1.4.0",
+    "sonner": "^1.4.41",
     "sort-by": "^1.2.0",
     "strftime": "^0.10.2",
     "swr": "^2.2.5",
-    "tailwind-merge": "^2.1.0",
+    "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.0",
     "vite-plugin-monaco-editor": "^1.1.0",
@@ -73,9 +73,9 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.1.5",
-    "@types/node": "^20.11.24",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
     "@types/react-icons": "^3.0.0",
     "@types/react-transition-group": "^4.4.10",
     "@types/strftime": "^0.9.8",
@@ -83,23 +83,23 @@
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/coverage-v8": "^1.4.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-vitest-globals": "^1.5.0",
     "fake-indexeddb": "^5.0.2",
     "jest-websocket-mock": "^2.5.0",
     "jsdom": "^24.0.0",
     "msw": "^2.2.9",
-    "postcss": "^8.4.37",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.4",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.2",
     "vitest": "^1.3.1"
   }
 }

web/src/utils/dateUtil.ts

@@ -197,12 +197,6 @@ export const formatUnixTimestampToDateTime = (
   }
 };
 
-interface DurationToken {
-  xSeconds: string;
-  xMinutes: string;
-  xHours: string;
-}
-
 /**
  * This function takes in start and end time in unix timestamp,
  * and returns the duration between start and end time in hours, minutes and seconds.
@@ -225,19 +219,12 @@ export const getDurationFromTimestamps = (
     }
     const start = fromUnixTime(start_time);
     const end = fromUnixTime(end_time);
-    const formatDistanceLocale: DurationToken = {
-      xSeconds: "{{count}}s",
-      xMinutes: "{{count}}m",
-      xHours: "{{count}}h",
-    };
-    const shortEnLocale = {
-      formatDistance: (token: keyof DurationToken, count: number) =>
-        formatDistanceLocale[token].replace("{{count}}", count.toString()),
-    };
     duration = formatDuration(intervalToDuration({ start, end }), {
       format: ["hours", "minutes", "seconds"],
-      locale: shortEnLocale,
-    });
+    })
+      .replace("hours", "h")
+      .replace("minutes", "m")
+      .replace("seconds", "s");
   }
   return duration;
 };