From fb6ff0ff1ded77aa57ee347578169c152b6ff60f Mon Sep 17 00:00:00 2001 From: Matteo Gregoricchio <32459930+followynne@users.noreply.github.com> Date: Sun, 15 Sep 2024 18:32:57 +0200 Subject: [PATCH] fix(#139): improve executed queries on authentication modal (#145) --- README.md | 2 - src/Serilog.Ui.Web/package.json | 60 +- .../src/__tests__/_setup/mocks/fetch.ts | 8 +- .../src/__tests__/_setup/mocks/samples.ts | 4 +- .../components/Search/Search.spec.tsx | 1 + .../src/__tests__/hooks/useQueryAuth.spec.ts | 4 + .../Authorization/AuthorizeButton.tsx | 7 +- .../components/Authorization/BasicModal.tsx | 5 +- .../app/components/Authorization/JwtModal.tsx | 7 +- .../src/app/hooks/useAuthProperties.tsx | 26 +- .../src/app/hooks/useQueryAuth.ts | 5 +- .../src/app/hooks/useQueryLogs.ts | 4 +- .../src/app/hooks/useQueryTableKeys.ts | 4 +- .../src/app/hooks/useSerilogUiProps.tsx | 12 +- src/Serilog.Ui.Web/src/mockServiceWorker.js | 2 +- src/Serilog.Ui.Web/yarn.lock | 1071 +++++++++++------ 16 files changed, 775 insertions(+), 447 deletions(-) diff --git a/README.md b/README.md index 77733142..fdf1eff1 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,9 @@ [![DotNET-build](https://github.com/serilog-contrib/serilog-ui/actions/workflows/DotNET-build.yml/badge.svg?branch=master)](https://github.com/serilog-contrib/serilog-ui/actions/workflows/DotNET-build.yml) [![DotNET Coverage](https://sonarcloud.io/api/project_badges/measure?project=followynne_serilog-ui&metric=coverage)](https://sonarcloud.io/summary/new_code?id=followynne_serilog-ui) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=followynne_serilog-ui&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=followynne_serilog-ui) [![JS-build](https://github.com/serilog-contrib/serilog-ui/actions/workflows/JS-build.yml/badge.svg?branch=master)](https://github.com/serilog-contrib/serilog-ui/actions/workflows/JS-build.yml) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=followynne_serilog-ui_assets&metric=coverage)](https://sonarcloud.io/summary/new_code?id=followynne_serilog-ui_assets) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=followynne_serilog-ui_assets&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=followynne_serilog-ui_assets) A simple Serilog log viewer for the following sinks: diff --git a/src/Serilog.Ui.Web/package.json b/src/Serilog.Ui.Web/package.json index a93bc00b..44a47000 100644 --- a/src/Serilog.Ui.Web/package.json +++ b/src/Serilog.Ui.Web/package.json @@ -14,62 +14,62 @@ "test:ui": "vitest --ui --reporter=default" }, "dependencies": { - "@fontsource/mononoki": "^5.0.11", - "@mantine/core": "^7.12.1", - "@mantine/dates": "^7.12.1", - "@mantine/hooks": "^7.12.1", - "@mantine/notifications": "^7.12.1", - "@tabler/icons-react": "^3.12.0", - "@tanstack/react-query": "^5.51.23", - "dayjs": "^1.11.12", - "jose": "^5.6.3", + "@fontsource/mononoki": "^5.1.0", + "@mantine/core": "^7.12.2", + "@mantine/dates": "^7.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/notifications": "^7.12.2", + "@tabler/icons-react": "^3.16.0", + "@tanstack/react-query": "^5.56.2", + "dayjs": "^1.11.13", + "jose": "^5.9.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-hook-form": "^7.52.2", - "react-router-dom": "^6.26.1", + "react-hook-form": "^7.53.0", + "react-router-dom": "^6.26.2", "xml-formatter": "^3.6.3" }, "devDependencies": { - "@faker-js/faker": "^8.4.1", + "@faker-js/faker": "^9.0.0", "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^16.0.0", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", - "@types/node": "^22.4.0", - "@types/react": "^18.3.3", + "@types/node": "^22.5.4", + "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react-swc": "^3.7.0", - "@vitest/coverage-istanbul": "^2.0.5", - "@vitest/ui": "^2.0.5", + "@vitest/coverage-istanbul": "^2.1.0", + "@vitest/ui": "^2.1.0", "@welldone-software/why-did-you-render": "^8.0.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-html": "^8.1.1", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jsx-a11y": "^6.9.0", + "eslint-plugin-import": "^2.30.0", + "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-promise": "^7.1.0", - "eslint-plugin-react": "^7.35.0", + "eslint-plugin-react": "^7.36.1", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-testing-library": "^6.3.0", "eslint-plugin-vitest": "^0.5.4", "eslint-plugin-vitest-globals": "^1.5.0", - "happy-dom": "^14.12.3", - "msw": "^2.3.5", - "postcss": "^8.4.41", + "happy-dom": "^15.7.4", + "msw": "^2.4.6", + "postcss": "^8.4.45", "postcss-preset-mantine": "^1.17.0", "postcss-simple-vars": "^7.0.1", "prettier": "^3.3.3", "prettier-plugin-organize-imports": "^4.0.0", - "shiki": "^1.13.0", + "shiki": "^1.17.6", "testing-library-selector": "^0.3.1", - "typescript": "^5.5.4", - "typescript-eslint": "^8.1.0", - "vite": "^5.4.1", - "vite-plugin-checker": "^0.7.2", + "typescript": "^5.6.2", + "typescript-eslint": "^8.5.0", + "vite": "^5.4.5", + "vite-plugin-checker": "^0.8.0", "vite-plugin-mkcert": "^1.17.6", "vite-tsconfig-paths": "^5.0.1", - "vitest": "^2.0.5", + "vitest": "^2.1.0", "vitest-sonar-reporter": "^2.0.0" }, "engines": { diff --git a/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/fetch.ts b/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/fetch.ts index 9cb5a50e..27d0cd9e 100644 --- a/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/fetch.ts +++ b/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/fetch.ts @@ -1,6 +1,7 @@ import dayjs from 'dayjs'; -import { HttpResponse, http } from 'msw'; +import { http, HttpResponse } from 'msw'; import { + AuthType, EncodedSeriLogObject, LogLevel, SearchParameters, @@ -8,6 +9,7 @@ import { SortPropertyOptions, } from '../../../types/types'; import { dbKeysMock, fakeLogs, fakeLogs2ndTable, fakeLogs3rdTable } from './samples'; +import { defaultAuthType } from '../../../app/hooks/useSerilogUiProps.tsx'; export const developmentListenersHost = ['https://localhost:3001']; @@ -20,7 +22,7 @@ const tableLogs = (table: string | null) => { export const handlers = developmentListenersHost.flatMap((dlh) => [ http.get(`${dlh}/api/logs`, ({ request }) => { const auth = request.headers.get('authorization'); - if (!auth) return HttpResponse.error(); + if (defaultAuthType !== AuthType.Custom && !auth) return HttpResponse.error(); const req = new URL(request.url); const params = getSearchParams(req.searchParams); @@ -49,7 +51,7 @@ export const handlers = developmentListenersHost.flatMap((dlh) => [ http.get(`${dlh}/api/keys`, ({ request }) => { const auth = request.headers.get('authorization'); - return !auth ? HttpResponse.error() : HttpResponse.json(dbKeysMock); + return defaultAuthType !== AuthType.Custom && !auth ? HttpResponse.error() : HttpResponse.json(dbKeysMock); }), ]); diff --git a/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/samples.ts b/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/samples.ts index 2ab61e58..52aec5bd 100644 --- a/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/samples.ts +++ b/src/Serilog.Ui.Web/src/__tests__/_setup/mocks/samples.ts @@ -153,7 +153,9 @@ export const fakeLogs: SearchResult = { export const fakeLogs2ndTable: SearchResult = { ...fakeLogs, - logs: faker.helpers.multiple(createRandomLogWithAdditionalColumns, { count: 95 }), + logs: faker.helpers.multiple(() => createRandomLogWithAdditionalColumns(), { + count: 95, + }), total: 95, }; diff --git a/src/Serilog.Ui.Web/src/__tests__/components/Search/Search.spec.tsx b/src/Serilog.Ui.Web/src/__tests__/components/Search/Search.spec.tsx index 5f5875ef..329519b4 100644 --- a/src/Serilog.Ui.Web/src/__tests__/components/Search/Search.spec.tsx +++ b/src/Serilog.Ui.Web/src/__tests__/components/Search/Search.spec.tsx @@ -29,6 +29,7 @@ vi.mock('../../../app/hooks/useAuthProperties', () => ({ headers: { headers: headers() }, routePrefix: '', }, + isHeaderReady: true, }), })); diff --git a/src/Serilog.Ui.Web/src/__tests__/hooks/useQueryAuth.spec.ts b/src/Serilog.Ui.Web/src/__tests__/hooks/useQueryAuth.spec.ts index 5a85a0d4..2c723e41 100644 --- a/src/Serilog.Ui.Web/src/__tests__/hooks/useQueryAuth.spec.ts +++ b/src/Serilog.Ui.Web/src/__tests__/hooks/useQueryAuth.spec.ts @@ -8,6 +8,7 @@ const mockedProps = { }; const mockAuthProps = { authHeader: '', + isHeaderReady: false, }; const mockTableKeys = { refetch: vi.fn(), @@ -47,6 +48,7 @@ describe('useQueryAuth', () => { async (response) => { mockedProps.blockHomeAccess = true; mockAuthProps.authHeader = 'ready'; + mockAuthProps.isHeaderReady = true; mockTableKeys.refetch.mockResolvedValueOnce({ data: response }); renderHook(() => useQueryAuth()); @@ -61,6 +63,8 @@ describe('useQueryAuth', () => { it('runs request and set true if response is array with element', async () => { mockedProps.blockHomeAccess = true; mockAuthProps.authHeader = 'ready'; + mockAuthProps.isHeaderReady = true; + mockTableKeys.refetch.mockResolvedValueOnce({ data: ['key'] }); renderHook(() => useQueryAuth()); diff --git a/src/Serilog.Ui.Web/src/app/components/Authorization/AuthorizeButton.tsx b/src/Serilog.Ui.Web/src/app/components/Authorization/AuthorizeButton.tsx index 7ab7ecf7..9495b22b 100644 --- a/src/Serilog.Ui.Web/src/app/components/Authorization/AuthorizeButton.tsx +++ b/src/Serilog.Ui.Web/src/app/components/Authorization/AuthorizeButton.tsx @@ -2,10 +2,9 @@ import { Button, Modal } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { IconLockCheck, IconLockOpen } from '@tabler/icons-react'; import { useSerilogUiProps } from 'app/hooks/useSerilogUiProps'; -import { Suspense, lazy, memo } from 'react'; +import { lazy, memo, Suspense } from 'react'; import { AuthType } from 'types/types'; import { useAuthProperties } from '../../hooks/useAuthProperties'; -import { isStringGuard } from '../../util/guards'; const BasicModal = lazy(() => import('./BasicModal')); const JwtModal = lazy(() => import('./JwtModal')); @@ -13,12 +12,10 @@ const JwtModal = lazy(() => import('./JwtModal')); const AuthorizeButton = () => { const [opened, { open, close }] = useDisclosure(false); const { authType } = useSerilogUiProps(); - const { authHeader } = useAuthProperties(); + const { isHeaderReady } = useAuthProperties(); if (![AuthType.Basic, AuthType.Jwt].includes(authType ?? AuthType.Custom)) return null; - const isHeaderReady = isStringGuard(authHeader); - return ( <>