Use a link to enable shift/right click of rule names in the popover (#…

…128850)
elastic · Apr 12, 2022 · b7dc8f0 · b7dc8f0
1 parent 062be57
commit b7dc8f0
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 20 deletions.
diff --git a/...security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx b/...security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
@@ -185,6 +185,8 @@ const FormattedFieldValueComponent: React.FC<{
  eventId={eventId}
  fieldName={fieldName}
  isDraggable={isDraggable}
+ isButton={isButton}
+ onClick={onClick}
  linkValue={linkValue}
  title={title}
  truncate={truncate}

diff --git a/..._solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx b/..._solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
@@ -32,29 +32,36 @@ import { useFormatUrl } from '../../../../../common/components/link_to';
 import { useKibana } from '../../../../../common/lib/kibana';
 import { APP_UI_ID } from '../../../../../../common/constants';
 import { LinkAnchor } from '../../../../../common/components/links';
+import { GenericLinkButton } from '../../../../../common/components/links/helpers';
 
 const EventModuleFlexItem = styled(EuiFlexItem)`
  width: 100%;
 `;
 
 interface RenderRuleNameProps {
+ children?: React.ReactNode;
  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon;
  contextId: string;
  eventId: string;
  fieldName: string;
  isDraggable: boolean;
+ isButton?: boolean;
+ onClick?: () => void;
  linkValue: string | null | undefined;
  truncate?: boolean;
  title?: string;
  value: string | number | null | undefined;
 }
 
 export const RenderRuleName: React.FC<RenderRuleNameProps> = ({
+ children,
  Component,
  contextId,
  eventId,
  fieldName,
  isDraggable,
+ isButton,
+ onClick,
  linkValue,
  truncate,
  title,
@@ -64,11 +71,6 @@ export const RenderRuleName: React.FC<RenderRuleNameProps> = ({
  const ruleId = linkValue;
  const { search } = useFormatUrl(SecurityPageName.rules);
  const { navigateToApp, getUrlForApp } = useKibana().services.application;
- const content = truncate ? (
- <TruncatableText dataTestSubj={`formatted-field-${fieldName}`}>{value}</TruncatableText>
- ) : (
- value
- );
 
  const goToRuleDetails = useCallback(
  (ev) => {
@@ -90,24 +92,59 @@ export const RenderRuleName: React.FC<RenderRuleNameProps> = ({
  [getUrlForApp, ruleId, search]
  );
  const id = `event-details-value-default-draggable-${contextId}-${eventId}-${fieldName}-${value}-${ruleId}`;
-
- if (isString(value) && ruleName.length > 0 && ruleId != null) {
- const link = Component ? (
- <Component
- aria-label={title}
- data-test-subj={`view-${fieldName}`}
- iconType="link"
- onClick={goToRuleDetails}
- title={title}
- >
- {title ?? value}
- </Component>
+ const link = useMemo(() => {
+ const content = truncate ? (
+ <TruncatableText dataTestSubj={`formatted-field-${fieldName}`}>{value}</TruncatableText>
  ) : (
- <LinkAnchor onClick={goToRuleDetails} href={href} data-test-subj="ruleName">
- {content}
- </LinkAnchor>
+ value
  );
+ if (isButton) {
+ return (
+ <GenericLinkButton
+ Component={Component}
+ dataTestSubj="data-grid-host-details"
+ href={href}
+ iconType="expand"
+ onClick={onClick ?? goToRuleDetails}
+ title={title ?? ruleName}
+ >
+ {children}
+ </GenericLinkButton>
+ );
+ } else if (Component) {
+ return (
+ <Component
+ aria-label={title}
+ data-test-subj={`view-${fieldName}`}
+ iconType="link"
+ onClick={goToRuleDetails}
+ title={title}
+ >
+ {title ?? value}
+ </Component>
+ );
+ } else {
+ return (
+ <LinkAnchor onClick={goToRuleDetails} href={href} data-test-subj="ruleName">
+ {content}
+ </LinkAnchor>
+ );
+ }
+ }, [
+ Component,
+ children,
+ fieldName,
+ goToRuleDetails,
+ href,
+ isButton,
+ onClick,
+ ruleName,
+ title,
+ truncate,
+ value,
+ ]);
 
+ if (isString(value) && ruleName.length > 0 && ruleId != null) {
  return isDraggable ? (
  <DefaultDraggable
  field={fieldName}