feat: is official badge + feed detail enhance (#870)

* is official + feed detail enhance

* official_updated_at added

---------

Co-authored-by: Jingsi Lu <[email protected]>

Author: Alessandro100

api/src/feeds/impl/models/basic_feed_impl.py

@@ -23,14 +23,12 @@ class Config:
     def from_orm(cls, feed: Feed | None, _=None) -> BasicFeed | None:
         if not feed:
             return None
-        latest_official_status = None
-        if len(feed.officialstatushistories) > 0:
-            latest_official_status = max(feed.officialstatushistories, key=lambda x: x.timestamp).is_official
         return cls(
             id=feed.stable_id,
             data_type=feed.data_type,
             status=feed.status,
-            official=latest_official_status,
+            official=feed.official,
+            official_updated_at=feed.official_updated_at,
             created_at=feed.created_at,
             external_ids=sorted(
                 [ExternalIdImpl.from_orm(item) for item in feed.externalids], key=lambda x: x.external_id

docs/DatabaseCatalogAPI.yaml

@@ -362,6 +362,12 @@ components:
                 Official feeds are provided by the transit agency or a trusted source.
             type: boolean
             example: true
+        official_updated_at:
+            description: >
+                The date and time the official status was last updated, in ISO 8601 date-time format.
+            type: string
+            example: 2023-07-10T22:06:00Z
+            format: date-time
         external_ids:
           $ref: "#/components/schemas/ExternalIds"
         provider:

liquibase/changelog.xml

@@ -33,4 +33,5 @@
     <include file="changes/feat_741.sql" relativeToChangelogFile="true"/>
     <include file="changes/feat_794.sql" relativeToChangelogFile="true"/>
     <include file="changes/feat_794_2.sql" relativeToChangelogFile="true"/>
+    <include file="changes/feat_871.sql" relativeToChangelogFile="true"/>
 </databaseChangeLog>

liquibase/changes/feat_871.sql

@@ -0,0 +1 @@
+ALTER TABLE Feed ADD COLUMN official_updated_at TIMESTAMP DEFAULT NULL;

liquibase/changes/official_tag_update.sql

@@ -1,7 +1,9 @@
 -- Query to update official tag for feeds with contact email in the feed table where the source is mdb
 
 UPDATE public.feed f
-SET official = TRUE
+SET 
+  official = TRUE,
+  official_updated_at = NOW()
 FROM public.externalid e
 WHERE f.id = e.feed_id
   AND f.feed_contact_email LIKE '%@%'

web-app/cypress/e2e/feeds.cy.ts

@@ -25,7 +25,7 @@ describe('Feed page', () => {
   });
 
   it('should render the last updated date', () => {
-    cy.get('[data-testid="last-updated"]').should('contain', 'Last updated on');
+    cy.get('[data-testid="last-updated"]').should('contain', 'Quality report updated');
   });
 
   it('should render download button', () => {

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

@@ -36,5 +36,12 @@
     "country": "Country",
     "chooseCountry": "Choose a country",
     "region": "Region",
-    "municipality": "Municipality"
+    "municipality": "Municipality",
+    "feedback": {
+        "errors": "errors",
+        "noErrors": "No errors",
+        "noWarnings": "No warnings",
+        "warnings": "warnings",
+        "infoNotices": "info notices"
+    }
 }

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

@@ -18,6 +18,7 @@
   },
   "errorAndContact": "Please check your internet connection and try again. If the problem persists <1>contact us</1> for for further assistance.",
   "errorLoadingFeed": "There was an error loading the feed.",
+  "errorLoadingQualityReport": "Unable to generate data quality report.",
   "form": {
     "addOrUpdateFeed": "Add or Update a Feed",
     "signUp": "Sign up for a Mobility Database account or login to add or update a GTFS feed.",
@@ -86,5 +87,12 @@
   "relatedGtfsScheduleFeed": "Link to related GTFS Schedule feed",
   "isAuthRequired": "Is authentication required for the feed?",
   "isAuthRequiredDetails": " Select \"Yes\" if a user has to login or provide credentials to download the feed",
-  "detailPageDescription": "Explore the {{formattedName}} {{dataTypeVerbose}} feed details with access to a quality data insights"
+  "detailPageDescription": "Explore the {{formattedName}} {{dataTypeVerbose}} feed details with access to a quality data insights",
+  "officialFeed": "Official Feed",
+  "officialFeedTooltip": "The transit provider has confirmed this feed should be shared with riders. This has been confirmed either by the transit provider providing the feed on their website or from personalized confirmation with the Mobility Database team.",
+  "officialFeedTooltipShort": "Verified feed: Confirmed by the transit provider or the Mobility Database team for rider use.",
+  "seeDetailPageProviders": "See detail page to view {providersCount} others",
+  "openFullQualityReport": "Open Full Quality Report",
+  "qualityReportUpdated": "Quality report updated",
+  "officialFeedUpdated": "Official verification updated"
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Grid, type SxProps } from '@mui/material';
+import { Box, Typography, type SxProps } from '@mui/material';
 
 export interface ContentBoxProps {
   title: string;
@@ -17,7 +17,6 @@ export const ContentBox = (
     <Box
       width={props.width}
       sx={{
-        ...props.sx,
         background: '#FFFFFF',
         borderRadius: '6px',
         border: `2px solid ${props.outlineColor}`,
@@ -26,19 +25,15 @@ export const ContentBox = (
         fontSize: '18px',
         fontWeight: 700,
         mr: 0,
+        ...props.sx,
       }}
     >
-      <Grid
-        container
-        sx={{
-          width: '100%',
-        }}
-      >
-        <Grid item xs={12} fontSize={24}>
+      {props.title.trim() !== '' && (
+        <Typography variant='h5' sx={{ flexShrink: 0, mb: 1 }}>
           {props.title}
-        </Grid>
-        {props.children}
-      </Grid>
+        </Typography>
+      )}
+      {props.children}
     </Box>
   );
 };

web-app/src/app/components/Header.style.ts

@@ -1,14 +1,19 @@
-import { type SxProps, type Theme } from '@mui/material';
+import { type Theme } from '@mui/material';
+import { type SystemStyleObject } from '@mui/system';
 import { fontFamily } from '../Theme';
 
-export const mobileNavElementStyle: SxProps<Theme> = (theme) => ({
+export const mobileNavElementStyle = (
+  theme: Theme,
+): SystemStyleObject<Theme> => ({
   width: '100%',
   justifyContent: 'flex-start',
   pl: 3,
   color: theme.palette.text.primary,
 });
 
-export const animatedButtonStyling: SxProps<Theme> = (theme) => ({
+export const animatedButtonStyling = (
+  theme: Theme,
+): SystemStyleObject<Theme> => ({
   minWidth: 'fit-content',
   px: 0,
   mx: {