feed status in feed detail page (#885)

Alessandro100 · web-flow · commit 406c0c9599b8 · 2025-01-22T10:13:41.000-05:00
diff --git a/web-app/public/locales/en/feeds.json b/web-app/public/locales/en/feeds.json
@@ -94,5 +94,29 @@
   "seeDetailPageProviders": "See detail page to view {providersCount} others",
   "openFullQualityReport": "Open Full Quality Report",
   "qualityReportUpdated": "Quality report updated",
-  "officialFeedUpdated": "Official verification updated"
+  "officialFeedUpdated": "Official verification updated",
+  "serviceDateRange": "Service Date Range",
+  "serviceDateRangeTooltip": "Dates are relative to local timezone",
+  "feedStatus": {
+    "active": {
+      "label": "Active",
+      "toolTip": "Active Feed",
+      "toolTipLong": "This feed is currently active and being used."
+    },
+    "inactive": {
+      "label": "Inactive",
+      "toolTip": "Inactive Feed",
+      "toolTipLong": "This feed is currently inactive and not being used."
+    },
+    "deprecated": {
+      "label": "Deprecated",
+      "toolTip": "Deprecated Feed",
+      "toolTipLong": "This feed is deprecated and should not be used."
+    },
+    "future": {
+      "label": "Future",
+      "toolTip": "Future Feed",
+      "toolTipLong": "This feed is not yet active but will be used in the future."
+    }
+  }
 }
