cityofaustin / atd-moped

A comprehensive mobility project tracking platform for Austin, Texas.
https://mobility.austin.gov/moped/
4 stars 3 forks source link

Clean up click event capture in the eCapris and website links in Project Summary view #1389

Closed mddilley closed 1 month ago

mddilley commented 1 month ago

Associated issues

https://github.com/cityofaustin/atd-data-tech/issues/17595

This PR updates the project summary eCapris, website, and work orders links to use the existing external link component so they behave and look the same. It also updates ExternalLink with an optional prop to stop the link click event from propagating in order to prevent entering edit mode when navigating to an external link.

Testing

URL to test:

Steps to test:

  1. Open up the project summary page of project 1846 in both staging and in the deploy preview. This project shows the website, eCapris, and work orders links needed to test this PR.
  2. Notice that, in staging:
    • the external link icon in the website field is not aligned with the link text
    • the external link icon in the eCapris field wraps to a second line and you have to click the icon to visit the link (the eCapris text appears to be a link but is not)
    • when you click on either of these links, a new tab opens, and, when you go back to your original page, the edit input is open like you were trying to update the website or eCapris value
    • the external link icon in the works orders field is not aligned with the link text
  3. Notice that, in the deploy preview:
    • the external link icon in the website field is now aligned with the link text
    • the external link icon in the eCapris field does not wrap to a second line and is aligned with the eCapris number text, and the icon or eCapris text can be click to visit the link
    • when you click on either of these links, a new tab opens, and, when you go back to your original page, the edit input is not open like you were trying to update the website or eCapris value
    • when hovering either the website or eCapris fields, you can click the gray area to switch to edit mode
    • the external link icon in the works orders field is aligned with the link text
  4. Click the View in Data Tracker link to make sure it still opens the Data Tracker app in a new tab

Ship list

mddilley commented 1 month ago

thanks y'all - merging!

chiaberry commented 1 month ago

What an upgrade, ✨