admin section in feed view

Author: Alessandro100

src/app/[locale]/feeds/[feedDataType]/[feedId]/authed/page.tsx

@@ -5,6 +5,10 @@ import type { Metadata, ResolvingMetadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 import { fetchCompleteFeedData } from '../lib/feed-data';
 import { generateFeedMetadata } from '../lib/generate-feed-metadata';
+import {
+  getCurrentUserFromCookie,
+  isMobilityDatabaseAdmin,
+} from '../../../../../utils/auth-server';
 
 interface Props {
   params: Promise<{ locale: string; feedDataType: string; feedId: string }>;
@@ -40,7 +44,11 @@ export default async function AuthedFeedPage({
 }: Props): Promise<ReactElement> {
   const { feedId, feedDataType } = await params;
 
-  const feedData = await fetchCompleteFeedData(feedDataType, feedId);
+  const [userData, feedData] = await Promise.all([
+    getCurrentUserFromCookie(),
+    fetchCompleteFeedData(feedDataType, feedId),
+  ]);
+  const isAdmin = isMobilityDatabaseAdmin(userData?.email);
 
   if (feedData == null) {
     return <div>Feed not found</div>;
@@ -69,6 +77,7 @@ export default async function AuthedFeedPage({
         relatedGtfsRtFeeds={relatedGtfsRtFeeds}
         totalRoutes={totalRoutes}
         routeTypes={routeTypes}
+        isMobilityDatabaseAdmin={isAdmin}
       />
     </>
   );

src/app/components/ContentBox.tsx

@@ -3,6 +3,7 @@ import { Box, Typography, type SxProps } from '@mui/material';
 
 export interface ContentBoxProps {
   title: string;
+  subtile?: React.ReactNode;
   width?: Record<string, string>;
   outlineColor: string;
   padding?: Partial<SxProps>;
@@ -45,6 +46,11 @@ export const ContentBox = (
           {props.action != null && props.action}
         </Typography>
       )}
+      {props.subtile != null && (
+        <Typography variant='subtitle1' sx={{ mb: 2 }}>
+          {props.subtile}
+        </Typography>
+      )}
       {props.children}
     </Box>
   );

src/app/screens/Feed/FeedView.tsx

@@ -24,10 +24,12 @@ import {
   type GTFSRTFeedType,
 } from '../../services/feeds/utils';
 import ClientDownloadButton from './components/ClientDownloadButton';
+import RevalidateCacheButton from './components/RevalidateCacheButton';
 import { type components } from '../../services/feeds/types';
 import ClientQualityReportButton from './components/ClientQualityReportButton';
 import { getBoundingBox } from './Feed.functions';
 import dynamic from 'next/dynamic';
+import { ContentBox } from '../../components/ContentBox';
 
 const CoveredAreaMap = dynamic(
   async () =>
@@ -68,6 +70,7 @@ interface Props {
   relatedGtfsRtFeeds?: GTFSRTFeedType[];
   totalRoutes?: number;
   routeTypes?: string[];
+  isMobilityDatabaseAdmin?: boolean;
 }
 
 type LatestDatasetFull = components['schemas']['GtfsDataset'] | undefined;
@@ -79,6 +82,7 @@ export default async function FeedView({
   relatedGtfsRtFeeds = [],
   totalRoutes,
   routeTypes,
+  isMobilityDatabaseAdmin = false,
 }: Props): Promise<React.ReactElement> {
   if (feed == undefined) notFound();
 
@@ -418,6 +422,22 @@ export default async function FeedView({
           </Box>
         </Box>
       </Box>
+      {isMobilityDatabaseAdmin && (
+        <ContentBox
+          title={'MobilityDatabase Admin Tools'}
+          subtile={
+            <>
+              This section is only visible to Mobility Data employees with an{' '}
+              <code>@mobilitydata.org</code> email address. It contains tools
+              for debugging and managing feed data
+            </>
+          }
+          outlineColor='background.paper'
+          sx={{ mt: 4, backgroundColor: 'background.paper' }}
+        >
+          <RevalidateCacheButton feedId={feed.id ?? ''} />
+        </ContentBox>
+      )}
     </Container>
   );
 }

src/app/utils/auth-server.ts

@@ -225,3 +225,7 @@ export async function getUserContextJwtFromCookie(): Promise<
     return undefined;
   }
 }
+
+export function isMobilityDatabaseAdmin(email: string | undefined): boolean {
+  return email?.endsWith('@mobilitydata.org') === true;
+}