-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: sidebar menu selection optimised and fixed (#704)
* sidebar menu selection optimised and fixed. * e2e test added. * e2e test optimisation --------- Co-authored-by: Yoganandan Pandiyan <p.yoganandan@gmail.com> Co-authored-by: janosbabik <143906591+janosbabik@users.noreply.github.com>
- Loading branch information
3 people
authored
Aug 19, 2024
1 parent
02d0180
commit bd83317
Showing
5 changed files
with
230 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| context('App settings tests', () => { | ||
| beforeEach(() => { | ||
| cy.resetDB(); | ||
| cy.getAndStoreFeaturesEnabled(); | ||
|
|
||
| cy.login('officer'); | ||
| cy.visit('/'); | ||
| }); | ||
|
|
||
| describe('Sidebar Menu', () => { | ||
| const menuItemSelector = '[data-cy="officer-menu-items"]'; | ||
| const highlightedClass = 'active'; | ||
| it('Should highlight the corresponding menu of the opened page', () => { | ||
| cy.get(`${menuItemSelector}>a[href="/Proposals"]`).click(); | ||
| cy.get(`${menuItemSelector}>a[href="/Proposals"]`).should( | ||
| 'have.class', | ||
| highlightedClass | ||
| ); | ||
|
|
||
| cy.reload(); | ||
|
|
||
| cy.get(`${menuItemSelector}>a[href="/Proposals"]`).should( | ||
| 'have.class', | ||
| highlightedClass | ||
| ); | ||
| }); | ||
|
|
||
| it('Sub menu should be opened by default on reload of the corresponding page', () => { | ||
| cy.get(`${menuItemSelector}>div>div>span`).contains('Templates').click(); | ||
| cy.get(`${menuItemSelector} a[href="/PdfTemplates"]`) | ||
| .should('be.visible') | ||
| .click(); | ||
| cy.reload(); | ||
| cy.get(`${menuItemSelector} a[href="/PdfTemplates"]`).should( | ||
| 'be.visible' | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
132 changes: 132 additions & 0 deletions
132
apps/frontend/src/components/menu/SettingsMenuListItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings'; | ||
| import ExpandLess from '@mui/icons-material/ExpandLess'; | ||
| import ExpandMore from '@mui/icons-material/ExpandMore'; | ||
| import FunctionsIcon from '@mui/icons-material/Functions'; | ||
| import Settings from '@mui/icons-material/Settings'; | ||
| import ViewModuleIcon from '@mui/icons-material/ViewModule'; | ||
| import VpnKey from '@mui/icons-material/VpnKey'; | ||
| import { ListItemButton } from '@mui/material'; | ||
| import Collapse from '@mui/material/Collapse'; | ||
| import ListItemIcon from '@mui/material/ListItemIcon'; | ||
| import ListItemText from '@mui/material/ListItemText'; | ||
| import React, { useState } from 'react'; | ||
| import { NavLink, useLocation } from 'react-router-dom'; | ||
|
|
||
| import Tooltip from 'components/common/MenuTooltip'; | ||
|
|
||
| import ProposalSettingsIcon from '../common/icons/ProposalSettingsIcon'; | ||
| import ProposalWorkflowIcon from '../common/icons/ProposalWorkflowIcon'; | ||
|
|
||
| const menuMap = { | ||
| Units: '/Units', | ||
| ProposalStatuses: '/ProposalStatuses', | ||
| ProposalWorkflows: '/ProposalWorkflows', | ||
| ApiAccessTokens: '/ApiAccessTokens', | ||
| Features: '/Features', | ||
| Settings: '/Settings', | ||
| SampleEsiTemplates: '/SampleEsiTemplates', | ||
| }; | ||
|
|
||
| const SettingsMenuListItem = () => { | ||
| const location = useLocation(); | ||
|
|
||
| const [isExpanded, setIsExpanded] = useState(false); | ||
|
|
||
| React.useEffect(() => { | ||
| setIsExpanded(Object.values(menuMap).includes(location.pathname)); | ||
| }, [location.pathname]); | ||
|
|
||
| const toggleExpand = () => { | ||
| setIsExpanded(!isExpanded); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Tooltip title="Settings"> | ||
| <ListItemButton onClick={toggleExpand}> | ||
| <ListItemIcon> | ||
| {isExpanded ? ( | ||
| <> | ||
| <Settings /> | ||
| <ExpandLess fontSize="small" /> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Settings /> | ||
| <ExpandMore fontSize="small" /> | ||
| </> | ||
| )} | ||
| </ListItemIcon> | ||
| <ListItemText primary="Settings" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
|
|
||
| <Collapse in={isExpanded} timeout="auto" unmountOnExit> | ||
| <Tooltip title="Units"> | ||
| <ListItemButton component={NavLink} to={menuMap['Units']}> | ||
| <ListItemIcon> | ||
| <FunctionsIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary="Units" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
|
|
||
| <Tooltip title="Proposal statuses"> | ||
| <ListItemButton | ||
| component={NavLink} | ||
| to={menuMap['ProposalStatuses']} | ||
| selected={location.pathname.includes('/ProposalStatuses')} | ||
| > | ||
| <ListItemIcon> | ||
| <ProposalSettingsIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary="Proposal statuses" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
|
|
||
| <Tooltip title="Proposal workflows"> | ||
| <ListItemButton | ||
| component={NavLink} | ||
| selected={ | ||
| location.pathname.includes('/ProposalWorkflows') || | ||
| location.pathname.includes('ProposalWorkflowEditor') | ||
| } | ||
| to={menuMap['ProposalWorkflows']} | ||
| > | ||
| <ListItemIcon> | ||
| <ProposalWorkflowIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary="Proposal workflows" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
|
|
||
| <Tooltip title="API access tokens"> | ||
| <ListItemButton component={NavLink} to={menuMap['ApiAccessTokens']}> | ||
| <ListItemIcon> | ||
| <VpnKey /> | ||
| </ListItemIcon> | ||
| <ListItemText primary="API access tokens" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
| <Tooltip title="Features"> | ||
| <ListItemButton component={NavLink} to={menuMap['Features']}> | ||
| <ListItemIcon> | ||
| <ViewModuleIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary="Features" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
| <Tooltip title="App settings"> | ||
| <ListItemButton component={NavLink} to={menuMap['Settings']}> | ||
| <ListItemIcon> | ||
| <DisplaySettingsIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary="App settings" /> | ||
| </ListItemButton> | ||
| </Tooltip> | ||
| </Collapse> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SettingsMenuListItem; |
Oops, something went wrong.