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
-
+