[Security Solution][Resolver] Simplify CopyableField styling and add comments (#79594)
This commit is contained in:
parent
b7057bc274
commit
aeba4011e2
|
@ -9,10 +9,10 @@
|
|||
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;
|
||||
|
@ -20,28 +20,35 @@ interface StyledCopyableField {
|
|||
}
|
||||
|
||||
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 & {
|
||||
background-color: ${(props) => props.backgroundColor};
|
||||
|
||||
&:hover {
|
||||
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}
|
||||
|
|
|
@ -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';
|
||||
|
@ -15,7 +15,6 @@ 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)
|
||||
|
@ -23,40 +22,27 @@ import { ResolverPanelContext } from './panel_context';
|
|||
|
||||
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>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export const ResolverPanelContext = React.createContext({ isHoveringInPanel: false });
|
|
@ -10,7 +10,7 @@ import { useMemo } from 'react';
|
|||
import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
type ResolverColorNames =
|
||||
| 'copyableBackground'
|
||||
| 'copyableFieldBackground'
|
||||
| 'descriptionText'
|
||||
| 'full'
|
||||
| 'graphControls'
|
||||
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue