Skip to content
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.

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

fix: Alert unmount and overlay #378

Merged
merged 2 commits into from
Jan 20, 2025
Merged

fix: Alert unmount and overlay #378

merged 2 commits into from
Jan 20, 2025

Conversation

tuliomir
Copy link
Contributor

@tuliomir tuliomir commented Jan 16, 2025

During some tests where many components were being clicked in short sequence, the NewHathorAlert component could break by being unable to manipulate the dom correctly: the expected element would already be unmounted when the timer finished.

Also, the alert container for fixed positioning, used in the Navigation search, was overlaying the screen elements, preventing clicks on the application elements.

Acceptance Criteria

  • The new alert component should not break under race conditions
  • The new alert component should not prevent click in any screen elements

Security Checklist

  • Make sure you do not include new dependencies in the project unless strictly necessary and do not include dev-dependencies as production ones. More dependencies increase the possibility of one of them being hijacked and affecting us.

@tuliomir tuliomir added the bug Something isn't working label Jan 16, 2025
@tuliomir tuliomir self-assigned this Jan 16, 2025
@tuliomir tuliomir requested a review from r4mmer as a code owner January 16, 2025 16:43
@tuliomir tuliomir requested review from pedroferreira1 and andreabadesso and removed request for r4mmer January 16, 2025 16:43
@tuliomir tuliomir changed the title fix: Alert unmount fix: Alert unmount and overlay Jan 16, 2025
Comment on lines -978 to -983

&.fixed-position {
position: fixed !important;
right: 15%;
bottom: 50%;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removing CSS leftover from #352, obsolete since #377

ref={alertDiv}
className={`new-hathor-alert alert alert-${type} alert-dismissible fade`}
role="alert"
style={{ display: 'flex', flexDirection: 'row' }}
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 tried to avoid this style from the previous implementation, but the fade animations just wouldn't work without it. Decided to leave this cleanup to a future refactor.

if (alertDiv?.current) {
alertDiv.current.classList.remove('show');
}
}, duration);
Copy link
Member

Choose a reason for hiding this comment

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

You don't have this duration parameter here, if I'm not wrong. The diffs are a bit confusing but it seems like you should be receiving it as a parameter in the showAlertComponent also.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This function is actually declare inside the show() function, so it shares the duration parameter.
The diff visualizarion is confusing, since some of the methods were obsolete and were removed, but you can see it more clearly on the file itself.

@tuliomir tuliomir merged commit 11fdfbf into master Jan 20, 2025
1 check passed
@tuliomir tuliomir deleted the fix/alert-unmount branch January 20, 2025 14:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants