From d5d2f7c73c2222009fd997de4a4ae1d3fd973eef Mon Sep 17 00:00:00 2001 From: Daniel Haselhan Date: Wed, 4 Sep 2024 15:21:56 -0700 Subject: [PATCH 1/2] Add Logout to Mobile Hamburger * Add new route that fires log out keycloak function * Add new route to the navbar that is only enabled on mobile size * Add tests --- frontend/src/App.jsx | 12 +- .../components/BCNavbar/BCNavbar.stories.jsx | 324 +----------------- frontend/src/constants/routes/routes.js | 1 + .../layouts/MainLayout/components/Navbar.jsx | 61 ++-- .../components/__tests__/Navbar.test.jsx | 85 ++++- 5 files changed, 133 insertions(+), 350 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d5fdc7276..3d8134dd3 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -26,11 +26,12 @@ import { NotFound } from './components/NotFound' import ContactUs from './components/ContactUs' import PublicLayout from './layouts/PublicLayout' import { EditViewComplianceReport } from './views/ComplianceReports/EditViewComplianceReport' -import { AddEditNotionalTransfers } from './views/NotionalTransfers/AddEditNotionalTransfers' +import { AddEditNotionalTransfers } from '@/views/NotionalTransfers' import { AddEditOtherUses } from './views/OtherUses/AddEditOtherUses' import { AddEditFinalSupplyEquipments } from './views/FinalSupplyEquipments/AddEditFinalSupplyEquipments' import { AddEditFuelSupplies } from './views/FuelSupplies/AddEditFuelSupplies' import { AddEditAllocationAgreements } from './views/AllocationAgreements/AddAllocationAgreements' +import { logout } from '@/utils/keycloak.js' const router = createBrowserRouter([ { @@ -361,6 +362,13 @@ const router = createBrowserRouter([ element: , handle: { crumb: () => 'Contact Us' } }, + { + path: ROUTES.LOG_OUT, + loader: async () => { + logout() + return null + } + }, { path: '*', element: @@ -369,4 +377,4 @@ const router = createBrowserRouter([ const App = () => -export default App \ No newline at end of file +export default App diff --git a/frontend/src/components/BCNavbar/BCNavbar.stories.jsx b/frontend/src/components/BCNavbar/BCNavbar.stories.jsx index b1d6d7bbb..0878702a4 100644 --- a/frontend/src/components/BCNavbar/BCNavbar.stories.jsx +++ b/frontend/src/components/BCNavbar/BCNavbar.stories.jsx @@ -5,327 +5,10 @@ export default { component: BCNavbar } -const Template = (args) => ( - <> - -

This is the heading

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

-

- Ut Lorem aute ullamco proident ipsum est exercitation ea aute consequat. - Excepteur dolore ex aliqua cupidatat quis. Cillum fugiat mollit - exercitation sunt magna sunt ea ut do dolore labore. Occaecat in laborum - deserunt duis aute labore quis aliquip et. Anim do ad ullamco nostrud - tempor ad esse adipisicing nostrud fugiat. Aute non nostrud nisi culpa - esse esse enim reprehenderit nulla magna. Sit proident exercitation nisi - adipisicing sunt veniam sint non sit. Sit duis fugiat magna culpa sunt - nisi ut proident. Dolore esse elit mollit et cupidatat duis officia - reprehenderit velit proident. Officia velit quis excepteur culpa laborum - occaecat elit quis occaecat eu adipisicing magna incididunt amet. -

- -) +const Template = (args) => // Define the different stories -// Icons are optional optional +// Icons are optional export const Default = Template.bind({}) Default.args = { routes: [ @@ -334,6 +17,7 @@ Default.args = { { name: 'Transactions', route: '/transactions' }, { name: 'Compliance Report', route: '/compliance-report' }, { name: 'Organization', route: '/organization' }, - { name: 'Administration', route: '/administration' } + { name: 'Administration', route: '/administration' }, + { name: 'Log out', route: '/logout' } ] } diff --git a/frontend/src/constants/routes/routes.js b/frontend/src/constants/routes/routes.js index d2b2f9f9f..7e9c473e7 100644 --- a/frontend/src/constants/routes/routes.js +++ b/frontend/src/constants/routes/routes.js @@ -64,3 +64,4 @@ export const FILESUBMISSION = '/file-submissions' // might not need export const APIDOCS = '/docs' export const CONTACT_US = '/contact-us' +export const LOG_OUT = '/log-out' \ No newline at end of file diff --git a/frontend/src/layouts/MainLayout/components/Navbar.jsx b/frontend/src/layouts/MainLayout/components/Navbar.jsx index aca735ba0..a49c485d9 100644 --- a/frontend/src/layouts/MainLayout/components/Navbar.jsx +++ b/frontend/src/layouts/MainLayout/components/Navbar.jsx @@ -6,39 +6,46 @@ import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { HeaderComponent } from './HeaderComponent' import { Logout } from './Logout' +import { useMediaQuery, useTheme } from '@mui/material' export const Navbar = () => { const { t } = useTranslation() const { data: currentUser } = useCurrentUser() + const theme = useTheme() + const isMobileView = useMediaQuery(theme.breakpoints.down('xl')) // Nav Links - const navMenuItems = useMemo( - () => - currentUser.isGovernmentUser - ? // IDIR Routes - [ - { name: t('Dashboard'), route: ROUTES.DASHBOARD }, - { name: t('Organizations'), route: ROUTES.ORGANIZATIONS }, - { name: t('Transactions'), route: ROUTES.TRANSACTIONS }, - { name: t('ComplianceReporting'), route: ROUTES.REPORTS }, - { - name: t('FuelCodes'), - route: ROUTES.FUELCODES, - hide: !currentUser.roles.find( - (role) => role.name === roles.analyst - ) - }, - { name: t('Administration'), route: ROUTES.ADMIN } - ] - : // BCeID Routes - [ - { name: t('Dashboard'), route: ROUTES.DASHBOARD }, - { name: t('Transactions'), route: ROUTES.TRANSACTIONS }, - { name: t('ComplianceReporting'), route: ROUTES.REPORTS }, - { name: t('Organization'), route: ROUTES.ORGANIZATION } - ], - [currentUser, t] - ) + const navMenuItems = useMemo(() => { + const isAnalyst = currentUser.roles.find( + (role) => role.name === roles.analyst + ) + const idirRoutes = [ + { name: t('Dashboard'), route: ROUTES.DASHBOARD }, + { name: t('Organizations'), route: ROUTES.ORGANIZATIONS }, + { name: t('Transactions'), route: ROUTES.TRANSACTIONS }, + { name: t('ComplianceReporting'), route: ROUTES.REPORTS }, + { + name: t('FuelCodes'), + route: ROUTES.FUELCODES, + hide: !isAnalyst + }, + { name: t('Administration'), route: ROUTES.ADMIN } + ] + const bceidRoutes = [ + { name: t('Dashboard'), route: ROUTES.DASHBOARD }, + { name: t('Transactions'), route: ROUTES.TRANSACTIONS }, + { name: t('ComplianceReporting'), route: ROUTES.REPORTS }, + { name: t('Organization'), route: ROUTES.ORGANIZATION } + ] + const mobileRoutes = [{ name: t('logout'), route: ROUTES.LOG_OUT }] + + const activeRoutes = currentUser.isGovernmentUser ? idirRoutes : bceidRoutes + + if (isMobileView) { + activeRoutes.push(...mobileRoutes) + } + return activeRoutes + }, [currentUser, t, isMobileView]) return ( ({ + useTranslation: () => ({ + t: (key) => key + }) +})) +vi.mock('@mui/material', async () => { + const actual = await vi.importActual('@mui/material') + return { + ...actual, + useTheme: vi.fn(), + useMediaQuery: vi.fn() + } +}) + +vi.mock('@react-keycloak/web', () => ({ + useKeycloak: vi.fn().mockReturnValue({ + keycloak: { authenticated: true } + }) +})) + +describe('Navbar', () => { + const mockUser = { + isGovernmentUser: true, + roles: [ + { + name: roles.analyst + } + ] + } + + beforeEach(() => { + useCurrentUser.mockReturnValue({ + data: mockUser + }) + useMediaQuery.mockReturnValue(false) // Set to false for desktop tests + useTheme.mockReturnValue({ + breakpoints: { + down: () => {} + } + }) + }) + + test('renders correctly with the expected title', () => { + render(, { wrapper }) + expect(screen.getByTestId('bc-navbar')).toBeInTheDocument() + }) + + test('displays the correct navigation menu items for government users', () => { + render(, { wrapper }) + + expect(screen.getByText('Dashboard')).toBeInTheDocument() + expect(screen.getByText('Organizations')).toBeInTheDocument() + expect(screen.getByText('Transactions')).toBeInTheDocument() + expect(screen.getByText('ComplianceReporting')).toBeInTheDocument() + expect(screen.getByText('FuelCodes')).toBeInTheDocument() // Analyst role allows this + expect(screen.getByText('Administration')).toBeInTheDocument() + }) + + test('displays the correct navigation menu items for non-government users', () => { + mockUser.isGovernmentUser = false + render(, { wrapper }) + + expect(screen.getByText('Dashboard')).toBeInTheDocument() + expect(screen.queryByText('Organizations')).not.toBeInTheDocument() // Should not be present + expect(screen.getByText('Transactions')).toBeInTheDocument() + expect(screen.getByText('ComplianceReporting')).toBeInTheDocument() + expect(screen.getByText('Organization')).toBeInTheDocument() + }) + + test('renders logout component', () => { + render(, { wrapper }) + expect(screen.getByText('logout')).toBeInTheDocument() // Assuming Logout component has this text + }) +}) From 9577441c9fbeabb675e78738e74bf17d2a0fe8d4 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 4 Sep 2024 15:56:47 -0700 Subject: [PATCH 2/2] fix: date format in test --- .../Transfers/components/__tests__/TransferSummary.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/views/Transfers/components/__tests__/TransferSummary.test.jsx b/frontend/src/views/Transfers/components/__tests__/TransferSummary.test.jsx index 563a3c326..43050634c 100644 --- a/frontend/src/views/Transfers/components/__tests__/TransferSummary.test.jsx +++ b/frontend/src/views/Transfers/components/__tests__/TransferSummary.test.jsx @@ -51,7 +51,7 @@ describe('TransferSummary', () => { expect(screen.getByText('transfer:valuePerUnit: $5.00')).toBeInTheDocument() expect(screen.getByText('transfer:totalVal: $50.00')).toBeInTheDocument() // 10 * 5 = 50 expect( - screen.getByText('transfer:agreementDt: 12/31/2022') + screen.getByText('transfer:agreementDt: 2022-12-31') ).toBeInTheDocument() // Date formatted }) })