Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
May 28, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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)"', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/siem/public/components/notes/columns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => (
Expand Down
23 changes: 19 additions & 4 deletions x-pack/plugins/siem/public/components/notes/helpers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -46,16 +47,30 @@ export const search = {
};

const TitleText = styled.h3`
margin: 0 5px;
cursor: default;
user-select: none;
`;

/** Displays a count of the existing notes */
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` */
Expand Down
38 changes: 16 additions & 22 deletions x-pack/plugins/siem/public/components/notes/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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)}
Expand All @@ -89,7 +83,7 @@ export class Notes extends React.PureComponent<Props, State> {
search={search}
sorting={true}
/>
</NotesContainer>
</EuiModalBody>
</NotesPanel>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
12 changes: 7 additions & 5 deletions x-pack/plugins/siem/public/components/notes/translations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
*/

export const NOTES_PANEL_WIDTH = 1024;
export const NOTES_PANEL_HEIGHT = 633;
export const NOTES_PANEL_HEIGHT = 750;
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "キャンセル",
Expand Down
1 change: 0 additions & 1 deletion x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "取消",
Expand Down