Feat 808 help desk

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

@@ -0,0 +1,42 @@
+describe('HelpPage', () => {
+    beforeEach(() => {
+        cy.visit('/help');
+    });
+
+    it('should display Community Support section', () => {
+        cy.contains('Community Support').should('be.visible');
+    });
+
+    it('should display Email Support section', () => {
+        cy.contains('Email Support').should('be.visible');
+    });
+
+    it('should have Visit NeuroStars button with correct link', () => {
+        cy.contains('a', 'Visit NeuroStars')
+            .should('be.visible')
+            .and('have.attr', 'href', 'https://neurostars.org/tag/neurosynth-compose')
+            .and('have.attr', 'target', '_blank')
+            .and('have.attr', 'rel', 'noopener noreferrer');
+    });
+
+    it('should have Send Email button with correct mailto link', () => {
+        cy.contains('a', 'Send Email')
+            .should('be.visible')
+            .and('have.attr', 'href', 'mailto:[email protected]')
+            .and('have.attr', 'target', '_blank')
+            .and('have.attr', 'rel', 'noopener noreferrer');
+    });
+
+    it('should display the email address link in Email Support section', () => {
+        cy.contains('a', '[email protected]')
+            .should('be.visible')
+            .and('have.attr', 'href', 'mailto:[email protected]');
+    });
+
+    it('should display documentation link in tip section', () => {
+        cy.contains('a', 'documentation')
+            .should('be.visible')
+            .and('have.attr', 'href', 'https://neurostuff.github.io/compose-docs/')
+            .and('have.attr', 'target', '_blank');
+    });
+});

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

@@ -36,7 +36,7 @@ describe('NavDrawer component', () => {
         expect(screen.queryByText('LOGOUT')).not.toBeInTheDocument();
 
         expect(screen.queryByText('EXPLORE')).toBeInTheDocument();
-        expect(screen.queryByText('DOCS')).toBeInTheDocument();
+        expect(screen.queryByText('Help')).toBeInTheDocument();
         expect(screen.queryByText('SIGN IN/SIGN UP')).toBeInTheDocument();
     });
 
