From 91a35c20cef0c396a3f81b37c7335e713b79a490 Mon Sep 17 00:00:00 2001 From: Kristof C Date: Tue, 18 Jan 2022 16:49:59 -0600 Subject: [PATCH] =?UTF-8?q?Fix=20success=20message=20to=20show=20correct?= =?UTF-8?q?=20language=20based=20on=20timelin=E2=80=A6=20(#123258)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix success message to show correct language based on timeline type * Fix translation problems Co-authored-by: Kristof-Pierre Cummings --- .../components/flyout/header/index.tsx | 4 +- .../components/flyout/header/translations.ts | 13 ++++--- .../actions/add_to_timeline.test.tsx | 39 +++++++++++++++++++ .../hover_actions/actions/add_to_timeline.tsx | 24 ++++++++++-- .../hover_actions/actions/translations.tsx | 6 +-- .../timelines/public/mock/global_state.ts | 1 + .../public/mock/mock_timeline_data.ts | 1 + .../timelines/public/store/t_grid/model.ts | 1 + .../translations/translations/ja-JP.json | 2 - .../translations/translations/zh-CN.json | 2 - 10 files changed, 75 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx index 9c5b2887d2a8e..fba78be83fa36 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx @@ -180,9 +180,9 @@ const FlyoutHeaderPanelComponent: React.FC = ({ timeline )} - + + i18n.translate('xpack.securitySolution.timeline.flyout.header.closeTimelineButtonLabel', { + defaultMessage: 'Close {isTimeline, select, true {timeline} false {template}}', + values: { + isTimeline, + }, + }); export const UNSAVED = i18n.translate('xpack.securitySolution.timeline.properties.unsavedLabel', { defaultMessage: 'Unsaved', diff --git a/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.test.tsx b/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.test.tsx index 4c43bdde50df0..26300400dbcfd 100644 --- a/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.test.tsx +++ b/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.test.tsx @@ -11,9 +11,19 @@ import React from 'react'; import AddToTimelineButton, { ADD_TO_TIMELINE_KEYBOARD_SHORTCUT } from './add_to_timeline'; import { DataProvider, IS_OPERATOR } from '../../../../common/types'; +import { useDeepEqualSelector } from '../../../hooks/use_selector'; import { TestProviders } from '../../../mock'; import * as i18n from './translations'; +const mockAddSuccess = jest.fn(); +jest.mock('../../../hooks/use_app_toasts', () => ({ + useAppToasts: () => ({ + addSuccess: mockAddSuccess, + }), +})); + +jest.mock('../../../hooks/use_selector'); + const mockDispatch = jest.fn(); jest.mock('react-redux', () => { const originalModule = jest.requireActual('react-redux'); @@ -72,6 +82,7 @@ const providerB: DataProvider = { describe('add to timeline', () => { beforeEach(() => { jest.resetAllMocks(); + (useDeepEqualSelector as jest.Mock).mockReturnValue({ timelineType: 'default' }); }); const field = 'user.name'; @@ -369,4 +380,32 @@ describe('add to timeline', () => { }); }); }); + + describe('it shows the appropriate text based on timeline type', () => { + test('Add success is called with "timeline" if timeline type is timeline', () => { + render( + + + + ); + + fireEvent.click(screen.getByRole('button')); + + expect(mockAddSuccess).toBeCalledWith('Added a to timeline'); + }); + + test('Add success is called with "template" if timeline type is template', () => { + (useDeepEqualSelector as jest.Mock).mockReturnValue({ timelineType: 'template' }); + + render( + + + + ); + + fireEvent.click(screen.getByRole('button')); + + expect(mockAddSuccess).toBeCalledWith('Added a to template'); + }); + }); }); diff --git a/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx b/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx index 0ab5cb0956551..6cbfee6bec99f 100644 --- a/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx +++ b/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx @@ -9,10 +9,12 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { EuiContextMenuItem, EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import { DraggableId } from 'react-beautiful-dnd'; import { useDispatch } from 'react-redux'; - import { isEmpty } from 'lodash'; + import { stopPropagationAndPreventDefault } from '../../../../common/utils/accessibility'; import { DataProvider, TimelineId } from '../../../../common/types'; +import { useDeepEqualSelector } from '../../../hooks/use_selector'; +import { tGridSelectors } from '../../../types'; import { TooltipWithKeyboardShortcut } from '../../tooltip_with_keyboard_shortcut'; import { getAdditionalScreenReaderOnlyContext } from '../utils'; import { useAddToTimeline } from '../../../hooks/use_add_to_timeline'; @@ -67,6 +69,12 @@ const AddToTimelineButton: React.FC = React.memo( const dispatch = useDispatch(); const { addSuccess } = useAppToasts(); const startDragToTimeline = useGetHandleStartDragToTimeline({ draggableId, field }); + const getTGrid = tGridSelectors.getTGridByIdSelector(); + + const { timelineType } = useDeepEqualSelector((state) => { + return getTGrid(state, TimelineId.active); + }); + const handleStartDragToTimeline = useCallback(() => { if (draggableId != null) { startDragToTimeline(); @@ -80,7 +88,9 @@ const AddToTimelineButton: React.FC = React.memo( dataProvider: provider, }) ); - addSuccess(i18n.ADDED_TO_TIMELINE_MESSAGE(provider.name)); + addSuccess( + i18n.ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE(provider.name, timelineType === 'default') + ); } }); } @@ -88,7 +98,15 @@ const AddToTimelineButton: React.FC = React.memo( if (onClick != null) { onClick(); } - }, [addSuccess, onClick, dataProvider, dispatch, draggableId, startDragToTimeline]); + }, [ + addSuccess, + dataProvider, + dispatch, + draggableId, + onClick, + startDragToTimeline, + timelineType, + ]); useEffect(() => { if (!ownFocus) { diff --git a/x-pack/plugins/timelines/public/components/hover_actions/actions/translations.tsx b/x-pack/plugins/timelines/public/components/hover_actions/actions/translations.tsx index 2f8587ddfab49..10b20377f6c1c 100644 --- a/x-pack/plugins/timelines/public/components/hover_actions/actions/translations.tsx +++ b/x-pack/plugins/timelines/public/components/hover_actions/actions/translations.tsx @@ -11,8 +11,8 @@ export const ADD_TO_TIMELINE = i18n.translate('xpack.timelines.hoverActions.addT defaultMessage: 'Add to timeline investigation', }); -export const ADDED_TO_TIMELINE_MESSAGE = (fieldOrValue: string) => +export const ADDED_TO_TIMELINE_OR_TEMPLATE_MESSAGE = (fieldOrValue: string, isTimeline: boolean) => i18n.translate('xpack.timelines.hoverActions.addToTimeline.addedFieldMessage', { - values: { fieldOrValue }, - defaultMessage: `Added {fieldOrValue} to timeline`, + values: { fieldOrValue, isTimeline }, + defaultMessage: `Added {fieldOrValue} to {isTimeline, select, true {timeline} false {template}}`, }); diff --git a/x-pack/plugins/timelines/public/mock/global_state.ts b/x-pack/plugins/timelines/public/mock/global_state.ts index f02abfd50ae7e..fea8aa57b88dd 100644 --- a/x-pack/plugins/timelines/public/mock/global_state.ts +++ b/x-pack/plugins/timelines/public/mock/global_state.ts @@ -53,6 +53,7 @@ export const mockGlobalState: TimelineState = { queryFields: [], selectAll: false, title: 'Events', + timelineType: 'default', }, }, }; diff --git a/x-pack/plugins/timelines/public/mock/mock_timeline_data.ts b/x-pack/plugins/timelines/public/mock/mock_timeline_data.ts index 3f59ae3a15b68..363a67a30b978 100644 --- a/x-pack/plugins/timelines/public/mock/mock_timeline_data.ts +++ b/x-pack/plugins/timelines/public/mock/mock_timeline_data.ts @@ -1588,4 +1588,5 @@ export const mockTgridModel: TGridModel = { ], title: 'Test rule', version: '1', + timelineType: 'default', }; diff --git a/x-pack/plugins/timelines/public/store/t_grid/model.ts b/x-pack/plugins/timelines/public/store/t_grid/model.ts index 29e8b08d0e0e5..0640cfb845d9c 100644 --- a/x-pack/plugins/timelines/public/store/t_grid/model.ts +++ b/x-pack/plugins/timelines/public/store/t_grid/model.ts @@ -84,6 +84,7 @@ export interface TGridModel extends TGridModelSettings { /** Events selected on this timeline -- eventId to TimelineNonEcsData[] mapping of data required for bulk actions **/ selectedEventIds: Record; savedObjectId: string | null; + timelineType: 'default' | 'template'; version: string | null; initialized?: boolean; } diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index c796ff340eb0a..f03b4d07d336b 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -23643,7 +23643,6 @@ "xpack.securitySolution.timeline.failSearchDescription": "検索を実行できませんでした", "xpack.securitySolution.timeline.fieldTooltip": "フィールド", "xpack.securitySolution.timeline.file.fromOriginalPathDescription": "元のパスから", - "xpack.securitySolution.timeline.flyout.header.closeTimelineButtonLabel": "タイムラインを閉じる", "xpack.securitySolution.timeline.flyout.pane.removeColumnButtonLabel": "列を削除", "xpack.securitySolution.timeline.flyout.pane.timelinePropertiesAriaLabel": "タイムラインのプロパティ", "xpack.securitySolution.timeline.flyoutTimelineTemplateLabel": "タイムラインテンプレート", @@ -25025,7 +25024,6 @@ "xpack.timelines.footer.rowsPerPageLabel": "ページごとの行：{rowsPerPage}", "xpack.timelines.footer.totalCountOfEvents": "イベント", "xpack.timelines.hoverActions.addToTimeline": "タイムライン調査に追加", - "xpack.timelines.hoverActions.addToTimeline.addedFieldMessage": "{fieldOrValue}をタイムラインに追加しました", "xpack.timelines.hoverActions.columnToggleLabel": "表の{field}列を切り替える", "xpack.timelines.hoverActions.fieldLabel": "フィールド", "xpack.timelines.hoverActions.filterIn": "フィルタリング", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3388937227960..440de7312f437 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -24038,7 +24038,6 @@ "xpack.securitySolution.timeline.failSearchDescription": "无法运行搜索", "xpack.securitySolution.timeline.fieldTooltip": "字段", "xpack.securitySolution.timeline.file.fromOriginalPathDescription": "从其原始路径", - "xpack.securitySolution.timeline.flyout.header.closeTimelineButtonLabel": "关闭时间线", "xpack.securitySolution.timeline.flyout.pane.removeColumnButtonLabel": "移除列", "xpack.securitySolution.timeline.flyout.pane.timelinePropertiesAriaLabel": "时间线属性", "xpack.securitySolution.timeline.flyoutTimelineTemplateLabel": "时间线模板", @@ -25456,7 +25455,6 @@ "xpack.timelines.footer.rowsPerPageLabel": "每页行数：{rowsPerPage}", "xpack.timelines.footer.totalCountOfEvents": "事件", "xpack.timelines.hoverActions.addToTimeline": "添加到时间线调查", - "xpack.timelines.hoverActions.addToTimeline.addedFieldMessage": "已将 {fieldOrValue} 添加到时间线", "xpack.timelines.hoverActions.columnToggleLabel": "在表中切换 {field} 列", "xpack.timelines.hoverActions.fieldLabel": "字段", "xpack.timelines.hoverActions.filterIn": "筛选",