[ui] bump react 19

Author: Platane

quickwit/quickwit-ui/biome.json

@@ -12,9 +12,10 @@
       "style": "off",
       "complexity": "off",
       "correctness": {
-        "useExhaustiveDependencies": "warn"
+        "useExhaustiveDependencies": "off"
       },
       "suspicious": {
+        "noTsIgnore": "off",
         "useIterableCallbackReturn": "off",
         "noExplicitAny": "off",
         "noArrayIndexKey": "off"

quickwit/quickwit-ui/jest.config.js

@@ -1,5 +1,8 @@
 module.exports = {
-  setupFiles: ["react-app-polyfill/jsdom"], // polyfill jsdom api (such as fetch)
+  setupFiles: [
+    "react-app-polyfill/jsdom", // polyfill jsdom api (such as fetch)
+    "<rootDir>/jest/setup.js", // polyfill textEncode
+  ],
 
   setupFilesAfterEnv: ["@testing-library/jest-dom"],
 
@@ -11,13 +14,13 @@ module.exports = {
       "babel-jest",
       {
         presets: [["babel-preset-react-app", { runtime: "automatic" }]],
+        plugins: [
+          ["babel-plugin-transform-assets", { extensions: ["svg", "woff2"] }],
+        ],
         babelrc: false,
         configFile: false,
       },
     ],
-
-    // transform asset files
-    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-transform-stub",
   },
 
   moduleNameMapper: {

quickwit/quickwit-ui/jest/setup.js

@@ -0,0 +1 @@
+global.TextEncoder = require("util").TextEncoder;

quickwit/quickwit-ui/package.json

@@ -7,46 +7,50 @@
     "@babel/core": "7.28.5",
     "@babel/runtime": "7.28.4",
     "@biomejs/biome": "2.3.5",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@monaco-editor/react": "4.7.0",
-    "@mui/icons-material": "5.11.0",
-    "@mui/lab": "5.0.0-alpha.114",
-    "@mui/material": "5.11.2",
-    "@mui/system": "5.11.2",
-    "@mui/x-charts": "7.3.2",
-    "@mui/x-date-pickers": "5.0.12",
+    "@mui/icons-material": "7.3.5",
+    "@mui/lab": "7.0.1-beta.19",
+    "@mui/material": "7.3.5",
+    "@mui/system": "7.3.5",
+    "@mui/x-charts": "8.18.0",
+    "@mui/x-date-pickers": "8.18.0",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "30.0.0",
     "@types/node": "20.8.7",
-    "@types/react": "17.0.65",
-    "@types/react-dom": "17.0.18",
-    "@types/swagger-ui-react": "4.18.2",
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
+    "@types/swagger-ui-react": "5.18.0",
     "babel-jest": "30.2.0",
+    "babel-plugin-transform-assets": "1.0.2",
     "babel-preset-react-app": "10.1.0",
     "cypress": "13.3.2",
     "dayjs": "1.11.7",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-transform-stub": "2.0.0",
-    "monaco-editor": "0.34.1",
-    "react": "17.0.2",
+    "monaco-editor": "0.54.0",
+    "react": "19.2.0",
     "react-app-polyfill": "3.0.0",
-    "react-dom": "17.0.2",
-    "react-number-format": "4.9.4",
+    "react-dom": "19.2.0",
+    "react-monaco-editor": "0.59.0",
+    "react-number-format": "5.4.4",
+    "react-router": "7.9.6",
     "react-router-dom": "6.6.1",
-    "styled-components": "5.3.6",
-    "styled-icons": "10.47.0",
-    "swagger-ui-react": "5.9.0",
+    "styled-components": "6.1.19",
+    "styled-icons": "10.47.1",
+    "swagger-ui-react": "5.30.2",
     "typescript": "5.9.3",
     "vite": "7.2.2",
     "web-vitals": "2.1.4"
   },
   "resolutions": {
-    "@types/react": "17.0.65",
-    "@types/react-dom": "17.0.18"
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3"
   },
   "scripts": {
     "start": "vite",

quickwit/quickwit-ui/src/components/IndexSummary.tsx

@@ -17,7 +17,7 @@ import { Paper } from "@mui/material";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { FC, ReactNode } from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 import { Index } from "../utils/models";
 
 dayjs.extend(utc);
@@ -85,14 +85,14 @@ export function IndexSummary({ index }: { index: Index }) {
           {index.metadata.index_config.index_uri}
         </IndexRow>
         <IndexRow title="Number of published documents:">
-          <NumberFormat
+          <NumericFormat
             value={total_num_docs}
             displayType={"text"}
             thousandSeparator={true}
           />
         </IndexRow>
         <IndexRow title="Size of published documents (uncompressed):">
-          <NumberFormat
+          <NumericFormat
             value={total_uncompressed_num_bytes / 1000000}
             displayType={"text"}
             thousandSeparator={true}
@@ -104,7 +104,7 @@ export function IndexSummary({ index }: { index: Index }) {
           {published_splits.length}
         </IndexRow>
         <IndexRow title="Size of published splits:">
-          <NumberFormat
+          <NumericFormat
             value={total_num_bytes / 1000000}
             displayType={"text"}
             thousandSeparator={true}

quickwit/quickwit-ui/src/components/IndexesTable.tsx

@@ -23,7 +23,7 @@ import {
 } from "@mui/material";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { IndexMetadata } from "../utils/models";
 
 dayjs.extend(utc);

quickwit/quickwit-ui/src/components/JsonEditor.tsx

@@ -12,9 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { BeforeMount, Editor, OnMount } from "@monaco-editor/react";
 import { useCallback } from "react";
 import { EDITOR_THEME } from "../utils/theme";
-import { Editor, OnMount } from "@monaco-editor/react";
 
 export function JsonEditor({
   content,
@@ -47,9 +47,9 @@ export function JsonEditor({
     [resizeOnMount],
   );
 
-  function beforeMount(monaco: any) {
+  const beforeMount: BeforeMount = (monaco) => {
     monaco.editor.defineTheme("quickwit-light", EDITOR_THEME);
-  }
+  };
 
   return (
     <Editor

quickwit/quickwit-ui/src/components/QueryEditor/QueryEditor.tsx

@@ -12,18 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Editor } from "@monaco-editor/react";
 import { Box } from "@mui/material";
 import * as monacoEditor from "monaco-editor/esm/vs/editor/editor.api";
-import { useEffect, useRef, useState } from "react";
-import { Editor } from "@monaco-editor/react";
+import React, { useEffect, useRef, useState } from "react";
 import { SearchComponentProps } from "../../utils/SearchComponentProps";
 import { EDITOR_THEME } from "../../utils/theme";
 import {
   createIndexCompletionProvider,
   LANGUAGE_CONFIG,
   LanguageFeatures,
 } from "./config";
-import React from "react";
 
 const QUICKWIT_EDITOR_THEME_ID = "quickwit-light";
 

quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx

@@ -14,7 +14,6 @@
 
 import { BarChart } from "@mui/x-charts/BarChart";
 import { LineChart } from "@mui/x-charts/LineChart";
-import { CurveType } from "@mui/x-charts/models/seriesType/line";
 import {
   extractAggregationResults,
   HistogramResult,
@@ -38,22 +37,22 @@ export function AggregationResult({
 }) {
   const result = extractAggregationResults(searchResponse.aggregations);
   if (isHistogram(result)) {
-    const xAxis = [
+    const xAxis: React.ComponentProps<typeof LineChart>["xAxis"] = [
       {
         data: result.timestamps,
         valueFormatter: (date: number) => {
           return new Date(date).toISOString();
         },
       },
     ];
-    const series = result.data.map((line) => {
-      const curve: CurveType = "monotoneX";
-      return {
-        curve,
-        label: line.name,
-        data: line.value,
-      };
-    });
+    const series: React.ComponentProps<typeof LineChart>["series"] =
+      result.data.map((line) => {
+        return {
+          curve: "monotoneX",
+          label: line.name,
+          data: line.value,
+        };
+      });
     // we don't customize colors because we would need a full palette.
     return <LineChart xAxis={xAxis} series={series} yAxis={[{ min: 0 }]} />;
   } else if (isTerm(result)) {

quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx

@@ -14,7 +14,7 @@
 
 import { Box, Typography } from "@mui/material";
 import { useMemo } from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 import { Index, ResponseError, SearchResponse } from "../../utils/models";
 import Loader from "../Loader";
 import ErrorResponseDisplay from "../ResponseErrorDisplay";
@@ -25,13 +25,13 @@ function HitCount({ searchResponse }: { searchResponse: SearchResponse }) {
   return (
     <Box>
       <Typography variant="body2" color="textSecondary">
-        <NumberFormat
+        <NumericFormat
           displayType="text"
           value={searchResponse.num_hits}
           thousandSeparator=","
         />{" "}
         hits found in&nbsp;
-        <NumberFormat
+        <NumericFormat
           decimalScale={2}
           displayType="text"
           value={searchResponse.elapsed_time_micros / 1000000}