diff --git a/web-app/src/app/components/FeedStatus.tsx b/web-app/src/app/components/FeedStatus.tsx
@@ -0,0 +1,88 @@
+import { Box, Chip, Tooltip } from '@mui/material';
+import { theme } from '../Theme';
+import { useTranslation } from 'react-i18next';
+import { type TFunction } from 'i18next';
+
+export interface FeedStatusProps {
+  status: string;
+}
+
+interface FeedStatusData {
+  toolTip: string;
+  label: string;
+  themeColor: 'success' | 'info' | 'warning' | 'error';
+  toolTipLong: string;
+}
+
+function getFeedStatusData(
+  status: string,
+  t: TFunction,
+): FeedStatusData | undefined {
+  const data: Record<string, FeedStatusData> = {
+    active: {
+      toolTip: t('feedStatus.active.toolTip'),
+      label: t('feedStatus.active.label'),
+      themeColor: 'success',
+      toolTipLong: t('feedStatus.active.toolTipLong'),
+    },
+    future: {
+      toolTip: t('feedStatus.future.toolTip'),
+      label: t('feedStatus.future.label'),
+      themeColor: 'info',
+      toolTipLong: t('feedStatus.future.toolTipLong'),
+    },
+    inactive: {
+      toolTip: t('feedStatus.inactive.toolTip'),
+      label: t('feedStatus.inactive.label'),
+      themeColor: 'warning',
+      toolTipLong: t('feedStatus.inactive.toolTipLong'),
+    },
+    deprecated: {
+      toolTip: t('feedStatus.deprecated.toolTip'),
+      label: t('feedStatus.deprecated.label'),
+      themeColor: 'error',
+      toolTipLong: t('feedStatus.deprecated.toolTipLong'),
+    },
+  };
+
+  return data[status];
+}
+
+export const FeedStatusIndicator = (
+  props: React.PropsWithChildren<FeedStatusProps>,
+): JSX.Element => {
+  const { t } = useTranslation('feeds');
+  const statusData = getFeedStatusData(props.status, t);
+  return (
+    <>
+      {statusData != undefined && (
+        <Tooltip title={statusData.toolTip} placement='top'>
+          <Box
+            sx={{
+              background: theme.palette[statusData.themeColor].main,
+              width: '12px',
+              height: '12px',
+              borderRadius: '50%',
+            }}
+          ></Box>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+export const FeedStatusChip = (
+  props: React.PropsWithChildren<FeedStatusProps>,
+): JSX.Element => {
+  const { t } = useTranslation('feeds');
+  const statusData = getFeedStatusData(props.status, t);
+  return (
+    <>
+      {statusData != undefined && (
+        <Tooltip title={statusData.toolTipLong} placement='top'>
+          <Chip label={statusData.label} color={statusData.themeColor}></Chip>
+        </Tooltip>
+      )}
+    </>
+  );
+};
diff --git a/web-app/src/app/screens/Feed/DataQualitySummary.tsx b/web-app/src/app/screens/Feed/DataQualitySummary.tsx
@@ -7,13 +7,16 @@ import { WarningContentBox } from '../../components/WarningContentBox';
 import VerifiedIcon from '@mui/icons-material/Verified';
 import { useTranslation } from 'react-i18next';
 import { verificationBadgeStyle } from '../../styles/VerificationBadge.styles';
+import { FeedStatusChip } from '../../components/FeedStatus';
 
 export interface DataQualitySummaryProps {
+  feedStatus: components['schemas']['BasicFeed']['status'];
   isOfficialFeed: boolean;
   latestDataset: components['schemas']['GtfsDataset'] | undefined;
 }
 
 export default function DataQualitySummary({
+  feedStatus,
   isOfficialFeed,
   latestDataset,
 }: DataQualitySummaryProps): React.ReactElement {
@@ -24,7 +27,8 @@ export default function DataQualitySummary({
         latestDataset.validation_report === null) && (
         <WarningContentBox>{t('errorLoadingQualityReport')}</WarningContentBox>
       )}
-      <Box sx={{ display: 'flex', gap: 1 }}>
+      <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+        <FeedStatusChip status={feedStatus ?? ''}></FeedStatusChip>
         {isOfficialFeed && (
           <Tooltip title={t('officialFeedTooltip')} placement='top'>
             <Chip
diff --git a/web-app/src/app/screens/Feed/FeedSummary.tsx b/web-app/src/app/screens/Feed/FeedSummary.tsx
@@ -30,6 +30,9 @@ import DatasetIcon from '@mui/icons-material/Dataset';
 import LayersIcon from '@mui/icons-material/Layers';
 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 { FeedStatusIndicator } from '../../components/FeedStatus';
 
 export interface FeedSummaryProps {
   feed: GTFSFeedType | GTFSRTFeedType | undefined;
@@ -58,7 +61,7 @@ const boxElementStyleProducerURL: SxProps = {
 const StyledTitleContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(1),
-  marginBottom: theme.spacing(1),
+  marginBottom: '4px',
   marginTop: theme.spacing(3),
   alignItems: 'center',
 }));
@@ -73,6 +76,35 @@ 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,
@@ -89,7 +121,6 @@ export default function FeedSummary({
   const hasAuthenticationInfo =
     feed?.source_info?.authentication_info_url !== undefined &&
     feed?.source_info.authentication_info_url.trim() !== '';
-
   return (
     <ContentBox
       width={width}
@@ -158,6 +189,34 @@ export default function FeedSummary({
           )}
         </Box>
       </Box>
+      {latestDataset?.service_date_range_start != undefined &&
+        latestDataset.service_date_range_end != undefined && (
+          <Box sx={boxElementStyle}>
+            <StyledTitleContainer>
+              <DateRangeIcon></DateRangeIcon>
+              <Typography variant='subtitle1' sx={{ fontWeight: 'bold' }}>
+                {t('serviceDateRange')}
+                <Tooltip title={t('serviceDateRangeTooltip')} placement='top'>
+                  <IconButton>
+                    <InfoOutlinedIcon />
+                  </IconButton>
+                </Tooltip>
+              </Typography>
+            </StyledTitleContainer>
+            <Typography
+              variant='body1'
+              sx={{ display: 'flex', alignItems: 'center', gap: 3 }}
+            >
+              {formatServiceDateRange(
+                latestDataset?.service_date_range_start,
+                latestDataset?.service_date_range_end,
+              )}
+              <FeedStatusIndicator
+                status={feed?.status ?? ''}
+              ></FeedStatusIndicator>
+            </Typography>
+          </Box>
+        )}
       <Box sx={boxElementStyleProducerURL}>
         <StyledTitleContainer>
           <LinkIcon></LinkIcon>
diff --git a/web-app/src/app/screens/Feed/index.tsx b/web-app/src/app/screens/Feed/index.tsx
@@ -417,6 +417,7 @@ export default function Feed(): React.ReactElement {
 
       {feed?.data_type === 'gtfs' && (
         <DataQualitySummary
+          feedStatus={feed?.status}
           isOfficialFeed={feed.official === true}
           latestDataset={latestDataset}
         />
