[ui] eject from react-create-app and fix jest config

Author: Platane

quickwit/quickwit-ui/.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 build
+dist

quickwit/quickwit-ui/jest.config.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  setupFiles: ["react-app-polyfill/jsdom"], // polyfill jsdom api (such as fetch)
+
+  setupFilesAfterEnv: ["@testing-library/jest-dom"],
+
+  testEnvironment: "jsdom",
+
+  transform: {
+    // transform js file (typescript and es6 import)
+    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": [
+      "babel-jest",
+      {
+        presets: [["babel-preset-react-app", { runtime: "automatic" }]],
+        babelrc: false,
+        configFile: false,
+      },
+    ],
+
+    // transform asset files
+    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-transform-stub",
+  },
+
+  moduleNameMapper: {
+    "monaco-editor": "<rootDir>/mocks/monacoMock.js",
+    "swagger-ui-react": "<rootDir>/mocks/swaggerUIMock.js",
+    "@mui/x-charts": "<rootDir>/mocks/x-charts.js",
+  },
+
+  resetMocks: true,
+};

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

@@ -17,19 +17,21 @@ import { Box, Button, styled, Typography } from "@mui/material";
 import { QUICKWIT_LIGHT_GREY } from "../utils/theme";
 
 const Footer = styled(Box)`
-display: flex;
-height: 25px;
-padding: 0px 5px;
-position: absolute;
-bottom: 0px;
-font-size: 0.90em;
-background-color: ${QUICKWIT_LIGHT_GREY};
-opacity: 0.7;
+  display: flex;
+  height: 25px;
+  padding: 0px 5px;
+  position: absolute;
+  bottom: 0px;
+  font-size: 0.9em;
+  background-color: ${QUICKWIT_LIGHT_GREY};
+  opacity: 0.7;
 `;
 
 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;

quickwit/quickwit-ui/src/index.test.js

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { describe, expect, it } from "@jest/globals";
 import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import App from "./views/App";

quickwit/quickwit-ui/src/providers/EditorProvider.tsx

@@ -22,7 +22,7 @@ import {
 } from "react";
 
 type ContextProps = {
-  editorRef: MutableRefObject<any | null> | null;
+  editorRef: MutableRefObject<unknown | null> | null;
   monacoRef: MutableRefObject<typeof monacoEditor | null> | null;
 };
 
@@ -33,8 +33,8 @@ const defaultValues = {
 
 const EditorContext = createContext<ContextProps>(defaultValues);
 
-export const EditorProvider = ({ children }: PropsWithChildren<{}>) => {
-  const editorRef = useRef<any | null>(null);
+export const EditorProvider = ({ children }: PropsWithChildren<unknown>) => {
+  const editorRef = useRef<unknown | null>(null);
   const monacoRef = useRef<typeof monacoEditor | null>(null);
 
   return (

quickwit/quickwit-ui/src/react-app-env.d.ts

@@ -12,13 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { describe, expect, it, jest } from "@jest/globals";
 import { SearchRequest } from "../utils/models";
 import { Client } from "./client";
 
 describe("Client unit test", () => {
   it("Should construct correct search URL", async () => {
     // Mocking the fetch function to simulate network requests
-    const mockFetch = jest.fn(() =>
+    const mockFetch = jest.fn((_url: string, _options?: unknown) =>
       Promise.resolve({ ok: true, json: () => Promise.resolve({}) }),
     );
     (global as any).fetch = mockFetch; // eslint-disable-line @typescript-eslint/no-explicit-any

quickwit/quickwit-ui/src/services/client.test.ts

@@ -21,5 +21,5 @@
     "jsx": "react-jsx",
     "types": ["vite/client"]
   },
-  "include": ["src", "typings", "tests", "tests/integration/index.test.ts"]
+  "exclude": ["build"]
 }