Skip to content

Commit 8fd38e5

Browse files
nicoaleenicoalee
authored
Feat 808 help desk (#1189)
* feat: moved sleuth import functionality to import studies UI and added tests * feat: added help page * feat: added help page and tests * feat: remove group list capitalization (sneaking in a fix unrelated to this gh issue) * fix: failing tests
1 parent 0077823 commit 8fd38e5

File tree

9 files changed

+297
-46
lines changed

9 files changed

+297
-46
lines changed

‎compose/neurosynth-frontend/cypress/e2e/pages/HelpPage.cy.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
describe('HelpPage', () => {
2+
beforeEach(() => {
3+
cy.visit('/help');
4+
});
5+
6+
it('should display Community Support section', () => {
7+
cy.contains('Community Support').should('be.visible');
8+
});
9+
10+
it('should display Email Support section', () => {
11+
cy.contains('Email Support').should('be.visible');
12+
});
13+
14+
it('should have Visit NeuroStars button with correct link', () => {
15+
cy.contains('a', 'Visit NeuroStars')
16+
.should('be.visible')
17+
.and('have.attr', 'href', 'https://neurostars.org/tag/neurosynth-compose')
18+
.and('have.attr', 'target', '_blank')
19+
.and('have.attr', 'rel', 'noopener noreferrer');
20+
});
21+
22+
it('should have Send Email button with correct mailto link', () => {
23+
cy.contains('a', 'Send Email')
24+
.should('be.visible')
25+
.and('have.attr', 'href', 'mailto:[email protected]')
26+
.and('have.attr', 'target', '_blank')
27+
.and('have.attr', 'rel', 'noopener noreferrer');
28+
});
29+
30+
it('should display the email address link in Email Support section', () => {
31+
cy.contains('a', '[email protected]')
32+
.should('be.visible')
33+
.and('have.attr', 'href', 'mailto:[email protected]');
34+
});
35+
36+
it('should display documentation link in tip section', () => {
37+
cy.contains('a', 'documentation')
38+
.should('be.visible')
39+
.and('have.attr', 'href', 'https://neurostuff.github.io/compose-docs/')
40+
.and('have.attr', 'target', '_blank');
41+
});
42+
});

‎compose/neurosynth-frontend/src/components/Navbar/NavDrawer.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ describe('NavDrawer component', () => {
3636
expect(screen.queryByText('LOGOUT')).not.toBeInTheDocument();
3737

3838
expect(screen.queryByText('EXPLORE')).toBeInTheDocument();
39-
expect(screen.queryByText('DOCS')).toBeInTheDocument();
39+
expect(screen.queryByText('Help')).toBeInTheDocument();
4040
expect(screen.queryByText('SIGN IN/SIGN UP')).toBeInTheDocument();
4141
});
4242

@@ -49,7 +49,7 @@ describe('NavDrawer component', () => {
4949
expect(screen.queryByText('MY PROJECTS')).toBeInTheDocument();
5050
expect(screen.queryByText('LOGOUT')).toBeInTheDocument();
5151
expect(screen.queryByText('EXPLORE')).toBeInTheDocument();
52-
expect(screen.queryByText('DOCS')).toBeInTheDocument();
52+
expect(screen.queryByText('Help')).toBeInTheDocument();
5353
});
5454

5555
it('should login', () => {

‎compose/neurosynth-frontend/src/components/Navbar/NavDrawer.tsx‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,34 +26,22 @@ const NavDrawer: React.FC<INav> = (props) => {
2626
const [isOpen, setIsOpen] = useState(false);
2727
const navigate = useNavigate();
2828

29-
const handleOpenDrawer = (_event: React.MouseEvent<HTMLElement>) => {
30-
setIsOpen(true);
31-
};
32-
33-
const handleCloseDrawer = (_event: React.MouseEvent) => {
34-
setIsOpen(false);
35-
};
36-
3729
return (
3830
<Toolbar>
3931
<Box
4032
component={NavLink}
4133
to="/"
4234
sx={[NavbarStyles.logoContainer, { flexGrow: 1, justifyContent: 'flex-end' }]}
4335
>
44-
<img
45-
style={NavbarStyles.logo as any}
46-
alt="neurosynth compose logo"
47-
src="/static/synth.png"
48-
/>
36+
<img style={NavbarStyles.logo as any} alt="neurosynth compose logo" src="/static/synth.png" />
4937
<Typography sx={NavbarStyles.logoText}>neurosynth compose</Typography>
5038
</Box>
5139
<Box sx={{ flexGrow: 1, justifyContent: 'flex-end', display: 'flex' }}>
52-
<IconButton onClick={handleOpenDrawer}>
40+
<IconButton onClick={() => setIsOpen(true)}>
5341
<MenuIcon />
5442
</IconButton>
5543
</Box>
56-
<Drawer anchor="right" open={isOpen} onClose={handleCloseDrawer}>
44+
<Drawer anchor="right" open={isOpen} onClose={() => setIsOpen(false)}>
5745
<List>
5846
{isAuthenticated && (
5947
<>
@@ -62,10 +50,7 @@ const NavDrawer: React.FC<INav> = (props) => {
6250
<ListItemIcon>
6351
<AddCircleOutlineIcon color="secondary" />
6452
</ListItemIcon>
65-
<ListItemText
66-
sx={{ color: 'secondary.main' }}
67-
primary="NEW PROJECT"
68-
/>
53+
<ListItemText sx={{ color: 'secondary.main' }} primary="NEW PROJECT" />
6954
</ListItemButton>
7055
</ListItem>
7156
<ListItem>
@@ -92,7 +77,27 @@ const NavDrawer: React.FC<INav> = (props) => {
9277
</ListItem>
9378
</List>
9479
</DrawerToggleMenu>
95-
<ListItem>
80+
<DrawerToggleMenu labelText="Help">
81+
<List>
82+
<ListItem>
83+
<ListItemButton
84+
onClick={() => window.open('https://neurostuff.github.io/compose-docs/', '_blank')}
85+
>
86+
<ListItemIcon />
87+
<ListItemText primaryTypographyProps={{ display: 'flex', alignItems: 'center' }}>
88+
Documentation <OpenInNewIcon fontSize="small" sx={{ ml: 1 }} />
89+
</ListItemText>
90+
</ListItemButton>
91+
</ListItem>
92+
<ListItem>
93+
<ListItemButton onClick={() => navigate('/help')}>
94+
<ListItemIcon />
95+
<ListItemText primary="Get Help" />
96+
</ListItemButton>
97+
</ListItem>
98+
</List>
99+
</DrawerToggleMenu>
100+
{/* <ListItem>
96101
<Button
97102
sx={{ display: 'flex', padding: '8px 16px', width: '100%' }}
98103
target="_blank"
@@ -104,11 +109,15 @@ const NavDrawer: React.FC<INav> = (props) => {
104109
</ListItemIcon>
105110
<ListItemText primary="DOCS" sx={{ color: 'black' }} />
106111
</Button>
107-
</ListItem>
112+
</ListItem> */}
108113
<ListItem>
109114
<ListItemButton
110115
onClick={() => {
111-
isAuthenticated ? props.onLogout() : props.onLogin();
116+
if (isAuthenticated) {
117+
props.onLogout();
118+
} else {
119+
props.onLogin();
120+
}
112121
}}
113122
>
114123
<ListItemIcon />

‎compose/neurosynth-frontend/src/components/Navbar/NavToolbar.spec.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('NavToolbar Component', () => {
2929
expect(screen.queryByTestId('PersonIcon')).not.toBeInTheDocument();
3030

3131
expect(screen.queryByText('explore')).toBeInTheDocument();
32-
expect(screen.queryByText('DOCS')).toBeInTheDocument();
32+
expect(screen.queryByText('help')).toBeInTheDocument();
3333
expect(screen.queryByText('Sign In/Sign Up')).toBeInTheDocument();
3434
});
3535

@@ -41,7 +41,7 @@ describe('NavToolbar Component', () => {
4141
expect(screen.queryByText('NEW PROJECT')).toBeInTheDocument();
4242
expect(screen.queryByText('my projects')).toBeInTheDocument();
4343
expect(screen.queryByText('explore')).toBeInTheDocument();
44-
expect(screen.queryByText('DOCS')).toBeInTheDocument();
44+
expect(screen.queryByText('help')).toBeInTheDocument();
4545
expect(screen.getByTestId('PersonIcon')).toBeInTheDocument();
4646
});
4747

@@ -66,7 +66,8 @@ describe('NavToolbar Component', () => {
6666
it('should open the navpopup menu with the given menu items', () => {
6767
render(<NavToolbar onLogin={mockLogin} onLogout={mockLogout} />);
6868

69-
userEvent.click(screen.getByTestId('mock-trigger-show-popup'));
69+
// get the first element (the Explore button)
70+
userEvent.click(screen.getAllByTestId('mock-trigger-show-popup')[0]);
7071
expect(screen.getByText('Studies')).toBeInTheDocument();
7172
expect(screen.getByText('Meta-Analyses')).toBeInTheDocument();
7273
});

‎compose/neurosynth-frontend/src/components/Navbar/NavToolbar.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,31 @@ const NavToolbar: React.FC<INav> = (props) => {
6161
buttonLabel="explore"
6262
/>
6363

64-
<Button
65-
sx={[
66-
NavToolbarStyles.menuItemColor,
67-
NavToolbarStyles.menuItemPadding,
68-
NavToolbarStyles.menuItem,
64+
<NavToolbarPopupSubMenu
65+
buttonProps={{
66+
sx: [
67+
NavToolbarStyles.menuItemColor,
68+
NavToolbarStyles.menuItemPadding,
69+
NavToolbarStyles.menuItem,
70+
],
71+
endIcon: <KeyboardArrowDownIcon />,
72+
}}
73+
options={[
74+
{
75+
label: (
76+
<Box sx={{ display: 'flex', alignItems: 'center' }}>
77+
Documentation <OpenInNewIcon fontSize="small" sx={{ ml: 1 }} />
78+
</Box>
79+
),
80+
onClick: () => window.open('https://neurostuff.github.io/compose-docs/', '_blank'),
81+
},
82+
{
83+
label: 'Get Help',
84+
onClick: () => navigate('/help'),
85+
},
6986
]}
70-
variant="outlined"
71-
target="_blank"
72-
rel="noreferrer"
73-
href="https://neurostuff.github.io/compose-docs/"
74-
>
75-
DOCS
76-
<OpenInNewIcon sx={{ marginLeft: '8px', fontSize: '1.2rem' }} />
77-
</Button>
87+
buttonLabel="help"
88+
/>
7889
<NeurosynthAvatar onLogout={props.onLogout} onLogin={props.onLogin} />
7990
</Box>
8091
</Box>

‎compose/neurosynth-frontend/src/components/Navbar/NavToolbarPopupSubMenu.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export interface INavToolbarPopupSubMenu {
55
buttonProps: ButtonProps;
66
buttonLabel: string;
77
options: {
8-
label: string;
8+
label: string | React.ReactNode;
99
secondary?: string;
1010
onClick: () => void;
1111
}[];
@@ -37,10 +37,7 @@ const NavToolbarPopupSubMenu: React.FC<INavToolbarPopupSubMenu> = (props) => {
3737
handleCloseNavMenu();
3838
}}
3939
>
40-
<ListItemText
41-
primary={option.label}
42-
secondary={option?.secondary || ''}
43-
/>
40+
<ListItemText primary={option.label} secondary={option?.secondary || ''} />
4441
</ListItemButton>
4542
</ListItem>
4643
))}

‎compose/neurosynth-frontend/src/pages/BaseNavigation/BaseNavigation.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
1919
import LandingPage from '../LandingPage/LandingPage';
2020
import BaseNavigationStyles from './BaseNavigation.styles';
2121
import ProtectedRoute from './components/ProtectedRoute';
22+
import HelpPage from 'pages/HelpPage/HelpPage';
2223

2324
const EditStudyPage = React.lazy(() => import('pages/Study/EditStudyPage'));
2425
const ProjectStudyPage = React.lazy(() => import('pages/Study/ProjectStudyPage'));
@@ -215,6 +216,7 @@ const BaseNavigation: React.FC = () => {
215216
</ProtectedRoute>
216217
}
217218
/>
219+
<Route path="/help" element={<HelpPage />} />
218220
<Route
219221
path="/forbidden"
220222
element={

‎compose/neurosynth-frontend/src/pages/Curation/components/CurationBoardAIGroupsListItem.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ const CurationBoardAIGroupsListItem: React.FC<{
5050
)}
5151
<ListItemText
5252
sx={{
53-
textTransform: 'capitalize',
5453
'.MuiListItemText-primary': {
5554
fontSize: '14px',
5655
...CurationBoardAIGroupsStyles.lineClamp3,

0 commit comments

Comments
 (0)