[Security Solution][Timeline] Notes management table

x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_timelines.tsx

@@ -9,7 +9,7 @@ import { isEmpty } from 'lodash/fp';
 import type { TimelineTypeLiteral } from '../../../../common/api/timeline';
 import { appendSearch } from './helpers';
 
-export const getTimelineTabsUrl = (tabName: TimelineTypeLiteral, search?: string) =>
+export const getTimelineTabsUrl = (tabName: TimelineTypeLiteral | 'notes', search?: string) =>
   `/${tabName}${appendSearch(search)}`;
 
 export const getTimelineUrl = (id: string, graphEventId?: string) =>

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -504,10 +504,9 @@ export const mockGlobalState: State = {
   discover: getMockDiscoverInTimelineState(),
   dataViewPicker: dataViewPickerInitialState,
   notes: {
-    ids: ['1'],
     entities: {
       '1': {
-        eventId: 'event-id',
+        eventId: 'document-id-1',
         noteId: '1',
         note: 'note-1',
         timelineId: 'timeline-1',
@@ -518,15 +517,31 @@ export const mockGlobalState: State = {
         version: 'version',
       },
     },
+    ids: ['1'],
     status: {
       fetchNotesByDocumentIds: ReqStatus.Idle,
       createNote: ReqStatus.Idle,
-      deleteNote: ReqStatus.Idle,
+      deleteNotes: ReqStatus.Idle,
+      fetchNotes: ReqStatus.Idle,
     },
     error: {
       fetchNotesByDocumentIds: null,
       createNote: null,
-      deleteNote: null,
+      deleteNotes: null,
+      fetchNotes: null,
+    },
+    pagination: {
+      page: 1,
+      perPage: 10,
+      total: 0,
+    },
+    sort: {
+      field: 'created' as const,
+      direction: 'desc' as const,
     },
+    filter: '',
+    search: '',
+    selectedIds: [],
+    pendingDeleteIds: [],
   },
 };

x-pack/plugins/security_solution/public/flyout/document_details/left/components/notes_list.test.tsx

@@ -41,7 +41,7 @@ jest.mock('react-redux', () => {
 const renderNotesList = () =>
   render(
     <TestProviders>
-      <NotesList eventId={'event-id'} />
+      <NotesList eventId={'document-id-1'} />
     </TestProviders>
   );
 
@@ -69,7 +69,7 @@ describe('NotesList', () => {
 
     const { getByTestId } = render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
 
@@ -115,7 +115,7 @@ describe('NotesList', () => {
 
     render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
 
@@ -131,7 +131,7 @@ describe('NotesList', () => {
         ...mockGlobalState.notes,
         entities: {
           '1': {
-            eventId: 'event-id',
+            eventId: 'document-id-1',
             noteId: '1',
             note: 'note-1',
             timelineId: '',
@@ -147,7 +147,7 @@ describe('NotesList', () => {
 
     const { getByTestId } = render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
     const { getByText } = within(getByTestId(`${NOTE_AVATAR_TEST_ID}-0`));
@@ -169,7 +169,7 @@ describe('NotesList', () => {
 
     const { getByTestId } = render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
 
@@ -196,14 +196,14 @@ describe('NotesList', () => {
         ...mockGlobalState.notes,
         status: {
           ...mockGlobalState.notes.status,
-          deleteNote: ReqStatus.Loading,
+          deleteNotes: ReqStatus.Loading,
         },
       },
     });
 
     const { getByTestId } = render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
 
@@ -217,18 +217,18 @@ describe('NotesList', () => {
         ...mockGlobalState.notes,
         status: {
           ...mockGlobalState.notes.status,
-          deleteNote: ReqStatus.Failed,
+          deleteNotes: ReqStatus.Failed,
         },
         error: {
           ...mockGlobalState.notes.error,
-          deleteNote: { type: 'http', status: 500 },
+          deleteNotes: { type: 'http', status: 500 },
         },
       },
     });
 
     render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
 
@@ -261,7 +261,7 @@ describe('NotesList', () => {
         ...mockGlobalState.notes,
         entities: {
           '1': {
-            eventId: 'event-id',
+            eventId: 'document-id-1',
             noteId: '1',
             note: 'note-1',
             timelineId: '',
@@ -277,7 +277,7 @@ describe('NotesList', () => {
 
     const { queryByTestId } = render(
       <TestProviders store={store}>
-        <NotesList eventId={'event-id'} />
+        <NotesList eventId={'document-id-1'} />
       </TestProviders>
     );
 

x-pack/plugins/security_solution/public/flyout/document_details/left/components/notes_list.tsx

@@ -30,11 +30,11 @@ import {
 import type { State } from '../../../../common/store';
 import type { Note } from '../../../../../common/api/timeline';
 import {
-  deleteNote,
+  deleteNotes,
   ReqStatus,
   selectCreateNoteStatus,
-  selectDeleteNoteError,
-  selectDeleteNoteStatus,
+  selectDeleteNotesError,
+  selectDeleteNotesStatus,
   selectFetchNotesByDocumentIdsError,
   selectFetchNotesByDocumentIdsStatus,
   selectNotesByDocumentId,
@@ -91,14 +91,14 @@ export const NotesList = memo(({ eventId }: NotesListProps) => {
 
   const createStatus = useSelector((state: State) => selectCreateNoteStatus(state));
 
-  const deleteStatus = useSelector((state: State) => selectDeleteNoteStatus(state));
-  const deleteError = useSelector((state: State) => selectDeleteNoteError(state));
+  const deleteStatus = useSelector((state: State) => selectDeleteNotesStatus(state));
+  const deleteError = useSelector((state: State) => selectDeleteNotesError(state));
   const [deletingNoteId, setDeletingNoteId] = useState('');
 
   const deleteNoteFc = useCallback(
     (noteId: string) => {
       setDeletingNoteId(noteId);
-      dispatch(deleteNote({ id: noteId }));
+      dispatch(deleteNotes({ ids: [noteId] }));
     },
     [dispatch]
   );

x-pack/plugins/security_solution/public/management/links.ts

@@ -22,7 +22,6 @@ import {
   EVENT_FILTERS_PATH,
   HOST_ISOLATION_EXCEPTIONS_PATH,
   MANAGE_PATH,
-  NOTES_MANAGEMENT_PATH,
   POLICIES_PATH,
   RESPONSE_ACTIONS_HISTORY_PATH,
   SecurityPageName,
@@ -40,7 +39,6 @@ import {
   TRUSTED_APPLICATIONS,
   ENTITY_ANALYTICS_RISK_SCORE,
   ASSET_CRITICALITY,
-  NOTES,
 } from '../app/translations';
 import { licenseService } from '../common/hooks/use_license';
 import type { LinkItem } from '../common/links/types';
@@ -87,12 +85,6 @@ const categories = [
     }),
     linkIds: [SecurityPageName.cloudDefendPolicies],
   },
-  {
-    label: i18n.translate('xpack.securitySolution.appLinks.category.investigations', {
-      defaultMessage: 'Investigations',
-    }),
-    linkIds: [SecurityPageName.notesManagement],
-  },
 ];
 
 export const links: LinkItem = {
@@ -223,18 +215,6 @@ export const links: LinkItem = {
       hideTimeline: true,
     },
     cloudDefendLink,
-    {
-      id: SecurityPageName.notesManagement,
-      title: NOTES,
-      description: i18n.translate('xpack.securitySolution.appLinks.notesManagementDescription', {
-        defaultMessage: 'Visualize and delete notes.',
-      }),
-      landingIcon: IconTool, // TODO get new icon
-      path: NOTES_MANAGEMENT_PATH,
-      skipUrlState: true,
-      hideTimeline: true,
-      experimentalKey: 'securitySolutionNotesEnabled',
-    },
   ],
 };
 

x-pack/plugins/security_solution/public/notes/api/api.ts

@@ -29,6 +29,38 @@ export const createNote = async ({ note }: { note: BareNote }) => {
   }
 };
 
+export const fetchNotes = async ({
+  page,
+  perPage,
+  sortField,
+  sortOrder,
+  filter,
+  search,
+}: {
+  page: number;
+  perPage: number;
+  sortField: string;
+  sortOrder: string;
+  filter: string;
+  search: string;
+}) => {
+  const response = await KibanaServices.get().http.get<{ totalCount: number; notes: Note[] }>(
+    NOTE_URL,
+    {
+      query: {
+        page,
+        perPage,
+        sortField,
+        sortOrder,
+        filter,
+        search,
+      },
+      version: '2023-10-31',
+    }
+  );
+  return response;
+};
+
 /**
  * Fetches all the notes for an array of document ids
  */
@@ -44,11 +76,11 @@ export const fetchNotesByDocumentIds = async (documentIds: string[]) => {
 };
 
 /**
- * Deletes a note
+ * Deletes multiple notes
  */
-export const deleteNote = async (noteId: string) => {
+export const deleteNotes = async (noteIds: string[]) => {
   const response = await KibanaServices.get().http.delete<{ data: unknown }>(NOTE_URL, {
-    body: JSON.stringify({ noteId }),
+    body: JSON.stringify({ noteIds }),
     version: '2023-10-31',
   });
   return response;

x-pack/plugins/security_solution/public/notes/components/delete_confirm_modal.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { EuiConfirmModal } from '@elastic/eui';
+import * as i18n from './translations';
+import {
+  deleteNotes,
+  userClosedDeleteModal,
+  selectNotesTablePendingDeleteIds,
+  selectDeleteNotesStatus,
+  ReqStatus,
+} from '..';
+
+export const DeleteConfirmModal = React.memo(() => {
+  const dispatch = useDispatch();
+  const pendingDeleteIds = useSelector(selectNotesTablePendingDeleteIds);
+  const deleteNotesStatus = useSelector(selectDeleteNotesStatus);
+  const deleteLoading = deleteNotesStatus === ReqStatus.Loading;
+
+  const onCancel = useCallback(() => {
+    dispatch(userClosedDeleteModal());
+  }, [dispatch]);
+
+  const onConfirm = useCallback(() => {
+    dispatch(deleteNotes({ ids: pendingDeleteIds }));
+  }, [dispatch, pendingDeleteIds]);
+
+  return (
+    <EuiConfirmModal
+      aria-labelledby={'delete-notes-modal'}
+      title={i18n.DELETE_NOTES_MODAL_TITLE}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      isLoading={deleteLoading}
+      cancelButtonText={i18n.DELETE_NOTES_CANCEL}
+      confirmButtonText={i18n.DELETE}
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+    >
+      {i18n.DELETE_NOTES_CONFIRM(pendingDeleteIds.length)}
+    </EuiConfirmModal>
+  );
+});
+
+DeleteConfirmModal.displayName = 'DeleteConfirmModal';