[SIEM] Fixes timeline notes overflowing the modal (#37134) (#37244)

## [SIEM] Fixes timeline notes overflowing the modal (#37134)

Beginning in Chrome 74 (see elastic/eui#1902), the timeline notes modal can overflow in some browsers, per the _Before_ gif below.

This fix uses `EuiModal` and other `EUI` components to address the overflow issue across all the browsers tested in the gifs below:

### Before (Chrome `74.0`)

![01-before-chrome](https://user-images.githubusercontent.com/4459398/58355997-4d7d4d00-7e33-11e9-864b-7e77d0635116.gif)

### After (Chrome `74.0`)

![02-after-chrome-74 0](https://user-images.githubusercontent.com/4459398/58356028-6128b380-7e33-11e9-8c7d-3022e45b1f41.gif)

### After (Firefox `67.0`)

![03-after-firefox-67 0](https://user-images.githubusercontent.com/4459398/58356056-6ede3900-7e33-11e9-92ca-a6dd8e0b804b.gif)

### After (Safari `12.1.1`)

![04-after-safari-12 1 1](https://user-images.githubusercontent.com/4459398/58356123-a947d600-7e33-11e9-80ab-d6b3d3c601c0.gif)

### After (IE`11.0.9600`)

![05-after-ie-11](https://user-images.githubusercontent.com/4459398/58356131-aea52080-7e33-11e9-989e-51aab7c4e9da.gif)

https://github.com/elastic/ingest-dev/issues/442

x-pack/plugins/siem/public/components/notes/add_note/new_note.test.tsx

@@ -30,7 +30,7 @@ describe('NewNote', () => {
         .find('button[role="tab"]')
         .first()
         .text()
-    ).toEqual(i18n.NOTE(1));
+    ).toEqual(i18n.NOTE);
   });
 
   test('it renders a tab labeled "Preview (Markdown)"', () => {

x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx

@@ -36,11 +36,11 @@ export const NewNote = pure<{
   const tabs = [
     {
       id: 'note',
-      name: i18n.NOTE(1),
+      name: i18n.NOTE,
       content: (
         <TextArea
           autoFocus
-          aria-label={i18n.NOTE(1)}
+          aria-label={i18n.NOTE}
           data-test-subj="add-a-note"
           fullWidth={true}
           height={noteInputHeight}

x-pack/plugins/siem/public/components/notes/columns.tsx

@@ -29,7 +29,7 @@ interface Column {
 export const columns: Column[] = [
   {
     field: 'note',
-    name: i18n.NOTE(1),
+    name: i18n.NOTE,
     sortable: true,
     truncateText: false,
     render: (_, { created, note, user }) => (

x-pack/plugins/siem/public/components/notes/helpers.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTitle } from '@elastic/eui';
+import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import moment from 'moment';
 import * as React from 'react';
 import { pure } from 'recompose';
@@ -13,6 +13,7 @@ import styled from 'styled-components';
 import { Note } from '../../lib/note';
 
 import * as i18n from './translations';
+import { CountBadge } from '../page';
 
 /** Performs IO to update (or add a new) note */
 export type UpdateNote = (note: Note) => void;
@@ -46,6 +47,8 @@ export const search = {
 };
 
 const TitleText = styled.h3`
+  margin: 0 5px;
+  cursor: default;
   user-select: none;
 `;
 
@@ -53,9 +56,21 @@ const TitleText = styled.h3`
 export const NotesCount = pure<{
   noteIds: string[];
 }>(({ noteIds }) => (
-  <EuiTitle size="s">
-    <TitleText>{i18n.NOTE(noteIds.length)}</TitleText>
-  </EuiTitle>
+  <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexItem grow={false}>
+      <EuiIcon color="text" size="l" type="editorComment" />
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <EuiTitle size="s">
+        <TitleText>{i18n.NOTES}</TitleText>
+      </EuiTitle>
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <CountBadge color="hollow">{noteIds.length}</CountBadge>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 ));
 
 /** Creates a new instance of a `note` */

x-pack/plugins/siem/public/components/notes/index.tsx

@@ -5,10 +5,12 @@
  */
 
 import {
-  EuiHorizontalRule,
   // @ts-ignore
   EuiInMemoryTable,
+  EuiModalBody,
+  EuiModalHeader,
   EuiPanel,
+  EuiSpacer,
 } from '@elastic/eui';
 import * as React from 'react';
 import styled from 'styled-components';
@@ -32,10 +34,6 @@ interface State {
   newNote: string;
 }
 
-const AddNoteContainer = styled.div`
-  margin-bottom: 5px;
-`;
-
 const NotesPanel = styled(EuiPanel)`
   height: ${NOTES_PANEL_HEIGHT}px;
   width: ${NOTES_PANEL_WIDTH}px;
@@ -45,11 +43,6 @@ const NotesPanel = styled(EuiPanel)`
   }
 `;
 
-const NotesContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
 const InMemoryTable = styled(EuiInMemoryTable)`
   overflow-x: hidden;
   overflow-y: auto;
@@ -69,18 +62,19 @@ export class Notes extends React.PureComponent<Props, State> {
 
     return (
       <NotesPanel>
-        <NotesContainer>
+        <EuiModalHeader>
           <NotesCount noteIds={noteIds} />
-          <EuiHorizontalRule margin="m" />
-          <AddNoteContainer>
-            <AddNote
-              associateNote={associateNote}
-              getNewNoteId={getNewNoteId}
-              newNote={this.state.newNote}
-              updateNewNote={this.updateNewNote}
-              updateNote={updateNote}
-            />
-          </AddNoteContainer>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <AddNote
+            associateNote={associateNote}
+            getNewNoteId={getNewNoteId}
+            newNote={this.state.newNote}
+            updateNewNote={this.updateNewNote}
+            updateNote={updateNote}
+          />
+          <EuiSpacer size="s" />
           <InMemoryTable
             data-test-subj="notes-table"
             items={getNotesByIds(noteIds)}
@@ -89,7 +83,7 @@ export class Notes extends React.PureComponent<Props, State> {
             search={search}
             sorting={true}
           />
-        </NotesContainer>
+        </EuiModalBody>
       </NotesPanel>
     );
   }

x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx

@@ -36,7 +36,7 @@ export const NoteCardBody = pure<{ rawNote: string }>(({ rawNote }) => (
       hoverContent={
         <HoverActionsContainer data-test-subj="hover-actions-container">
           <EuiToolTip content={i18n.COPY_TO_CLIPBOARD}>
-            <WithCopyToClipboard text={rawNote} titleSummary={i18n.NOTE(1).toLowerCase()} />
+            <WithCopyToClipboard text={rawNote} titleSummary={i18n.NOTE.toLowerCase()} />
           </EuiToolTip>
         </HoverActionsContainer>
       }

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

@@ -18,11 +18,13 @@ export const ADDED_A_NOTE = i18n.translate('xpack.siem.notes.addedANoteLabel', {
   defaultMessage: 'Added a Note',
 });
 
-export const NOTE = (totalCount: number) =>
-  i18n.translate('xpack.siem.notes.noteTitle', {
-    values: { totalCount },
-    defaultMessage: '{totalCount, plural, =1 {Note} other {Notes}}',
-  });
+export const NOTE = i18n.translate('xpack.siem.notes.noteLabel', {
+  defaultMessage: 'Note',
+});
+
+export const NOTES = i18n.translate('xpack.siem.notes.notesTitle', {
+  defaultMessage: 'Notes',
+});
 
 export const PREVIEW_MARKDOWN = i18n.translate('xpack.siem.notes.previewMarkdownTitle', {
   defaultMessage: 'Preview (Markdown)',

x-pack/plugins/siem/public/components/timeline/properties/notes_size.ts

@@ -5,4 +5,4 @@
  */
 
 export const NOTES_PANEL_WIDTH = 1024;
-export const NOTES_PANEL_HEIGHT = 633;
+export const NOTES_PANEL_HEIGHT = 750;

x-pack/plugins/translations/translations/ja-JP.json

@@ -9270,7 +9270,6 @@
     "xpack.siem.notes.addNoteButtonLabel": "Add Note",
     "xpack.siem.notes.cancelButtonLabel": "キャンセル",
     "xpack.siem.notes.copyToClipboardButtonLabel": "クリップボードにコピー",
-    "xpack.siem.notes.noteTitle": "{totalCount, plural, =1 {Note} other {Notes}}",
     "xpack.siem.notes.previewMarkdownTitle": "Preview (Markdown)",
     "xpack.siem.notes.search.FilterByUserOrNotePlaceholder": "Filter by User or Note",
     "xpack.siem.open.timeline.cancelButton": "キャンセル",

x-pack/plugins/translations/translations/zh-CN.json

@@ -9289,7 +9289,6 @@
     "xpack.siem.notes.addNoteButtonLabel": "添加备注",
     "xpack.siem.notes.cancelButtonLabel": "取消",
     "xpack.siem.notes.copyToClipboardButtonLabel": "复制到剪贴板",
-    "xpack.siem.notes.noteTitle": "{totalCount, plural, =1 {Note} other {Notes}}",
     "xpack.siem.notes.previewMarkdownTitle": "预览 (Markdown)",
     "xpack.siem.notes.search.FilterByUserOrNotePlaceholder": "按用户或备注筛选",
     "xpack.siem.open.timeline.cancelButton": "取消",