Skip to content

Commit ccc9087

Browse files
ellen-wrightellen-wright
authored
refactor: reorder/rename menu items (#1187)
1 parent 32ff124 commit ccc9087

6 files changed

Lines changed: 140 additions & 52 deletions

File tree

‎apps/e2e/cypress/e2e/appSettings.cy.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ context('App settings tests', () => {
3232

3333
cy.get('[data-cy="close-modal-btn"]').click();
3434

35-
cy.get('[data-cy="officer-menu-items"]').contains('Settings').click();
35+
cy.get('[data-cy="officer-menu-items"]')
36+
.contains('Configuration Settings')
37+
.click();
3638
cy.get('[data-cy="officer-menu-items"]').contains('App settings').click();
3739

3840
cy.get('[data-cy="settings-table"]')

‎apps/e2e/cypress/e2e/features.cy.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ context('Features tests', () => {
1919
'Instrument'
2020
);
2121

22-
cy.get('[data-cy="officer-menu-items"]').contains('Settings').click();
22+
cy.get('[data-cy="officer-menu-items"]')
23+
.contains('Configuration Settings')
24+
.click();
2325
cy.get('[data-cy="officer-menu-items"]').contains('Features').click();
2426

2527
cy.get('[data-cy="features-table"]')

‎apps/e2e/cypress/e2e/pages.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ context('Page tests', () => {
1111
it('Should be able update FAQ', () => {
1212
cy.login('officer');
1313
cy.visit('/');
14-
14+
cy.contains('Configuration Settings').click();
1515
cy.contains('Pages').click();
1616

1717
cy.contains('Set user homepage');

‎apps/frontend/src/components/menu/MenuItems.tsx‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import GroupWorkIcon from '@mui/icons-material/GroupWork';
88
import Help from '@mui/icons-material/Help';
99
import NoteAdd from '@mui/icons-material/NoteAdd';
1010
import People from '@mui/icons-material/People';
11-
import SettingsApplications from '@mui/icons-material/SettingsApplications';
1211
import ListItemButton from '@mui/material/ListItemButton';
1312
import ListItemIcon from '@mui/material/ListItemIcon';
1413
import ListItemText from '@mui/material/ListItemText';
@@ -27,6 +26,7 @@ import SettingsMenuListItem from './SettingsMenuListItem';
2726
import { StatusActionLogsMenuListItem } from './StatusActionLogsMenuListItem';
2827
import { TemplateMenuListItem } from './TemplateMenuListItem';
2928
import CommentQuestionIcon from '../common/icons/CommentQuestionIcon';
29+
import ProposalWorkflowIcon from '../common/icons/ProposalWorkflowIcon';
3030
import ScienceIcon from '../common/icons/ScienceIcon';
3131

3232
type MenuItemsProps = {
@@ -124,6 +124,14 @@ const MenuItems = ({ currentRole }: MenuItemsProps) => {
124124

125125
const userOfficer = (
126126
<div data-cy="officer-menu-items">
127+
<Tooltip title="Calls">
128+
<ListItemButton component={NavLink} to="/Calls">
129+
<ListItemIcon>
130+
<CalendarToday />
131+
</ListItemIcon>
132+
<ListItemText primary="Calls" />
133+
</ListItemButton>
134+
</Tooltip>
127135
<Tooltip title="Proposals">
128136
<ListItemButton component={NavLink} to="/Proposals">
129137
<ListItemIcon>
@@ -152,22 +160,13 @@ const MenuItems = ({ currentRole }: MenuItemsProps) => {
152160
</ListItemButton>
153161
</Tooltip>
154162
)}
155-
<Tooltip title="Calls">
156-
<ListItemButton component={NavLink} to="/Calls">
157-
<ListItemIcon>
158-
<CalendarToday />
159-
</ListItemIcon>
160-
<ListItemText primary="Calls" />
161-
</ListItemButton>
162-
</Tooltip>
163-
<StatusActionLogsMenuListItem />
164-
{isUserManagementEnabled && (
165-
<Tooltip title="People">
166-
<ListItemButton component={NavLink} to="/People">
163+
{isFapEnabled && (
164+
<Tooltip title={i18n.format(t('Facility access panel'), 'plural')}>
165+
<ListItemButton component={NavLink} to="/Faps">
167166
<ListItemIcon>
168-
<People />
167+
<GroupWorkIcon />
169168
</ListItemIcon>
170-
<ListItemText primary="People" />
169+
<ListItemText primary={i18n.format(t('FAP'), 'plural')} />
171170
</ListItemButton>
172171
</Tooltip>
173172
)}
@@ -181,6 +180,7 @@ const MenuItems = ({ currentRole }: MenuItemsProps) => {
181180
</ListItemButton>
182181
</Tooltip>
183182
)}
183+
184184
<Tooltip title="Techniques">
185185
<ListItemButton component={NavLink} to="/Techniques">
186186
<ListItemIcon>
@@ -199,24 +199,22 @@ const MenuItems = ({ currentRole }: MenuItemsProps) => {
199199
</ListItemButton>
200200
</Tooltip>
201201
)}
202-
{isFapEnabled && (
203-
<Tooltip title={i18n.format(t('Facility access panel'), 'plural')}>
204-
<ListItemButton component={NavLink} to="/Faps">
205-
<ListItemIcon>
206-
<GroupWorkIcon />
207-
</ListItemIcon>
208-
<ListItemText primary={i18n.format(t('FAP'), 'plural')} />
209-
</ListItemButton>
210-
</Tooltip>
211-
)}
212-
<Tooltip title="Pages">
213-
<ListItemButton component={NavLink} to="/PageEditor">
202+
<Tooltip title="Proposal workflows">
203+
<ListItemButton
204+
component={NavLink}
205+
selected={
206+
location.pathname.includes('/ProposalWorkflows') ||
207+
location.pathname.includes('ProposalWorkflowEditor')
208+
}
209+
to={'/ProposalWorkflows'}
210+
>
214211
<ListItemIcon>
215-
<SettingsApplications />
212+
<ProposalWorkflowIcon />
216213
</ListItemIcon>
217-
<ListItemText primary="Pages" />
214+
<ListItemText primary="Proposal workflows" />
218215
</ListItemButton>
219216
</Tooltip>
217+
220218
{isUserManagementEnabled && (
221219
<Tooltip title="Institutions">
222220
<ListItemButton component={NavLink} to="/Institutions">
@@ -228,6 +226,17 @@ const MenuItems = ({ currentRole }: MenuItemsProps) => {
228226
</Tooltip>
229227
)}
230228
<TemplateMenuListItem />
229+
<StatusActionLogsMenuListItem />
230+
{isUserManagementEnabled && (
231+
<Tooltip title="People">
232+
<ListItemButton component={NavLink} to="/People">
233+
<ListItemIcon>
234+
<People />
235+
</ListItemIcon>
236+
<ListItemText primary="People" />
237+
</ListItemButton>
238+
</Tooltip>
239+
)}
231240
<Tooltip title="Questions">
232241
<ListItemButton component={NavLink} to="/Questions">
233242
<ListItemIcon>

‎apps/frontend/src/components/menu/ProposalMenuListItem.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Topic } from '@mui/icons-material';
2+
import ExpandLess from '@mui/icons-material/ExpandLess';
3+
import ExpandMore from '@mui/icons-material/ExpandMore';
4+
import FolderCopyIcon from '@mui/icons-material/FolderCopy';
5+
import FolderOpen from '@mui/icons-material/FolderOpen';
6+
import { ListItemButton } from '@mui/material';
7+
import Collapse from '@mui/material/Collapse';
8+
import ListItemIcon from '@mui/material/ListItemIcon';
9+
import ListItemText from '@mui/material/ListItemText';
10+
import React, { useState } from 'react';
11+
import { useTranslation } from 'react-i18next';
12+
import { NavLink } from 'react-router-dom';
13+
14+
import Tooltip from 'components/common/MenuTooltip';
15+
import { UserRole } from 'generated/sdk';
16+
import { CallsDataQuantity, useCallsData } from 'hooks/call/useCallsData';
17+
import { useTechniqueProposalAccess } from 'hooks/common/useTechniqueProposalAccess';
18+
19+
export function ProposalMenuListItem() {
20+
const isTechniqueProposalsEnabled = useTechniqueProposalAccess([
21+
UserRole.USER_OFFICER,
22+
UserRole.INSTRUMENT_SCIENTIST,
23+
]);
24+
25+
const { t } = useTranslation();
26+
const [isExpanded, setIsExpanded] = useState(false);
27+
28+
const calls = useCallsData(
29+
{
30+
proposalStatusShortCode: 'QUICK_REVIEW',
31+
},
32+
CallsDataQuantity.MINIMAL
33+
).calls;
34+
const openCall = calls?.find((call) => call.isActive);
35+
const techniqueProposalUrl =
36+
openCall && openCall.id
37+
? `/TechniqueProposals?call=${openCall?.id}`
38+
: '/TechniqueProposals';
39+
40+
function toggleExpand() {
41+
setIsExpanded(!isExpanded);
42+
}
43+
44+
// Single menu item
45+
46+
return (
47+
<>
48+
<Tooltip title="Proposals">
49+
<ListItemButton onClick={toggleExpand}>
50+
<ListItemIcon>
51+
<FolderCopyIcon />
52+
{isExpanded ? (
53+
<ExpandLess fontSize="small" />
54+
) : (
55+
<ExpandMore fontSize="small" />
56+
)}
57+
</ListItemIcon>
58+
<ListItemText primary="Proposals" />
59+
</ListItemButton>
60+
</Tooltip>
61+
62+
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
63+
<Tooltip title="Proposals">
64+
<ListItemButton component={NavLink} to="/Proposals">
65+
<ListItemIcon>
66+
<FolderOpen />
67+
</ListItemIcon>
68+
<ListItemText primary="Proposals" />
69+
</ListItemButton>
70+
</Tooltip>
71+
{isTechniqueProposalsEnabled && (
72+
<Tooltip title={t('Technique Proposals')}>
73+
<ListItemButton component={NavLink} to={techniqueProposalUrl}>
74+
<ListItemIcon>
75+
<Topic />
76+
</ListItemIcon>
77+
<ListItemText primary={t('Technique Proposals')} />
78+
</ListItemButton>
79+
</Tooltip>
80+
)}
81+
</Collapse>
82+
</>
83+
);
84+
}

‎apps/frontend/src/components/menu/SettingsMenuListItem.tsx‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ExpandLess from '@mui/icons-material/ExpandLess';
44
import ExpandMore from '@mui/icons-material/ExpandMore';
55
import FunctionsIcon from '@mui/icons-material/Functions';
66
import Settings from '@mui/icons-material/Settings';
7+
import SettingsApplications from '@mui/icons-material/SettingsApplications';
78
import ViewModuleIcon from '@mui/icons-material/ViewModule';
89
import VpnKey from '@mui/icons-material/VpnKey';
910
import { ListItemButton } from '@mui/material';
@@ -18,12 +19,10 @@ import { FeatureContext } from 'context/FeatureContextProvider';
1819
import { FeatureId } from 'generated/sdk';
1920

2021
import ProposalSettingsIcon from '../common/icons/ProposalSettingsIcon';
21-
import ProposalWorkflowIcon from '../common/icons/ProposalWorkflowIcon';
2222

2323
const menuMap = {
2424
Units: '/Units',
2525
ProposalStatuses: '/ProposalStatuses',
26-
ProposalWorkflows: '/ProposalWorkflows',
2726
ExperimentWorkflows: '/ExperimentWorkflows',
2827
ApiAccessTokens: '/ApiAccessTokens',
2928
Features: '/Features',
@@ -51,7 +50,7 @@ const SettingsMenuListItem = () => {
5150

5251
return (
5352
<>
54-
<Tooltip title="Settings">
53+
<Tooltip title="Configuration Settings">
5554
<ListItemButton onClick={toggleExpand}>
5655
<ListItemIcon>
5756
{isExpanded ? (
@@ -66,7 +65,7 @@ const SettingsMenuListItem = () => {
6665
</>
6766
)}
6867
</ListItemIcon>
69-
<ListItemText primary="Settings" />
68+
<ListItemText primary="Configuration Settings" />
7069
</ListItemButton>
7170
</Tooltip>
7271

@@ -79,6 +78,14 @@ const SettingsMenuListItem = () => {
7978
<ListItemText primary="Units" />
8079
</ListItemButton>
8180
</Tooltip>
81+
<Tooltip title="Pages">
82+
<ListItemButton component={NavLink} to="/PageEditor">
83+
<ListItemIcon>
84+
<SettingsApplications />
85+
</ListItemIcon>
86+
<ListItemText primary="Pages" />
87+
</ListItemButton>
88+
</Tooltip>
8289

8390
<Tooltip title="Proposal statuses">
8491
<ListItemButton
@@ -93,22 +100,6 @@ const SettingsMenuListItem = () => {
93100
</ListItemButton>
94101
</Tooltip>
95102

96-
<Tooltip title="Proposal workflows">
97-
<ListItemButton
98-
component={NavLink}
99-
selected={
100-
location.pathname.includes('/ProposalWorkflows') ||
101-
location.pathname.includes('ProposalWorkflowEditor')
102-
}
103-
to={menuMap['ProposalWorkflows']}
104-
>
105-
<ListItemIcon>
106-
<ProposalWorkflowIcon />
107-
</ListItemIcon>
108-
<ListItemText primary="Proposal workflows" />
109-
</ListItemButton>
110-
</Tooltip>
111-
112103
{isExperimentSafetyEnabled && (
113104
<Tooltip title="Experiment workflows">
114105
<ListItemButton

0 commit comments

Comments
 (0)