diff --git a/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.test.tsx index f64375e1327ac..39f40dc74ed9e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.test.tsx @@ -30,10 +30,10 @@ jest.mock('react-redux', () => { }; }); -const renderAddFavoritesButton = () => +const renderAddFavoritesButton = (isPartOfGuidedTour = false) => render( - + ); @@ -49,6 +49,7 @@ describe('AddToFavoritesButton', () => { const button = getByTestId('timeline-favorite-empty-star'); expect(button).toBeInTheDocument(); + expect(button).toHaveProperty('id', ''); expect(button.firstChild).toHaveAttribute('data-euiicon-type', 'starEmpty'); expect(queryByTestId('timeline-favorite-filled-star')).not.toBeInTheDocument(); }); @@ -86,4 +87,17 @@ describe('AddToFavoritesButton', () => { expect(getByTestId('timeline-favorite-filled-star')).toBeInTheDocument(); expect(queryByTestId('timeline-favorite-empty-star')).not.toBeInTheDocument(); }); + + it('should use id for guided tour if prop is true', () => { + mockGetState.mockReturnValue({ + ...mockTimelineModel, + status: TimelineStatus.active, + }); + + const { getByTestId } = renderAddFavoritesButton(true); + + const button = getByTestId('timeline-favorite-empty-star'); + + expect(button).toHaveProperty('id', 'add-to-favorites'); + }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.tsx index b1f0b03b4cff1..06055802e2fff 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/add_to_favorites/index.tsx @@ -34,40 +34,46 @@ interface AddToFavoritesButtonProps { * Id of the timeline to be displayed in the bottom bar and within the modal */ timelineId: string; + /** + * Whether the button is a step in the timeline guided tour + */ + isPartOfGuidedTour?: boolean; } /** * This component renders the add to favorites button for timeline. * It is used in the bottom bar as well as in the timeline modal's header. */ -export const AddToFavoritesButton = React.memo(({ timelineId }) => { - const dispatch = useDispatch(); - const { isFavorite, status } = useSelector((state: State) => - selectTimelineById(state, timelineId) - ); +export const AddToFavoritesButton = React.memo( + ({ timelineId, isPartOfGuidedTour = false }) => { + const dispatch = useDispatch(); + const { isFavorite, status } = useSelector((state: State) => + selectTimelineById(state, timelineId) + ); - const isTimelineDraftOrImmutable = status !== TimelineStatus.active; - const label = isFavorite ? REMOVE_FROM_FAVORITES : ADD_TO_FAVORITES; + const isTimelineDraftOrImmutable = status !== TimelineStatus.active; + const label = isFavorite ? REMOVE_FROM_FAVORITES : ADD_TO_FAVORITES; - const handleClick = useCallback( - () => dispatch(timelineActions.updateIsFavorite({ id: timelineId, isFavorite: !isFavorite })), - [dispatch, timelineId, isFavorite] - ); + const handleClick = useCallback( + () => dispatch(timelineActions.updateIsFavorite({ id: timelineId, isFavorite: !isFavorite })), + [dispatch, timelineId, isFavorite] + ); - return ( - - {label} - - ); -}); + return ( + + {label} + + ); + } +); AddToFavoritesButton.displayName = 'AddToFavoritesButton'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/bottom_bar/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/bottom_bar/index.test.tsx index 686a631736550..05828ff9aface 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/bottom_bar/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/bottom_bar/index.test.tsx @@ -32,6 +32,7 @@ describe('TimelineBottomBar', () => { expect(getByTestId('timeline-event-count-badge')).toBeInTheDocument(); expect(getByTestId('timeline-save-status')).toBeInTheDocument(); expect(getByTestId('timeline-favorite-empty-star')).toBeInTheDocument(); + expect(getByTestId('timeline-favorite-empty-star')).toHaveProperty('id', ''); }); test('should not render the event count badge if timeline is open', () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/modal/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/modal/header/index.tsx index 1fd1dc77c80a7..aca4fda13f697 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/modal/header/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/modal/header/index.tsx @@ -120,7 +120,7 @@ export const TimelineModalHeader = React.memo(({ timelin - +