build: bump dependencies (#532)

* update mantine, tauri, monaco * remove unused prop * fix linter * bump vitest * bump vite
andrewinci · Jul 13, 2023 · 544367c · 544367c
1 parent c6484e6
commit 544367c
Show file tree

Hide file tree

Showing 14 changed files with 1,581 additions and 1,765 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,20 +17,20 @@
     "@emotion/styled": "^11.10.6",
     "@mantine/core": "^5.10.5",
     "@mantine/dates": "^5.10.5",
-    "@mantine/form": "^5.9.0",
-    "@mantine/hooks": "^6.0.5",
-    "@mantine/modals": "^6.0.5",
-    "@mantine/notifications": "^5.10.0",
-    "@mantine/prism": "^5.10.3",
-    "@monaco-editor/react": "^4.4.6",
+    "@mantine/form": "^5.10.5",
+    "@mantine/hooks": "^5.10.5",
+    "@mantine/modals": "^5.10.5",
+    "@mantine/notifications": "^5.10.5",
+    "@mantine/prism": "^5.10.5",
+    "@monaco-editor/react": "^4.5.1",
     "@tabler/icons": "^1.119.0",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-virtual": "^3.0.0-beta.44",
-    "@tauri-apps/api": "^1.3.0",
+    "@tauri-apps/api": "^1.4.0",
     "@types/react-window": "^1.8.5",
     "allotment": "^1.18.0",
     "dayjs": "^1.11.7",
-    "monaco-editor": "^0.36.0",
+    "monaco-editor": "^0.40.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.7.0",
@@ -48,7 +48,7 @@
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.48.2",
     "@vitejs/plugin-react": "^4.0.3",
-    "@vitest/coverage-c8": "^0.27.1",
+    "@vitest/coverage-v8": "^0.33.0",
     "eslint": "^8.37.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -57,9 +57,9 @@
     "prettier": "2.8.7",
     "prettier-plugin-rust": "^0.1.8",
     "rimraf": "^4.1.2",
-    "typescript": "<4.10.0",
-    "vite": "^4.3.3",
-    "vitest": "^0.28.4"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.3",
+    "vitest": "^0.33.0"
   },
   "volta": {
     "node": "18.13.0",

diff --git a/frontend/src/components/code-editor.tsx b/frontend/src/components/code-editor.tsx
@@ -2,7 +2,6 @@ import Editor from "@monaco-editor/react";
 
 type CodeEditorProps = {
   height?: number | string;
-  path: string;
   language?: string;
   value?: string;
   readOnly?: boolean;

diff --git a/frontend/src/hooks/use-favorites.test.ts b/frontend/src/hooks/use-favorites.test.ts
@@ -5,7 +5,7 @@ const setUserSettingsMock = vi.fn();
 
 vi.doMock("../providers", () => {
   return {
-    useUserSettings: vi.fn().mockReturnValue({
+    useUserSettings: () => ({
       userSettings: {
         clusters: [
           {
@@ -24,16 +24,16 @@ vi.doMock("../providers", () => {
   };
 });
 
-import { useFavorites } from "./use-favorites";
-
 describe("useFavorites", () => {
-  it("should return the favorites and toggleFavorite", () => {
+  it("should return the favorites and toggleFavorite", async () => {
+    const { useFavorites } = await import("./use-favorites");
     const { result } = renderHook(() => useFavorites("cluster-1", "topics"));
     expect(result.current.favorites).toEqual(["query-1"]);
     expect(result.current.toggleFavorite).toBeDefined();
   });
 
-  it("should add item to favorites when toggleFavorite is called", () => {
+  it("should add item to favorites when toggleFavorite is called", async () => {
+    const { useFavorites } = await import("./use-favorites");
     setUserSettingsMock.mockReset();
     const { result } = renderHook(() => useFavorites("cluster-1", "consumers"));
     result.current.toggleFavorite("query-1");

diff --git a/frontend/src/pages/clusters/cluster-form/cluster-form.tsx b/frontend/src/pages/clusters/cluster-form/cluster-form.tsx
@@ -114,7 +114,8 @@ export const ClusterForm = ({ onSubmit, initialValues }: ClusterFormProps) => {
                       })) as string | null;
                       if (truststoreLocation) {
                         form.setValues((s) => {
-                          const jks = { ...s.authentication?.jks, truststoreLocation };
+                          const keystoreLocation = s.authentication?.jks?.keystoreLocation ?? "";
+                          const jks = { ...s.authentication?.jks, truststoreLocation, keystoreLocation };
                           return { ...s, authentication: { ...s.authentication, type: "JKS", jks } };
                         });
                       }
@@ -147,7 +148,8 @@ export const ClusterForm = ({ onSubmit, initialValues }: ClusterFormProps) => {
                       })) as string | null;
                       if (keystoreLocation) {
                         form.setValues((s) => {
-                          const jks = { ...s.authentication?.jks, keystoreLocation };
+                          const truststoreLocation = s.authentication?.jks?.truststoreLocation ?? "";
+                          const jks = { ...s.authentication?.jks, keystoreLocation, truststoreLocation };
                           return { ...s, authentication: { ...s.authentication, type: "JKS", jks } };
                         });
                       }

diff --git a/frontend/src/pages/clusters/cluster-form/types.ts b/frontend/src/pages/clusters/cluster-form/types.ts
@@ -1,9 +1,9 @@
 export type AuthenticationFormType = "None" | "SSL" | "SASL" | "JKS";
 
 export type JksFormType = {
-  truststoreLocation?: string;
+  truststoreLocation: string;
   truststorePassword?: string;
-  keystoreLocation?: string;
+  keystoreLocation: string;
   keystorePassword?: string;
 };
 
@@ -23,7 +23,7 @@ export type SslFormType = {
 export type SchemaRegistryFormType = {
   endpoint: string;
   username?: string;
-  password?: string;
+  password: string;
 };
 
 export type ClusterFormType = {

diff --git a/frontend/src/pages/clusters/cluster-form/use-cluster-form.ts b/frontend/src/pages/clusters/cluster-form/use-cluster-form.ts
@@ -19,7 +19,7 @@ export const useClusterForm = (initialValues?: ClusterFormType) => {
         type: "None",
         sasl: { username: "", password: "", scram: false },
         ssl: { certificate: "", ca: "", key: "", keyPassword: "" },
-        jks: {},
+        jks: { keystoreLocation: "", truststoreLocation: "" },
       },
       schemaRegistry: { endpoint: "", username: "", password: "" },
     },

diff --git a/frontend/src/pages/clusters/helpers/mappers.ts b/frontend/src/pages/clusters/helpers/mappers.ts
@@ -6,7 +6,6 @@ import { parseKeystore, parseTruststore } from "../../../tauri/helpers";
 export function mapClusterToForm(cluster?: Cluster): ClusterFormType | undefined {
   if (!cluster) return undefined;
   const { name, endpoint, authentication } = cluster;
-  const schemaRegistry = cluster.schemaRegistry ?? { endpoint: "", password: "", username: "" };
   let type: AuthenticationFormType = "None";
   let sasl: SaslFormType = { username: "", password: "", scram: false };
   let ssl: SslFormType = { ca: "", certificate: "", key: "", keyPassword: undefined };
@@ -20,7 +19,16 @@ export function mapClusterToForm(cluster?: Cluster): ClusterFormType | undefined
     ssl = authentication.Ssl;
   }
 
-  return { name, endpoint, authentication: { type, sasl, ssl }, schemaRegistry };
+  return {
+    name,
+    endpoint,
+    authentication: { type, sasl, ssl },
+    schemaRegistry: {
+      endpoint: cluster.schemaRegistry?.endpoint ?? "",
+      password: cluster.schemaRegistry?.password ?? "",
+      username: cluster.schemaRegistry?.username ?? "",
+    },
+  };
 }
 
 export async function mapFormToCluster(c: ClusterFormType): Promise<Cluster> {

diff --git a/frontend/src/pages/schema-registry/schema.tsx b/frontend/src/pages/schema-registry/schema.tsx
@@ -84,13 +84,7 @@ export const Schema = ({
         <Center hidden={!isLoading} mt={10}>
           <Loader />
         </Center>
-        <CodeEditor
-          path={schemaName}
-          height="calc(100vh - 155px)"
-          language="json"
-          value={currentSchema}
-          readOnly={true}
-        />
+        <CodeEditor height="calc(100vh - 155px)" language="json" value={currentSchema} readOnly={true} />
       </Container>
     </Container>
   );

diff --git a/frontend/src/pages/topics/modals/consumer-configuration-modal.tsx b/frontend/src/pages/topics/modals/consumer-configuration-modal.tsx
@@ -73,7 +73,7 @@ export const ConsumerConfigurationModal = ({ topicName, opened, onClose, onSubmi
               />
             </Stack>
             <Stack hidden={!form.values.onlyBeginning}>
-              <DatePicker allowSingleDateInRange label="From date" {...form.getInputProps("dateFrom")} />
+              <DatePicker label="From date" {...form.getInputProps("dateFrom")} />
               <TimeInput withSeconds label="From time (UTC)" {...form.getInputProps("timeFrom")} />
             </Stack>
           </Stack>

diff --git a/frontend/src/pages/topics/modals/record-view-modal.tsx b/frontend/src/pages/topics/modals/record-view-modal.tsx
@@ -60,7 +60,7 @@ const RecordDetailsForm = (props: RecordDetailsModalProps & { heightOffset: numb
       </Stack>
       {record.payload && (
         <Input.Wrapper mt={3} style={{ height: `calc(100% - ${heightOffset}px)` }} label="Value">
-          <CodeEditor path={topic} language="json" height={"100%"} value={pretty(record.payload)} readOnly />
+          <CodeEditor language="json" height={"100%"} value={pretty(record.payload)} readOnly />
         </Input.Wrapper>
       )}
       {!record.payload && (

diff --git a/frontend/src/pages/topics/topic/topic-page-menu.tsx b/frontend/src/pages/topics/topic/topic-page-menu.tsx
@@ -81,7 +81,6 @@ ORDER BY timestamp desc LIMIT {:limit} OFFSET {:offset}`);
             </Anchor>
           </Text>
           <CodeEditor
-            path={topicName}
             hideLineNumbers={true}
             height={height ?? 20}
             language="sql"

diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
@@ -13,3 +13,7 @@ vi.mock("./tauri/helpers", () => {
     useAppVersion: () => "0.0.0",
   };
 });
+
+vi.mock("uuid", () => ({
+  v4: vi.fn(() => "mocked-uuid"),
+}));
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -28,7 +28,9 @@ export default defineConfig({
   test: {
     environment: "happy-dom",
     setupFiles: ["./src/test-setup.ts"],
+    globals: true,
     coverage: {
+      provider: "v8",
       all: true,
       include: ["src/**/*.ts*"],
     },