From b9e9f3f5033f4c1ff8fa26fb2e4a08d6258d2539 Mon Sep 17 00:00:00 2001 From: daniele-mng Date: Thu, 9 Jan 2025 17:16:55 +0100 Subject: [PATCH 1/3] deps: bump @greenbone/opensight-ui-components-mantinev7 --- package-lock.json | 74 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 449193596d..317c8b4fe8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "AGPL-3.0+", "dependencies": { "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.4", - "@greenbone/opensight-ui-components-mantinev7": "^0.0.7-alpha4", + "@greenbone/opensight-ui-components-mantinev7": "^0.0.7", "@mantine/core": "^7.15.3", "@reduxjs/toolkit": "^2.5.0", "@sentry/react": "^8.39.0", @@ -2662,15 +2662,15 @@ "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" }, "node_modules/@greenbone/opensight-ui-components-mantinev7": { - "version": "0.0.7-alpha4", - "resolved": "https://registry.npmjs.org/@greenbone/opensight-ui-components-mantinev7/-/opensight-ui-components-mantinev7-0.0.7-alpha4.tgz", - "integrity": "sha512-/lbIvJAiBgtUzmZCwnHQvx9AmEwCu0Iz3j5dGnSUJlOOaWxbQdbITtJCpILe+zb+aYD7Y+5f2qw+KjKgLdkt8w==", + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/@greenbone/opensight-ui-components-mantinev7/-/opensight-ui-components-mantinev7-0.0.7.tgz", + "integrity": "sha512-LehN7vX07Mcm3axz13QGCbqU8RFvyNlMeB6kHGWWOU82Se5L2fynh229nomef8+oZaSaNKXFcVu2V4GLjEFmow==", "dependencies": { "@mantine/core": "^7.12.1", "@mantine/dates": "^7.12.1", "@mantine/hooks": "^7.12.1", "@mantine/notifications": "^7.12.1", - "lucide-react": "^0.460.0", + "lucide-react": "^0.468.0", "luxon": "^3.5.0", "react": "^18.x.x", "react-dom": "^18.x.x", @@ -2680,10 +2680,10 @@ "tiny-invariant": "^1.3.3", "urlcat": "^3", "webfontloader": "^1.6.28", - "yup": "^1.4.0" + "yup": "^1.5.0" }, "optionalDependencies": { - "@reduxjs/toolkit": "^2.3.0", + "@reduxjs/toolkit": "^2.4.0", "@swc/core-darwin-arm64": "^1.3.107" }, "peerDependencies": { @@ -2691,16 +2691,16 @@ "@mantine/dates": "^7.12.1", "@mantine/hooks": "^7.12.1", "@mantine/notifications": "^7.12.1", - "lucide-react": "^0.460.0", + "lucide-react": "^0.468.0", "react": "^18.x.x", "react-dom": "^18.x.x", "react-i18next": "^15.x.x" } }, "node_modules/@greenbone/opensight-ui-components-mantinev7/node_modules/lucide-react": { - "version": "0.460.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz", - "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==", + "version": "0.468.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.468.0.tgz", + "integrity": "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" } @@ -3675,9 +3675,9 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.7.42", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.42.tgz", - "integrity": "sha512-fWhaCs2+8GDRIcjExVDEIfbptVrxDqG8oHkESnXgymmvqTWzWei5SOnPNMS8Q+MYsn/b++Y2bDxkcwmq35Bvxg==", + "version": "1.10.6", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.6.tgz", + "integrity": "sha512-USbMvT8Rw5PvIfF6HyTm+yW84J9c45emzmHBDIWY76vZHkFsS5MepNi+JLQyBzBBgE7ScwBRBNhRx6VNhkSoww==", "cpu": [ "arm64" ], @@ -3985,10 +3985,10 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.11", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", - "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", - "dependencies": { + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", + "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", + "peerDependencies": { "@types/react": "*" } }, @@ -10754,9 +10754,9 @@ } }, "node_modules/qs": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", - "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz", + "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==", "dependencies": { "side-channel": "^1.0.6" }, @@ -10850,9 +10850,9 @@ } }, "node_modules/react-hook-form": { - "version": "7.53.1", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz", - "integrity": "sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==", + "version": "7.54.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz", + "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==", "engines": { "node": ">=18.0.0" }, @@ -11006,9 +11006,9 @@ } }, "node_modules/react-select": { - "version": "5.8.3", - "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.3.tgz", - "integrity": "sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==", + "version": "5.9.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.9.0.tgz", + "integrity": "sha512-nwRKGanVHGjdccsnzhFte/PULziueZxGD8LL2WojON78Mvnq7LdAMEtu2frrwld1fr3geixg3iiMBIc/LLAZpw==", "dependencies": { "@babel/runtime": "^7.12.0", "@emotion/cache": "^11.4.0", @@ -11018,11 +11018,11 @@ "memoize-one": "^6.0.0", "prop-types": "^15.6.0", "react-transition-group": "^4.3.0", - "use-isomorphic-layout-effect": "^1.1.2" + "use-isomorphic-layout-effect": "^1.2.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/react-style-singleton": { @@ -12873,11 +12873,11 @@ } }, "node_modules/use-isomorphic-layout-effect": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz", + "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==", "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -13682,9 +13682,9 @@ } }, "node_modules/yup": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz", - "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz", + "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==", "dependencies": { "property-expr": "^2.0.5", "tiny-case": "^1.0.3", diff --git a/package.json b/package.json index 7aedb431ba..095dd28f32 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.4", - "@greenbone/opensight-ui-components-mantinev7": "^0.0.7-alpha4", + "@greenbone/opensight-ui-components-mantinev7": "^0.0.7", "@mantine/core": "^7.15.3", "@reduxjs/toolkit": "^2.5.0", "@sentry/react": "^8.39.0", From 456ce8683a4bf9ce3b283b99391f6a12986913ff Mon Sep 17 00:00:00 2001 From: daniele-mng Date: Thu, 9 Jan 2025 17:18:41 +0100 Subject: [PATCH 2/3] Change: Header component to include user timezone --- src/web/components/structure/header.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/web/components/structure/header.jsx b/src/web/components/structure/header.jsx index 7c6c080ecc..b134132539 100644 --- a/src/web/components/structure/header.jsx +++ b/src/web/components/structure/header.jsx @@ -4,25 +4,28 @@ */ import {AppHeader} from '@greenbone/opensight-ui-components-mantinev7'; -import _ from 'gmp/locale'; import {useCallback} from 'react'; +import {useSelector} from 'react-redux'; import {useNavigate} from 'react-router-dom'; import LogoutIcon from 'web/components/icon/logouticon'; import MySettingsIcon from 'web/components/icon/mysettingsicon'; +import SessionTimer from 'web/components/sessionTimer/SessionTimer'; import getLogo from 'web/components/structure/getLogo'; +import LanguageSwitch from 'web/components/structure/languageswitch'; import useGmp from 'web/hooks/useGmp'; +import useTranslation from 'web/hooks/useTranslation'; import useUserIsLoggedIn from 'web/hooks/useUserIsLoggedIn'; import useUserName from 'web/hooks/useUserName'; -import LanguageSwitch from './languageswitch'; -import SessionTimer from '../sessionTimer/SessionTimer'; - const Header = () => { + const [_] = useTranslation(); + const gmp = useGmp(); const username = useUserName(); const loggedIn = useUserIsLoggedIn(); const navigate = useNavigate(); const logoComponent = getLogo(gmp.settings.vendorLabel); + const timezone = useSelector(state => state.userSettings.timezone); const handleSettingsClick = useCallback( event => { @@ -58,6 +61,7 @@ const Header = () => { return ( } From f3c05349603e216f34093fb7ac409d6ce4c6c833 Mon Sep 17 00:00:00 2001 From: daniele-mng Date: Mon, 13 Jan 2025 13:21:16 +0100 Subject: [PATCH 3/3] add tests --- .../__tests__/__snapshots__/header.jsx.snap | 86 ------------------- .../components/structure/__tests__/header.jsx | 79 +++++++++++++++++ 2 files changed, 79 insertions(+), 86 deletions(-) delete mode 100644 src/web/components/structure/__tests__/__snapshots__/header.jsx.snap create mode 100644 src/web/components/structure/__tests__/header.jsx diff --git a/src/web/components/structure/__tests__/__snapshots__/header.jsx.snap b/src/web/components/structure/__tests__/__snapshots__/header.jsx.snap deleted file mode 100644 index 5baddd3f88..0000000000 --- a/src/web/components/structure/__tests__/__snapshots__/header.jsx.snap +++ /dev/null @@ -1,86 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Header tests > should render header 1`] = ` -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: start; - justify-content: start; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c3 { - width: 40px; - height: 40px; - margin-right: 4px; - margin-top: 1px; - margin-bottom: 1px; -} - -.c4 { - height: 40px; - padding-top: 1px; - padding-bottom: 1px; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 42px; - background-color: #11ab51; - padding: 0px 5px 0px 5px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 600; -} - -.c0 { - height: 42px; -} - -
-
-
-
- Greenbone Security Assistant - Greenbone Security Assistant -
-
-
-
-`; diff --git a/src/web/components/structure/__tests__/header.jsx b/src/web/components/structure/__tests__/header.jsx new file mode 100644 index 0000000000..78d3dfe7ba --- /dev/null +++ b/src/web/components/structure/__tests__/header.jsx @@ -0,0 +1,79 @@ +/* SPDX-FileCopyrightText: 2025 Greenbone AG + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +import {describe, test, expect, testing} from '@gsa/testing'; +import Header from 'web/components/structure/header'; +import {setTimezone, setUsername} from 'web/store/usersettings/actions'; +import {rendererWith, screen, userEvent, waitFor} from 'web/utils/testing'; + +const gmp = { + settings: { + vendorLabel: 'gsm-150_label.svg', + }, + doLogout: testing.fn().mockResolvedValue(), +}; + +describe('Header', () => { + test('renders component', async () => { + const {render, store} = rendererWith({ + gmp, + router: true, + store: true, + }); + store.dispatch(setTimezone('UTC')); + store.dispatch(setUsername('testUser')); + + render(
); + + expect(screen.getByText('UTC')).toBeVisible(); + + const langBtn = screen.getByRole('button', { + name: 'Switch language to German', + }); + expect(langBtn).toBeVisible(); + + const renewBtn = screen.getByRole('button', { + name: 'Renew session timeout', + }); + expect(renewBtn).toBeVisible(); + + const username = screen.getByText('testUser'); + expect(username).toBeVisible(); + + const themeSwitch = screen.queryByRole('button', { + name: 'Switch color theme', + }); + + expect(themeSwitch).not.toBeInTheDocument(); + + const logo = screen.getByTestId('Enterprise150'); + expect(logo).toBeVisible(); + }); + + test('opens user menu, checks items and logs out user', async () => { + const {render, store} = rendererWith({ + gmp, + router: true, + store: true, + }); + store.dispatch(setUsername('testUser')); + + render(
); + + const settingsBtn = screen.getByText('testUser'); + userEvent.click(settingsBtn); + + await waitFor(() => { + expect(screen.getByText('Settings')).toBeVisible(); + }); + + const logoutBtn = screen.getByText('Logout'); + userEvent.click(logoutBtn); + + await waitFor(() => { + expect(gmp.doLogout).toHaveBeenCalled(); + }); + }); +});