feat: 1346 license details UI (#1519)

* license store setup

* License detail UI

* GBFS Feed Info UI consolidation

* updated info and warning colors for accessibility color contrast

* enhance license display in feed summary and refactor license dialog for improved rule presentation and responsiveness

* lint fixes

* feat: add i18n keys for feed summary, license details, and validators, and update FeedSummary component to use them.

* gbfs wording

* refactor: Refine license saga types, improve internal link rendering, and standardize null/undefined checks in FeedSummary.

* update license styling

Author: Alessandro100

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

@@ -1,54 +1,54 @@
 {
-    "copyToClipboard": "Copy to clipboard",
-    "copied": "Copied!",
-    "name": "Name",
-    "email": "Email",
-    "organization": "Organization",
-    "signOut": "Sign out",
-    "unknown": "Unknown",
-    "search": "Search",
-    "feeds": "Feeds",
-    "gtfsSchedule": "GTFS Schedule",
-    "gtfsRealtime": "GTFS Realtime",
-    "gtfs": "GTFS Schedule",
-    "gtfs_rt": "GTFS Realtime",
-    "gbfs": "GBFS",
-    "gtfsRealtimeEntities": {
-        "tripUpdates": "Trip Updates",
-        "vehiclePositions": "Vehicle Positions",
-        "serviceAlerts": "Service Alerts"
-    },
-    "loading": "Loading...",
-    "download": "Download",
-    "updated": "Updated",
-    "errors": {
-        "generic": "We are unable to complete your request at the moment."
-    },
-    "others": "others",
-    "apiKey": "API Key",
-    "httpHeader": "HTTP Header",
-    "back": "Back",
-    "and": "and",
-    "next": "Next",
-    "form": {
-        "yes": "Yes",
-        "no": "No",
-        "required": "This field is required",
-        "submit": "Submit",
-        "select": "Select",
-        "notSure": "Not sure"
-    },
-    "country": "Country",
-    "chooseCountry": "Choose a country",
-    "region": "Region",
-    "municipality": "Municipality",
-    "feedback": {
-        "errors": "errors",
-        "noErrors": "No errors",
-        "noWarnings": "No warnings",
-        "warnings": "warnings",
-        "infoNotices": "info notices"
-    },
+  "copyToClipboard": "Copy to clipboard",
+  "copied": "Copied!",
+  "name": "Name",
+  "email": "Email",
+  "organization": "Organization",
+  "signOut": "Sign out",
+  "unknown": "Unknown",
+  "search": "Search",
+  "feeds": "Feeds",
+  "gtfsSchedule": "GTFS Schedule",
+  "gtfsRealtime": "GTFS Realtime",
+  "gtfs": "GTFS Schedule",
+  "gtfs_rt": "GTFS Realtime",
+  "gbfs": "GBFS",
+  "gtfsRealtimeEntities": {
+    "tripUpdates": "Trip Updates",
+    "vehiclePositions": "Vehicle Positions",
+    "serviceAlerts": "Service Alerts"
+  },
+  "loading": "Loading...",
+  "download": "Download",
+  "updated": "Updated",
+  "errors": {
+    "generic": "We are unable to complete your request at the moment."
+  },
+  "others": "others",
+  "apiKey": "API Key",
+  "httpHeader": "HTTP Header",
+  "back": "Back",
+  "and": "and",
+  "next": "Next",
+  "form": {
+    "yes": "Yes",
+    "no": "No",
+    "required": "This field is required",
+    "submit": "Submit",
+    "select": "Select",
+    "notSure": "Not sure"
+  },
+  "country": "Country",
+  "chooseCountry": "Choose a country",
+  "region": "Region",
+  "municipality": "Municipality",
+  "feedback": {
+    "errors": "errors",
+    "noErrors": "No errors",
+    "noWarnings": "No warnings",
+    "warnings": "warnings",
+    "infoNotices": "info notices"
+  },
   "gtfsSpec": {
     "routeType": {
       "0": {
@@ -96,5 +96,11 @@
   "validators": "Validators",
   "gbfsValidator": "GBFS Validator",
   "gtfsValidator": "GTFS Validator",
-  "gtfsRtValidator": "GTFS RT Validator"
+  "gtfsRtValidator": "GTFS RT Validator",
+  "start": "Start",
+  "end": "End",
+  "showLess": "Show less",
+  "showMore": "Show {{count}} more",
+  "moreInfo": "More Info",
+  "license": "License"
 }

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

@@ -54,6 +54,7 @@
   "seeFullList": "See full list",
   "hideFullList": "Hide full list",
   "producer": "Producer",
+  "agency": "Agency",
   "producerDownloadUrl": "Producer download URL",
   "copyDownloadUrl": "Copy download URL",
   "producerUrlCopied": "Producer url copied to clipboard",
@@ -233,5 +234,37 @@
       "tfs": "Automatically imported from old TransitFeeds website. Pattern is tfs-<feed_id>",
       "tld": "Imported from https://www.transit.land/documentation/rest-api/feeds. Pattern is tld-<feed_id>"
     }
+  },
+  "license": {
+    "dialogTitle": "License Details",
+    "loadingError": "Error loading license details",
+    "spdxTooltip": "The Software Package Data Exchange (SPDX) is an open standard for communicating software bill of material information, including licenses.",
+    "licenseTooltip": "License was added by the Mobility Database team based on either 1) a submission authorized by the transit provider 2) review of the transit providers website.",
+    "permission": "Permission",
+    "permissionSubtitle": "What you can do with this license",
+    "condition": "Condition",
+    "conditionSubtitle": "What you must do to comply",
+    "limitation": "Limitation",
+    "limitationSubtitle": "What this license does not provide",
+    "noPermission": "No permissions",
+    "noCondition": "No conditions",
+    "noLimitation": "No limitations",
+    "noRules": "No usage rules specified.",
+    "contributeMessage": "To contribute to the clarity of the rules for this license entry, please submit a pull request to:"
+  },
+  "noAgencyProvided": "No agency provided",
+  "feedSummary": {
+    "viewAllAgencies": "View All {{count}} Agencies",
+    "andMore": "and more",
+    "plusMore": "+ {{count}} more",
+    "showLocationDetails": "Show Details ({{count}} Locations)",
+    "routes": "Routes",
+    "routesCount": "{{count}} routes",
+    "viewOnMap": "View On Map",
+    "autoDiscoveryUrl": "Auto-Discovery URL",
+    "producerUrl": "Producer URL",
+    "providerUrl": "Provider URL",
+    "systemId": "System ID",
+    "feedAuthentication": "Feed Authentication"
   }
 }

web-app/src/app/Theme.ts

@@ -71,6 +71,12 @@ const palette = {
     light: '#D7D4FF',
     contrastText: '#FFFFFF',
   },
+  info: {
+    main: '#01579B',
+  },
+  warning: {
+    main: '#E65100',
+  },
   background: {
     default: '#ffffff',
     paper: '#F8F5F5',
@@ -98,6 +104,12 @@ const darkPalette = {
     dark: '#3846A6',
     contrastText: '#FFFFFF',
   },
+  info: {
+    main: '#4FC3F7',
+  },
+  warning: {
+    main: '#FFB74D',
+  },
   background: {
     default: '#121212',
     paper: '#1E1E1E',

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

@@ -280,10 +280,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
         p: 2,
         backgroundColor: theme.palette.background.default,
         borderRadius: '5px',
-        border:
-          feed?.data_type === 'gbfs'
-            ? `2px solid ${theme.palette.primary.dark}`
-            : 'none', // Temporary until gbfs summary redesign
+        border: 'none',
       }}
     >
       <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>

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

@@ -22,7 +22,7 @@ export const FeedLinkElement = styled(Box)(({ theme }) => ({
   width: 'calc(100% - 16px)',
   marginLeft: '16px',
   marginBottom: '16px',
-  '&:last-child': {
+  '&:last-of-type': {
     marginBottom: 0,
   },
 }));

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

@@ -17,17 +17,19 @@ import EmailIcon from '@mui/icons-material/Email';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 export interface CopyLinkElementProps {
-  title: string;
+  title?: string;
   url: string;
-  linkType?: 'download' | 'external' | 'email';
+  linkType?: 'download' | 'external' | 'email' | 'internal' | 'label';
   titleInfo?: string;
+  internalClickAction?: () => void;
 }
 
 export default function CopyLinkElement({
   title,
   url,
   linkType,
   titleInfo,
+  internalClickAction,
 }: CopyLinkElementProps): ReactElement {
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
@@ -51,36 +53,60 @@ export default function CopyLinkElement({
 
   return (
     <FeedLinkElement>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Button
-          variant='text'
-          sx={{ pl: 0, py: 0.5 }}
-          component={Link}
-          href={formattedUrl}
-          target='_blank'
-          rel='noreferrer'
-        >
-          {title}
-        </Button>
-        {titleInfo != undefined && (
-          <Tooltip title={titleInfo} placement='top'>
-            <InfoOutlinedIcon fontSize='inherit' />
-          </Tooltip>
-        )}
-        {chipIcon != undefined && chipLabel != undefined && (
-          <Chip
-            clickable
-            component={Link}
-            href={formattedUrl}
-            target='_blank'
-            rel='noreferrer'
-            size='small'
-            label={chipLabel}
-            icon={chipIcon}
-            sx={{ color: 'text.secondary', fontWeight: 400 }}
-          ></Chip>
-        )}
-      </Box>
+      {title != null && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          {linkType === 'label' ? (
+            <Typography
+              sx={{
+                fontWeight: 700,
+                minWidth: 'auto',
+                color: 'text.primary',
+                pr: 1.5,
+                fontSize: 'medium',
+              }}
+            >
+              {title}
+            </Typography>
+          ) : linkType === 'internal' && internalClickAction != undefined ? (
+            <Button
+              variant='text'
+              sx={{ pl: 0, py: 0.5 }}
+              onClick={internalClickAction}
+            >
+              {title}
+            </Button>
+          ) : (
+            <Button
+              variant='text'
+              sx={{ pl: 0, py: 0.5 }}
+              component={Link}
+              href={formattedUrl}
+              target='_blank'
+              rel='noreferrer'
+            >
+              {title}
+            </Button>
+          )}
+          {titleInfo != undefined && (
+            <Tooltip title={titleInfo} placement='top'>
+              <InfoOutlinedIcon fontSize='inherit' />
+            </Tooltip>
+          )}
+          {chipIcon != undefined && chipLabel != undefined && (
+            <Chip
+              clickable
+              component={Link}
+              href={formattedUrl}
+              target='_blank'
+              rel='noreferrer'
+              size='small'
+              label={chipLabel}
+              icon={chipIcon}
+              sx={{ color: 'text.secondary', fontWeight: 400 }}
+            ></Chip>
+          )}
+        </Box>
+      )}
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <Typography
           variant='subtitle2'