diff --git a/client/src/components/App/App.tsx b/client/src/components/App/App.tsx index 28407f69c..e77059783 100644 --- a/client/src/components/App/App.tsx +++ b/client/src/components/App/App.tsx @@ -1,13 +1,21 @@ -import { SnackbarProvider } from 'notistack'; import React, { FC, useEffect } from 'react'; import { RouterProvider } from 'react-router-dom'; +import { Theme } from '@mui/material/styles'; +import { SnackbarProvider } from 'notistack'; import { getTestSuites } from '~/api/TestSuitesApi'; import { router } from '~/components/App/Router'; import { TestSuite } from '~/models/testSuiteModels'; import { useAppStore } from '~/store/app'; import { useTestSessionStore } from '~/store/testSession'; import SnackbarCloseButton from 'components/_common/SnackbarCloseButton'; -import lightTheme from '~/styles/theme'; +import { makeStyles } from 'tss-react/mui'; + +const useStyles = makeStyles<{ height: string }>()((theme: Theme, { height }) => ({ + container: { + marginBottom: height, + zIndex: `${theme.zIndex.snackbar} !important`, + }, +})); const App: FC = () => { const footerHeight = useAppStore((state) => state.footerHeight); @@ -18,6 +26,10 @@ const App: FC = () => { const setWindowIsSmall = useAppStore((state) => state.setWindowIsSmall); const testRunInProgress = useTestSessionStore((state) => state.testRunInProgress); + const { classes } = useStyles({ + height: testRunInProgress ? `${72 + footerHeight}px` : `${footerHeight}px`, + }); + // Update UI on window resize useEffect(() => { window.addEventListener('resize', handleResize); @@ -57,9 +69,8 @@ const App: FC = () => { horizontal: 'right', }} action={(id) => } - style={{ - marginBottom: testRunInProgress ? `${72 + footerHeight}px` : `${footerHeight}px`, - zIndex: lightTheme.zIndex.snackbar, + classes={{ + containerAnchorOriginBottomRight: classes.container, }} > diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index 6884c5df3..08c0a9d21 100644 --- a/client/src/components/Header/Header.tsx +++ b/client/src/components/Header/Header.tsx @@ -8,6 +8,7 @@ import { useAppStore } from '~/store/app'; import useStyles from './styles'; import icon from '~/images/inferno_icon.png'; import lightTheme from '~/styles/theme'; +import CustomTooltip from '../_common/CustomTooltip'; export interface HeaderProps { suiteId?: string; @@ -63,7 +64,13 @@ const Header: FC = ({ ) : ( - Inferno logo + + Inferno logo + )} diff --git a/client/src/components/RequestDetailModal/RequestDetailModal.tsx b/client/src/components/RequestDetailModal/RequestDetailModal.tsx index aead3f9bc..b387a1680 100644 --- a/client/src/components/RequestDetailModal/RequestDetailModal.tsx +++ b/client/src/components/RequestDetailModal/RequestDetailModal.tsx @@ -65,7 +65,7 @@ const RequestDetailModal: FC = ({ {request?.url} {request?.url && ( - + void copyTextClick(request.url)}> diff --git a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx index 30c2539c3..47360e507 100644 --- a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx +++ b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx @@ -27,7 +27,11 @@ const ResultIcon: FC = ({ result, isRunning }) => { if (isRunning && result?.test_run_id !== testRunId) { return ( - + ); } else if (result) { @@ -36,6 +40,8 @@ const ResultIcon: FC = ({ result, isRunning }) => { return ( @@ -45,6 +51,8 @@ const ResultIcon: FC = ({ result, isRunning }) => { return ( @@ -54,6 +62,8 @@ const ResultIcon: FC = ({ result, isRunning }) => { return ( @@ -63,6 +73,8 @@ const ResultIcon: FC = ({ result, isRunning }) => { return ( @@ -71,13 +83,20 @@ const ResultIcon: FC = ({ result, isRunning }) => { case 'omit': return ( - + ); case 'error': return ( @@ -86,26 +105,38 @@ const ResultIcon: FC = ({ result, isRunning }) => { case 'wait': return ( - + ); default: return ( - + + + ); } } else { return ( - + + + ); } }; diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx index fd587be04..9105c9863 100644 --- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx +++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/TestGroupListItem.tsx @@ -126,7 +126,7 @@ const TestGroupListItem: FC = ({ data-testid={`${testGroup.id}-summary`} aria-controls={`${testGroup.id}-detail`} className={classes.accordionSummary} - expandIcon={view === 'run' && } + expandIcon={view === 'run' && } > diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx index e410f1d39..d3675d715 100644 --- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx +++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx @@ -69,7 +69,13 @@ const RequestList: FC = ({ requests, resultId, updateRequest, if (request.result_id !== resultId) { return ( - + ); } @@ -150,8 +156,9 @@ const RequestList: FC = ({ requests, resultId, updateRequest, = ({ data-testid={`${test.id}-summary`} aria-controls={`${test.id}-detail`} role={view === 'report' ? 'region' : 'button'} - expandIcon={view === 'run' && } + expandIcon={ + view === 'run' && ( + + + + ) + } className={classes.accordionSummary} onKeyDown={(e) => { if (view !== 'report' && e.key === 'Enter') { diff --git a/package-lock.json b/package-lock.json index 2efbf67dc..1add0b165 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@mui/material": "^5.11.13", "history": "^5.3.0", "js-yaml": "^4.1.0", - "notistack": "^2.0.8", + "notistack": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", @@ -11817,6 +11817,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz", + "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -17558,31 +17566,24 @@ } }, "node_modules/notistack": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/notistack/-/notistack-2.0.8.tgz", - "integrity": "sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz", + "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==", "dependencies": { "clsx": "^1.1.0", - "hoist-non-react-statics": "^3.3.0" + "goober": "^2.0.33" + }, + "engines": { + "node": ">=12.0.0", + "npm": ">=6.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/notistack" }, "peerDependencies": { - "@emotion/react": "^11.4.1", - "@emotion/styled": "^11.3.0", - "@mui/material": "^5.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - } } }, "node_modules/npm-run-path": { diff --git a/package.json b/package.json index 6dca570eb..3beac0ced 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@mui/material": "^5.11.13", "history": "^5.3.0", "js-yaml": "^4.1.0", - "notistack": "^2.0.8", + "notistack": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1",