[Security Solution][Timeline] Notes management table

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

@@ -196,7 +196,7 @@ describe('NotesList', () => {
         ...mockGlobalState.notes,
         status: {
           ...mockGlobalState.notes.status,
-          deleteNote: ReqStatus.Loading,
+          deleteNotes: ReqStatus.Loading,
         },
       },
     });
@@ -217,11 +217,11 @@ 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 },
         },
       },
     });

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/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';

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

@@ -0,0 +1,64 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiSearchBar } from '@elastic/eui';
+import React, { useMemo, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import { userSearchedNotes, selectNotesTableSearch } from '..';
+
+const SearchRowContainer = styled.div`
+  &:not(:last-child) {
+    margin-bottom: ${(props) => props.theme.eui.euiSizeL};
+  }
+`;
+
+SearchRowContainer.displayName = 'SearchRowContainer';
+
+const SearchRowFlexGroup = styled(EuiFlexGroup)`
+  margin-bottom: ${(props) => props.theme.eui.euiSizeXS};
+`;
+
+SearchRowFlexGroup.displayName = 'SearchRowFlexGroup';
+
+export const SearchRow = React.memo(() => {
+  const dispatch = useDispatch();
+  const searchBox = useMemo(
+    () => ({
+      placeholder: 'Search note contents',
+      incremental: false,
+      'data-test-subj': 'notes-search-bar',
+    }),
+    []
+  );
+
+  const notesSearch = useSelector(selectNotesTableSearch);
+
+  const onQueryChange = useCallback(
+    ({ queryText }) => {
+      dispatch(userSearchedNotes(queryText.trim()));
+    },
+    [dispatch]
+  );
+
+  return (
+    <SearchRowContainer>
+      <SearchRowFlexGroup gutterSize="s">
+        <EuiFlexItem>
+          <EuiSearchBar
+            box={searchBox}
+            onChange={onQueryChange}
+            query={notesSearch}
+            defaultQuery={''}
+          />
+        </EuiFlexItem>
+      </SearchRowFlexGroup>
+    </SearchRowContainer>
+  );
+});
+
+SearchRow.displayName = 'SearchRow';

x-pack/plugins/security_solution/public/notes/components/translations.ts

@@ -0,0 +1,104 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const BATCH_ACTIONS = i18n.translate(
+  'xpack.securitySolution.notes.management.batchActionsTitle',
+  {
+    defaultMessage: 'Bulk actions',
+  }
+);
+
+export const CREATED_COLUMN = i18n.translate(
+  'xpack.securitySolution.notes.management.createdColumnTitle',
+  {
+    defaultMessage: 'Created',
+  }
+);
+
+export const CREATED_BY_COLUMN = i18n.translate(
+  'xpack.securitySolution.notes.management.createdByColumnTitle',
+  {
+    defaultMessage: 'Created by',
+  }
+);
+
+export const EVENT_ID_COLUMN = i18n.translate(
+  'xpack.securitySolution.notes.management.eventIdColumnTitle',
+  {
+    defaultMessage: 'Document ID',
+  }
+);
+
+export const TIMELINE_ID_COLUMN = i18n.translate(
+  'xpack.securitySolution.notes.management.timelineIdColumnTitle',
+  {
+    defaultMessage: 'Timeline ID',
+  }
+);
+
+export const NOTE_CONTENT_COLUMN = i18n.translate(
+  'xpack.securitySolution.notes.management.noteContentColumnTitle',
+  {
+    defaultMessage: 'Note content',
+  }
+);
+
+export const DELETE = i18n.translate('xpack.securitySolution.notes.management.deleteAction', {
+  defaultMessage: 'Delete',
+});
+
+export const DELETE_SINGLE_NOTE_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.notes.management.deleteDescription',
+  {
+    defaultMessage: 'Delete this note',
+  }
+);
+
+export const NOTES_MANAGEMENT_TITLE = i18n.translate(
+  'xpack.securitySolution.notes.management.pageTitle',
+  {
+    defaultMessage: 'Notes management',
+  }
+);
+
+export const TABLE_ERROR = i18n.translate('xpack.securitySolution.notes.management.tableError', {
+  defaultMessage: 'Unable to load notes',
+});
+
+export const DELETE_NOTES_MODAL_TITLE = i18n.translate(
+  'xpack.securitySolution.notes.management.deleteNotesModalTitle',
+  {
+    defaultMessage: 'Delete notes?',
+  }
+);
+
+export const DELETE_NOTES_CONFIRM = (selectedNotes: number) =>
+  i18n.translate('xpack.securitySolution.notes.management.deleteNotesConfirm', {
+    values: { selectedNotes },
+    defaultMessage:
+      'Are you sure you want to delete {selectedNotes} {selectedNotes, plural, one {note} other {notes}}?',
+  });
+
+export const DELETE_NOTES_CANCEL = i18n.translate(
+  'xpack.securitySolution.notes.management.deleteNotesCancel',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
+export const DELETE_SELECTED = i18n.translate(
+  'xpack.securitySolution.notes.management.deleteSelected',
+  {
+    defaultMessage: 'Delete selected notes',
+  }
+);
+
+export const REFRESH = i18n.translate('xpack.securitySolution.notes.management.refresh', {
+  defaultMessage: 'Refresh',
+});