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:
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.
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
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
Click the View in Data Tracker link to make sure it still opens the Data Tracker app in a new tab
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:
Ship list