diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.test.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.test.tsx index 383750e05a006..d19337d3fb3fb 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.test.tsx @@ -15,11 +15,17 @@ import { import { AttachToActiveTimeline } from './attach_to_active_timeline'; import { createMockStore, mockGlobalState, TestProviders } from '../../../../common/mock'; import { TimelineId } from '../../../../../common/types'; +import { useUserPrivileges } from '../../../../common/components/user_privileges'; + +jest.mock('../../../../common/components/user_privileges'); const mockSetAttachToTimeline = jest.fn(); describe('AttachToActiveTimeline', () => { it('should render the component for an unsaved timeline', () => { + (useUserPrivileges as jest.Mock).mockReturnValue({ + kibanaSecuritySolutionsPrivileges: { crud: true }, + }); const mockStore = createMockStore({ ...mockGlobalState, timeline: { @@ -43,14 +49,15 @@ describe('AttachToActiveTimeline', () => { ); expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveStyle('background-color: #FEC514'); + expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveTextContent('Save timeline'); expect(queryByTestId(ATTACH_TO_TIMELINE_CHECKBOX_TEST_ID)).not.toBeInTheDocument(); - + expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toHaveClass('euiCallOut--warning'); expect(getByText('Attach to timeline')).toBeInTheDocument(); expect( getByText('Before attaching a note to the timeline, you need to save the timeline first.') ).toBeInTheDocument(); - - expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument(); }); it('should render the saved timeline texts in the callout', () => { @@ -76,13 +83,15 @@ describe('AttachToActiveTimeline', () => { /> ); - expect(getByTestId(ATTACH_TO_TIMELINE_CHECKBOX_TEST_ID)).toBeInTheDocument(); + expect(queryByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).not.toBeInTheDocument(); + expect(getByTestId(ATTACH_TO_TIMELINE_CHECKBOX_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toHaveClass('euiCallOut--primary'); expect(getByText('Attach to timeline')).toBeInTheDocument(); expect( getByText('You can associate the newly created note to the active timeline.') ).toBeInTheDocument(); - expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument(); }); it('should call the callback when user click on the checkbox', () => { diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.tsx index 278830da7e27f..05e3d1fef6ca5 100644 --- a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.tsx +++ b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.tsx @@ -93,7 +93,7 @@ export const AttachToActiveTimeline = memo( return ( )} diff --git a/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.test.tsx index 8a05a42f7cd25..de1ccc5e7587b 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.test.tsx @@ -58,11 +58,12 @@ describe('SaveTimelineButton', () => { expect(getByTestId('timeline-modal-save-timeline')).toBeInTheDocument(); expect(getByText('Save')).toBeInTheDocument(); + expect(getByTestId('timeline-modal-save-timeline')).toHaveStyle('background-color: #07C'); expect(queryByTestId('save-timeline-modal')).not.toBeInTheDocument(); }); - it('should override the default text in the button', async () => { + it('should override the default text and color of the button', async () => { (useUserPrivileges as jest.Mock).mockReturnValue({ kibanaSecuritySolutionsPrivileges: { crud: true }, }); @@ -73,14 +74,20 @@ describe('SaveTimelineButton', () => { }); (useCreateTimeline as jest.Mock).mockReturnValue({}); - const { getByText, queryByText } = render( + const { getByTestId, getByText, queryByText } = render( - + ); expect(queryByText('Save')).not.toBeInTheDocument(); expect(getByText('TEST')).toBeInTheDocument(); + expect(getByTestId('TEST_ID')).toHaveStyle('background-color: #FEC514'); }); it('should open the timeline save modal', async () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx b/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx index 3a85022db9fbf..523c12223b5c6 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx @@ -6,6 +6,7 @@ */ import React, { useCallback, useState } from 'react'; +import type { EuiButtonProps } from '@elastic/eui'; import { EuiButton, EuiToolTip } from '@elastic/eui'; import { useSelector } from 'react-redux'; import { TimelineStatusEnum } from '../../../../../common/api/timeline'; @@ -25,6 +26,10 @@ export interface SaveTimelineButtonProps { * Ability to customize the text of the button */ buttonText?: string; + /** + * Ability to customize the color of the button + */ + buttonColor?: EuiButtonProps['color']; /** * Optional data-test-subj value */ @@ -39,6 +44,7 @@ export const SaveTimelineButton = React.memo( ({ timelineId, buttonText = i18n.SAVE, + buttonColor = 'primary', 'data-test-subj': dataTestSubj = 'timeline-modal-save-timeline', }) => { const [showEditTimelineOverlay, setShowEditTimelineOverlay] = useState(false); @@ -72,6 +78,7 @@ export const SaveTimelineButton = React.memo( id={TIMELINE_TOUR_CONFIG_ANCHORS.SAVE_TIMELINE} fill size="s" + color={buttonColor} iconType="save" isLoading={isSaving} disabled={!canSaveTimeline} diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.test.tsx index 7730424befee7..36a45e993674f 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.test.tsx @@ -11,9 +11,16 @@ import { SaveTimelineCallout } from './save_timeline'; import { SAVE_TIMELINE_BUTTON_TEST_ID, SAVE_TIMELINE_CALLOUT_TEST_ID } from './test_ids'; import { createMockStore, mockGlobalState, TestProviders } from '../../../common/mock'; import { TimelineId } from '../../../../common/types'; +import { useUserPrivileges } from '../../../common/components/user_privileges'; + +jest.mock('../../../common/components/user_privileges'); describe('SaveTimelineCallout', () => { it('should render the callout and save components', () => { + (useUserPrivileges as jest.Mock).mockReturnValue({ + kibanaSecuritySolutionsPrivileges: { crud: true }, + }); + const mockStore = createMockStore({ ...mockGlobalState, timeline: { @@ -33,11 +40,13 @@ describe('SaveTimelineCallout', () => { ); + expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toBeInTheDocument(); + expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveStyle('background-color: #BD271E'); + expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveTextContent('Save timeline'); expect(getByTestId(SAVE_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument(); expect(getAllByText('Save timeline')).toHaveLength(2); expect( getByText('You need to save your timeline before creating notes for it.') ).toBeInTheDocument(); - expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.tsx index f31822561c54b..0c0a56f2699d3 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.tsx @@ -39,7 +39,7 @@ export const SaveTimelineCallout = memo(() => { return ( {