fix title of delete modal

elastic · Mar 19, 2020 · 6aaaca2 · 6aaaca2
1 parent b1465a8
commit 6aaaca2
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 34 deletions.
diff --git a/...siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx b/...siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
@@ -15,7 +15,7 @@ describe('DeleteTimelineModal', () => {
   test('it renders the expected title when a timeline is selected', () => {
     const wrapper = mountWithIntl(
       <DeleteTimelineModal
-        title={'"Privilege Escalation"'}
+        title={'Privilege Escalation'}
         onDelete={jest.fn()}
         closeModal={jest.fn()}
       />
@@ -32,7 +32,7 @@ describe('DeleteTimelineModal', () => {
   test('it trims leading whitespace around the title', () => {
     const wrapper = mountWithIntl(
       <DeleteTimelineModal
-        title={'    "Leading and trailing whitespace"    '}
+        title={'    Leading and trailing whitespace    '}
         onDelete={jest.fn()}
         closeModal={jest.fn()}
       />

diff --git a/...gins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx b/...gins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
@@ -6,51 +6,50 @@
 
 import { EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
+import { isEmpty } from 'lodash/fp';
 
 import * as i18n from '../translations';
 
 interface Props {
-  title?: string | JSX.Element | null;
+  title?: string | null;
   onDelete: () => void;
   closeModal: () => void;
 }
 
 export const DELETE_TIMELINE_MODAL_WIDTH = 600; // px
 
-const getDeletedTitles = (title: string | JSX.Element | null | undefined) => {
-  if (title != null && React.isValidElement(title)) {
-    return title;
-  } else if (title != null && typeof title === 'string' && title.trim().length > 0) {
-    return title.trim();
-  }
-  return `"${i18n.UNTITLED_TIMELINE}"`;
-};
-
 /**
  * Renders a modal that confirms deletion of a timeline
  */
-export const DeleteTimelineModal = React.memo<Props>(({ title, closeModal, onDelete }) => (
-  <EuiConfirmModal
-    buttonColor="danger"
-    cancelButtonText={i18n.CANCEL}
-    confirmButtonText={i18n.DELETE}
-    defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
-    onCancel={closeModal}
-    onConfirm={onDelete}
-    title={
+export const DeleteTimelineModal = React.memo<Props>(({ title, closeModal, onDelete }) => {
+  const getTitle = useCallback(() => {
+    const trimmedTitle = title != null ? title.trim() : '';
+    const titleResult = !isEmpty(trimmedTitle) ? trimmedTitle : i18n.UNTITLED_TIMELINE;
+    return (
       <FormattedMessage
         id="xpack.siem.open.timeline.deleteTimelineModalTitle"
+        defaultMessage={'Delete "{title}"?'}
         data-test-subj="title"
-        defaultMessage="Delete {title}?"
         values={{
-          title: getDeletedTitles(title),
+          title: titleResult,
         }}
       />
-    }
-  >
-    <div data-test-subj="warning">{i18n.DELETE_WARNING}</div>
-  </EuiConfirmModal>
-));
+    );
+  }, [title]);
+  return (
+    <EuiConfirmModal
+      buttonColor="danger"
+      cancelButtonText={i18n.CANCEL}
+      confirmButtonText={i18n.DELETE}
+      defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+      onCancel={closeModal}
+      onConfirm={onDelete}
+      title={getTitle()}
+    >
+      <div data-test-subj="warning">{i18n.DELETE_WARNING}</div>
+    </EuiConfirmModal>
+  );
+});
 
 DeleteTimelineModal.displayName = 'DeleteTimelineModal';
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx
@@ -21,7 +21,7 @@ interface Props {
   onComplete?: () => void;
   isModalOpen: boolean;
   savedObjectIds: string[];
-  title: string | JSX.Element | null;
+  title: string | null;
 }
 /**
  * Renders a button that when clicked, displays the `Delete Timeline` modal

diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/edit_timeline_batch_actions.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/edit_timeline_batch_actions.tsx
@@ -74,7 +74,7 @@ export const useEditTimelinBatchActions = ({
             title={
               selectedItems?.length !== 1
                 ? i18n.SELECTED_TIMELINES(selectedItems?.length ?? 0)
-                : `"${selectedItems[0]?.title}"`
+                : selectedItems[0]?.title ?? ''
             }
           />
 

diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx
@@ -104,7 +104,7 @@ export const OpenTimeline = React.memo<OpenTimelineProps>(
           isDeleteTimelineModalOpen={isDeleteTimelineModalOpen}
           isEnableDownloader={isEnableDownloader}
           onComplete={onCompleteEditTimelineAction}
-          title={actionItem?.title ?? i18n.SELECTED_TIMELINES(1)}
+          title={actionItem?.title ?? i18n.UNTITLED_TIMELINE}
         />
 
         <EuiPanel className={OPEN_TIMELINE_CLASS_NAME}>

diff --git a/x-pack/legacy/plugins/siem/server/lib/timeline/routes/utils.ts b/x-pack/legacy/plugins/siem/server/lib/timeline/routes/utils.ts
@@ -80,16 +80,17 @@ const getGlobalEventNotesByTimelineId = (currentNotes: NoteSavedObject[]): Expor
 
   return (
     currentNotes.reduce((acc, note) => {
-      if (note.eventId == null)
+      if (note.eventId == null) {
         return {
           ...acc,
           globalNotes: [...acc.globalNotes, note],
         };
-      else
+      } else {
         return {
           ...acc,
           eventNotes: [...acc.eventNotes, note],
         };
+      }
     }, initialNotes) ?? initialNotes
   );
 };