[Security Solution] Refactor Timeline Notes to use EuiCommentList (#85256) (#85716)

* [Security Solution] Refactor Timeline Notes to use EuiCommentList

* notes

* fix types

* unit tests

* selector

* uncomment Pinned tab

* note event details

* cleanup

* cleanup

* transparent background

* don't display elastic as an owner when note is created

* review + bugs fixed found

Co-authored-by: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>

Co-authored-by: Patryk Kopyciński <patryk.kopycinski@elastic.co>

Author: XavierM

x-pack/plugins/security_solution/public/cases/components/timeline_actions/add_to_case_action.tsx

@@ -134,7 +134,7 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({ ecsRowData,
 
   return (
     <>
-      <ActionIconItem id="attachAlertToCase">
+      <ActionIconItem>
         <EuiPopover
           id="attachAlertToCasePanel"
           button={button}

x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx

@@ -11,6 +11,7 @@ import { getOr, get, isNumber } from 'lodash/fp';
 import deepmerge from 'deepmerge';
 import uuid from 'uuid';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
 
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { useTimeZone } from '../../lib/kibana';
@@ -193,4 +194,11 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
   );
 };
 
-export const BarChart = React.memo(BarChartComponent);
+export const BarChart = React.memo(
+  BarChartComponent,
+  (prevProps, nextProps) =>
+    prevProps.stackByField === nextProps.stackByField &&
+    prevProps.timelineId === nextProps.timelineId &&
+    deepEqual(prevProps.configs, nextProps.configs) &&
+    deepEqual(prevProps.barChart, nextProps.barChart)
+);

x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/json_view.test.tsx.snap

@@ -98,7 +98,7 @@ export const EventFieldsBrowser = React.memo<Props>(
         }
         const linkFieldData = (data ?? []).find((d) => d.field === linkField);
         const linkFieldValue = getOr(null, 'originalValue', linkFieldData);
-        return linkFieldValue;
+        return Array.isArray(linkFieldValue) ? linkFieldValue[0] : linkFieldValue;
       },
       [data, columnHeaders]
     );

x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx

@@ -16,8 +16,10 @@ interface Props {
   data: TimelineEventsDetailsItem[];
 }
 
