[ui] fix linting errors + replace eslint by biome

Platane · Platane · commit 9858668ce245 · 2025-11-14T16:18:00.000+01:00
diff --git a/.github/workflows/ui-ci.yml b/.github/workflows/ui-ci.yml
@@ -38,8 +38,6 @@ jobs:
               yarn --cwd quickwit-ui cypress run
           - name: Lint
             command: yarn --cwd quickwit-ui lint
-          - name: Check formatting
-            command: yarn --cwd quickwit-ui check-formatting
           - name: Check type consistency
             command: yarn --cwd quickwit-ui type
           - name: Unit Test
diff --git a/quickwit/quickwit-ui/biome.json b/quickwit/quickwit-ui/biome.json
@@ -5,5 +5,21 @@
     "indentStyle": "space",
     "includes": ["**", "!**/build"]
   },
-  "linter": { "enabled": false }
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": "off",
+      "complexity": "off",
+      "correctness": {
+        "useExhaustiveDependencies": "warn"
+      },
+      "suspicious": {
+        "useIterableCallbackReturn": "off",
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "warn"
+      }
+    },
+    "includes": ["**", "!**/build"]
+  }
 }
diff --git a/quickwit/quickwit-ui/package.json b/quickwit/quickwit-ui/package.json
@@ -23,14 +23,10 @@
     "@types/react": "17.0.65",
     "@types/react-dom": "17.0.18",
     "@types/swagger-ui-react": "4.18.2",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
     "babel-jest": "30.2.0",
     "babel-preset-react-app": "10.1.0",
     "cypress": "13.3.2",
     "dayjs": "1.11.7",
-    "eslint": "8.3.0",
-    "eslint-config-react-app": "7.0.1",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-transform-stub": "2.0.0",
@@ -57,16 +53,9 @@
     "start": "vite",
     "build": "vite build --outDir build",
     "test": "jest",
-    "lint": "eslint . --ext .ts",
-    "check-formatting": "biome check",
+    "lint": "biome check",
     "format": "biome check --write",
     "type": "tsc",
     "e2e-test": "cypress run"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
   }
 }
diff --git a/quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx b/quickwit/quickwit-ui/src/components/ApiUrlFooter.tsx
@@ -29,12 +29,9 @@ const Footer = styled(Box)`
 
 export default function ApiUrlFooter(url: string) {
   const urlMaxLength = 80;
-  const origin =
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    process.env.NODE_ENV === "development"
-      ? "http://localhost:7280"
-      : window.location.origin;
+  const origin = import.meta.env.PROD
+    ? "http://localhost:7280"
+    : window.location.origin;
   const completeUrl = `${origin}/${url}`;
   const isTooLong = completeUrl.length > urlMaxLength;
   // TODO show generated aggregation
diff --git a/quickwit/quickwit-ui/src/components/IndexSummary.tsx b/quickwit/quickwit-ui/src/components/IndexSummary.tsx
@@ -23,18 +23,20 @@ import { Index } from "../utils/models";
 dayjs.extend(utc);
 
 const ItemContainer = styled.div`
-padding: 10px;
-display: flex;
-flex-direction: column;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
 `;
 const Row = styled.div`
-padding: 5px;
-display: flex;
-flex-direction: row;
-&:nth-of-type(odd){ background: rgba(0,0,0,0.05) }
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+  &:nth-of-type(odd) {
+    background: rgba(0, 0, 0, 0.05);
+  }
 `;
 const RowKey = styled.div`
