diff --git a/shell-ui/jest.config.js b/shell-ui/jest.config.js index f40dfa44ea..5a20ba62af 100644 --- a/shell-ui/jest.config.js +++ b/shell-ui/jest.config.js @@ -1,11 +1,13 @@ module.exports = { - transformIgnorePatterns: [ - '/node_modules/(?!vega-lite|@scality|pretty-bytes|uuid)', - ], - setupFilesAfterEnv: ['./src/setupTests.ts'], - clearMocks: true, - moduleNameMapper: { - '\\.(css|less)$': 'identity-obj-proxy', - }, - testEnvironment: 'jsdom', + transformIgnorePatterns: [ + "/node_modules/(?!vega-lite|@scality|pretty-bytes|uuid|@fortawesome)", + ], + setupFilesAfterEnv: ["./src/setupTests.ts"], + clearMocks: true, + moduleNameMapper: { + "\\.(css|less)$": "identity-obj-proxy", + "^@fortawesome/free-solid-svg-icons/(.*)\\.js$": "@fortawesome/free-solid-svg-icons/$1", + "^@fortawesome/free-regular-svg-icons/(.*)\\.js$": "@fortawesome/free-regular-svg-icons/$1", + }, + testEnvironment: "jsdom", }; diff --git a/shell-ui/package-lock.json b/shell-ui/package-lock.json index a2fa5092e4..5c069795e1 100644 --- a/shell-ui/package-lock.json +++ b/shell-ui/package-lock.json @@ -8,7 +8,7 @@ "name": "shell-ui", "version": "1.0.0", "dependencies": { - "@scality/core-ui": "0.193.0", + "@scality/core-ui": "0.197.0", "@scality/module-federation": "1.6.1", "downshift": "^8.0.0", "history": "^5.3.0", @@ -20,8 +20,8 @@ "react-error-boundary": "^4.0.2", "react-intl": "^5.15.3", "react-query": "^3.34.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "styled-components": "^5.3.11", "typescript": "^5.6.3", "zod": "^4.0.17" @@ -2370,71 +2370,70 @@ } }, "node_modules/@fortawesome/fontawesome-common-types": { - "version": "0.2.36", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", - "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz", + "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==", + "license": "MIT", "engines": { "node": ">=6" } }, "node_modules/@fortawesome/fontawesome-free": { - "version": "5.15.4", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", - "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz", + "integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==", + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", "engines": { "node": ">=6" } }, "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "1.2.36", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", - "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz", + "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==", + "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-common-types": "^0.2.36" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-regular-svg-icons": { - "version": "5.15.4", - "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz", - "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.1.0.tgz", + "integrity": "sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==", + "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "^0.2.36" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "5.15.4", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", - "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz", + "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==", + "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "^0.2.36" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.6.tgz", - "integrity": "sha512-mtBFIi1UsYQo7rYonYFkjgYKGoL8T+fEH6NGUpvuqtY3ytMsAoDaPo5rk25KuMtKDipY4bGYM/CkmCHA1N3FUg==", - "deprecated": "v0.2.x is no longer supported. Unless you are still using FontAwesome 5, please update to v3.1.1 or greater.", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.1.1.tgz", + "integrity": "sha512-EDllr9hpodc21odmUywHS1alXNiCd4E8sp5GJ5s7wYINz8vSmMiNWpALTiuYODb865YyQ/NlyiN4mbXp7HCNqg==", "license": "MIT", - "dependencies": { - "prop-types": "^15.8.1" + "engines": { + "node": ">=20" }, "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7", - "react": "^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "@fortawesome/fontawesome-svg-core": "~6 || ~7", + "react": "^18.0.0 || ^19.0.0" } }, "node_modules/@istanbuljs/load-nyc-config": { @@ -4596,18 +4595,18 @@ "license": "MIT" }, "node_modules/@scality/core-ui": { - "version": "0.193.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.193.0.tgz", - "integrity": "sha512-qUQvv7IltETh1bHKBAoVUM2q4zEgTLSxaRxxftOa0WNpJ3eFmDqis9kHsIfzFdY0SH8q/iM+CGJfn72lzUmsFg==", + "version": "0.197.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.197.0.tgz", + "integrity": "sha512-p7xxxTuDytTorw08XkcejFtWDwxSFp58hdx2PvdEXEtQAxdAySxxlAycykTaWpT81yqnAR2gWBaAB5+aRMYVmA==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.3", "@floating-ui/react": "^0.27.15", - "@fortawesome/fontawesome-free": "^5.10.2", - "@fortawesome/fontawesome-svg-core": "^1.2.35", - "@fortawesome/free-regular-svg-icons": "^5.15.3", - "@fortawesome/free-solid-svg-icons": "^5.15.3", - "@fortawesome/react-fontawesome": "^0.2.3", + "@fortawesome/fontawesome-free": "^7.1.0", + "@fortawesome/fontawesome-svg-core": "^7.1.0", + "@fortawesome/free-regular-svg-icons": "^7.1.0", + "@fortawesome/free-solid-svg-icons": "^7.1.0", + "@fortawesome/react-fontawesome": "^3.1.1", "@js-temporal/polyfill": "^0.4.4", "@storybook/preview-api": "^8.3.6", "downshift": "^7.0.5", @@ -4616,8 +4615,8 @@ "react-dropzone": "^14.2.3", "react-hook-form": "^7.62.0", "react-query": "^3.34.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "react-select": "4.3.1", "react-table": "^7.7.0", "react-test-renderer": "^18.3.1", @@ -15179,9 +15178,9 @@ } }, "node_modules/react-router": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.1.tgz", - "integrity": "sha512-5cy/M8DHcG51/KUIka1nfZ2QeylS4PJRs6TT8I4PF5axVsI5JUxp0hC0NZ/AEEj8Vw7xsEoD7L/6FY+zoYaOGA==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz", + "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -15201,12 +15200,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.1.tgz", - "integrity": "sha512-NkgBCF3sVgCiAWIlSt89GR2PLaksMpoo3HDCorpRfnCEfdtRPLiuTf+CNXvqZMI5SJLZCLpVCvcZrTdtGW64xQ==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz", + "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==", "license": "MIT", "dependencies": { - "react-router": "7.8.1" + "react-router": "7.13.0" }, "engines": { "node": ">=20.0.0" diff --git a/shell-ui/package.json b/shell-ui/package.json index 3e90fda728..c5adbb7c0a 100644 --- a/shell-ui/package.json +++ b/shell-ui/package.json @@ -46,7 +46,7 @@ "ts-node": "^10.9.2" }, "dependencies": { - "@scality/core-ui": "0.193.0", + "@scality/core-ui": "0.197.0", "@scality/module-federation": "1.6.1", "downshift": "^8.0.0", "history": "^5.3.0", @@ -58,8 +58,8 @@ "react-error-boundary": "^4.0.2", "react-intl": "^5.15.3", "react-query": "^3.34.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "styled-components": "^5.3.11", "typescript": "^5.6.3", "zod": "^4.0.17" diff --git a/shell-ui/src/navbar/NotificationCenter.spec.tsx b/shell-ui/src/navbar/NotificationCenter.spec.tsx index 12aff93045..6343801054 100644 --- a/shell-ui/src/navbar/NotificationCenter.spec.tsx +++ b/shell-ui/src/navbar/NotificationCenter.spec.tsx @@ -1,19 +1,20 @@ -import React, { PropsWithChildren } from 'react'; import { act, screen, waitFor, within } from '@testing-library/react'; -import NotificationCenterProvider, { - InternalNotification, - Notification, -} from '../NotificationCenterProvider'; -import NotificationCenter from './NotificationCenter'; import userEvent from '@testing-library/user-event'; +import { PropsWithChildren } from 'react'; import { QueryClient } from 'react-query'; -import { prepareRenderMultipleHooks } from './__TESTS__/testMultipleHooks'; import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { ShellHistoryProvider } from '../initFederation/ShellHistoryProvider'; -import { useNotificationCenter } from '../useNotificationCenter'; +import NotificationCenterProvider, { + InternalNotification, + Notification, +} from '../NotificationCenterProvider'; import { QueryClientProvider } from '../QueryClientProvider'; +import { useNotificationCenter } from '../useNotificationCenter'; +import { prepareRenderMultipleHooks } from './__TESTS__/testMultipleHooks'; +import NotificationCenter from './NotificationCenter'; +import {debug} from "jest-preview"; -export const notificationCenterSelectors = { +const notificationCenterSelectors = { notificationCenterButton: () => screen.getByRole('button', { name: /notification center/i }), emptyNotificationCenterIcon: () => @@ -175,21 +176,23 @@ describe('NotificationCenter', () => { //E open again the notification center userEvent.click(notificationCenterSelectors.notificationCenterButton()); //V the notification are marked as read + debug(); + expect( within(screen.getAllByRole('option')[0]).queryByRole('img', { - name: /unread notification mark/i, - }), - ).toBeNull(); + name: /unread notification mark/i, + }), + ).not.toBeVisible(); expect( within(screen.getAllByRole('option')[1]).queryByRole('img', { name: /unread notification mark/i, }), - ).toBeNull(); + ).not.toBeVisible(); expect( within(screen.getAllByRole('option')[2]).queryByRole('img', { name: /unread notification mark/i, }), - ).toBeNull(); + ).not.toBeVisible(); }); it('can be navigated with the keyboard', async () => { @@ -241,7 +244,7 @@ describe('NotificationCenter', () => { within(lastNotification).queryByRole('img', { name: /unread notification mark/i, }), - ).toBeNull(); + ).not.toBeVisible(); }); it('should not display notifications with the same ID', async () => { @@ -267,17 +270,17 @@ describe('NotificationCenter', () => { within(screen.getAllByRole('option')[0]).queryByRole('img', { name: /unread notification mark/i, }), - ).toBeNull(); + ).not.toBeVisible(); expect( within(screen.getAllByRole('option')[1]).queryByRole('img', { name: /unread notification mark/i, }), - ).toBeNull(); + ).not.toBeVisible(); expect( within(screen.getAllByRole('option')[2]).queryByRole('img', { name: /unread notification mark/i, }), - ).toBeNull(); + ).not.toBeVisible(); //E userEvent.click(notificationCenterSelectors.notificationCenterButton()); //V diff --git a/ui/cypress/e2e/volume/volumelist.cy.js b/ui/cypress/e2e/volume/volumelist.cy.js index 007444ed03..ea41fff953 100644 --- a/ui/cypress/e2e/volume/volumelist.cy.js +++ b/ui/cypress/e2e/volume/volumelist.cy.js @@ -34,7 +34,7 @@ describe('Volume list', () => { cy.visit('/volumes'); // The application re-renders, it's possible the element we're interacting with has become "dead" // cy... failed because the element has been detached from the DOM - cy.findAllByLabelText('Check-circle status healthy'); + cy.findAllByLabelText('status healthy'); cy.findByRole('gridcell', { name: UNHEALTHY_VOLUME_NAME, }).click({ force: true }); @@ -68,7 +68,7 @@ describe('Volume list', () => { it('updates url query param with the search input', () => { cy.visit('/volumes/master-1-prometheus/overview'); //E - cy.findAllByLabelText('Check-circle status healthy'); + cy.findAllByLabelText('status healthy'); cy.findByText(/delete volume/i); cy.findByRole('searchbox').type('hello'); //V diff --git a/ui/package-lock.json b/ui/package-lock.json index 3b4de16918..abbe15e8ef 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -12,7 +12,7 @@ "@hookform/resolvers": "^3.1.0", "@js-temporal/polyfill": "^0.4.4", "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721", - "@scality/core-ui": "0.193.0", + "@scality/core-ui": "0.197.0", "@scality/module-federation": "1.6.1", "axios": "^0.21.1", "formik": "2.2.5", @@ -29,8 +29,8 @@ "react-json-view": "^1.21.3", "react-query": "^3.34.0", "react-redux": "^7.1.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "redux": "^4.0.1", "redux-saga": "^1.0.2", "reselect": "^2.5.4", @@ -2903,65 +2903,70 @@ "license": "0BSD" }, "node_modules/@fortawesome/fontawesome-common-types": { - "version": "0.2.35", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz", + "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==", "license": "MIT", "engines": { "node": ">=6" } }, "node_modules/@fortawesome/fontawesome-free": { - "version": "5.15.3", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz", + "integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==", "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", "engines": { "node": ">=6" } }, "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "1.2.35", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz", + "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==", "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-common-types": "^0.2.35" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-regular-svg-icons": { - "version": "5.15.3", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.1.0.tgz", + "integrity": "sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==", "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "^0.2.35" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "5.15.3", - "hasInstallScript": true, + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz", + "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==", "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "^0.2.35" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.6.tgz", - "integrity": "sha512-mtBFIi1UsYQo7rYonYFkjgYKGoL8T+fEH6NGUpvuqtY3ytMsAoDaPo5rk25KuMtKDipY4bGYM/CkmCHA1N3FUg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.1.1.tgz", + "integrity": "sha512-EDllr9hpodc21odmUywHS1alXNiCd4E8sp5GJ5s7wYINz8vSmMiNWpALTiuYODb865YyQ/NlyiN4mbXp7HCNqg==", "license": "MIT", - "dependencies": { - "prop-types": "^15.8.1" + "engines": { + "node": ">=20" }, "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7", - "react": "^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "@fortawesome/fontawesome-svg-core": "~6 || ~7", + "react": "^18.0.0 || ^19.0.0" } }, "node_modules/@hapi/address": { @@ -5764,18 +5769,18 @@ "dev": true }, "node_modules/@scality/core-ui": { - "version": "0.193.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.193.0.tgz", - "integrity": "sha512-qUQvv7IltETh1bHKBAoVUM2q4zEgTLSxaRxxftOa0WNpJ3eFmDqis9kHsIfzFdY0SH8q/iM+CGJfn72lzUmsFg==", + "version": "0.197.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.197.0.tgz", + "integrity": "sha512-p7xxxTuDytTorw08XkcejFtWDwxSFp58hdx2PvdEXEtQAxdAySxxlAycykTaWpT81yqnAR2gWBaAB5+aRMYVmA==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.3", "@floating-ui/react": "^0.27.15", - "@fortawesome/fontawesome-free": "^5.10.2", - "@fortawesome/fontawesome-svg-core": "^1.2.35", - "@fortawesome/free-regular-svg-icons": "^5.15.3", - "@fortawesome/free-solid-svg-icons": "^5.15.3", - "@fortawesome/react-fontawesome": "^0.2.3", + "@fortawesome/fontawesome-free": "^7.1.0", + "@fortawesome/fontawesome-svg-core": "^7.1.0", + "@fortawesome/free-regular-svg-icons": "^7.1.0", + "@fortawesome/free-solid-svg-icons": "^7.1.0", + "@fortawesome/react-fontawesome": "^3.1.1", "@js-temporal/polyfill": "^0.4.4", "@storybook/preview-api": "^8.3.6", "downshift": "^7.0.5", @@ -5784,8 +5789,8 @@ "react-dropzone": "^14.2.3", "react-hook-form": "^7.62.0", "react-query": "^3.34.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "react-select": "4.3.1", "react-table": "^7.7.0", "react-test-renderer": "^18.3.1", @@ -22825,9 +22830,9 @@ } }, "node_modules/react-router": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.1.tgz", - "integrity": "sha512-5cy/M8DHcG51/KUIka1nfZ2QeylS4PJRs6TT8I4PF5axVsI5JUxp0hC0NZ/AEEj8Vw7xsEoD7L/6FY+zoYaOGA==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz", + "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -22847,12 +22852,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.1.tgz", - "integrity": "sha512-NkgBCF3sVgCiAWIlSt89GR2PLaksMpoo3HDCorpRfnCEfdtRPLiuTf+CNXvqZMI5SJLZCLpVCvcZrTdtGW64xQ==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz", + "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==", "license": "MIT", "dependencies": { - "react-router": "7.8.1" + "react-router": "7.13.0" }, "engines": { "node": ">=20.0.0" @@ -29320,36 +29325,43 @@ } }, "@fortawesome/fontawesome-common-types": { - "version": "0.2.35" + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz", + "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==" }, "@fortawesome/fontawesome-free": { - "version": "5.15.3" + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz", + "integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==" }, "@fortawesome/fontawesome-svg-core": { - "version": "1.2.35", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz", + "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==", "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.35" + "@fortawesome/fontawesome-common-types": "7.1.0" } }, "@fortawesome/free-regular-svg-icons": { - "version": "5.15.3", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.1.0.tgz", + "integrity": "sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==", "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.35" + "@fortawesome/fontawesome-common-types": "7.1.0" } }, "@fortawesome/free-solid-svg-icons": { - "version": "5.15.3", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz", + "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==", "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.35" + "@fortawesome/fontawesome-common-types": "7.1.0" } }, "@fortawesome/react-fontawesome": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.6.tgz", - "integrity": "sha512-mtBFIi1UsYQo7rYonYFkjgYKGoL8T+fEH6NGUpvuqtY3ytMsAoDaPo5rk25KuMtKDipY4bGYM/CkmCHA1N3FUg==", - "requires": { - "prop-types": "^15.8.1" - } + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.1.1.tgz", + "integrity": "sha512-EDllr9hpodc21odmUywHS1alXNiCd4E8sp5GJ5s7wYINz8vSmMiNWpALTiuYODb865YyQ/NlyiN4mbXp7HCNqg==" }, "@hapi/address": { "version": "4.1.0", @@ -31437,17 +31449,17 @@ "dev": true }, "@scality/core-ui": { - "version": "0.193.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.193.0.tgz", - "integrity": "sha512-qUQvv7IltETh1bHKBAoVUM2q4zEgTLSxaRxxftOa0WNpJ3eFmDqis9kHsIfzFdY0SH8q/iM+CGJfn72lzUmsFg==", + "version": "0.197.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.197.0.tgz", + "integrity": "sha512-p7xxxTuDytTorw08XkcejFtWDwxSFp58hdx2PvdEXEtQAxdAySxxlAycykTaWpT81yqnAR2gWBaAB5+aRMYVmA==", "requires": { "@floating-ui/dom": "^1.6.3", "@floating-ui/react": "^0.27.15", - "@fortawesome/fontawesome-free": "^5.10.2", - "@fortawesome/fontawesome-svg-core": "^1.2.35", - "@fortawesome/free-regular-svg-icons": "^5.15.3", - "@fortawesome/free-solid-svg-icons": "^5.15.3", - "@fortawesome/react-fontawesome": "^0.2.3", + "@fortawesome/fontawesome-free": "^7.1.0", + "@fortawesome/fontawesome-svg-core": "^7.1.0", + "@fortawesome/free-regular-svg-icons": "^7.1.0", + "@fortawesome/free-solid-svg-icons": "^7.1.0", + "@fortawesome/react-fontawesome": "^3.1.1", "@js-temporal/polyfill": "^0.4.4", "@storybook/preview-api": "^8.3.6", "downshift": "^7.0.5", @@ -31456,8 +31468,8 @@ "react-dropzone": "^14.2.3", "react-hook-form": "^7.62.0", "react-query": "^3.34.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "react-select": "4.3.1", "react-table": "^7.7.0", "react-test-renderer": "^18.3.1", @@ -43902,9 +43914,9 @@ } }, "react-router": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.1.tgz", - "integrity": "sha512-5cy/M8DHcG51/KUIka1nfZ2QeylS4PJRs6TT8I4PF5axVsI5JUxp0hC0NZ/AEEj8Vw7xsEoD7L/6FY+zoYaOGA==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz", + "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==", "requires": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" @@ -43918,11 +43930,11 @@ } }, "react-router-dom": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.1.tgz", - "integrity": "sha512-NkgBCF3sVgCiAWIlSt89GR2PLaksMpoo3HDCorpRfnCEfdtRPLiuTf+CNXvqZMI5SJLZCLpVCvcZrTdtGW64xQ==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz", + "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==", "requires": { - "react-router": "7.8.1" + "react-router": "7.13.0" } }, "react-select": { diff --git a/ui/package.json b/ui/package.json index e6cb535452..b553ef8771 100644 --- a/ui/package.json +++ b/ui/package.json @@ -7,7 +7,7 @@ "@hookform/resolvers": "^3.1.0", "@js-temporal/polyfill": "^0.4.4", "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721", - "@scality/core-ui": "0.193.0", + "@scality/core-ui": "0.197.0", "@scality/module-federation": "1.6.1", "axios": "^0.21.1", "formik": "2.2.5", @@ -24,8 +24,8 @@ "react-json-view": "^1.21.3", "react-query": "^3.34.0", "react-redux": "^7.1.0", - "react-router": "7.8.1", - "react-router-dom": "7.8.1", + "react-router": "7.13.0", + "react-router-dom": "7.13.0", "redux": "^4.0.1", "redux-saga": "^1.0.2", "reselect": "^2.5.4", @@ -135,7 +135,7 @@ }, "jest": { "transformIgnorePatterns": [ - "/node_modules/(?!(vega-lite|@scality|uuid)/)" + "/node_modules/(?!(vega-lite|@scality|uuid|@fortawesome)/)" ], "testMatch": [ "/src/**/__tests__/**/*.[jt]s?(x)", @@ -145,7 +145,9 @@ "/src/setupTests.tsx" ], "moduleNameMapper": { - "\\.(css|less)$": "identity-obj-proxy" + "\\.(css|less)$": "identity-obj-proxy", + "^@fortawesome/free-solid-svg-icons/(.*)\\.js$": "@fortawesome/free-solid-svg-icons/$1", + "^@fortawesome/free-regular-svg-icons/(.*)\\.js$": "@fortawesome/free-regular-svg-icons/$1" }, "testEnvironment": "jsdom" }, diff --git a/ui/src/components/DashboardGlobalHealth.tsx b/ui/src/components/DashboardGlobalHealth.tsx index 45049d36e5..088cc06e8e 100644 --- a/ui/src/components/DashboardGlobalHealth.tsx +++ b/ui/src/components/DashboardGlobalHealth.tsx @@ -61,7 +61,7 @@ const DashboardGlobalHealth = () => { - + diff --git a/ui/src/components/DashboardInventory.test.tsx b/ui/src/components/DashboardInventory.test.tsx index 8163e93e36..1a6aebcda1 100644 --- a/ui/src/components/DashboardInventory.test.tsx +++ b/ui/src/components/DashboardInventory.test.tsx @@ -1,8 +1,6 @@ -import React from 'react'; import { screen } from '@testing-library/react'; import DashboardInventory from './DashboardInventory'; import { waitForLoadingToFinish, render } from './__TEST__/util'; -import type { Alert } from '../services/alertUtils'; import { useHighestSeverityAlerts } from '../containers/AlertProvider'; import { getNodesCountQuery, @@ -63,10 +61,10 @@ describe('the dashboard inventory panel', () => { await waitForLoadingToFinish(); // Verify expect( - screen.getAllByLabelText(`Node-backend ${STATUS_CRITICAL}`).length, + screen.getAllByLabelText(`Nodes status is ${STATUS_CRITICAL}`).length, ).toEqual(1); expect( - screen.getAllByLabelText(`Volume-backend ${STATUS_CRITICAL}`).length, + screen.getAllByLabelText(`Volumes status is ${STATUS_CRITICAL}`).length, ).toEqual(1); }); test('displays properly the status WARNING for nodes and volumes', async () => { @@ -78,10 +76,10 @@ describe('the dashboard inventory panel', () => { await waitForLoadingToFinish(); // Verify expect( - screen.getAllByLabelText(`Node-backend ${STATUS_WARNING}`).length, + screen.getAllByLabelText(`Nodes status is ${STATUS_WARNING}`).length, ).toEqual(1); expect( - screen.getAllByLabelText(`Volume-backend ${STATUS_WARNING}`).length, + screen.getAllByLabelText(`Volumes status is ${STATUS_WARNING}`).length, ).toEqual(1); }); test('displays properly the status HEALTHY for nodes and volumes', async () => { @@ -93,10 +91,10 @@ describe('the dashboard inventory panel', () => { await waitForLoadingToFinish(); // Verify expect( - screen.getAllByLabelText(`Node-backend ${STATUS_HEALTH}`).length, + screen.getAllByLabelText(`Nodes status is ${STATUS_HEALTH}`).length, ).toEqual(1); expect( - screen.getAllByLabelText(`Volume-backend ${STATUS_HEALTH}`).length, + screen.getAllByLabelText(`Volumes status is ${STATUS_HEALTH}`).length, ).toEqual(1); }); test('displays the loader if the query does not return a result', async () => { diff --git a/ui/src/components/DashboardInventory.tsx b/ui/src/components/DashboardInventory.tsx index 677d3a1fa7..193a70d300 100644 --- a/ui/src/components/DashboardInventory.tsx +++ b/ui/src/components/DashboardInventory.tsx @@ -102,9 +102,9 @@ const DashboardInventory = () => { @@ -139,7 +139,7 @@ const DashboardInventory = () => { diff --git a/ui/src/components/DashboardPlane.test.tsx b/ui/src/components/DashboardPlane.test.tsx index 77f9887e9f..9e5394c95e 100644 --- a/ui/src/components/DashboardPlane.test.tsx +++ b/ui/src/components/DashboardPlane.test.tsx @@ -1,10 +1,8 @@ -import React from 'react'; import { screen } from '@testing-library/react'; +import { STATUS_CRITICAL, STATUS_HEALTH, STATUS_WARNING } from '../constants'; +import { useHighestSeverityAlerts } from '../containers/AlertProvider'; import DashboardPlaneHealth from './DashboardPlaneHealth'; import { render } from './__TEST__/util'; -import type { Alert } from '../services/alertUtils'; -import { useHighestSeverityAlerts } from '../containers/AlertProvider'; -import { STATUS_WARNING, STATUS_CRITICAL, STATUS_HEALTH } from '../constants'; const alertsCritical = [ { id: 'alert1', @@ -49,7 +47,7 @@ describe("the dashboard network's plane panel", () => { (useHighestSeverityAlerts as any).mockImplementation(() => noAlerts); render(); expect( - screen.getAllByLabelText(`Check-circle status ${STATUS_HEALTH}`), + screen.getAllByLabelText(`status ${STATUS_HEALTH}`), ).toHaveLength(NB_ITEMS); }); test('displays 2 warning statuses when warning alerts are present as well as link to the alerts page', async () => { @@ -59,7 +57,7 @@ describe("the dashboard network's plane panel", () => { render(); // Verify expect( - screen.getAllByLabelText(`Exclamation-circle status ${STATUS_WARNING}`), + screen.getAllByLabelText(`status ${STATUS_WARNING}`), ).toHaveLength(NB_ITEMS); expect(screen.getAllByTestId('alert-link')).toHaveLength(NB_ITEMS); }); @@ -70,7 +68,7 @@ describe("the dashboard network's plane panel", () => { render(); // Verify expect( - screen.getAllByLabelText(`Times-circle status ${STATUS_CRITICAL}`), + screen.getAllByLabelText(`status ${STATUS_CRITICAL}`), ).toHaveLength(NB_ITEMS); expect(screen.getAllByTestId('alert-link')).toHaveLength(NB_ITEMS); }); diff --git a/ui/src/components/DashboardServices.test.tsx b/ui/src/components/DashboardServices.test.tsx index a92cae69be..3a03c3bfff 100644 --- a/ui/src/components/DashboardServices.test.tsx +++ b/ui/src/components/DashboardServices.test.tsx @@ -48,7 +48,7 @@ describe('the dashboard inventory panel', () => { render(); // Verify expect( - screen.getAllByLabelText(`Check-circle status ${STATUS_HEALTH}`), + screen.getAllByLabelText(`status ${STATUS_HEALTH}`), ).toHaveLength(8); }); test('displays the services panel and display all 8 warning statuses when warning alerts are present as well as link to the alerts page', async () => { @@ -58,7 +58,7 @@ describe('the dashboard inventory panel', () => { render(); // Verify expect( - screen.getAllByLabelText(`Exclamation-circle status ${STATUS_WARNING}`), + screen.getAllByLabelText(`status ${STATUS_WARNING}`), ).toHaveLength(8); expect(screen.getAllByTestId('alert-link')).toHaveLength(8); }); @@ -69,7 +69,7 @@ describe('the dashboard inventory panel', () => { render(); // Verify expect( - screen.getAllByLabelText(`Times-circle status ${STATUS_CRITICAL}`), + screen.getAllByLabelText(`status ${STATUS_CRITICAL}`), ).toHaveLength(8); expect(screen.getAllByTestId('alert-link')).toHaveLength(8); }); diff --git a/ui/src/components/NodePartitionTable.test.tsx b/ui/src/components/NodePartitionTable.test.tsx index 332574aff3..b6a3d2c4b0 100644 --- a/ui/src/components/NodePartitionTable.test.tsx +++ b/ui/src/components/NodePartitionTable.test.tsx @@ -350,7 +350,7 @@ describe('the system partition table', () => { ); // Verify expect( - screen.getByLabelText('Exclamation-circle status warning'), + screen.getByLabelText('status warning'), ).toBeInTheDocument(); expect(screen.getByLabelText('97%')).toBeInTheDocument(); expect(screen.getByText('/mnt/testpart')).toBeInTheDocument(); diff --git a/ui/src/components/StatusIcon.tsx b/ui/src/components/StatusIcon.tsx index 3588ba5031..c75d287feb 100644 --- a/ui/src/components/StatusIcon.tsx +++ b/ui/src/components/StatusIcon.tsx @@ -7,7 +7,7 @@ import { STATUS_HEALTH, } from '../constants'; -const StatusIcon = ({ name, status }) => { +const StatusIcon = ({ name, status, entity }) => { const color = (() => { switch (status) { case STATUS_SUCCESS: @@ -30,7 +30,7 @@ const StatusIcon = ({ name, status }) => { } })(); - return ; + return ; }; export default StatusIcon; \ No newline at end of file diff --git a/ui/src/containers/AlertPage.tsx b/ui/src/containers/AlertPage.tsx index 666241986e..8c44391280 100644 --- a/ui/src/containers/AlertPage.tsx +++ b/ui/src/containers/AlertPage.tsx @@ -118,7 +118,7 @@ function AlertPageHeader({ <AlertStatusIcon> <StatusWrapper status={alertStatus}> - <StatusIcon status={alertStatus} name="Alert" /> + <StatusIcon status={alertStatus} name="Alert" entity='Alerts' /> </StatusWrapper> </AlertStatusIcon> <> diff --git a/ui/src/containers/CreateVolume.tsx b/ui/src/containers/CreateVolume.tsx index fb5edfbec9..7a6468b1af 100644 --- a/ui/src/containers/CreateVolume.tsx +++ b/ui/src/containers/CreateVolume.tsx @@ -818,6 +818,9 @@ const CreateVolume = (props) => { icon={<Icon name="Delete" />} type="button" onClick={() => removeLabel(key)} + tooltip={{ + overlay: "Remove label", + }} /> </LabelsKeyValue> ))}