Skip to content

[OGUI-1906] Notification pauses on hover and allows copying - #3513

Draft
isaachilly wants to merge 10 commits into
devfrom
improv/FRM/OGUI-1906/Notification-hover-and-copy
Draft

isaachilly wants to merge 10 commits into
devfrom
improv/FRM/OGUI-1906/Notification-hover-and-copy

Conversation

@isaachilly

@isaachilly isaachilly commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

I have JIRA issue created

  • branch and/or PR name(s) includes JIRA ID
  • issue has "Fix version" assigned
  • issue "Status" is set to "In review"
  • PR labels are selected
  • FLP integration tests were ran successful

Ticket:
As a user, I would like to be able to stop notifications from closing when I'm still digesting their information. For example, the JSON parsing errors are long and not easy to read quickly (in 2s before the timeout completes).

The other side of the same coin, being able to copy the message is useful to store it momentarily and would allow user's to quote them in support issues.

Code:
The code adds CSS to support the new design of the notification with a copy button.
Modifies the timeout that ohHover the notification stays.
Change tests to a) allow use of window.notification and then to test the notification model.

Reviewer:
To test the new look the reviewer can edit an instance of a notification.show and go through the different types and test the functionality.

Note

http://localhost:4000/?page=env-overview BKP uses the component in the ENV id dropdown. You will need to temporarily link the WebUI package to the local one. To do this I edited the docker compose file as follows:

# LOCAL ONLY - do not commit. Serves the local WebUi frontend
- type: bind
 read_only: true
 source: ../WebUi/Framework/Frontend
 target: /usr/src/app/node_modules/@aliceo2/web-ui/Frontend

OR if use in a non-dockerised GUI can use npm link.

Notifications now pause auto-hide while hovered, so users have time to read longer or normal message at their leisure.

Added a copy-to-clipboard button inside the notification, flush with the right edge, that copies the message and displays a new "Text copied to clipboard" notification when clicked.
@isaachilly
isaachilly marked this pull request as draft June 16, 2026 14:33
Adds tests for pause-on-hover and copy functionality.

Adjusts queryRouter cllass test so that `window.notification` isn't being overwritten making notification class less simple to test,
Copy state now lives within the copy button through use of different icons and notification model attributes.

Adjust tests to the functionality.

Restructure tests to be one describe with 2 child blocks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

1 participant