update copy styling #79313
update copy styling #79313
Conversation
michaelolo24
added
release_note:enhancement
v8.0.0
Feature:Resolver
|
Pinging @elastic/endpoint-app-team (Feature:Resolver) |
|
@elasticmachine merge upstream |
| import { WithCopyToClipboard } from '../../../common/lib/clipboard/with_copy_to_clipboard'; | ||
| import { useColors } from '../use_colors'; | ||
|
|
||
| const COPY_TO_CLIPBOARD = i18n.translate('xpack.securitySolution.resolver.panel.copyToClipboard', { |
There was a problem hiding this comment.
i18n.translate just returns a string. You shouldn't need to store a reference to it. Can you just place the expression inline in the react component instead?
| } | ||
| `; | ||
|
|
||
| export const CopyablePanelField = memo( |
There was a problem hiding this comment.
Can you please move this to its own module.
| import { i18n } from '@kbn/i18n'; | ||
| import styled from 'styled-components'; | ||
| import React, { memo } from 'react'; | ||
| import React, { memo, useState } from 'react'; | ||
| import { WithCopyToClipboard } from '../../../common/lib/clipboard/with_copy_to_clipboard'; |
There was a problem hiding this comment.
Let's discuss how to handle this.
There was a problem hiding this comment.
no, it utilizes an existing component within security_solution. I can spin up our own minimal version though?
|
|
||
| return ( | ||
| <div onMouseLeave={onMouseLeave}> | ||
| <EuiPopover |
There was a problem hiding this comment.
Can this be opened with the keyboard?
There was a problem hiding this comment.
Need to test it. But we may be changing the way it works...talking to ui/ux at the moment
| const onMouseLeave = () => setIsOpen(false); | ||
|
|
||
| return ( | ||
| <div onMouseLeave={onMouseLeave}> |
There was a problem hiding this comment.
🔴 for the following reason:
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
"All functionality of the content is operable through a keyboard interface..."
Following that guidance, "Copy" links can't be tied/triggered to "hover"/"mouseEnter"/"mouseLeave" states or other states that can't be accessed with a keyboard. We could probably wire up something comparable with "focus"/"lose focus" so it can be done with keyboards although it's not as straightforward as you might think. IIRC there might be some things in EUI that help with this.
There was a problem hiding this comment.
👍 thanks! fyi @monina-n @lindseypoli
There was a problem hiding this comment.
We decided that while it is not accessible at the moment, there are plans to make timeline more accessible. Given that, in addition to not wanting to give the users a new behavior to learn or clutter the ui, we're gonna match how timeline does it for now
| color: #fff; | ||
| } | ||
| `; | ||
|
|
| const [isOpen, setIsOpen] = useState(false); | ||
| const onMouseEnter = () => setIsOpen(true); | ||
|
|
||
| const buttonContent = ( |
michaelolo24
force-pushed
the
add-copy-functionality
branch
from
58e4718
to
264f9f8
Compare
|
@oatkiller - added some tests, but it will probably change based on how we end up deciding to implement this copy functionality, if we implement it at all here. Also, I was gonna test the copy directly, but ran into an issue with a dependency of |
💚 Build SucceededMetrics [docs]@kbn/optimizer bundle module count
async chunks size
History
To update your PR or re-run it, just comment with: |
* master: (85 commits) Refactor attribute service (elastic#78414) [APM] Add default message to alerts. (elastic#78930) [Discover] Modify columns and sort when switching index pattern (elastic#74336) Document ts project references setup (elastic#78586) build all ts refs in single kbn:bootstrap (elastic#79438) [TSVB] Allow string fields on value count aggregation (elastic#79267) [SECURITY SOLUTION] Investigate EQL signal in timeline (elastic#79049) [Fleet] Add loading spinner to page headers (elastic#79568) [Security Solution][Resolver] Resolver query panel load more (elastic#79160) Add type row to monitor detail page. (elastic#79556) Remove license refresh from setup (elastic#79518) [docker] add reporting fonts (elastic#74806) [SECURITY_SOLUTION][ENDPOINT] Add info about trusted apps to the page subtitle + create flyout (elastic#79558) Trim Hash value before validating it (elastic#79545) Warn users when security is not configured (elastic#78545) update copy styling (elastic#79313) Update dependency @elastic/charts to v23.1.1 (elastic#78459) Introduce geo-threshold alerts (elastic#76285) elastic#76920 Show base breadcrumb when there is an error booting the app (elastic#79571) remove react-intl from kibana and keep it inside only i18n package (elastic#78956) ...
Summary
Adds the ability to copy fields from the resolver panel
For maintainers