[ui] fix linting errors + replace eslint by biome

Author: Platane

.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

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": "off"
+      }
+    },
+    "includes": ["**", "!**/build"]
+  }
 }

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"
-    ]
   }
 }

quickwit/quickwit-ui/src/assets/img/logo.svg renamed to quickwit/quickwit-ui/src/assets/img/quickwit-logo-monochrome.svg

@@ -30,7 +30,6 @@ 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"

quickwit/quickwit-ui/src/assets/img/quickwit-logo.svg renamed to quickwit/quickwit-ui/src/assets/img/quickwit-logo-with-title.svg

@@ -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)

quickwit/quickwit-ui/src/components/ApiUrlFooter.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}`);
   };
 

quickwit/quickwit-ui/src/components/IndexSummary.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/quickwit-logo-monochrome.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>
   );
 }

quickwit/quickwit-ui/src/components/IndexesTable.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);