Skip to content

[OGUI-1919] Make the copy-to-clipboard component have more flexible styling - #3615

Open
isaachilly wants to merge 19 commits into
devfrom
improv/FRM/OGUI-1919/Make-copy-to-clipboard-component-style-flexible
Open

[OGUI-1919] Make the copy-to-clipboard component have more flexible styling#3615
isaachilly wants to merge 19 commits into
devfrom
improv/FRM/OGUI-1919/Make-copy-to-clipboard-component-style-flexible

Conversation

@isaachilly

@isaachilly isaachilly commented Sep 3, 2026 •
edited
Loading

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:
Make the component more flexible with regards to styling. This is needed to be able to use the component in ILG. See ticket.

Code:

  • New optional className/style attributes; default rendering (btn-primary) is unchanged.
  • New optional onFailure attribute called if the clipboard write fails.
  • Repeated clicks before the success timer is complete now restart it. Another way of putting it is "Copied!" is shown until 2s pass without the button being clicked.
  • Clipboard availability is resolved in the constructor instead of the view.
  • The tooltip doesn't read null if there is no message, it used to.
  • No id = undefined attribute appears when no id attr is passed.

Reviewer:
To test onFailiure logic edit a use of the component and in the console set writeText to raise an Error.
To test the other attributes is straightforward.

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

@isaachilly isaachilly changed the title Make copy button style configurable [OGUI-1920] Make copy button style configurable Sep 3, 2026
@isaachilly isaachilly self-assigned this Sep 3, 2026
@isaachilly isaachilly changed the title [OGUI-1920] Make copy button style configurable [OGUI-1919] Make copy button style configurable Sep 3, 2026
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1919/Make-copy-to-clipboard-component-style-flexible branch 2 times, most recently from 049167c to d5f81d6 Compare September 8, 2026 12:31
@isaachilly isaachilly changed the title [OGUI-1919] Make copy button style configurable [OGUI-1919] Make copy button component more flexible Sep 8, 2026
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1919/Make-copy-to-clipboard-component-style-flexible branch from fc6a43c to 286ef4e Compare September 9, 2026 06:59
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1919/Make-copy-to-clipboard-component-style-flexible branch from 31109a6 to 38ac42a Compare September 11, 2026 13:31
@isaachilly
isaachilly marked this pull request as ready for review September 11, 2026 14:17
@isaachilly
isaachilly requested a review from graduta as a code owner September 11, 2026 14:17
@isaachilly isaachilly changed the title [OGUI-1919] Make copy button component more flexible [OGUI-1919] Make the copy-to-clipboard component have more flexible styling Sep 11, 2026
Base automatically changed from bug/ILG/OGUI-1920/Fix-encoding-order-of-filter-parameter-q to dev September 14, 2026 12:48
@isaachilly
Make copy button style configurable
63c2596 
Allow callers to override the button class and pass through inline styles, while keeping the existing primary-button default.

The button content wrapper is also centred so the default and copied states stay aligned.
@isaachilly
Stealth fix to restart the success timer if clicked before completed
de002e5 
Reset the success timer if clicked again otherwise the button text resets at unpredictable moments and user is left confused if the copy worked or not.
@isaachilly
Simplify clipboard button styling
04ebdcc 
Update `CopyToClipboardComponent` to accept a `classes` suffix instead of a full `className` selector, and build the button selector from a consistent `button.btn` base.
@isaachilly
Improve clipboard button docs and accessibility
97e71f2 
Documented expected `vnode.attrs` fields in `CopyToClipboardComponent.view()` and added `ariaLive: 'polite'` to the status content container so copy success feedback is announced to assistive technologies.
@isaachilly
Fix CopyToClipboard button class handling
21ab573
@isaachilly
Handle clipboard copy failures
95ce4ac 
Wrap clipboard writes in error handling and add an optional `onFailure` callback so callers can react when copying is unavailable or fails.

The component also now destructures `style` explicitly.
@isaachilly
Fix copying/pasting error
ccc0d00
@isaachilly
Await clipboard writes in copy component
c9737f2 
Done so clipboard write failures are properly caught by the existing error handling path, instead of proceeding as if copy succeeded.
@isaachilly
Fix tooltip text when no disabled message
0f58627
@isaachilly
Clarify onFailure callback type
b16a6f7
@isaachilly
Replace 2nd occurrence of vague param type
ea033c3
@isaachilly
Make clipboard component more readable
572873d
@isaachilly
Fix JSDOC
6a87810
@isaachilly
Remove aria-live
9fca777 
On second thought if no other elements have it, I won't add here and wait for a proper strategy.
@isaachilly
Another JSDoc fix
1c917fb
@isaachilly
More JSDoc fixes
34a04a8
@isaachilly
Avoid undefined copy button IDs
ad01ce2
@isaachilly
Cache clipboard availability in constructor
18f7f5f 
Initialise clipboard support state once in constructor and reuse it during rendering.

This removes repeated availability checks on each render and drives button disabled/title directly from persisted fields.
@isaachilly
More JSDoc
94a5753
@isaachilly
isaachilly force-pushed the improv/FRM/OGUI-1919/Make-copy-to-clipboard-component-style-flexible branch from 38ac42a to 94a5753 Compare September 14, 2026 12:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@graduta graduta Awaiting requested review from graduta graduta is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@isaachilly isaachilly

Labels

Framework

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@isaachilly