-const StyledEuiCodeEditor = styled(EuiCodeEditor)`
-  flex: 1;
+const EuiCodeEditorContainer = styled.div`
+  .euiCodeEditorWrapper {
+    position: absolute;
+  }
 `;
 
 const EDITOR_SET_OPTIONS = { fontSize: '12px' };
@@ -34,19 +36,29 @@ export const JsonView = React.memo<Props>(({ data }) => {
   );
 
   return (
-    <StyledEuiCodeEditor
-      data-test-subj="jsonView"
-      isReadOnly
-      mode="javascript"
-      setOptions={EDITOR_SET_OPTIONS}
-      value={value}
-      width="100%"
-      height="100%"
-    />
+    <EuiCodeEditorContainer>
+      <EuiCodeEditor
+        data-test-subj="jsonView"
+        isReadOnly
+        mode="javascript"
+        setOptions={EDITOR_SET_OPTIONS}
+        value={value}
+        width="100%"
+        height="100%"
+      />
+    </EuiCodeEditorContainer>
   );
 });
 
 JsonView.displayName = 'JsonView';
 
 export const buildJsonView = (data: TimelineEventsDetailsItem[]) =>
-  data.reduce((accumulator, item) => set(item.field, item.originalValue, accumulator), {});
+  data.reduce(
+    (accumulator, item) =>
+      set(
+        item.field,
+        Array.isArray(item.originalValue) ? item.originalValue.join() : item.originalValue,
+        accumulator
+      ),
+    {}
+  );

x-pack/plugins/security_solution/public/common/components/event_details/json_view.tsx

@@ -167,15 +167,12 @@ export const SummaryViewComponent: React.FC<{
   eventId: string;
   timelineId: string;
 }> = ({ data, eventId, timelineId, browserFields }) => {
-  const ruleId = useMemo(
-    () =>
-      getOr(
-        null,
-        'originalValue',
-        data.find((d) => d.field === 'signal.rule.id')
-      ),
-    [data]
-  );
+  const ruleId = useMemo(() => {
+    const item = data.find((d) => d.field === 'signal.rule.id');
+    return Array.isArray(item?.originalValue)
+      ? item?.originalValue[0]
+      : item?.originalValue ?? null;
+  }, [data]);
   const { rule: maybeRule } = useRuleAsync(ruleId);
   const summaryList = useMemo(() => getSummary({ browserFields, data, eventId, timelineId }), [
     browserFields,

x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx

@@ -39,7 +39,7 @@ const EventDetailsFlyoutComponent: React.FC<EventDetailsFlyoutProps> = ({
   const dispatch = useDispatch();
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const expandedEvent = useDeepEqualSelector(
-    (state) => (getTimeline(state, timelineId) ?? timelineDefaults).expandedEvent
+    (state) => (getTimeline(state, timelineId) ?? timelineDefaults)?.expandedEvent ?? {}
   );
 
   const handleClearSelection = useCallback(() => {
@@ -48,8 +48,8 @@ const EventDetailsFlyoutComponent: React.FC<EventDetailsFlyoutProps> = ({
 
   const [loading, detailsData] = useTimelineEventsDetails({
     docValueFields,
-    indexName: expandedEvent.indexName!,
-    eventId: expandedEvent.eventId!,
+    indexName: expandedEvent?.indexName ?? '',
+    eventId: expandedEvent?.eventId ?? '',
     skip: !expandedEvent.eventId,
   });
 

x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx

@@ -5,8 +5,8 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
-import { isEmpty, some } from 'lodash/fp';
-import React, { useEffect, useMemo, useState } from 'react';
+import { isEmpty } from 'lodash/fp';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 import { useDispatch } from 'react-redux';
@@ -180,6 +180,9 @@ const EventsViewerComponent: React.FC<Props> = ({
     [justTitle]
   );
 
+  const prevCombinedQueries = useRef<{
+    filterQuery: string;
+  } | null>(null);
   const combinedQueries = combineQueries({
     config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
     dataProviders,
@@ -232,10 +235,11 @@ const EventsViewerComponent: React.FC<Props> = ({
   });
 
   useEffect(() => {
-    if (!events || (expandedEvent.eventId && !some(['_id', expandedEvent.eventId], events))) {
+    if (!deepEqual(prevCombinedQueries.current, combinedQueries)) {
+      prevCombinedQueries.current = combinedQueries;
       dispatch(timelineActions.toggleExpandedEvent({ timelineId: id }));
     }
-  }, [dispatch, events, expandedEvent, id]);
+  }, [combinedQueries, dispatch, id]);
 
   const totalCountMinusDeleted = useMemo(
     () => (totalCount > 0 ? totalCount - deletedEventIds.length : 0),

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx

@@ -327,6 +327,20 @@ const ReputationLinkComponent: React.FC<{
     [ipReputationLinksSetting, domain, defaultNameMapping, allItemsLimit]
   );
 
+  const renderCallback = useCallback(
+    (rowItem) =>
+      isReputationLink(rowItem) && (
+        <ExternalLink
+          url={rowItem.url_template}
+          overflowIndexStart={overflowIndexStart}
+          allItemsLimit={allItemsLimit}
+        >
+          <>{rowItem.name ?? domain}</>
+        </ExternalLink>
+      ),
+    [allItemsLimit, domain, overflowIndexStart]
+  );
+
   return ipReputationLinks?.length > 0 ? (
     <section>
       <EuiFlexGroup
@@ -357,19 +371,7 @@ const ReputationLinkComponent: React.FC<{
           <DefaultFieldRendererOverflow
             rowItems={ipReputationLinks}
             idPrefix="moreReputationLink"
-            render={(rowItem) => {
-              return (
-                isReputationLink(rowItem) && (
-                  <ExternalLink
-                    url={rowItem.url_template}
-                    overflowIndexStart={overflowIndexStart}
-                    allItemsLimit={allItemsLimit}
-                  >
-                    <>{rowItem.name ?? domain}</>
-                  </ExternalLink>
-                )
-              );
-            }}
+            render={renderCallback}
             moreMaxHeight={DEFAULT_MORE_MAX_HEIGHT}
             overflowIndexStart={overflowIndexStart}
           />

x-pack/plugins/security_solution/public/common/components/links/index.tsx

@@ -58,20 +58,17 @@ export interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery
   value?: string[] | string | null;
 }
 
-const NO_FILTERS: Filter[] = [];
-const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
-
 const TopNComponent: React.FC<Props> = ({
   combinedQueries,
   defaultView,
   deleteQuery,
-  filters = NO_FILTERS,
+  filters,
   field,
   from,
   indexPattern,
   indexNames,
   options,
-  query = DEFAULT_QUERY,
+  query,
   setAbsoluteRangeDatePickerTarget,
   setQuery,
   timelineId,
@@ -132,7 +129,6 @@ const TopNComponent: React.FC<Props> = ({
             filters={filters}
             from={from}
             headerChildren={headerChildren}
-            indexPattern={indexPattern}
             onlyField={field}
             query={query}
             setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget}