[SIEM] Fix draft timeline can be attached to a case

elastic · Jun 1, 2020 · e3ca444 · e3ca444
1 parent 96e0e91
commit e3ca444
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 29 deletions.
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/header/index.tsx
@@ -39,6 +39,7 @@ const StatefulFlyoutHeader = React.memo<Props>(
     title,
     noteIds,
     notesById,
+    status,
     timelineId,
     toggleLock,
     updateDescription,
@@ -62,6 +63,7 @@ const StatefulFlyoutHeader = React.memo<Props>(
         isFavorite={isFavorite}
         title={title}
         noteIds={noteIds}
+        status={status}
         timelineId={timelineId}
         toggleLock={toggleLock}
         updateDescription={updateDescription}
@@ -94,6 +96,7 @@ const makeMapStateToProps = () => {
       kqlQuery,
       title = '',
       noteIds = emptyNotesId,
+      status,
     } = timeline;
 
     const history = emptyHistory; // TODO: get history from store via selector
@@ -107,6 +110,7 @@ const makeMapStateToProps = () => {
       isFavorite,
       isDatepickerLocked: globalInput.linkTo.includes('timeline'),
       noteIds,
+      status,
       title,
     };
   };

diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/helpers.tsx
@@ -23,6 +23,7 @@ import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
+import { TimelineStatus } from '../../../../../common/types/timeline';
 import { Note } from '../../../../common/lib/note';
 import { Notes } from '../../notes';
 import { AssociateNote, UpdateNote } from '../../notes/helpers';
@@ -119,40 +120,44 @@ Name.displayName = 'Name';
 interface NewCaseProps {
   onClosePopover: () => void;
   timelineId: string;
+  timelineStatus: TimelineStatus;
   timelineTitle: string;
 }
 
-export const NewCase = React.memo<NewCaseProps>(({ onClosePopover, timelineId, timelineTitle }) => {
-  const history = useHistory();
-  const { savedObjectId } = useSelector((state: State) =>
-    timelineSelectors.selectTimeline(state, timelineId)
-  );
-  const handleClick = useCallback(() => {
-    onClosePopover();
-    history.push({
-      pathname: `/${SiemPageName.case}/create`,
-      state: {
-        insertTimeline: {
-          timelineId,
-          timelineSavedObjectId: savedObjectId,
-          timelineTitle: timelineTitle.length > 0 ? timelineTitle : i18n.UNTITLED_TIMELINE,
+export const NewCase = React.memo<NewCaseProps>(
+  ({ onClosePopover, timelineId, timelineStatus, timelineTitle }) => {
+    const history = useHistory();
+    const { savedObjectId } = useSelector((state: State) =>
+      timelineSelectors.selectTimeline(state, timelineId)
+    );
+    const handleClick = useCallback(() => {
+      onClosePopover();
+      history.push({
+        pathname: `/${SiemPageName.case}/create`,
+        state: {
+          insertTimeline: {
+            timelineId,
+            timelineSavedObjectId: savedObjectId,
+            timelineTitle: timelineTitle.length > 0 ? timelineTitle : i18n.UNTITLED_TIMELINE,
+          },
         },
-      },
-    });
-  }, [onClosePopover, history, timelineId, timelineTitle]);
+      });
+    }, [onClosePopover, history, timelineId, timelineTitle]);
 
-  return (
-    <EuiButtonEmpty
-      data-test-subj="attach-timeline-case"
-      color="text"
-      iconSide="left"
-      iconType="paperClip"
-      onClick={handleClick}
-    >
-      {i18n.ATTACH_TIMELINE_TO_NEW_CASE}
-    </EuiButtonEmpty>
-  );
-});
+    return (
+      <EuiButtonEmpty
+        data-test-subj="attach-timeline-case"
+        color="text"
+        iconSide="left"
+        iconType="paperClip"
+        disabled={timelineStatus === TimelineStatus.draft}
+        onClick={handleClick}
+      >
+        {i18n.ATTACH_TIMELINE_TO_NEW_CASE}
+      </EuiButtonEmpty>
+    );
+  }
+);
 NewCase.displayName = 'NewCase';
 
 interface NewTimelineProps {

diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.test.tsx
@@ -8,6 +8,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 
+import { TimelineStatus } from '../../../../../common/types/timeline';
 import {
   mockGlobalState,
   apolloClientObservable,
@@ -50,6 +51,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -76,6 +78,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -103,6 +106,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -132,6 +136,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -159,6 +164,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -191,6 +197,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -222,6 +229,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -256,6 +264,7 @@ describe('Properties', () => {
           description={description}
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -292,6 +301,7 @@ describe('Properties', () => {
           description={description}
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -326,6 +336,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -360,6 +371,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -392,6 +404,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -421,6 +434,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}
@@ -448,6 +462,7 @@ describe('Properties', () => {
           description=""
           getNotesByIds={jest.fn()}
           noteIds={[]}
+          status={TimelineStatus.active}
           timelineId="abc"
           toggleLock={jest.fn()}
           updateDescription={jest.fn()}

diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.tsx
@@ -6,6 +6,7 @@
 
 import React, { useState, useCallback, useMemo } from 'react';
 
+import { TimelineStatus } from '../../../../../common/types/timeline';
 import { useThrottledResizeObserver } from '../../../../common/components/utils';
 import { Note } from '../../../../common/lib/note';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
@@ -31,6 +32,7 @@ interface Props {
   isFavorite: boolean;
   noteIds: string[];
   timelineId: string;
+  status: TimelineStatus;
   title: string;
   toggleLock: ToggleLock;
   updateDescription: UpdateDescription;
@@ -62,6 +64,7 @@ export const Properties = React.memo<Props>(
     isDatepickerLocked,
     isFavorite,
     noteIds,
+    status,
     timelineId,
     title,
     toggleLock,
@@ -140,6 +143,7 @@ export const Properties = React.memo<Props>(
           showNotesFromWidth={width < showNotesThreshold}
           showTimelineModal={showTimelineModal}
           showUsersView={title.length > 0}
+          status={status}
           timelineId={timelineId}
           title={title}
           updateDescription={updateDescription}

diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_right.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_right.tsx
@@ -22,6 +22,7 @@ import { InspectButton, InspectButtonContainer } from '../../../../common/compon
 import * as i18n from './translations';
 import { AssociateNote } from '../../notes/helpers';
 import { Note } from '../../../../common/lib/note';
+import { TimelineStatus } from '../../../../../common/types/timeline';
 
 export const PropertiesRightStyle = styled(EuiFlexGroup)`
   margin-right: 5px;
@@ -79,6 +80,7 @@ interface Props {
   onCloseTimelineModal: () => void;
   onOpenTimelineModal: () => void;
   showTimelineModal: boolean;
+  status: TimelineStatus;
   title: string;
   updateNote: UpdateNote;
 }
@@ -106,6 +108,7 @@ const PropertiesRightComponent: React.FC<Props> = ({
   onCloseTimelineModal,
   onOpenTimelineModal,
   title,
+  status,
 }) => (
   <PropertiesRightStyle alignItems="flexStart" data-test-subj="properties-right" gutterSize="s">
     <EuiFlexItem grow={false}>
@@ -142,6 +145,7 @@ const PropertiesRightComponent: React.FC<Props> = ({
                 onClosePopover={onClosePopover}
                 timelineId={timelineId}
                 timelineTitle={title}
+                timelineStatus={status}
               />
             </EuiFlexItem>
 

diff --git a/x-pack/plugins/siem/public/timelines/containers/one/index.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/one/index.gql_query.ts
@@ -128,6 +128,7 @@ export const oneTimelineQuery = gql`
         updatedBy
         version
       }
+      status
       title
       timelineType
       templateTimelineId