@@ -49,7 +49,7 @@ describe('NavDrawer component', () => {
         expect(screen.queryByText('MY PROJECTS')).toBeInTheDocument();
         expect(screen.queryByText('LOGOUT')).toBeInTheDocument();
         expect(screen.queryByText('EXPLORE')).toBeInTheDocument();
-        expect(screen.queryByText('DOCS')).toBeInTheDocument();
+        expect(screen.queryByText('Help')).toBeInTheDocument();
     });
 
     it('should login', () => {

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

@@ -26,34 +26,22 @@ const NavDrawer: React.FC<INav> = (props) => {
     const [isOpen, setIsOpen] = useState(false);
     const navigate = useNavigate();
 
-    const handleOpenDrawer = (_event: React.MouseEvent<HTMLElement>) => {
-        setIsOpen(true);
-    };
-
-    const handleCloseDrawer = (_event: React.MouseEvent) => {
-        setIsOpen(false);
-    };
-
     return (
         <Toolbar>
             <Box
                 component={NavLink}
                 to="/"
                 sx={[NavbarStyles.logoContainer, { flexGrow: 1, justifyContent: 'flex-end' }]}
             >
-                <img
-                    style={NavbarStyles.logo as any}
-                    alt="neurosynth compose logo"
-                    src="/static/synth.png"
-                />
+                <img style={NavbarStyles.logo as any} alt="neurosynth compose logo" src="/static/synth.png" />
                 <Typography sx={NavbarStyles.logoText}>neurosynth compose</Typography>
             </Box>
             <Box sx={{ flexGrow: 1, justifyContent: 'flex-end', display: 'flex' }}>
-                <IconButton onClick={handleOpenDrawer}>
+                <IconButton onClick={() => setIsOpen(true)}>
                     <MenuIcon />
                 </IconButton>
             </Box>
-            <Drawer anchor="right" open={isOpen} onClose={handleCloseDrawer}>
+            <Drawer anchor="right" open={isOpen} onClose={() => setIsOpen(false)}>
                 <List>
                     {isAuthenticated && (
                         <>
@@ -62,10 +50,7 @@ const NavDrawer: React.FC<INav> = (props) => {
                                     <ListItemIcon>
                                         <AddCircleOutlineIcon color="secondary" />
                                     </ListItemIcon>
-                                    <ListItemText
-                                        sx={{ color: 'secondary.main' }}
-                                        primary="NEW PROJECT"
-                                    />
+                                    <ListItemText sx={{ color: 'secondary.main' }} primary="NEW PROJECT" />
                                 </ListItemButton>
                             </ListItem>
                             <ListItem>
@@ -92,7 +77,27 @@ const NavDrawer: React.FC<INav> = (props) => {
                             </ListItem>
                         </List>
                     </DrawerToggleMenu>
-                    <ListItem>
+                    <DrawerToggleMenu labelText="Help">
+                        <List>
+                            <ListItem>
+                                <ListItemButton
+                                    onClick={() => window.open('https://neurostuff.github.io/compose-docs/', '_blank')}
+                                >
+                                    <ListItemIcon />
+                                    <ListItemText primaryTypographyProps={{ display: 'flex', alignItems: 'center' }}>
+                                        Documentation <OpenInNewIcon fontSize="small" sx={{ ml: 1 }} />
+                                    </ListItemText>
+                                </ListItemButton>
+                            </ListItem>
+                            <ListItem>
+                                <ListItemButton onClick={() => navigate('/help')}>
+                                    <ListItemIcon />
+                                    <ListItemText primary="Get Help" />
+                                </ListItemButton>
+                            </ListItem>
+                        </List>
+                    </DrawerToggleMenu>
+                    {/* <ListItem>
                         <Button
                             sx={{ display: 'flex', padding: '8px 16px', width: '100%' }}
                             target="_blank"
@@ -104,11 +109,15 @@ const NavDrawer: React.FC<INav> = (props) => {
                             </ListItemIcon>
                             <ListItemText primary="DOCS" sx={{ color: 'black' }} />
                         </Button>
-                    </ListItem>
+                    </ListItem> */}
                     <ListItem>
                         <ListItemButton
                             onClick={() => {
-                                isAuthenticated ? props.onLogout() : props.onLogin();
+                                if (isAuthenticated) {
+                                    props.onLogout();
+                                } else {
+                                    props.onLogin();
+                                }
                             }}
                         >
                             <ListItemIcon />

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

@@ -29,7 +29,7 @@ describe('NavToolbar Component', () => {
         expect(screen.queryByTestId('PersonIcon')).not.toBeInTheDocument();
 
         expect(screen.queryByText('explore')).toBeInTheDocument();
-        expect(screen.queryByText('DOCS')).toBeInTheDocument();
+        expect(screen.queryByText('help')).toBeInTheDocument();
         expect(screen.queryByText('Sign In/Sign Up')).toBeInTheDocument();
     });
 
@@ -41,7 +41,7 @@ describe('NavToolbar Component', () => {
         expect(screen.queryByText('NEW PROJECT')).toBeInTheDocument();
         expect(screen.queryByText('my projects')).toBeInTheDocument();
         expect(screen.queryByText('explore')).toBeInTheDocument();
-        expect(screen.queryByText('DOCS')).toBeInTheDocument();
+        expect(screen.queryByText('help')).toBeInTheDocument();
         expect(screen.getByTestId('PersonIcon')).toBeInTheDocument();
     });
 
@@ -66,7 +66,8 @@ describe('NavToolbar Component', () => {
     it('should open the navpopup menu with the given menu items', () => {
         render(<NavToolbar onLogin={mockLogin} onLogout={mockLogout} />);
 
-        userEvent.click(screen.getByTestId('mock-trigger-show-popup'));
+        // get the first element (the Explore button)
+        userEvent.click(screen.getAllByTestId('mock-trigger-show-popup')[0]);
         expect(screen.getByText('Studies')).toBeInTheDocument();
         expect(screen.getByText('Meta-Analyses')).toBeInTheDocument();
     });

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

@@ -61,20 +61,31 @@ const NavToolbar: React.FC<INav> = (props) => {
                         buttonLabel="explore"
                     />
 
-                    <Button
-                        sx={[
-                            NavToolbarStyles.menuItemColor,
-                            NavToolbarStyles.menuItemPadding,
-                            NavToolbarStyles.menuItem,
+                    <NavToolbarPopupSubMenu
+                        buttonProps={{
+                            sx: [
+                                NavToolbarStyles.menuItemColor,
+                                NavToolbarStyles.menuItemPadding,
+                                NavToolbarStyles.menuItem,
+                            ],
+                            endIcon: <KeyboardArrowDownIcon />,
+                        }}
+                        options={[
+                            {
+                                label: (
+                                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                                        Documentation <OpenInNewIcon fontSize="small" sx={{ ml: 1 }} />
+                                    </Box>
+                                ),
+                                onClick: () => window.open('https://neurostuff.github.io/compose-docs/', '_blank'),
+                            },
+                            {
+                                label: 'Get Help',
+                                onClick: () => navigate('/help'),
+                            },
                         ]}
-                        variant="outlined"
-                        target="_blank"
-                        rel="noreferrer"
-                        href="https://neurostuff.github.io/compose-docs/"
-                    >
-                        DOCS
-                        <OpenInNewIcon sx={{ marginLeft: '8px', fontSize: '1.2rem' }} />
-                    </Button>
+                        buttonLabel="help"
+                    />
                     <NeurosynthAvatar onLogout={props.onLogout} onLogin={props.onLogin} />
                 </Box>
             </Box>

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

@@ -5,7 +5,7 @@ export interface INavToolbarPopupSubMenu {
     buttonProps: ButtonProps;
     buttonLabel: string;
     options: {
-        label: string;
+        label: string | React.ReactNode;
         secondary?: string;
         onClick: () => void;
     }[];
@@ -37,10 +37,7 @@ const NavToolbarPopupSubMenu: React.FC<INavToolbarPopupSubMenu> = (props) => {
                                 handleCloseNavMenu();
                             }}
                         >
-                            <ListItemText
-                                primary={option.label}
-                                secondary={option?.secondary || ''}
-                            />
+                            <ListItemText primary={option.label} secondary={option?.secondary || ''} />
                         </ListItemButton>
                     </ListItem>
                 ))}

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

@@ -19,6 +19,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import LandingPage from '../LandingPage/LandingPage';
 import BaseNavigationStyles from './BaseNavigation.styles';
 import ProtectedRoute from './components/ProtectedRoute';
+import HelpPage from 'pages/HelpPage/HelpPage';
 
 const EditStudyPage = React.lazy(() => import('pages/Study/EditStudyPage'));
 const ProjectStudyPage = React.lazy(() => import('pages/Study/ProjectStudyPage'));
@@ -215,6 +216,7 @@ const BaseNavigation: React.FC = () => {
                             </ProtectedRoute>
                         }
                     />
+                    <Route path="/help" element={<HelpPage />} />
                     <Route
                         path="/forbidden"
                         element={

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

@@ -50,7 +50,6 @@ const CurationBoardAIGroupsListItem: React.FC<{
                         )}
                         <ListItemText
                             sx={{
-                                textTransform: 'capitalize',
                                 '.MuiListItemText-primary': {
                                     fontSize: '14px',
                                     ...CurationBoardAIGroupsStyles.lineClamp3,