feat: added help page and tests

Author: nicoalee

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/NavToolbar.tsx

@@ -61,7 +61,33 @@ const NavToolbar: React.FC<INav> = (props) => {
                         buttonLabel="explore"
                     />
 
-                    <Button
+                    <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: 'Contact Us',
+                                onClick: () => navigate('/help'),
+                            },
+                        ]}
+                        buttonLabel="help"
+                    />
+
+                    {/* <Button
                         sx={[
                             NavToolbarStyles.menuItemColor,
                             NavToolbarStyles.menuItemPadding,
@@ -74,7 +100,7 @@ const NavToolbar: React.FC<INav> = (props) => {
                     >
                         DOCS
                         <OpenInNewIcon sx={{ marginLeft: '8px', fontSize: '1.2rem' }} />
-                    </Button>
+                    </Button> */}
                     <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/HelpPage/HelpPage.tsx

@@ -4,14 +4,6 @@ import EmailIcon from '@mui/icons-material/Email';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 const HelpPage: React.FC = () => {
-    const handleNeuroStarsClick = () => {
-        window.open('https://neurostars.org/tag/neurosynth-compose', '_blank', 'noopener,noreferrer');
-    };
-
-    const handleEmailClick = () => {
-        window.location.href = 'mailto:[email protected]';
-    };
-
     return (
         <Box
             sx={{
@@ -56,15 +48,15 @@ const HelpPage: React.FC = () => {
                                         marginBottom: '1rem',
                                     }}
                                 >
-                                    'Join our community on NeuroStars to ask questions, share insights, and connect with
+                                    Join our community on NeuroStars to ask questions, share insights, and connect with
                                     other researchers. Get answers from both the Neurosynth team and the wider
-                                    neuroscience community.',
+                                    neuroscience community.
                                 </Typography>
                             ),
                             icon: <ForumIcon sx={{ fontSize: '2rem', color: 'white' }} />,
                             button: {
                                 label: 'Visit NeuroStars',
-                                onClick: handleNeuroStarsClick,
+                                href: 'https://neurostars.org/tag/neurosynth-compose',
                             },
                         },
                         {
@@ -82,13 +74,13 @@ const HelpPage: React.FC = () => {
                                         [email protected]
                                     </Link>{' '}
                                     Our team will get back to you as soon as possible to help resolve your questions or
-                                    issues.,
+                                    issues.
                                 </Typography>
                             ),
                             icon: <EmailIcon sx={{ fontSize: '2rem', color: 'white' }} />,
                             button: {
                                 label: 'Send Email',
-                                onClick: handleEmailClick,
+                                href: 'mailto:[email protected]',
                             },
                         },
                     ].map(({ title, descriptionElement, icon, button }) => (
@@ -137,10 +129,13 @@ const HelpPage: React.FC = () => {
                                 <Box>{descriptionElement}</Box>
                                 <Button
                                     variant="contained"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
                                     size="large"
                                     disableElevation
                                     endIcon={<OpenInNewIcon />}
-                                    onClick={button.onClick}
+                                    href={button.href}
+                                    component="a"
                                     sx={{
                                         width: '230px',
                                         marginTop: 'auto',