Fix success message to show correct language based on timelin… (#123258)

* Fix success message to show correct language based on timeline type

* Fix translation problems

Co-authored-by: Kristof-Pierre Cummings <kristofpierre.cummings@elastic.co>

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(
+        <TestProviders>
+          <AddToTimelineButton dataProvider={providerA} field={field} ownFocus={false} />
+        </TestProviders>
+      );
+
+      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(
+        <TestProviders>
+          <AddToTimelineButton dataProvider={providerA} field={field} ownFocus={false} />
+        </TestProviders>
+      );
+
+      fireEvent.click(screen.getByRole('button'));
+
+      expect(mockAddSuccess).toBeCalledWith('Added a to template');
+    });
+  });
 });

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<AddToTimelineButtonProps> = 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<AddToTimelineButtonProps> = 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<AddToTimelineButtonProps> = React.memo(
       if (onClick != null) {
         onClick();
       }
-    }, [addSuccess, onClick, dataProvider, dispatch, draggableId, startDragToTimeline]);
+    }, [
+      addSuccess,
+      dataProvider,
+      dispatch,
+      draggableId,
+      onClick,
+      startDragToTimeline,
+      timelineType,
+    ]);
 
     useEffect(() => {
       if (!ownFocus) {

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}}`,
   });

x-pack/plugins/timelines/public/mock/global_state.ts

@@ -53,6 +53,7 @@ export const mockGlobalState: TimelineState = {
       queryFields: [],
       selectAll: false,
       title: 'Events',
+      timelineType: 'default',
     },
   },
 };

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',
 };

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<string, TimelineNonEcsData[]>;
   savedObjectId: string | null;
+  timelineType: 'default' | 'template';
   version: string | null;
   initialized?: boolean;
 }