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

[Security Solution][Resolver] Simplify CopyableField styling and add comments #79594

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,46 @@
import { EuiToolTip, EuiPopover } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
import React, { memo, useState, useContext } from 'react';
import React, { memo, useState } from 'react';
import { WithCopyToClipboard } from '../../../common/lib/clipboard/with_copy_to_clipboard';
import { useColors } from '../use_colors';
import { ResolverPanelContext } from './panel_context';
import { StyledPanel } from '../styles';

interface StyledCopyableField {
readonly backgroundColor: string;
readonly activeBackgroundColor: string;
}

const StyledCopyableField = styled.div<StyledCopyableField>`
background-color: ${(props) => props.backgroundColor};
border-radius: 3px;
padding: 4px;
transition: background 0.2s ease;

&:hover {
background-color: ${(props) => props.activeBackgroundColor};
color: #fff;
${StyledPanel}:hover & {
Copy link
Contributor

Choose a reason for hiding this comment

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

ℹ️ I don't remember ever seeing it done this way. Interesting.

background-color: ${(props) => props.backgroundColor};

&:hover {
Copy link
Contributor

Choose a reason for hiding this comment

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

❔ Adding a comment to the hover just indicating that the keyboard accessibility is a known issue might save some time for someone in the future who is trying to figure that out.

background-color: ${(props) => props.activeBackgroundColor};
color: #fff;
}
}
`;

/**
* Field that behaves similarly to the current implementation of copyable fields in timeline as of 7.10
* When the panel is hovered, these fields will show a gray background
* When you then hover over these fields they will show a blue background and a tooltip with a copy button will appear
*/
export const CopyablePanelField = memo(
({ textToCopy, content }: { textToCopy: string; content: JSX.Element | string }) => {
const { linkColor, copyableBackground } = useColors();
const { linkColor, copyableFieldBackground } = useColors();
const [isOpen, setIsOpen] = useState(false);
const panelContext = useContext(ResolverPanelContext);

const onMouseEnter = () => setIsOpen(true);

const ButtonContent = memo(() => (
<StyledCopyableField
backgroundColor={panelContext.isHoveringInPanel ? copyableBackground : 'transparent'}
backgroundColor={copyableFieldBackground}
data-test-subj="resolver:panel:copyable-field"
activeBackgroundColor={linkColor}
onMouseEnter={onMouseEnter}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

/* eslint-disable react/display-name */

import React, { memo, useState } from 'react';
import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import * as selectors from '../../store/selectors';
import { NodeEventsInCategory } from './node_events_of_type';
Expand All @@ -15,48 +15,34 @@ import { NodeDetail } from './node_detail';
import { NodeList } from './node_list';
import { EventDetail } from './event_detail';
import { PanelViewAndParameters } from '../../types';
import { ResolverPanelContext } from './panel_context';

/**
* Show the panel that matches the `panelViewAndParameters` (derived from the browser's location.search)
*/

export const PanelRouter = memo(function () {
const params: PanelViewAndParameters = useSelector(selectors.panelViewAndParameters);
const [isHoveringInPanel, updateIsHoveringInPanel] = useState(false);

const triggerPanelHover = () => updateIsHoveringInPanel(true);
const stopPanelHover = () => updateIsHoveringInPanel(false);

/* The default 'Event List' / 'List of all processes' view */
let panelViewToRender = <NodeList />;

if (params.panelView === 'nodeDetail') {
panelViewToRender = <NodeDetail nodeID={params.panelParameters.nodeID} />;
return <NodeDetail nodeID={params.panelParameters.nodeID} />;
} else if (params.panelView === 'nodeEvents') {
panelViewToRender = <NodeEvents nodeID={params.panelParameters.nodeID} />;
return <NodeEvents nodeID={params.panelParameters.nodeID} />;
} else if (params.panelView === 'nodeEventsInCategory') {
panelViewToRender = (
return (
<NodeEventsInCategory
nodeID={params.panelParameters.nodeID}
eventCategory={params.panelParameters.eventCategory}
/>
);
} else if (params.panelView === 'eventDetail') {
panelViewToRender = (
return (
<EventDetail
nodeID={params.panelParameters.nodeID}
eventID={params.panelParameters.eventID}
eventCategory={params.panelParameters.eventCategory}
/>
);
} else {
/* The default 'Event List' / 'List of all processes' view */
return <NodeList />;
}

return (
<ResolverPanelContext.Provider value={{ isHoveringInPanel }}>
<div onMouseEnter={triggerPanelHover} onMouseLeave={stopPanelHover}>
{panelViewToRender}
</div>
</ResolverPanelContext.Provider>
);
});

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useMemo } from 'react';
import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';

type ResolverColorNames =
| 'copyableBackground'
| 'copyableFieldBackground'
| 'descriptionText'
| 'full'
| 'graphControls'
Expand All @@ -33,7 +33,7 @@ export function useColors(): ColorMap {
const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
return useMemo(() => {
return {
copyableBackground: theme.euiColorLightShade,
copyableFieldBackground: theme.euiColorLightShade,
descriptionText: theme.euiTextColor,
full: theme.euiColorFullShade,
graphControls: theme.euiColorDarkestShade,
Expand Down