[Security Solution] Refactor Timeline Notes to use EuiCommentList

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/links/index.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/top_n/top_n.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}

x-pack/plugins/security_solution/public/common/hooks/use_timeline_events_count.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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, { useState } from 'react';
+import { createPortalNode, OutPortal } from 'react-reverse-portal';
+
+/**
+ * A singleton portal for rendering content in the global header
+ */
+const timelineEventsCountPortalNodeSingleton = createPortalNode();
+
+export const useTimelineEventsCountPortal = () => {
+  const [timelineEventsCountPortalNode] = useState(timelineEventsCountPortalNodeSingleton);
+
+  return { timelineEventsCountPortalNode };
+};
+
+export const TimelineEventsCountBadge = React.memo(() => {
+  const { timelineEventsCountPortalNode } = useTimelineEventsCountPortal();
+
+  return <OutPortal node={timelineEventsCountPortalNode} />;
+});
+
+TimelineEventsCountBadge.displayName = 'TimelineEventsCountBadge';

x-pack/plugins/security_solution/public/common/lib/note/index.ts

@@ -8,6 +8,7 @@
 export interface Note {
   /** When the note was created */
   created: Date;
+  eventId?: string | null;
   /** Uniquely identifies the note */
   id: string;
   /** When not `null`, this represents the last edit   */
@@ -18,5 +19,6 @@ export interface Note {
   user: string;
   /** SaveObjectID for note */
   saveObjectId: string | null | undefined;
+  timelineId?: string | null;
   version: string | null | undefined;
 }

x-pack/plugins/security_solution/public/common/store/app/selectors.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { keys } from 'lodash/fp';
+import { keys, values } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import { createSelector } from 'reselect';
 import { Note } from '../../lib/note';
@@ -25,6 +25,17 @@ export const getNotes = memoizeOne((notesById: NotesById, noteIds: string[]): No
   }, [])
 );
 
+export const selectNotesByTimelineSavedObjectId = (
+  state: State,
+  timelineSavedObjectId: string
+): Note[] =>
+  values(state.app.notesById).reduce((acc: Note[], note: Note) => {
+    if (note.timelineId === timelineSavedObjectId) {
+      return [...acc, note];
+    }
+    return acc;
+  }, []);
+
 export const selectNotesByIdSelector = createSelector(
   selectNotesById,
   (notesById: NotesById) => notesById
@@ -33,4 +44,7 @@ export const selectNotesByIdSelector = createSelector(
 export const notesByIdsSelector = () =>
   createSelector(selectNotesById, (notesById: NotesById) => notesById);
 
+export const selectNotesByTimelineSavedObjectIdSelector = () =>
+  createSelector(selectNotesByTimelineSavedObjectId, (notes: Note[]) => notes);
+
 export const errorsSelector = () => createSelector(getErrors, (errors) => errors);

x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts

@@ -6,6 +6,7 @@
 
 import { createSelector } from 'reselect';
 
+import { Filter, Query } from '../../../../../../../src/plugins/data/public';
 import { State } from '../types';
 
 import { InputsModel, InputsRange, GlobalQuery } from './model';
@@ -64,21 +65,18 @@ export const timelineQueryByIdSelector = () =>
 
 export const globalSelector = () => createSelector(selectGlobal, (global) => global);
 
+const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
+
 export const globalQuerySelector = () =>
-  createSelector(
-    selectGlobal,
-    (global) =>
-      global.query || {
-        query: '',
-        language: 'kuery',
-      }
-  );
+  createSelector(selectGlobal, (global) => global.query || DEFAULT_QUERY);
 
 export const globalSavedQuerySelector = () =>
   createSelector(selectGlobal, (global) => global.savedQuery || null);
 
+const NO_FILTERS: Filter[] = [];
+
 export const globalFiltersQuerySelector = () =>
-  createSelector(selectGlobal, (global) => global.filters || []);
+  createSelector(selectGlobal, (global) => global.filters || NO_FILTERS);
 
 export const getTimelineSelector = () => createSelector(selectTimeline, (timeline) => timeline);
 

x-pack/plugins/security_solution/public/common/store/sourcerer/selectors.ts

@@ -91,16 +91,23 @@ export const getSourcererScopeSelector = () => {
       : selectedPatterns;
   });
 
+  const getIndexPattern = memoizeOne(
+    (indexPattern, title) => ({
+      ...indexPattern,
+      title,
+    }),
+    (newArgs, lastArgs) => newArgs[0] === lastArgs[0] && newArgs[1].length === lastArgs[1].length
+  );
+
   const mapStateToProps = (state: State, scopeId: SourcererScopeName): ManageScope => {
     const scope = getScopeIdSelector(state, scopeId);
     const selectedPatterns = getSelectedPatterns(scope.selectedPatterns.sort().join());
+    const indexPattern = getIndexPattern(scope.indexPattern, selectedPatterns.join());
+
     return {
       ...scope,
       selectedPatterns,
-      indexPattern: {
-        ...scope.indexPattern,
-        title: selectedPatterns.join(),
-      },
+      indexPattern,
     };
   };
   return mapStateToProps;

x-pack/plugins/security_solution/public/detections/components/alerts_histogram_panel/helpers.tsx

@@ -10,6 +10,8 @@ import { HistogramData, AlertsAggregation, AlertsBucket, AlertsGroupBucket } fro
 import { AlertSearchResponse } from '../../containers/detection_engine/alerts/types';
 import * as i18n from './translations';
 
+const EMPTY_ALERTS_DATA: HistogramData[] = [];
+
 export const formatAlertsData = (alertsData: AlertSearchResponse<{}, AlertsAggregation> | null) => {
   const groupBuckets: AlertsGroupBucket[] =
     alertsData?.aggregations?.alertsByGrouping?.buckets ?? [];
@@ -25,7 +27,7 @@ export const formatAlertsData = (alertsData: AlertSearchResponse<{}, AlertsAggre
         g: group,
       })),
     ];
