Skip to content

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

Merged
isaachilly merged 19 commits into
devfrom
improv/FRM/OGUI-1906/Notification-hover-and-copy
Oct 26, 2026
Merged

isaachilly merged 19 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 reading/understanding them.

On a similar note being able to copy the message is useful too.

Code:

Adds an integrated copy button to the notification element.
Adds timer and state logic for copy button.
Refactors notification class to be more readable.
Adds more comprehensive copy button tests.

Reviewer:

To test the new look the reviewer can create a notification with notification.show('Notification Text', 'danger', 5000). Remember to use local Web-UI version.

@isaachilly isaachilly self-assigned this Jun 16, 2026
@isaachilly
isaachilly requested a review from graduta as a code owner June 16, 2026 13:41
@isaachilly
isaachilly marked this pull request as draft June 16, 2026 14:33
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1906/Notification-hover-and-copy branch from 69be414 to 800d1b6 Compare October 21, 2026 15:12
@isaachilly
isaachilly changed the base branch from dev to improv/FRM/OGUI-1934/Centralise-clipboard-behaviour October 21, 2026 15:29
@isaachilly
isaachilly added this pull request to stack #3696 October 22, 2026 13:03
Comment thread Framework/Frontend/test/mocha-index.js Dismissed
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1906/Notification-hover-and-copy branch 2 times, most recently from 27104dc to 8f3dd3a Compare October 22, 2026 14:52
@isaachilly
isaachilly marked this pull request as ready for review October 22, 2026 15:27

@graduta graduta left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

In terms of UI, I think it would be good to let the user know that when they hover the notification they have the option to click. Not only with the mouse over pointer but also a darker background similar to what we do for buttons. What do you think?

Comment thread Framework/Frontend/js/src/Notification.js Outdated
Comment thread Framework/Frontend/js/src/Notification.js Outdated
Comment thread Framework/Frontend/js/src/Notification.js Outdated
Base automatically changed from improv/FRM/OGUI-1934/Centralise-clipboard-behaviour to dev October 26, 2026 12:43
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.
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.
Extract clearTimeouts() and startHideTimer() helpers to remove duplicated timer logic. hide() now also resets the hovered flag.

Copy now uses the shared copyToClipboard utility, so it falls back to 'failed' when the clipboard is unavailable. The copy-state reset delay is configurable via copyDuration.
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1906/Notification-hover-and-copy branch from 0e9a015 to 8ae3c97 Compare October 26, 2026 12:43
@isaachilly

Copy link
Copy Markdown
Collaborator Author

In terms of UI, I think it would be good to let the user know that when they hover the notification they have the option to click. Not only with the mouse over pointer but also a darker background similar to what we do for buttons. What do you think?

Agreed, it makes it more obvious that there's an action available. The message part now darkens on hover by the same step as the copy button, and lightens slightly when pressed.

@graduta
graduta self-requested a review October 26, 2026 14:23
@isaachilly
isaachilly merged commit 3b7d5e5 into dev Oct 26, 2026
14 checks passed
@isaachilly
isaachilly deleted the improv/FRM/OGUI-1906/Notification-hover-and-copy branch October 26, 2026 14:33
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.

3 participants