gtfs and gtfs rt external validators linked

Author: Alessandro100

web-app/public/locales/en/common.json

@@ -95,5 +95,6 @@
   },
   "validators": "Validators",
   "gbfsValidator": "GBFS Validator",
-  "gtfsValidator": "GTFS Validator"
+  "gtfsValidator": "GTFS Validator",
+  "gtfsRtValidator": "GTFS RT Validator"
 }

web-app/src/app/components/Header.tsx

@@ -12,6 +12,7 @@ import {
   MenuItem,
   Select,
   useTheme,
+  Link,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -34,6 +35,7 @@ import { useRemoteConfig } from '../context/RemoteConfigProvider';
 import i18n from '../../i18n';
 import { NestedMenuItem } from 'mui-nested-menu';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
+import DepartureBoardIcon from '@mui/icons-material/DepartureBoard';
 import { fontFamily } from '../Theme';
 import { defaultRemoteConfigValues } from '../interface/RemoteConfig';
 import { animatedButtonStyling } from './Header.style';
@@ -235,25 +237,30 @@ export default function DrawerAppBar(): React.ReactElement {
                     }}
                     sx={{ display: 'flex', gap: 1 }}
                   >
-                    <BikeScooterOutlined
-                      fontSize='small'
-                      sx={{ color: theme.palette.text.primary }}
-                    />
+                    <BikeScooterOutlined fontSize='small' />
                     {t('gbfsValidator')}
                   </MenuItem>
                   <MenuItem
                     key={'gtfs-validator'}
-                    onClick={() => {
-                      handleMenuItemClick('gtfs-validator');
-                    }}
-                    sx={{ display: 'flex', gap: 1 }}
-                    disabled={true}
+                    component={Link}
+                    href='https://gtfs-validator.mobilitydata.org/'
+                    target='_blank'
+                    rel='noopener noreferrer'
                   >
-                    <DirectionsBusIcon
-                      fontSize='small'
-                      sx={{ color: theme.palette.text.primary }}
-                    />
+                    <DirectionsBusIcon fontSize='small' sx={{ mr: 1 }} />
                     {t('gtfsValidator')}
+                    <OpenInNew fontSize='small' sx={{ ml: 0.5 }} />
+                  </MenuItem>
+                  <MenuItem
+                    key={'gtfs-rt-validator'}
+                    component={Link}
+                    href='https://github.com/MobilityData/gtfs-realtime-validator'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    <DepartureBoardIcon fontSize='small' sx={{ mr: 1 }} />
+                    {t('gtfsRtValidator')}
+                    <OpenInNew fontSize='small' sx={{ ml: 0.5 }} />
                   </MenuItem>
                 </Menu>
               </>

web-app/src/app/components/HeaderMobileDrawer.tsx

@@ -9,6 +9,7 @@ import {
   AccordionSummary,
   AccordionDetails,
   useTheme,
+  Link,
 } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
@@ -123,9 +124,28 @@ export default function DrawerContent({
               >
                 {t('gbfsValidator')}
               </Button>
-              <Button variant='text' sx={mobileNavElementStyle} disabled={true}>
+              <Button
+                variant='text'
+                sx={mobileNavElementStyle}
+                endIcon={<OpenInNew />}
+                component={Link}
+                href='https://gtfs-validator.mobilitydata.org/'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
                 {t('gtfsValidator')}
               </Button>
+              <Button
+                variant='text'
+                sx={mobileNavElementStyle}
+                endIcon={<OpenInNew />}
+                component={Link}
+                href='https://github.com/MobilityData/gtfs-realtime-validator'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                {t('gtfsRtValidator')}
+              </Button>
             </AccordionDetails>
           </Accordion>
         )}