-  }, []);
+  }, EMPTY_ALERTS_DATA);
 };
 
 export const getAlertsHistogramQuery = (

x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/investigate_in_timeline_action.tsx

@@ -89,7 +89,6 @@ const InvestigateInTimelineActionComponent: React.FC<InvestigateInTimelineAction
       content={ACTION_INVESTIGATE_IN_TIMELINE}
       dataTestSubj="send-alert-to-timeline"
       iconType="timeline"
-      id="sendAlertToTimeline"
       onClick={investigateInTimelineAlertClick}
       isDisabled={false}
     />

x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx

@@ -37,6 +37,10 @@ describe('Alerts by category', () => {
     indexPattern: mockIndexPattern,
     setQuery: jest.fn(),
     to,
+    query: {
+      query: '',
+      language: 'kuery',
+    },
   };
   describe('before loading data', () => {
     beforeAll(async () => {

x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.tsx

@@ -35,26 +35,24 @@ import { LinkButton } from '../../../common/components/links';
 
 const ID = 'alertsByCategoryOverview';
 
-const NO_FILTERS: Filter[] = [];
-const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
 const DEFAULT_STACK_BY = 'event.module';
 
 interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
-  filters?: Filter[];
+  filters: Filter[];
   hideHeaderChildren?: boolean;
   indexPattern: IIndexPattern;
   indexNames: string[];
-  query?: Query;
+  query: Query;
 }
 
 const AlertsByCategoryComponent: React.FC<Props> = ({
   deleteQuery,
-  filters = NO_FILTERS,
+  filters,
   from,
   hideHeaderChildren = false,
   indexPattern,
   indexNames,
-  query = DEFAULT_QUERY,
+  query,
   setQuery,
   to,
 }) => {

x-pack/plugins/security_solution/public/overview/components/event_counts/index.test.tsx

@@ -21,11 +21,16 @@ describe('EventCounts', () => {
   const to = '2020-01-21T20:49:57.080Z';
 
   const testProps = {
+    filters: [],
     from,
     indexNames: [],
     indexPattern: mockIndexPattern,
     setQuery: jest.fn(),
     to,
+    query: {
+      query: '',
+      language: 'kuery',
+    },
   };
 
   test('it filters the `Host events` widget with a `host.name` `exists` filter', () => {