From 1ada4b6b87a668161873e44d31456a7e6ea0d0e4 Mon Sep 17 00:00:00 2001
From: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
Date: Tue, 28 May 2019 09:55:52 -0600
Subject: [PATCH] [SIEM] Fixes timeline notes overflowing the modal (#37134)

## [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
---
 .../notes/add_note/new_note.test.tsx          |  2 +-
 .../components/notes/add_note/new_note.tsx    |  4 +-
 .../siem/public/components/notes/columns.tsx  |  2 +-
 .../siem/public/components/notes/helpers.tsx  | 23 +++++++++--
 .../siem/public/components/notes/index.tsx    | 38 ++++++++-----------
 .../notes/note_card/note_card_body.tsx        |  2 +-
 .../public/components/notes/translations.ts   | 12 +++---
 .../timeline/properties/notes_size.ts         |  2 +-
 .../translations/translations/ja-JP.json      |  1 -
 9 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/x-pack/plugins/siem/public/components/notes/add_note/new_note.test.tsx b/x-pack/plugins/siem/public/components/notes/add_note/new_note.test.tsx
index 3047a5e8a8a1bc..3ab556a4e5dc4c 100644
--- a/x-pack/plugins/siem/public/components/notes/add_note/new_note.test.tsx
+++ b/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)"', () => {
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx b/x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx
index ad0945d5ac176c..ae71601f05c314 100644
--- a/x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx
+++ b/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}
diff --git a/x-pack/plugins/siem/public/components/notes/columns.tsx b/x-pack/plugins/siem/public/components/notes/columns.tsx
index 4987180645156f..837d5f75decf98 100644
--- a/x-pack/plugins/siem/public/components/notes/columns.tsx
+++ b/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 }) => (
diff --git a/x-pack/plugins/siem/public/components/notes/helpers.tsx b/x-pack/plugins/siem/public/components/notes/helpers.tsx
index 5a30aca8c53651..7254506c04d243 100644
--- a/x-pack/plugins/siem/public/components/notes/helpers.tsx
+++ b/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` */
diff --git a/x-pack/plugins/siem/public/components/notes/index.tsx b/x-pack/plugins/siem/public/components/notes/index.tsx
index f47466bfaf8bd3..096a04553c5d68 100644
--- a/x-pack/plugins/siem/public/components/notes/index.tsx
+++ b/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>
     );
   }
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx b/x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx
index ffa7ed6b3e1b70..cf6321c3a8774d 100644
--- a/x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx
+++ b/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>
       }
diff --git a/x-pack/plugins/siem/public/components/notes/translations.ts b/x-pack/plugins/siem/public/components/notes/translations.ts
index b55da593e8619f..93aa4f5ca204e2 100644
--- a/x-pack/plugins/siem/public/components/notes/translations.ts
+++ b/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)',
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/notes_size.ts b/x-pack/plugins/siem/public/components/timeline/properties/notes_size.ts
index de69b0d191ae91..3a01df8f48a3f8 100644
--- a/x-pack/plugins/siem/public/components/timeline/properties/notes_size.ts
+++ b/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;
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 1762df7426b58e..75a9d0443c7368 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9271,7 +9271,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": "キャンセル",