From 578c1e791b6819b306a53a49c8c5d780dc007bea Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Fri, 1 Mar 2024 15:49:25 +0000 Subject: [PATCH 1/9] increase toast functionality #355 --- src/pageContainer.component.tsx | 22 +++++++++++++++++++ .../middleware/scigateway.middleware.tsx | 6 +++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/pageContainer.component.tsx b/src/pageContainer.component.tsx index b9006ebb..7f409350 100644 --- a/src/pageContainer.component.tsx +++ b/src/pageContainer.component.tsx @@ -8,6 +8,7 @@ import Tour from './tour/tour.component'; import CookieConsent from './cookieConsent/cookieConsent.component'; import Footer from './footer/footer.component'; import { useMediaQuery } from '@mui/material'; +import { toastr } from 'react-redux-toastr'; const RootDiv = styled('div')(({ theme }) => ({ position: 'relative', @@ -19,6 +20,27 @@ const PageContainer = (): React.ReactElement => { const theme = useTheme(); const isViewportMdOrLarger = useMediaQuery(theme.breakpoints.up('md')); + React.useEffect(() => { + const clearToasts = (): void => { + toastr.clean(); + }; + + const handleKeyPress = (event: KeyboardEvent): void => { + if (event instanceof KeyboardEvent && event.key === 'Escape') { + clearToasts(); + } + }; + + // Add event listeners for keydown events + + document.addEventListener('keydown', handleKeyPress); + + // Clean up the event listeners when component unmounts + return () => { + document.removeEventListener('keydown', handleKeyPress); + }; + }, []); + return ( diff --git a/src/state/middleware/scigateway.middleware.tsx b/src/state/middleware/scigateway.middleware.tsx index e56a999c..fa97319e 100644 --- a/src/state/middleware/scigateway.middleware.tsx +++ b/src/state/middleware/scigateway.middleware.tsx @@ -169,9 +169,11 @@ export const listenToPlugins = ( // If "instant" is not used, by default we only show "warning" and "error" messages. if (pluginMessage.detail.payload.severity !== undefined) { - const { severity, message } = pluginMessage.detail.payload; + const { severity, message, show } = pluginMessage.detail.payload; - if (severity !== 'success') { + if (!show && severity !== 'success') { + toastrMessage(message, severity); + } else if (show) { toastrMessage(message, severity); } } From d52b0b055f33b72730d89dceb4bbab3b61a5be74 Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Fri, 1 Mar 2024 15:53:12 +0000 Subject: [PATCH 2/9] improve the if statement #355 --- src/state/middleware/scigateway.middleware.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/state/middleware/scigateway.middleware.tsx b/src/state/middleware/scigateway.middleware.tsx index fa97319e..0612eab4 100644 --- a/src/state/middleware/scigateway.middleware.tsx +++ b/src/state/middleware/scigateway.middleware.tsx @@ -173,7 +173,7 @@ export const listenToPlugins = ( if (!show && severity !== 'success') { toastrMessage(message, severity); - } else if (show) { + } else if (show === 'true') { toastrMessage(message, severity); } } From c3b8e5ad10c51e82ad6f1c04e3b2a331688f54d3 Mon Sep 17 00:00:00 2001 From: Joshua Kitenge <83226114+joshuadkitenge@users.noreply.github.com> Date: Tue, 5 Mar 2024 14:56:58 +0000 Subject: [PATCH 3/9] Update src/pageContainer.component.tsx Co-authored-by: Joel Davies <90245114+joelvdavies@users.noreply.github.com> --- src/pageContainer.component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pageContainer.component.tsx b/src/pageContainer.component.tsx index 7f409350..a562ee96 100644 --- a/src/pageContainer.component.tsx +++ b/src/pageContainer.component.tsx @@ -32,7 +32,6 @@ const PageContainer = (): React.ReactElement => { }; // Add event listeners for keydown events - document.addEventListener('keydown', handleKeyPress); // Clean up the event listeners when component unmounts From 566a4e4c9eccc0ca40b7bc7c337d45a3a2af2a26 Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Tue, 5 Mar 2024 15:04:47 +0000 Subject: [PATCH 4/9] address review comments --- src/state/middleware/scigateway.middleware.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/state/middleware/scigateway.middleware.tsx b/src/state/middleware/scigateway.middleware.tsx index 0612eab4..4374cd36 100644 --- a/src/state/middleware/scigateway.middleware.tsx +++ b/src/state/middleware/scigateway.middleware.tsx @@ -169,11 +169,14 @@ export const listenToPlugins = ( // If "instant" is not used, by default we only show "warning" and "error" messages. if (pluginMessage.detail.payload.severity !== undefined) { - const { severity, message, show } = pluginMessage.detail.payload; + const { severity, message, showAllToasts } = + pluginMessage.detail.payload; - if (!show && severity !== 'success') { + if (showAllToasts !== 'true' && severity !== 'success') { + // Shows all toasts messages expect for the success the toasts messages toastrMessage(message, severity); - } else if (show === 'true') { + } else if (showAllToasts === 'true') { + // Shows all of the toasts messages toastrMessage(message, severity); } } From 425e2f40c1ef81664c2925ea4f2a93cf0c4d79dc Mon Sep 17 00:00:00 2001 From: Joshua Kitenge <83226114+joshuadkitenge@users.noreply.github.com> Date: Wed, 6 Mar 2024 08:57:30 +0000 Subject: [PATCH 5/9] Update src/state/middleware/scigateway.middleware.tsx Co-authored-by: Joel Davies <90245114+joelvdavies@users.noreply.github.com> --- src/state/middleware/scigateway.middleware.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/state/middleware/scigateway.middleware.tsx b/src/state/middleware/scigateway.middleware.tsx index 4374cd36..75720bb1 100644 --- a/src/state/middleware/scigateway.middleware.tsx +++ b/src/state/middleware/scigateway.middleware.tsx @@ -173,7 +173,7 @@ export const listenToPlugins = ( pluginMessage.detail.payload; if (showAllToasts !== 'true' && severity !== 'success') { - // Shows all toasts messages expect for the success the toasts messages + // Shows all toasts messages except for the success messages toastrMessage(message, severity); } else if (showAllToasts === 'true') { // Shows all of the toasts messages From f1ac27aeed462f5d5a08bc5975166b5c042c52ad Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Wed, 6 Mar 2024 15:10:24 +0000 Subject: [PATCH 6/9] revert back --- src/state/middleware/scigateway.middleware.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/state/middleware/scigateway.middleware.tsx b/src/state/middleware/scigateway.middleware.tsx index 75720bb1..e56a999c 100644 --- a/src/state/middleware/scigateway.middleware.tsx +++ b/src/state/middleware/scigateway.middleware.tsx @@ -169,14 +169,9 @@ export const listenToPlugins = ( // If "instant" is not used, by default we only show "warning" and "error" messages. if (pluginMessage.detail.payload.severity !== undefined) { - const { severity, message, showAllToasts } = - pluginMessage.detail.payload; + const { severity, message } = pluginMessage.detail.payload; - if (showAllToasts !== 'true' && severity !== 'success') { - // Shows all toasts messages except for the success messages - toastrMessage(message, severity); - } else if (showAllToasts === 'true') { - // Shows all of the toasts messages + if (severity !== 'success') { toastrMessage(message, severity); } } From 9c8af2298524b2b8457c02831b55ca13e21c10ff Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Wed, 6 Mar 2024 15:47:55 +0000 Subject: [PATCH 7/9] add e2e test --- cypress/e2e/login.cy.ts | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/cypress/e2e/login.cy.ts b/cypress/e2e/login.cy.ts index ecf44fe3..def48638 100644 --- a/cypress/e2e/login.cy.ts +++ b/cypress/e2e/login.cy.ts @@ -401,6 +401,35 @@ describe('Login', () => { cy.get('#demo_plugin').contains('Demo Plugin').should('be.visible'); }); + it('can remove toasts with esc keydown when a plugin error occurs', () => { + cy.intercept('/settings.json', { + plugins: [ + { + name: 'demo_plugin', + src: '/plugins/main.js', + enable: true, + location: 'main', + }, + ], + 'ui-strings': 'res/default.json', + 'auth-provider': 'icat', + authUrl: 'http://localhost:8000', + autoLogin: true, + 'help-tour-steps': [], + }); + verifyResponse = verifySuccess; + loginResponse = loginSuccess; + cy.visit('/plugin1'); + + cy.contains('Failed to load plugin demo_plugin from /plugins/main.js.'); + + cy.get('body').type('{esc}'); + + cy.contains( + 'Failed to load plugin demo_plugin from /plugins/main.js.' + ).should('not.exist'); + }); + it('should be able to switch authenticators and still be "auto logged in"', () => { verifyResponse = verifySuccess; loginResponse = loginSuccess; From b4872d3e76f15fdbc389da8472855410d744866f Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Wed, 6 Mar 2024 16:18:49 +0000 Subject: [PATCH 8/9] add assertion --- cypress/e2e/login.cy.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/login.cy.ts b/cypress/e2e/login.cy.ts index def48638..c884d136 100644 --- a/cypress/e2e/login.cy.ts +++ b/cypress/e2e/login.cy.ts @@ -421,7 +421,9 @@ describe('Login', () => { loginResponse = loginSuccess; cy.visit('/plugin1'); - cy.contains('Failed to load plugin demo_plugin from /plugins/main.js.'); + cy.contains( + 'Failed to load plugin demo_plugin from /plugins/main.js.' + ).should('exist'); cy.get('body').type('{esc}'); From e663688f725eed9abf3064304d0336efb61da650 Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Thu, 7 Mar 2024 11:25:16 +0000 Subject: [PATCH 9/9] add unit test --- src/pageContainer.test.tsx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pageContainer.test.tsx b/src/pageContainer.test.tsx index fec64ff2..f31320ac 100644 --- a/src/pageContainer.test.tsx +++ b/src/pageContainer.test.tsx @@ -9,10 +9,12 @@ import { MemoryRouter } from 'react-router-dom'; import PageContainer from './pageContainer.component'; import { StateType } from './state/state.types'; import { authState, initialState } from './state/reducers/scigateway.reducer'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { Provider } from 'react-redux'; import { ThemeProvider } from '@mui/material'; import { buildTheme } from './theming'; +import { toastr } from 'react-redux-toastr'; +import userEvent from '@testing-library/user-event'; jest.mock('@mui/material', () => ({ __esmodule: true, @@ -43,4 +45,22 @@ describe('PageContainer - Tests', () => { expect(asFragment()).toMatchSnapshot(); }); + + it('calls toastr.clean() when escape is clicked', async () => { + const cleanSpy = jest.spyOn(toastr, 'clean'); + render( + + + + + + + + ); + + const element = screen.getByLabelText('home-page'); + await userEvent.type(element, '{Escape}'); + expect(cleanSpy).toHaveBeenCalled(); + cleanSpy.mockRestore(); + }); });