[Security Solutions][Timeline] Added createFrom in action to hide

x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.test.tsx

@@ -6,14 +6,38 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import { QueryBarDefineRule } from './index';
-import { useFormFieldMock } from '../../../../common/mock';
+import {
+  TestProviders,
+  useFormFieldMock,
+  mockOpenTimelineQueryResults,
+} from '../../../../common/mock';
+import { mockHistory, Router } from '../../../../cases/components/__mock__/router';
+import { useGetAllTimeline, getAllTimeline } from '../../../../timelines/containers/all';
 
 jest.mock('../../../../common/lib/kibana');
 
+jest.mock('../../../../timelines/containers/all', () => {
+  const originalModule = jest.requireActual('../../../../timelines/containers/all');
+  return {
+    ...originalModule,
+    useGetAllTimeline: jest.fn(),
+  };
+});
+
 describe('QueryBarDefineRule', () => {
+  beforeEach(() => {
+    ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
+      fetchAllTimeline: jest.fn(),
+      timelines: getAllTimeline('', mockOpenTimelineQueryResults.timeline ?? []),
+      loading: false,
+      totalCount: mockOpenTimelineQueryResults.totalCount,
+      refetch: jest.fn(),
+    });
+  });
+
   it('renders correctly', () => {
     const Component = () => {
       const field = useFormFieldMock();
@@ -32,7 +56,36 @@ describe('QueryBarDefineRule', () => {
       );
     };
     const wrapper = shallow(<Component />);
-
     expect(wrapper.dive().find('[data-test-subj="query-bar-define-rule"]')).toHaveLength(1);
   });
+
+  it('renders import query from saved timeline modal with no timeline action correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return (
+        <QueryBarDefineRule
+          browserFields={{}}
+          isLoading={false}
+          indexPattern={{ fields: [], title: 'title' }}
+          onCloseTimelineSearch={jest.fn()}
+          openTimelineSearch={true}
+          dataTestSubj="query-bar-define-rule"
+          idAria="idAria"
+          field={field}
+        />
+      );
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Component />
+        </Router>
+      </TestProviders>
+    );
+
+    const firstRow = wrapper.find('[data-test-subj="timelines-table"] table tbody tr').first();
+    const actionsCell = firstRow.find('.euiTableRowCell').last();
+    expect(actionsCell.find('.euiTableCellContent').isEmptyRender()).toBeTruthy();
+  });
 });

x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.tsx

@@ -253,7 +253,10 @@ export const QueryBarDefineRule = ({
     }
   };
 
-  const actionTimelineToHide = useMemo<ActionTimelineToShow[]>(() => ['duplicate'], []);
+  const actionTimelineToHide = useMemo<ActionTimelineToShow[]>(
+    () => ['duplicate', 'createFrom'],
+    []
+  );
 
   return (
     <>

x-pack/plugins/security_solution/public/timelines/components/flyout/add_timeline_button/index.test.tsx

@@ -7,16 +7,30 @@
 
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
 
 import { AddTimelineButton } from './';
 import { useKibana } from '../../../../common/lib/kibana';
 import { TimelineId } from '../../../../../common/types/timeline';
+import { mockOpenTimelineQueryResults, TestProviders } from '../../../../common/mock';
+import { mockHistory, Router } from '../../../../cases/components/__mock__/router';
+import { getAllTimeline, useGetAllTimeline } from '../../../containers/all';
+
+jest.mock('../../../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../../../common/lib/kibana');
+  return {
+    ...originalModule,
+    useKibana: jest.fn(),
+    useUiSetting$: jest.fn().mockReturnValue([]),
+  };
+});
 
