Skip to content

Commit

Permalink
[Security] [Cases] Attach timeline to existing case (elastic#68580)
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephmilovic
stephmilovic committed Jun 9, 2020
1 parent bc7276a commit 48e47ee
Show file tree
Hide file tree
Showing 29 changed files with 1,166 additions and 939 deletions.
32 changes: 32 additions & 0 deletions x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
import React, { useCallback, useEffect } from 'react';
import styled from 'styled-components';

import { useDispatch } from 'react-redux';
import { CommentRequest } from '../../../../../case/common/api';
import { usePostComment } from '../../containers/use_post_comment';
import { Case } from '../../containers/types';
Expand All @@ -18,6 +19,12 @@ import { Form, useForm, UseField } from '../../../shared_imports';

import * as i18n from './translations';
import { schema } from './schema';
import {
dispatchUpdateTimeline,
queryTimelineById,
} from '../../../timelines/components/open_timeline/helpers';
import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/store/timeline/actions';
import { useApolloClient } from '../../../common/utils/apollo_context';

const MySpinner = styled(EuiLoadingSpinner)`
position: absolute;
Expand Down Expand Up @@ -46,6 +53,8 @@ export const AddComment = React.memo<AddCommentProps>(
options: { stripEmptyFields: false },
schema,
});
const dispatch = useDispatch();
const apolloClient = useApolloClient();
const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(
form,
'comment'
Expand All @@ -62,6 +71,28 @@ export const AddComment = React.memo<AddCommentProps>(
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [insertQuote]);

const handleTimelineClick = useCallback(
(timelineId: string) => {
queryTimelineById({
apolloClient,
timelineId,
updateIsLoading: ({
id: currentTimelineId,
isLoading: isLoadingTimeline,
}: {
id: string;
isLoading: boolean;
}) =>
dispatch(
dispatchUpdateIsLoading({ id: currentTimelineId, isLoading: isLoadingTimeline })
),
updateTimeline: dispatchUpdateTimeline(dispatch),
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[apolloClient]
);

const onSubmit = useCallback(async () => {
const { isValid, data } = await form.submit();
if (isValid) {
Expand All @@ -86,6 +117,7 @@ export const AddComment = React.memo<AddCommentProps>(
dataTestSubj: 'add-comment',
placeholder: i18n.ADD_COMMENT_HELP_TEXT,
onCursorPositionUpdate: handleCursorChange,
onClickTimeline: handleTimelineClick,
bottomRightContent: (
<EuiButton
data-test-subj="submit-comment"
Expand Down
274 changes: 142 additions & 132 deletions x-pack/plugins/security_solution/public/cases/components/all_cases/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@
*/
import React, { useCallback } from 'react';
import {
EuiBadge,
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiAvatar,
EuiBadge,
EuiLink,
EuiTableActionsColumnType,
EuiTableComputedColumnType,
EuiTableFieldDataColumnType,
HorizontalAlignment,
} from '@elastic/eui';
import styled from 'styled-components';
import { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types';
Expand Down Expand Up @@ -39,142 +40,151 @@ const renderStringField = (field: string, dataTestSubj: string) =>

export const getCasesColumns = (
actions: Array<DefaultItemIconButtonAction<Case>>,
filterStatus: string
): CasesColumns[] => [
{
name: i18n.NAME,
render: (theCase: Case) => {
if (theCase.id != null && theCase.title != null) {
const caseDetailsLinkComponent = (
<CaseDetailsLink detailName={theCase.id} title={theCase.title}>
{theCase.title}
</CaseDetailsLink>
);
return theCase.status === 'open' ? (
caseDetailsLinkComponent
) : (
<>
<MediumShadeText>
filterStatus: string,
isModal: boolean
): CasesColumns[] => {
const columns = [
{
name: i18n.NAME,
render: (theCase: Case) => {
if (theCase.id != null && theCase.title != null) {
const caseDetailsLinkComponent = !isModal ? (
<CaseDetailsLink detailName={theCase.id} title={theCase.title}>
{theCase.title}
</CaseDetailsLink>
) : (
<span>{theCase.title}</span>
);
return theCase.status === 'open' ? (
caseDetailsLinkComponent
) : (
<>
{caseDetailsLinkComponent}
<Spacer>{i18n.CLOSED}</Spacer>
</MediumShadeText>
</>
);
}
return getEmptyTagValue();
<Spacer>
<MediumShadeText>{i18n.CLOSED}</MediumShadeText>
</Spacer>
</>
);
}
return getEmptyTagValue();
},
},
},
{
field: 'createdBy',
name: i18n.REPORTER,
render: (createdBy: Case['createdBy']) => {
if (createdBy != null) {
return (
<>
<EuiAvatar
className="userAction__circle"
name={createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
size="s"
/>
<Spacer data-test-subj="case-table-column-createdBy">
{createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
</Spacer>
</>
);
}
return getEmptyTagValue();
{
field: 'createdBy',
name: i18n.REPORTER,
render: (createdBy: Case['createdBy']) => {
if (createdBy != null) {
return (
<>
<EuiAvatar
className="userAction__circle"
name={createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
size="s"
/>
<Spacer data-test-subj="case-table-column-createdBy">
{createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
</Spacer>
</>
);
}
return getEmptyTagValue();
},
},
{
field: 'tags',
name: i18n.TAGS,
render: (tags: Case['tags']) => {
if (tags != null && tags.length > 0) {
return (
<TruncatableText>
{tags.map((tag: string, i: number) => (
<EuiBadge
color="hollow"
key={`${tag}-${i}`}
data-test-subj={`case-table-column-tags-${i}`}
>
{tag}
</EuiBadge>
))}
</TruncatableText>
);
}
return getEmptyTagValue();
},
truncateText: true,
},
},
{
field: 'tags',
name: i18n.TAGS,
render: (tags: Case['tags']) => {
if (tags != null && tags.length > 0) {
return (
<TruncatableText>
{tags.map((tag: string, i: number) => (
<EuiBadge
color="hollow"
key={`${tag}-${i}`}
data-test-subj={`case-table-column-tags-${i}`}
>
{tag}
</EuiBadge>
))}
</TruncatableText>
);
}
return getEmptyTagValue();
{
align: 'right' as HorizontalAlignment,
field: 'totalComment',
name: i18n.COMMENTS,
sortable: true,
render: (totalComment: Case['totalComment']) =>
totalComment != null
? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
: getEmptyTagValue(),
},
truncateText: true,
},
{
align: 'right',
field: 'totalComment',
name: i18n.COMMENTS,
sortable: true,
render: (totalComment: Case['totalComment']) =>
totalComment != null
? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
: getEmptyTagValue(),
},
filterStatus === 'open'
? {
field: 'createdAt',
name: i18n.OPENED_ON,
sortable: true,
render: (createdAt: Case['createdAt']) => {
if (createdAt != null) {
return (
<span data-test-subj={`case-table-column-createdAt`}>
<FormattedRelativePreferenceDate value={createdAt} />
</span>
);
}
return getEmptyTagValue();
},
}
: {
field: 'closedAt',
name: i18n.CLOSED_ON,
sortable: true,
render: (closedAt: Case['closedAt']) => {
if (closedAt != null) {
return (
<span data-test-subj={`case-table-column-closedAt`}>
<FormattedRelativePreferenceDate value={closedAt} />
</span>
);
}
return getEmptyTagValue();
filterStatus === 'open'
? {
field: 'createdAt',
name: i18n.OPENED_ON,
sortable: true,
render: (createdAt: Case['createdAt']) => {
if (createdAt != null) {
return (
<span data-test-subj={`case-table-column-createdAt`}>
<FormattedRelativePreferenceDate value={createdAt} />
</span>
);
}
return getEmptyTagValue();
},
}
: {
field: 'closedAt',
name: i18n.CLOSED_ON,
sortable: true,
render: (closedAt: Case['closedAt']) => {
if (closedAt != null) {
return (
<span data-test-subj={`case-table-column-closedAt`}>
<FormattedRelativePreferenceDate value={closedAt} />
</span>
);
}
return getEmptyTagValue();
},
},
{
name: i18n.EXTERNAL_INCIDENT,
render: (theCase: Case) => {
if (theCase.id != null) {
return <ExternalServiceColumn theCase={theCase} />;
}
return getEmptyTagValue();
},
{
name: i18n.EXTERNAL_INCIDENT,
render: (theCase: Case) => {
if (theCase.id != null) {
return <ExternalServiceColumn theCase={theCase} />;
}
return getEmptyTagValue();
},
},
{
name: i18n.INCIDENT_MANAGEMENT_SYSTEM,
render: (theCase: Case) => {
if (theCase.externalService != null) {
return renderStringField(
`${theCase.externalService.connectorName}`,
`case-table-column-connector`
);
}
return getEmptyTagValue();
{
name: i18n.INCIDENT_MANAGEMENT_SYSTEM,
render: (theCase: Case) => {
if (theCase.externalService != null) {
return renderStringField(
`${theCase.externalService.connectorName}`,
`case-table-column-connector`
);
}
return getEmptyTagValue();
},
},
{
name: i18n.ACTIONS,
actions,
},
},
{
name: i18n.ACTIONS,
actions,
},
];
];
if (isModal) {
columns.pop(); // remove actions if in modal
}
return columns;
};

interface Props {
theCase: Case;
Expand Down
16 changes: 15 additions & 1 deletion x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,22 @@ describe('AllCases', () => {
expect(column.find('.euiTableRowCell--hideForDesktop').text()).toEqual(columnName);
expect(column.find('span').text()).toEqual(emptyTag);
};
getCasesColumns([], 'open').map((i, key) => i.name != null && checkIt(`${i.name}`, key));
getCasesColumns([], 'open', false).map((i, key) => i.name != null && checkIt(`${i.name}`, key));
});

it('should not render case link or actions on modal=true', () => {
const wrapper = mount(
<TestProviders>
<AllCases userCanCrud={true} isModal={true} />
</TestProviders>
);
const checkIt = (columnName: string) => {
expect(columnName).not.toEqual(i18n.ACTIONS);
};
getCasesColumns([], 'open', true).map((i, key) => i.name != null && checkIt(`${i.name}`));
expect(wrapper.find(`a[data-test-subj="case-details-link"]`).exists()).toBeFalsy();
});

it('should tableHeaderSortButton AllCases', () => {
const wrapper = mount(
<TestProviders>
Expand Down
Loading

0 comments on commit 48e47ee

Please sign in to comment.