Skip to content

fix: Fix links in Announcements #1934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Aug 11, 2022
Merged

fix: Fix links in Announcements #1934

Changes from 3 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
558b227
fix: Fix links in Announcements
ozandogrultan Jul 19, 2022
7567b09
fix: Fix betterer errors
ozandogrultan Jul 19, 2022
cd12807
fix: Fix build
ozandogrultan Jul 19, 2022
34096c4
fix: Use pointer-events instead of event handler
ozandogrultan Aug 9, 2022
bde1674
Revert: fix: Use pointer-events instead of event handler
ozandogrultan Aug 9, 2022
95d7a94
Merge branch 'main' into fix/links-in-announcements
ozandogrultan Aug 9, 2022
fb11312
fix: Stop propagation in Announcement component
ozandogrultan Aug 10, 2022
118f9df
fix: databuilder build
ozandogrultan Aug 10, 2022
7ab143f
fix: Revert last commits
ozandogrultan Aug 10, 2022
fd8b506
fix: Stop propagation in Announcement component
ozandogrultan Aug 11, 2022
dcc6e7a
fix: Stop propagation in Announcement component
ozandogrultan Aug 11, 2022
14b89a2
Revert fix: Stop propagation in Announcement component
ozandogrultan Aug 11, 2022
fafc68b
fix: Add onclick to Announcements allowed attributes
ozandogrultan Aug 11, 2022
073d9a7
fix: Revert some changes
ozandogrultan Aug 11, 2022
094b51d
fix: Use push instead of concat
ozandogrultan Aug 11, 2022
792e89b
fix: Frontend tests
ozandogrultan Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion frontend/amundsen_application/static/js/components/Card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const Card: React.FC<CardProps> = ({
onClick = undefined,
isLoading = false,
}: CardProps) => {
const stopEvent = (event) => event.stopPropagation();
let card;
let cardContent = (
<>
Expand All @@ -44,7 +45,17 @@ const Card: React.FC<CardProps> = ({
{subtitle && <h3 className="card-subtitle">{subtitle}</h3>}
</header>
<div className="card-body">
{copy && <div className="card-copy">{copy}</div>}
{copy && (
<div
className="card-copy"
role="button"
tabIndex={0}
onClick={stopEvent}
onKeyDown={stopEvent}
>
{copy}
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This creation of a fake button and adding a stop propagation handler to it seems a bit fishy to me.
Could we achieve the same effect by using CSS pointer-events?
Check in https://css-tricks.com/almanac/properties/p/pointer-events/

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the link!
I've tried using pointer-events on both child and parent elements, however click event is always propagated to the Card component which results in following the navigation..
Could you be more specific on how we can use pointer-events here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is something like this: https://stackoverflow.com/a/46707009

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried this suggestion as well, but it didn't work either.. but I might be doing something wrong, I don't have much experience with pointer-events

Another option in my opinion is that eventPropagation can be stopped on the SanitizedHtml level here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we stop the propagation in the "html_content" level it also works, but for me it's just another workaround and doesn't solve the problem fully

)}
</div>
</>
);
Expand Down