-width: 350px;
+  width: 350px;
 `;
 const IndexRow: FC<{ title: string; children: ReactNode }> = ({
   title,
@@ -49,13 +51,13 @@ const IndexRow: FC<{ title: string; children: ReactNode }> = ({
 export function IndexSummary({ index }: { index: Index }) {
   const all_splits = index.splits;
   const published_splits = all_splits.filter(
-    (split) => split.split_state == "Published",
+    (split) => split.split_state === "Published",
   );
   const num_of_staged_splits = all_splits.filter(
-    (split) => split.split_state == "Staged",
+    (split) => split.split_state === "Staged",
   ).length;
   const num_of_marked_for_delete_splits = all_splits.filter(
-    (split) => split.split_state == "MarkedForDeletion",
+    (split) => split.split_state === "MarkedForDeletion",
   ).length;
   const total_num_docs = published_splits
     .map((split) => split.num_docs)
diff --git a/quickwit/quickwit-ui/src/components/IndexesTable.tsx b/quickwit/quickwit-ui/src/components/IndexesTable.tsx
@@ -32,7 +32,7 @@ const IndexesTable = ({
   indexesMetadata,
 }: Readonly<{ indexesMetadata: IndexMetadata[] }>) => {
   const navigate = useNavigate();
-  const handleClick = function (indexId: string) {
+  const handleClick = (indexId: string) => {
     navigate(`/indexes/${indexId}`);
   };
 
diff --git a/quickwit/quickwit-ui/src/components/Loader.tsx b/quickwit/quickwit-ui/src/components/Loader.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Box, keyframes, styled } from "@mui/material";
-import logo_url from "../assets/img/logo.svg";
+import loadinIcongUrl from "../assets/img/icon-loading.svg";
 
 const spin = keyframes`
 from {
@@ -24,15 +24,15 @@ to {
 }
 `;
 
-const Logo = (props: React.ComponentProps<"img">) => (
-  <img {...props} src={logo_url} />
+const LoadingIcon = (props: React.ComponentProps<"img">) => (
+  <img {...props} src={loadinIcongUrl} alt="loading icon" />
 );
 
-const SpinningLogo = styled(Logo)`
-height: 10vmin;
-pointer-events: none;
-fill: #CBD1DD;
-animation: ${spin} infinite 5s linear;
+const SpinningLoadingIcon = styled(LoadingIcon)`
+  height: 10vmin;
+  pointer-events: none;
+  fill: #cbd1dd;
+  animation: ${spin} infinite 5s linear;
 `;
 
 export default function Loader() {
@@ -43,7 +43,7 @@ export default function Loader() {
       alignItems="center"
       minHeight="40vh"
     >
-      <SpinningLogo></SpinningLogo>
+      <SpinningLoadingIcon></SpinningLoadingIcon>
     </Box>
   );
 }
diff --git a/quickwit/quickwit-ui/src/components/QueryActionBar.tsx b/quickwit/quickwit-ui/src/components/QueryActionBar.tsx
@@ -25,7 +25,7 @@ export function QueryEditorActionBar(props: SearchComponentProps) {
   const handleChange = (_event: React.SyntheticEvent, newTab: number) => {
     const updatedSearchRequest = {
       ...props.searchRequest,
-      aggregation: newTab != 0,
+      aggregation: newTab !== 0,
     };
     props.onSearchRequestUpdate(updatedSearchRequest);
     props.runSearch(updatedSearchRequest);
diff --git a/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx b/quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
@@ -49,7 +49,7 @@ export function MetricKind(props: SearchComponentProps) {
   const handleTypeChange = (event: SelectChangeEvent) => {
     const value = event.target.value;
     const updatedMetric =
-      value != "count" ? { ...metricRef.current!, type: value } : null;
+      value !== "count" ? { ...metricRef.current!, type: value } : null;
     const updatedAggregation = {
       ...props.searchRequest.aggregationConfig,
       metric: updatedMetric,
@@ -261,7 +261,7 @@ export function AggregationKind(props: SearchComponentProps) {
     let addHistogram = true;
     let addTerm = true;
     for (let i = 0; i < agg.length; i++) {
-      if (i == pos) continue;
+      if (i === pos) continue;
       if (getAggregationKind(agg[i]) === "histogram") addHistogram = false;
       if (getAggregationKind(agg[i]) === "term") addTerm = false;
     }
diff --git a/quickwit/quickwit-ui/src/components/QueryEditor/config.ts b/quickwit/quickwit-ui/src/components/QueryEditor/config.ts
@@ -152,7 +152,7 @@ export const createIndexCompletionProvider = (indexMetadata: IndexMetadata) => {
             label: field.json_path,
             kind: CompletionItemKind.Field,
             insertText:
-              field.field_mapping.type == "json"
+              field.field_mapping.type === "json"
                 ? field.json_path + "."
                 : field.json_path + ":",
             range: range,
diff --git a/quickwit/quickwit-ui/src/components/SearchResult/ResultTable.tsx b/quickwit/quickwit-ui/src/components/SearchResult/ResultTable.tsx
@@ -13,12 +13,7 @@
 // limitations under the License.
 
 import { Box, styled, Table, TableBody, TableContainer } from "@mui/material";
-import {
-  Field as Field,
-  getAllFields,
-  Index,
-  SearchResponse,
-} from "../../utils/models";
+import { Field, getAllFields, Index, SearchResponse } from "../../utils/models";
 import { Row } from "./Row";
 
 const TableBox = styled(Box)`
diff --git a/quickwit/quickwit-ui/src/components/SideBar.tsx b/quickwit/quickwit-ui/src/components/SideBar.tsx
@@ -44,6 +44,7 @@ function ListItemLink(props: ListItemLinkProps) {
       React.forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, "to">>(
         function Link(itemProps, ref) {
           return (
+            // biome-ignore lint/a11y/useValidAriaRole: remove the role
             <RouterLink to={to} ref={ref} {...itemProps} role={undefined} />
           );
         },
diff --git a/quickwit/quickwit-ui/src/components/TopBar.tsx b/quickwit/quickwit-ui/src/components/TopBar.tsx
@@ -26,11 +26,11 @@ import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import { Discord } from "@styled-icons/fa-brands/Discord";
 import { useEffect, useMemo, useState } from "react";
-import logo_url from "../assets/img/quickwit-logo.svg";
+import quickwitLogoUrl from "../assets/img/quickwit-logo.svg";
 import { Client } from "../services/client";
 
 const Logo = (props: React.ComponentProps<"img">) => (
-  <img {...props} src={logo_url} />
+  <img {...props} src={quickwitLogoUrl} alt="quickwit logo" />
 );
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
@@ -52,7 +52,7 @@ const TopBar = () => {
     quickwitClient.cluster().then((cluster) => {
       setClusterId(cluster.cluster_id);
     });
-  }, []);
+  }, [quickwitClient]);
 
   return (
     <StyledAppBar position="fixed" elevation={0} color="neutral">
diff --git a/quickwit/quickwit-ui/src/index.test.js b/quickwit/quickwit-ui/src/index.test.js
@@ -17,8 +17,8 @@ import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import App from "./views/App";
 
-describe("App", function () {
-  it("Should display side bar links", function () {
+describe("App", () => {
+  it("Should display side bar links", () => {
     render(
       <BrowserRouter>
         <App />
diff --git a/quickwit/quickwit-ui/src/services/client.ts b/quickwit/quickwit-ui/src/services/client.ts
@@ -171,7 +171,7 @@ export class Client {
     request: SearchRequest,
     timestamp_field: string | null,
   ): any {
-    let aggregation = undefined;
+    let aggregation: any;
     if (request.aggregationConfig.metric) {
       const metric = request.aggregationConfig.metric;
       aggregation = {
@@ -185,7 +185,7 @@ export class Client {
     if (request.aggregationConfig.histogram && timestamp_field) {
       const histogram = request.aggregationConfig.histogram;
       const interval = histogram.interval;
-      let extended_bounds;
+      let extended_bounds: any;
       if (request.startTimestamp && request.endTimestamp) {
         extended_bounds = {
           min: request.startTimestamp,
diff --git a/quickwit/quickwit-ui/src/utils/models.ts b/quickwit/quickwit-ui/src/utils/models.ts
@@ -151,7 +151,7 @@ export function extractAggregationResults(
   } else if ("term_agg" in aggregation) {
     // we have a term aggregation, but maybe there is an histogram inside
     const term_buckets = aggregation.term_agg.buckets;
-    if (term_buckets.length == 0) {
+    if (term_buckets.length === 0) {
       return null;
     }
     if (term_buckets.length > 0 && "histo_agg" in term_buckets[0]) {
diff --git a/quickwit/quickwit-ui/src/utils/urls.ts b/quickwit/quickwit-ui/src/utils/urls.ts
@@ -29,14 +29,14 @@ export function parseSearchUrl(historySearch: string): SearchRequest {
   const searchParams = new URLSearchParams(historySearch);
   const startTimestampString = searchParams.get("start_timestamp");
   let startTimestamp = null;
-  const startTimeStampParsedInt = parseInt(startTimestampString || "");
-  if (!isNaN(startTimeStampParsedInt)) {
+  const startTimeStampParsedInt = parseInt(startTimestampString || "", 10);
+  if (!Number.isNaN(startTimeStampParsedInt)) {
     startTimestamp = startTimeStampParsedInt;
   }
   let endTimestamp = null;
   const endTimestampString = searchParams.get("end_timestamp");
-  const endTimestampParsedInt = parseInt(endTimestampString || "");
-  if (!isNaN(endTimestampParsedInt)) {
+  const endTimestampParsedInt = parseInt(endTimestampString || "", 10);
+  if (!Number.isNaN(endTimestampParsedInt)) {
     endTimestamp = endTimestampParsedInt;
   }
   let indexId = null;
diff --git a/quickwit/quickwit-ui/src/views/IndexView.test.jsx b/quickwit/quickwit-ui/src/views/IndexView.test.jsx
@@ -13,14 +13,12 @@
 // limitations under the License.
 
 import { render, screen, waitFor } from "@testing-library/react";
-import { unmountComponentAtNode } from "react-dom";
 import { act } from "react-dom/test-utils";
 import { BrowserRouter } from "react-router-dom";
 import { Client } from "../services/client";
 import IndexView from "./IndexView";
 
 jest.mock("../services/client");
-const mockedUsedNavigate = jest.fn();
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useParams: () => ({
diff --git a/quickwit/quickwit-ui/src/views/NodeInfoView.test.jsx b/quickwit/quickwit-ui/src/views/NodeInfoView.test.jsx
@@ -20,7 +20,6 @@ import { Client } from "../services/client";
 import NodeInfoView from "./NodeInfoView";
 
 jest.mock("../services/client");
-const mockedUsedNavigate = jest.fn();
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useParams: () => ({
diff --git a/quickwit/quickwit-ui/yarn.lock b/quickwit/quickwit-ui/yarn.lock
