Small improvements around Reason field and AlertCountTable draggable fields (#109239) (#109630)

* Make count table field and alert table event renderer undraggable

* Remove tooltip from alert count table

* Remove DefaultDraggable wrapper from reason field

* Fix unit test and remove unused props

I am not 100% sure, but apparently, the test was broken due to a long import chain loop.
I cut the import chain by extracting some constants to a file.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co>

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/alerts_count.tsx

@@ -39,10 +39,12 @@ const getAlertsCountTableColumns = (
       render: function DraggableStackOptionField(value: string) {
         return (
           <DefaultDraggable
+            isDraggable={false}
             field={selectedStackByOption}
             hideTopN={true}
             id={`alert-count-draggable-${selectedStackByOption}-${value}`}
             value={value}
+            tooltipContent={null}
           />
         );
       },

x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/catalog/constants.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { RowRendererId } from '../../../../../common/types/timeline';
+import * as i18n from './translations';
+
+export const eventRendererNames: { [key in RowRendererId]: string } = {
+  [RowRendererId.alerts]: i18n.ALERTS_NAME,
+  [RowRendererId.auditd]: i18n.AUDITD_NAME,
+  [RowRendererId.auditd_file]: i18n.AUDITD_FILE_NAME,
+  [RowRendererId.library]: i18n.LIBRARY_NAME,
+  [RowRendererId.system_security_event]: i18n.AUTHENTICATION_NAME,
+  [RowRendererId.system_dns]: i18n.DNS_NAME,
+  [RowRendererId.netflow]: i18n.FLOW_NAME,
+  [RowRendererId.system]: i18n.SYSTEM_NAME,
+  [RowRendererId.system_endgame_process]: i18n.PROCESS,
+  [RowRendererId.registry]: i18n.REGISTRY_NAME,
+  [RowRendererId.system_fim]: i18n.FIM_NAME,
+  [RowRendererId.system_file]: i18n.FILE_NAME,
+  [RowRendererId.system_socket]: i18n.SOCKET_NAME,
+  [RowRendererId.suricata]: 'Suricata',
+  [RowRendererId.threat_match]: i18n.THREAT_MATCH_NAME,
+  [RowRendererId.zeek]: i18n.ZEEK_NAME,
+  [RowRendererId.plain]: '',
+};

x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/catalog/index.tsx

@@ -27,6 +27,7 @@ import {
   ThreatMatchExample,
   ZeekExample,
 } from '../examples';
+import { eventRendererNames } from './constants';
 import * as i18n from './translations';
 
 const Link = ({ children, url }: { children: React.ReactNode; url: string }) => (
@@ -40,26 +41,6 @@ const Link = ({ children, url }: { children: React.ReactNode; url: string }) =>
   </EuiLink>
 );
 
-export const eventRendererNames: { [key in RowRendererId]: string } = {
-  [RowRendererId.alerts]: i18n.ALERTS_NAME,
-  [RowRendererId.auditd]: i18n.AUDITD_NAME,
-  [RowRendererId.auditd_file]: i18n.AUDITD_FILE_NAME,
-  [RowRendererId.library]: i18n.LIBRARY_NAME,
-  [RowRendererId.system_security_event]: i18n.AUTHENTICATION_NAME,
-  [RowRendererId.system_dns]: i18n.DNS_NAME,
-  [RowRendererId.netflow]: i18n.FLOW_NAME,
-  [RowRendererId.system]: i18n.SYSTEM_NAME,
-  [RowRendererId.system_endgame_process]: i18n.PROCESS,
-  [RowRendererId.registry]: i18n.REGISTRY_NAME,
-  [RowRendererId.system_fim]: i18n.FIM_NAME,
-  [RowRendererId.system_file]: i18n.FILE_NAME,
-  [RowRendererId.system_socket]: i18n.SOCKET_NAME,
-  [RowRendererId.suricata]: 'Suricata',
-  [RowRendererId.threat_match]: i18n.THREAT_MATCH_NAME,
-  [RowRendererId.zeek]: i18n.ZEEK_NAME,
-  [RowRendererId.plain]: '',
-};
-
 export interface RowRendererOption {
   id: RowRendererId;
   name: string;

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/reason_column_renderer.tsx

@@ -12,8 +12,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { BrowserFields, ColumnHeaderOptions, RowRenderer } from '../../../../../../common';
 import { Ecs } from '../../../../../../common/ecs';
-import { DefaultDraggable } from '../../../../../common/components/draggables';
-import { eventRendererNames } from '../../../row_renderers_browser/catalog';
+import { eventRendererNames } from '../../../row_renderers_browser/catalog/constants';
 import { ColumnRenderer } from './column_renderer';
 import { REASON_FIELD_NAME } from './constants';
 import { getRowRenderer } from './get_row_renderer';
@@ -53,12 +52,8 @@ export const reasonColumnRenderer: ColumnRenderer = {
       ? values.map((value, i) => (
           <ReasonCell
             key={`reason-column-renderer-value-${timelineId}-${columnName}-${eventId}-${field.id}-${value}-${i}`}
-            contextId={`reason-column-renderer-${timelineId}`}
             timelineId={timelineId}
-            eventId={eventId}
             value={value}
-            isDraggable={isDraggable}
-            fieldName={columnName}
             ecsData={ecsData}
             rowRenderers={rowRenderers}
             browserFields={browserFields}
@@ -81,26 +76,12 @@ const StyledEuiButtonEmpty = styled(EuiButtonEmpty)`
 `;
 
 const ReasonCell: React.FC<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  isDraggable?: boolean;
   value: string | number | undefined | null;
   timelineId: string;
   ecsData: Ecs;
   rowRenderers: RowRenderer[];
   browserFields: BrowserFields;
-}> = ({
-  ecsData,
-  rowRenderers,
-  browserFields,
-  timelineId,
-  value,
-  fieldName,
-  isDraggable,
-  contextId,
-  eventId,
-}) => {
+}> = ({ ecsData, rowRenderers, browserFields, timelineId, value }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const rowRenderer = useMemo(() => getRowRenderer(ecsData, rowRenderers), [ecsData, rowRenderers]);
@@ -111,7 +92,7 @@ const ReasonCell: React.FC<{
       rowRenderer.renderRow({
         browserFields,
         data: ecsData,
-        isDraggable: true,
+        isDraggable: false,
         timelineId,
       })
     );
@@ -136,29 +117,21 @@ const ReasonCell: React.FC<{
 
   return (
     <>
-      <DefaultDraggable
-        field={fieldName}
-        id={`reason-column-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
-        isDraggable={isDraggable}
-        value={`${value}`}
-        tooltipContent={value}
-      >
-        {rowRenderer && rowRender ? (
-          <EuiPopover
-            isOpen={isOpen}
-            anchorPosition="rightCenter"
-            closePopover={handleClosePopOver}
-            button={button}
-          >
-            <EuiPopoverTitle paddingSize="s">
-              {i18n.EVENT_RENDERER_POPOVER_TITLE(eventRendererNames[rowRenderer.id] ?? '')}
-            </EuiPopoverTitle>
-            {rowRender}
-          </EuiPopover>
-        ) : (
-          value
-        )}
-      </DefaultDraggable>
+      {rowRenderer && rowRender ? (
+        <EuiPopover
+          isOpen={isOpen}
+          anchorPosition="rightCenter"
+          closePopover={handleClosePopOver}
+          button={button}
+        >
+          <EuiPopoverTitle paddingSize="s">
+            {i18n.EVENT_RENDERER_POPOVER_TITLE(eventRendererNames[rowRenderer.id] ?? '')}
+          </EuiPopoverTitle>
+          {rowRender}
+        </EuiPopover>
+      ) : (
+        value
+      )}
     </>
   );
 };

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/system/generic_file_details.tsx

@@ -157,7 +157,13 @@ export const SystemGenericFileLine = React.memo<Props>(
             processExecutable={processExecutable}
           />
         </TokensFlexItem>
-        <Args args={args} contextId={contextId} eventId={id} processTitle={processTitle} />
+        <Args
+          args={args}
+          contextId={contextId}
+          eventId={id}
+          processTitle={processTitle}
+          isDraggable={isDraggable}
+        />
         <ExitCodeDraggable
           contextId={contextId}
           endgameExitCode={endgameExitCode}