From b75dc0d4311f163623e3dab4af38515ebd63351f Mon Sep 17 00:00:00 2001
From: Kevin Qualters <56408403+kqualters-elastic@users.noreply.github.com>
Date: Tue, 12 Apr 2022 12:21:23 -0400
Subject: [PATCH] Use a link to enable shift/right click of rule names in the
 popover (#128850)

(cherry picked from commit b7dc8f0e9c27dcebc2e1dc28770cf95c2c75e544)
---
 .../body/renderers/formatted_field.tsx        |  2 +
 .../renderers/formatted_field_helpers.tsx     | 77 ++++++++++++++-----
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
index f87c7ae9e58d6..ebd0fb974f3aa 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
+++ b/x-pack/plugins/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/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
index 02088b2e7d0cc..04b69cd5fd3ff 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
@@ -32,17 +32,21 @@ 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;
@@ -50,11 +54,14 @@ interface RenderRuleNameProps {
 }
 
 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}