feed detail: timezone + dataset sdr (#1044)

Author: Alessandro100

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

@@ -16,6 +16,7 @@
         "serviceAlerts": "Service Alerts"
     },
     "loading": "Loading...",
+    "download": "Download",
     "errors": {
         "generic": "We are unable to complete your request at the moment."
     },

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

@@ -101,7 +101,7 @@
   "qualityReportUpdated": "Quality report updated",
   "officialFeedUpdated": "Official verification updated",
   "serviceDateRange": "Service Date Range",
-  "serviceDateRangeTooltip": "Dates are relative to local timezone",
+  "serviceDateRangeTooltip": "Dates are relative to the specified timezone. If no timezone is specified, the dates are in UTC.",
   "heatmapIntensity": "Stop Density",
   "heatmapExplanationTitle": "What does this mean?",
   "heatmapExplanationContent": "This color scale shows the percentage of stops from <code>stops.txt</code> that are located within each geographic area. Darker colors indicate areas where a higher percentage of stops are covered.",
@@ -128,5 +128,16 @@
       "toolTip": "Future Feed",
       "toolTipLong": "This feed is not yet active but will be used in the future."
     }
+  },
+  "datasetHistory": "Dataset History",
+  "datasetHistoryDescription": "The Mobility Database fetches and stores new datasets twice a week, on Mondays and Thursdays at midnight EST.",
+  "datasets": "Datasets",
+  "validationReportNotAvailable": "Validation report not available",
+  "runValidationReportYourself": "Run Validator Yourself",
+  "datasetHistoryTooltip": {
+    "serviceDateRange": "Service date range of when this dataset is active",
+    "downloadReport": "Download the dataset for this feed",
+    "viewReport": "View Validation Report",
+    "viewJsonReport": "View Validation Report in JSON format"
   }
 }

web-app/src/app/screens/Feed/Feed.functions.tsx

@@ -1,3 +1,4 @@
+import { Box, Typography } from '@mui/material';
 import { type TFunction } from 'i18next';
 
 export function formatProvidersSorted(provider: string): string[] {
@@ -62,3 +63,37 @@ export function generatePageTitle(
   newDocTitle += 'Mobility Database';
   return newDocTitle;
 }
+
+export const formatServiceDateRange = (
+  dateStart: string,
+  dateEnd: string,
+  timeZone?: string,
+): JSX.Element => {
+  const startDate = new Date(dateStart);
+  const endDate = new Date(dateEnd);
+  const usedTimezone = timeZone ?? 'UTC';
+  // Note: If the timezone isn't set, it will default to UTC
+  // If the timezone is set, but has an invalid value, it will default to the user's local timezone
+  const formattedDateStart = new Intl.DateTimeFormat('en-US', {
+    timeZone: usedTimezone,
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(startDate);
+  const formattedDateEnd = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(endDate);
+  return (
+    <Box>
+      <Typography variant='body1'>
+        {formattedDateStart}{' '}
+        <Typography component={'span'} sx={{ mx: 1, fontSize: '14px' }}>
+          -
+        </Typography>{' '}
+        {formattedDateEnd}
+      </Typography>
+    </Box>
+  );
+};

web-app/src/app/screens/Feed/FeedSummary.tsx

@@ -31,8 +31,10 @@ import EmailIcon from '@mui/icons-material/Email';
 import LockIcon from '@mui/icons-material/Lock';
 import DateRangeIcon from '@mui/icons-material/DateRange';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { FeedStatusIndicator } from '../../components/FeedStatus';
 import Locations from '../../components/Locations';
+import { formatServiceDateRange } from './Feed.functions';
 
 export interface FeedSummaryProps {
   feed: GTFSFeedType | GTFSRTFeedType | undefined;
@@ -76,35 +78,6 @@ const ResponsiveListItem = styled('li')(({ theme }) => ({
   },
 }));
 
-const formatServiceDateRange = (
-  dateStart: string,
-  dateEnd: string,
-): JSX.Element => {
-  const startDate = new Date(dateStart);
-  const endDate = new Date(dateEnd);
-  const formattedDateStart = new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(startDate);
-  const formattedDateEnd = new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(endDate);
-  return (
-    <Box>
-      <Typography variant='body1'>
-        {formattedDateStart}{' '}
-        <Typography component={'span'} sx={{ mx: 2, fontSize: '14px' }}>
-          -
-        </Typography>{' '}
-        {formattedDateEnd}
-      </Typography>
-    </Box>
-  );
-};
-
 export default function FeedSummary({
   feed,
   sortedProviders,
@@ -190,6 +163,19 @@ export default function FeedSummary({
           )}
         </Box>
       </Box>
+      {latestDataset?.agency_timezone != undefined && (
+        <Box sx={boxElementStyle}>
+          <StyledTitleContainer>
+            <AccessTimeIcon></AccessTimeIcon>
+            <Typography variant='subtitle1' sx={{ fontWeight: 'bold' }}>
+              Agency Timezone
+            </Typography>
+          </StyledTitleContainer>
+          <Typography variant='body1'>
+            {latestDataset.agency_timezone}
+          </Typography>
+        </Box>
+      )}
       {latestDataset?.service_date_range_start != undefined &&
         latestDataset.service_date_range_end != undefined && (
           <Box sx={boxElementStyle}>
@@ -208,6 +194,7 @@ export default function FeedSummary({
               {formatServiceDateRange(
                 latestDataset?.service_date_range_start,
                 latestDataset?.service_date_range_end,
+                latestDataset.agency_timezone,
               )}
               <FeedStatusIndicator
                 status={feed?.status ?? ''}