Feat: gbfs autodiscovery in detail page (#1229)

Author: Alessandro100

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

@@ -4,6 +4,11 @@
     "feedUrlCopied": "Feed URL Copied",
     "runValidationReport": "Run Validation Report",
     "openFeedUrl": "Open Feed URL",
+    "openAutoDiscoveryUrl": "Open Auto-Discovery URL",
+    "autoDiscoveryUrl": "Auto-Discovery URL",
+    "autoDiscoveryVersion": "Auto-Discovery",
+    "gbfsVersionsJson": "From gbfs_versions.json",
+    "feedVersionTooltip": "This URL is from gbfs_versions.json",
     "features": {
         "gbfs": "GBFS",
         "system_regions": "System Regions",

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

@@ -106,10 +106,17 @@ export const sortGbfsVersions = (
 ): number => {
   const na = parseFloat(String(a.version ?? '0').replace(/[^0-9.]/g, ''));
   const nb = parseFloat(String(b.version ?? '0').replace(/[^0-9.]/g, ''));
+
   if (Number.isNaN(na) || Number.isNaN(nb)) {
     return -1;
   }
-  return nb - na;
+
+  if (na !== nb) {
+    return nb - na;
+  }
+
+  if (a.source === b.source) return 0;
+  return a.source === 'autodiscovery' ? -1 : 1;
 };
 
 // Could be temporary function

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

@@ -29,7 +29,7 @@ export const ctaContainerStyle: SxProps<Theme> = (theme) => ({
 
 export const featureChipsStyle: SxProps<Theme> = (theme) => ({
   color: theme.palette.primary.contrastText,
-  backgroundColor: theme.palette.primary.dark,
+  backgroundColor: theme.palette.secondary.dark,
   border: `2px solid transparent`,
   ':hover': {
     opacity: 0.95,

web-app/src/app/screens/Feed/components/GbfsFeedInfo.tsx

@@ -9,15 +9,18 @@ import LinkIcon from '@mui/icons-material/Link';
 import DatasetIcon from '@mui/icons-material/Dataset';
 import Locations from '../../../components/Locations';
 import SettingsIcon from '@mui/icons-material/Settings';
+import StoreIcon from '@mui/icons-material/Store';
 import FeedAuthenticationSummaryInfo from './FeedAuthenticationSummaryInfo';
 import { boxElementStyle, StyledTitleContainer } from '../Feed.styles';
 
 export interface GbfsFeedInfoProps {
   feed: GBFSFeedType;
+  autoDiscoveryUrl?: string;
 }
 
 export default function GbfsFeedInfo({
   feed,
+  autoDiscoveryUrl,
 }: GbfsFeedInfoProps): React.ReactElement {
   const { t } = useTranslation('feeds');
   const theme = useTheme();
@@ -40,9 +43,9 @@ export default function GbfsFeedInfo({
         </Box>
       </Box>
 
-      <Box sx={boxElementStyle}>
-        <StyledTitleContainer>
-          <LinkIcon></LinkIcon>
+      <Box sx={{ ...boxElementStyle, mt: 0 }}>
+        <StyledTitleContainer sx={{ mt: 0 }}>
+          <StoreIcon></StoreIcon>
           <Typography variant='subtitle1' sx={{ fontWeight: 'bold' }}>
             {t('producer')}
           </Typography>
@@ -57,6 +60,25 @@ export default function GbfsFeedInfo({
         </Link>
       </Box>
 
+      {autoDiscoveryUrl != undefined && (
+        <Box sx={boxElementStyle}>
+          <StyledTitleContainer>
+            <LinkIcon></LinkIcon>
+            <Typography variant='subtitle1' sx={{ fontWeight: 'bold' }}>
+              {t('gbfs:autoDiscoveryUrl')}
+            </Typography>
+          </StyledTitleContainer>
+          <Link
+            href={autoDiscoveryUrl}
+            variant='body1'
+            target='_blank'
+            rel='noreferrer'
+          >
+            {autoDiscoveryUrl}
+          </Link>
+        </Box>
+      )}
+
       <Box sx={boxElementStyle}>
         <StyledTitleContainer>
           <SettingsIcon></SettingsIcon>

web-app/src/app/screens/Feed/components/GbfsVersions.spec.tsx

@@ -159,4 +159,39 @@ describe('sortGbfsVersions used with Array.sort()', () => {
       { version: '2.0' },
     ]);
   });
+
+  it('prioritizes autodiscovery versions', () => {
+    const versions: GBFSVersionType[] = [
+      { version: '2.0', source: 'gbfs_versions' },
+      { version: '2.0', source: 'autodiscovery' },
+    ];
+    versions.sort(sortGbfsVersions);
+    expect(versions).toEqual([
+      { version: '2.0', source: 'autodiscovery' },
+      { version: '2.0', source: 'gbfs_versions' },
+    ]);
+
+    const versionsStable: GBFSVersionType[] = [
+      { version: '2.0', source: 'autodiscovery' },
+      { version: '2.0', source: 'gbfs_versions' },
+    ];
+
+    versionsStable.sort(sortGbfsVersions);
+    expect(versionsStable).toEqual([
+      { version: '2.0', source: 'autodiscovery' },
+      { version: '2.0', source: 'gbfs_versions' },
+    ]);
+
+    const versionsAutoPriority: GBFSVersionType[] = [
+      { version: '2.0', source: 'gbfs_versions' },
+      { version: '3.0', source: 'gbfs_versions' },
+      { version: '2.0', source: 'autodiscovery' },
+    ];
+    versionsAutoPriority.sort(sortGbfsVersions);
+    expect(versionsAutoPriority).toEqual([
+      { version: '3.0', source: 'gbfs_versions' },
+      { version: '2.0', source: 'autodiscovery' },
+      { version: '2.0', source: 'gbfs_versions' },
+    ]);
+  });
 });