Feat: gbfs validator header navigation (#1406)

* gbfs validator feature flag

* gbfs validator header nav

* existing demo content

* gtfs and gtfs rt external validators linked

Author: Alessandro100

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

@@ -92,5 +92,9 @@
         "description": "Railway in which the track consists of a single rail or a beam."
       }
     }
-  }
+  },
+  "validators": "Validators",
+  "gbfsValidator": "GBFS 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,11 +35,13 @@ 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';
 import DrawerContent from './HeaderMobileDrawer';
 import ThemeToggle from './ThemeToggle';
+import { useTranslation } from 'react-i18next';
 
 export default function DrawerAppBar(): React.ReactElement {
   const theme = useTheme();
@@ -53,6 +56,7 @@ export default function DrawerAppBar(): React.ReactElement {
     string | undefined
   >(i18n.language);
   const { config } = useRemoteConfig();
+  const { t } = useTranslation('common');
 
   i18n.on('languageChanged', (lang) => {
     setCurrentLanguage(i18n.language);
@@ -200,6 +204,67 @@ export default function DrawerAppBar(): React.ReactElement {
                 {item.title}
               </Button>
             ))}
+            {config.gbfsValidator && (
+              <>
+                <Button
+                  aria-controls='validator-menu'
+                  aria-haspopup='true'
+                  endIcon={<ArrowDropDownIcon />}
+                  onClick={handleMenuOpen}
+                  sx={(theme) => ({
+                    ...animatedButtonStyling(theme),
+                    color: theme.palette.text.primary,
+                  })}
+                  id='validator-button-menu'
+                  className={
+                    activeTab.includes('validator') ? 'active short' : ''
+                  }
+                >
+                  {t('validators')}
+                </Button>
+                <Menu
+                  id='validator-menu'
+                  anchorEl={anchorEl}
+                  open={
+                    anchorEl !== null && anchorEl.id === 'validator-button-menu'
+                  }
+                  onClose={handleMenuClose}
+                >
+                  <MenuItem
+                    key={'gbfs-validator'}
+                    onClick={() => {
+                      handleMenuItemClick('gbfs-validator');
+                    }}
+                    sx={{ display: 'flex', gap: 1 }}
+                  >
+                    <BikeScooterOutlined fontSize='small' />
+                    {t('gbfsValidator')}
+                  </MenuItem>
+                  <MenuItem
+                    key={'gtfs-validator'}
+                    component={Link}
+                    href='https://gtfs-validator.mobilitydata.org/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    <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>
+              </>
+            )}
             {/* Allow users with mobilitydata.org email to access metrics */}
             {metricsOptionsEnabled && (
               <>

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';
@@ -23,6 +24,8 @@ import { selectIsAuthenticated } from '../store/profile-selectors';
 import { fontFamily } from '../Theme';
 import { mobileNavElementStyle } from './Header.style';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useRemoteConfig } from '../context/RemoteConfigProvider';
+import { useTranslation } from 'react-i18next';
 
 const websiteTile = 'Mobility Database';
 
@@ -39,6 +42,8 @@ export default function DrawerContent({
 }: DrawerContentProps): JSX.Element {
   const isAuthenticated = useSelector(selectIsAuthenticated);
   const navigateTo = useNavigate();
+  const { config } = useRemoteConfig();
+  const { t } = useTranslation('common');
   const theme = useTheme();
 
   return (
@@ -95,7 +100,55 @@ export default function DrawerContent({
             {item.title}
           </Button>
         ))}
+
         <Divider sx={{ mt: 2 }} />
+        {config.gbfsValidator && (
+          <Accordion disableGutters={true} sx={{ boxShadow: 'none' }}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls='validators-content'
+              id='validators-content'
+            >
+              <Typography
+                variant={'subtitle1'}
+                sx={{ fontFamily: fontFamily.secondary }}
+              >
+                {t('validators')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Button
+                variant='text'
+                sx={mobileNavElementStyle}
+                href={'gbfs-validator'}
+              >
+                {t('gbfsValidator')}
+              </Button>
+              <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>
+        )}
         {metricsOptionsEnabled && (
           <>
             <Accordion disableGutters={true} sx={{ boxShadow: 'none' }}>
@@ -185,11 +238,7 @@ export default function DrawerContent({
             </AccordionDetails>
           </Accordion>
         ) : (
-          <Button
-            variant='text'
-            sx={mobileNavElementStyle}
-            href={SIGN_IN_TARGET}
-          >
+          <Button variant='contained' sx={{ ml: 2 }} href={SIGN_IN_TARGET}>
             Login
           </Button>
         )}

web-app/src/app/interface/RemoteConfig.ts

@@ -45,6 +45,7 @@ export interface RemoteConfigValues extends FirebaseDefaultConfig {
   // 1- hides/shows the toggle button for gtfs feeds
   // 2- use bounding box view for GBFS instead of full covered area map
   enableDetailedCoveredArea: boolean;
+  gbfsValidator: boolean;
 }
 
 const featureByPassDefault: BypassConfig = {
@@ -74,6 +75,7 @@ export const defaultRemoteConfigValues: RemoteConfigValues = {
   visualizationMapFullDataLimit: 5,
   visualizationMapPreviewDataLimit: 3,
   enableDetailedCoveredArea: false,
+  gbfsValidator: false,
 };
 
 remoteConfig.defaultConfig = defaultRemoteConfigValues;

web-app/src/app/router/Router.tsx

@@ -35,6 +35,7 @@ import GBFSNoticeAnalytics from '../screens/Analytics/GBFSNoticeAnalytics';
 import GBFSVersionAnalytics from '../screens/Analytics/GBFSVersionAnalytics';
 import ContactUs from '../screens/ContactUs';
 import FullMapView from '../screens/Feed/components/FullMapView';
+import GbfsValidator from '../screens/GbfsValidator';
 
 export const AppRouter: React.FC = () => {
   const navigateTo = useNavigate();
@@ -92,6 +93,7 @@ export const AppRouter: React.FC = () => {
       <Route path='about' element={<About />} />
       <Route path='contact-us' element={<ContactUs />} />
       <Route path='feeds' element={<Feeds />} />
+      <Route path='gbfs-validator' element={<GbfsValidator />} />
       <Route
         path='feeds/gtfs'
         element={<Navigate to='/feeds?gtfs=true' replace />}