[Security Solution] Fix pop up message (#86973)

angorayc · kibanamachine · web-flow · commit 9ed0bbddde13 · 2021-01-04T18:38:45.000Z
* fix wording

* update wording

* remove logic in translation

Co-authored-by: Kibana Machine &lt;42973632+kibanamachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { noop } from 'lodash/fp';
+import { noop, pick } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
 import { DropResult, DragDropContext } from 'react-beautiful-dnd';
 import { useDispatch } from 'react-redux';
@@ -18,10 +18,13 @@ import { timelineSelectors } from '../../../timelines/store/timeline';
 import { IdToDataProvider } from '../../store/drag_and_drop/model';
 import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
 import { reArrangeProviders } from '../../../timelines/components/timeline/data_providers/helpers';
-import { ADDED_TO_TIMELINE_MESSAGE } from '../../hooks/translations';
+import {
+  ADDED_TO_TIMELINE_MESSAGE,
+  ADDED_TO_TIMELINE_TEMPLATE_MESSAGE,
+} from '../../hooks/translations';
 import { useAddToTimelineSensor } from '../../hooks/use_add_to_timeline';
 import { displaySuccessToast, useStateToaster } from '../toasters';
-import { TimelineId } from '../../../../common/types/timeline';
+import { TimelineId, TimelineType } from '../../../../common/types/timeline';
 import {
   addFieldToTimelineColumns,
   addProviderToTimeline,
@@ -98,17 +101,27 @@ export const DragDropContextWrapperComponent: React.FC<Props> = ({ browserFields
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const getDataProviders = useMemo(() => dragAndDropSelectors.getDataProvidersSelector(), []);
 
-  const activeTimelineDataProviders = useDeepEqualSelector(
-    (state) => (getTimeline(state, TimelineId.active) ?? timelineDefaults)?.dataProviders
+  const {
+    dataProviders: activeTimelineDataProviders,
+    timelineType,
+  } = useDeepEqualSelector((state) =>
+    pick(
+      ['dataProviders', 'timelineType'],
+      getTimeline(state, TimelineId.active) ?? timelineDefaults
+    )
   );
   const dataProviders = useDeepEqualSelector(getDataProviders);
 
   const [, dispatchToaster] = useStateToaster();
   const onAddedToTimeline = useCallback(
     (fieldOrValue: string) => {
-      displaySuccessToast(ADDED_TO_TIMELINE_MESSAGE(fieldOrValue), dispatchToaster);
+      const message =
+        timelineType === TimelineType.template
+          ? ADDED_TO_TIMELINE_TEMPLATE_MESSAGE(fieldOrValue)
+          : ADDED_TO_TIMELINE_MESSAGE(fieldOrValue);
+      displaySuccessToast(message, dispatchToaster);
     },
-    [dispatchToaster]
+    [dispatchToaster, timelineType]
   );
 
   const onDragEnd = useCallback(
diff --git a/x-pack/plugins/security_solution/public/common/hooks/translations.ts b/x-pack/plugins/security_solution/public/common/hooks/translations.ts
@@ -12,6 +12,12 @@ export const ADDED_TO_TIMELINE_MESSAGE = (fieldOrValue: string) =>
     defaultMessage: `Added {fieldOrValue} to timeline`,
   });
 
+export const ADDED_TO_TIMELINE_TEMPLATE_MESSAGE = (fieldOrValue: string) =>
+  i18n.translate('xpack.securitySolution.hooks.useAddToTimeline.template.addedFieldMessage', {
+    values: { fieldOrValue },
+    defaultMessage: `Added {fieldOrValue} to timeline template`,
+  });
+
 export const STATUS_CODE = i18n.translate(
   'xpack.securitySolution.components.ml.api.errors.statusCodeFailureTitle',
   {
