feat: is official badge + feed detail enhance

[Alessandro100]

closes #788
closes #871

Summary:

Feeds Search Page

• "Is official" badge added on search table
• Wording added when no feeds are found "Try and change search filters"
• Ability to filter by official feed [BEHIND FEATURE FLAG]

Feed Detail Page

• Quality report moved to top of the page -> Chips are now clickable and can go to quality report
• Icons added to buttons and labels
• Map visual is larger
• Official Feed Chip added + timestamp

Styling Fixes

• Discovered a weird interaction when passing a style to an Sx prop. When you pass and Sx prop with other styles, it's required to manually pass the theme object. If it's just the Sx prop then there is no need to pass the theme object.

Expected behavior:

On the Feeds search page, you should be able to see a badge for verified feeds on applicable feeds. You can also search by official feeds. On hover of this badge, should be able to see a tooltip with information

On the Feeds detail page, you should be able to see a badge for verified feed when applicable. You should be able to click the chips of "wanring" "info notice" "errors" and get directed to the quality report. On hover of the verification badge, should display tool tip with information

Testing tips:

On Feed search page, search "london", you'll be able to see a verified feed. You would also be able to use the "Is Official" filter. Assure the badge is there and that the tool tip works

On the feed detail page, try gtfs schedule / gtfs rt feeds and assure all looks good. Check out the official feed and assure the badge looks correct. Official feed feeds/mdb-2

Please make sure these boxes are checked before submitting your pull request - thanks!

• Run the unit tests with ./scripts/api-tests.sh to make sure you didn't break anything
• Add or update any needed documentation to the repo
• Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
• Linked all relevant issues
• Include screenshot(s) showing how this pull request works and fixes the issue(s)

TImestamp

[github-actions]

Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-870-johoa991.web.app

[emmambd]

@Alessandro100 How are you imagining expanding out "attributes"? Is this where people could also search things like "Flex" or "Fares v2"?

[Alessandro100]

@Alessandro100 How are you imagining expanding out "attributes"? Is this where people could also search things like "Flex" or "Fares v2"?

My thought process behind attributes would be one off filters that would be in high demand but would have a difficult time grouping. For example, if people wanted to filter by Feeds that have no errors

I could see Flex and Fares being included in attributes

[emmambd]

@Alessandro100 Makes sense to me. Can we call it "tags"? Seems a little easier to understand to me

[davidgamez]

Add a comma after the first line:

Suggested change

	official = TRUE
	official = TRUE,

[davidgamez]

@Alessandro100 the integration tests are failing as they test the branch code with QA DB. In this case, as the PR introduces a new DB column, the QA DB doesn't have the column yet. It's ok to merge it as long it's tested in the DEV environment.

[davidgamez]

LGTM!