Merge branch 'main' into feat/pt-126

Author: cka-y

functions-data/tdg_feed_redirect/redirect_mdb_to_tdg.csv

@@ -0,0 +1,82 @@
+MDB ID,TDG ID
+mdb-2604,81026
+mdb-1898,83138
+mdb-888,39603
+mdb-1056,80736
+mdb-2133,39601
+mdb-843,39599
+mdb-889,39594
+mdb-988,39591
+mdb-1159,83281
+mdb-1880,78904
+mdb-2404,82547
+mdb-844,62323
+mdb-985,40287
+mdb-1096,80721
+mdb-1257,82641
+mdb-1840,79831
+mdb-1887,82721
+mdb-1897,80772
+mdb-2685,82711
+mdb-836,82711
+mdb-642,78934
+mdb-999,81559
+mdb-1314,52605
+mdb-1878,9279
+mdb-2458,80934
+mdb-2842,82361
+mdb-2686,82330
+mdb-1879,82367
+mdb-2622,83024
+mdb-1895,82907
+mdb-1205,83194
+mdb-1259,83194
+mdb-1782,83194
+mdb-1783,83194
+mdb-1789,79352
+mdb-1025,83251
+mdb-1261,82446
+mdb-2005,79520
+mdb-2007,80036
+mdb-1990,82683
+mdb-2431,82199
+mdb-1987,80694
+mdb-853,11681
+mdb-1116,80590
+mdb-2152,81995
+mdb-2626,81898
+mdb-1283,83448
+mdb-2153,80742
+mdb-1298,80725
+mdb-1855,81794
+mdb-1055,83459
+mdb-1854,83462
+mdb-1876,51449
+mdb-2139,82555
+mdb-1884,12608
+mdb-1989,81457
+mdb-1153,83126
+mdb-600,71223
+mdb-641,81618
+mdb-2003,79420
+mdb-1888,12601
+mdb-2620,82386
+mdb-790,82386
+mdb-1839,79814
+mdb-2004,79822
+mdb-1894,8597
+mdb-1998,82704
+mdb-658,82664
+mdb-1256,81346
+mdb-1877,64280
+mdb-2627,79847
+mdb-2628,79747
+mdb-2006,65812
+mdb-1024,81678
+mdb-2738,82388
+mdb-1896,82413
+mdb-1286,79508
+mdb-1893,8487
+mdb-1890,8201
+mdb-1026,80921
+mdb-845,"82285, 82137, 82136"

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

@@ -13,6 +13,8 @@ import {
   Select,
   useTheme,
   Link,
+  Alert,
+  AlertTitle,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -26,7 +28,7 @@ import {
   gbfsMetricsNavItems,
 } from '../constants/Navigation';
 import type NavigationItem from '../interface/Navigation';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { selectIsAuthenticated, selectUserEmail } from '../store/selectors';
 import LogoutConfirmModal from './LogoutConfirmModal';
@@ -44,9 +46,15 @@ import ThemeToggle from './ThemeToggle';
 import { useTranslation } from 'react-i18next';
 
 export default function DrawerAppBar(): React.ReactElement {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const hasTransitFeedsRedirectParam =
+    searchParams.get('utm_source') === 'transitfeeds';
   const theme = useTheme();
   const location = useLocation();
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [hasTransitFeedsRedirect, setHasTransitFeedsRedirect] = React.useState(
+    hasTransitFeedsRedirectParam,
+  );
   const [openDialog, setOpenDialog] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('');
   const [navigationItems, setNavigationItems] = React.useState<
@@ -118,7 +126,7 @@ export default function DrawerAppBar(): React.ReactElement {
     <Box
       sx={{
         display: 'flex',
-        height: '64px',
+        height: hasTransitFeedsRedirect ? '115px' : '64px',
         mb: { xs: 2, md: 4 },
       }}
     >
@@ -399,7 +407,32 @@ export default function DrawerAppBar(): React.ReactElement {
             )}
           </Box>
         </Toolbar>
+        {hasTransitFeedsRedirect && (
+          <Alert
+            severity='warning'
+            onClose={() => {
+              setHasTransitFeedsRedirect(false);
+              if (hasTransitFeedsRedirectParam) {
+                searchParams.delete('utm_source');
+                setSearchParams(searchParams);
+              }
+            }}
+            sx={{ '.MuiAlert-message': { pb: { xs: 0, md: 1 } } }}
+          >
+            <AlertTitle>
+              You&apos;ve been redirected from TransitFeeds
+            </AlertTitle>
+            <Box
+              component={'span'}
+              sx={{ display: { xs: 'none', md: 'block' } }}
+            >
+              This page now lives on MobilityDatabase.org, where you&apos;ll
+              find the most up-to-date transit data.
+            </Box>
+          </Alert>
+        )}
       </AppBar>
+
       <nav>
         <Drawer
           container={container}

web-app/src/app/screens/Feeds/Feeds.styles.ts

@@ -13,15 +13,16 @@ export const chipHolderStyles: SxProps<Theme> = (theme) => ({
 export const stickyHeaderStyles = (props: {
   theme: Theme;
   isSticky: boolean;
+  headerBannerVisible: boolean;
 }): SxProps => {
   const styles: SxProps = {
     display: 'flex',
     alignItems: 'center',
     position: 'sticky',
     zIndex: 1,
     top: {
-      xs: '56px',
-      sm: '65px',
+      xs: props.headerBannerVisible ? '113px' : '56px',
+      md: props.headerBannerVisible ? '140px' : '65px',
     },
     background: props.theme.palette.background.default,
     transition: 'box-shadow 0.3s ease-in-out',

web-app/src/app/screens/Feeds/index.tsx

@@ -79,6 +79,9 @@ export default function Feed(): React.ReactElement {
   const feedsData = useSelector(selectFeedsData);
   const feedStatus = useSelector(selectFeedsStatus);
 
+  const hasTransitFeedsRedirectParam =
+    searchParams.get('utm_source') === 'transitfeeds';
+
   // features i/o
   const areNoDataTypesSelected =
     !selectedFeedTypes.gtfs &&
@@ -171,6 +174,9 @@ export default function Feed(): React.ReactElement {
     if (isOfficialFeedSearch) {
       newSearchParams.set('official', 'true');
     }
+    if (searchParams.get('utm_source') === 'transitfeeds') {
+      newSearchParams.set('utm_source', 'transitfeeds');
+    }
     if (searchParams.toString() !== newSearchParams.toString()) {
       setSearchParams(newSearchParams, { replace: false });
     }
@@ -318,7 +324,13 @@ export default function Feed(): React.ReactElement {
             </Typography>
           )}
         </Container>
-        <Box sx={stickyHeaderStyles({ theme, isSticky })}>
+        <Box
+          sx={stickyHeaderStyles({
+            theme,
+            isSticky,
+            headerBannerVisible: hasTransitFeedsRedirectParam,
+          })}
+        >
           <Container
             maxWidth={'xl'}
             component='form'