-jest.mock('../../../../common/lib/kibana', () => ({
-  useKibana: jest.fn(),
-  useUiSetting$: jest.fn().mockReturnValue([]),
-}));
+jest.mock('../../../containers/all', () => {
+  const originalModule = jest.requireActual('../../../containers/all');
+  return {
+    ...originalModule,
+    useGetAllTimeline: jest.fn(),
+  };
+});
 
 jest.mock('../../timeline/properties/new_template_timeline', () => ({
   NewTemplateTimeline: jest.fn(() => <div data-test-subj="create-template-btn" />),
@@ -35,8 +49,7 @@ jest.mock('../../../../common/components/inspect', () => ({
   InspectButtonContainer: jest.fn(({ children }) => <div>{children}</div>),
 }));
 
-// FLAKY: https://github.com/elastic/kibana/issues/96691
-describe.skip('AddTimelineButton', () => {
+describe('AddTimelineButton', () => {
   let wrapper: ReactWrapper;
   const props = {
     timelineId: TimelineId.active,
@@ -67,24 +80,18 @@ describe.skip('AddTimelineButton', () => {
     });
 
     test('it renders create timeline btn', async () => {
-      await waitFor(() => {
-        wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click');
-        expect(wrapper.find('[data-test-subj="create-default-btn"]').exists()).toBeTruthy();
-      });
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      expect(wrapper.find('[data-test-subj="create-default-btn"]').exists()).toBeTruthy();
     });
 
     test('it renders create timeline template btn', async () => {
-      await waitFor(() => {
-        wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click');
-        expect(wrapper.find('[data-test-subj="create-template-btn"]').exists()).toBeTruthy();
-      });
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      expect(wrapper.find('[data-test-subj="create-template-btn"]').exists()).toBeTruthy();
     });
 
     test('it renders Open timeline btn', async () => {
-      await waitFor(() => {
-        wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click');
-        expect(wrapper.find('[data-test-subj="open-timeline-button"]').exists()).toBeTruthy();
-      });
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      expect(wrapper.find('[data-test-subj="open-timeline-button"]').exists()).toBeTruthy();
     });
   });
 
@@ -112,25 +119,71 @@ describe.skip('AddTimelineButton', () => {
       expect(wrapper.find('[data-test-subj="settings-plus-in-circle"]').exists()).toBeTruthy();
     });
 
-    test('it renders create timeline btn', async () => {
-      await waitFor(() => {
-        wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click');
-        expect(wrapper.find('[data-test-subj="create-default-btn"]').exists()).toBeTruthy();
-      });
+    test('it renders create timeline btn', () => {
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      expect(wrapper.find('[data-test-subj="create-default-btn"]').exists()).toBeTruthy();
     });
 
-    test('it renders create timeline template btn', async () => {
-      await waitFor(() => {
-        wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click');
-        expect(wrapper.find('[data-test-subj="create-template-btn"]').exists()).toBeTruthy();
-      });
+    test('it renders create timeline template btn', () => {
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      expect(wrapper.find('[data-test-subj="create-template-btn"]').exists()).toBeTruthy();
     });
 
-    test('it renders Open timeline btn', async () => {
-      await waitFor(() => {
-        wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click');
-        expect(wrapper.find('[data-test-subj="open-timeline-button"]').exists()).toBeTruthy();
+    test('it renders Open timeline btn', () => {
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      expect(wrapper.find('[data-test-subj="open-timeline-button"]').exists()).toBeTruthy();
+    });
+  });
+
+  describe('open modal', () => {
+    beforeEach(() => {
+      (useKibana as jest.Mock).mockReturnValue({
+        services: {
+          application: {
+            getUrlForApp: jest.fn(),
+            capabilities: {
+              siem: {
+                crud: true,
+              },
+            },
+          },
+        },
       });
+
+      ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
+        fetchAllTimeline: jest.fn(),
+        timelines: getAllTimeline('', mockOpenTimelineQueryResults.timeline ?? []),
+        loading: false,
+        totalCount: mockOpenTimelineQueryResults.totalCount,
+        refetch: jest.fn(),
+      });
+
+      wrapper = mount(
+        <TestProviders>
+          <Router history={mockHistory}>
+            <AddTimelineButton {...props} />
+          </Router>
+        </TestProviders>
+      );
+    });
+
+    afterEach(() => {
+      (useKibana as jest.Mock).mockReset();
+    });
+
+    it('should render timelines table', () => {
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      wrapper.find('[data-test-subj="open-timeline-button"]').first().simulate('click').update();
+
+      expect(wrapper.find('[data-test-subj="timelines-table"]').exists()).toBeTruthy();
+    });
+
+    it('should render correct actions', () => {
+      wrapper.find('[data-test-subj="settings-plus-in-circle"]').last().simulate('click').update();
+      wrapper.find('[data-test-subj="open-timeline-button"]').first().simulate('click').update();
+
+      expect(wrapper.find('[data-test-subj="open-duplicate"]').exists()).toBeTruthy();
+      expect(wrapper.find('[data-test-subj="create-from-template"]').exists()).toBeFalsy();
     });
   });
 });

x-pack/plugins/security_solution/public/timelines/components/flyout/add_timeline_button/index.tsx

@@ -10,6 +10,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { OpenTimelineModalButton } from '../../open_timeline/open_timeline_modal/open_timeline_modal_button';
 import { OpenTimelineModal } from '../../open_timeline/open_timeline_modal';
+import { ActionTimelineToShow } from '../../open_timeline/types';
 import * as i18n from '../../timeline/properties/translations';
 import { NewTimeline } from '../../timeline/properties/helpers';
 import { NewTemplateTimeline } from '../../timeline/properties/new_template_timeline';
@@ -47,6 +48,8 @@ const AddTimelineButtonComponent: React.FC<AddTimelineButtonComponentProps> = ({
     [onButtonClick]
   );
 
+  const actionTimelineToHide = useMemo<ActionTimelineToShow[]>(() => ['createFrom'], []);
+
   return (
     <>
       <EuiFlexItem grow={false}>
@@ -83,7 +86,9 @@ const AddTimelineButtonComponent: React.FC<AddTimelineButtonComponentProps> = ({
         </EuiPopover>
       </EuiFlexItem>
 
-      {showTimelineModal ? <OpenTimelineModal onClose={onCloseTimelineModal} /> : null}
+      {showTimelineModal ? (
+        <OpenTimelineModal onClose={onCloseTimelineModal} hideActions={actionTimelineToHide} />
+      ) : null}
     </>
   );
 };