[Security Solution][Timeline] fix wrong add to favorite within timeli…

…ne guided tour (elastic#175993)
CoenWarmer · Feb 15, 2024 · a8fc2d8 · a8fc2d8
1 parent 1495e87
commit a8fc2d8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
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
@@ -30,10 +30,10 @@ jest.mock('react-redux', () => {
   };
 });
 
-const renderAddFavoritesButton = () =>
+const renderAddFavoritesButton = (isPartOfGuidedTour = false) =>
   render(
     <TestProviders>
-      <AddToFavoritesButton timelineId="timeline-1" />
+      <AddToFavoritesButton timelineId="timeline-1" isPartOfGuidedTour={isPartOfGuidedTour} />
     </TestProviders>
   );
 
@@ -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
@@ -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<AddToFavoritesButtonProps>(({ timelineId }) => {
-  const dispatch = useDispatch();
-  const { isFavorite, status } = useSelector((state: State) =>
-    selectTimelineById(state, timelineId)
-  );
+export const AddToFavoritesButton = React.memo<AddToFavoritesButtonProps>(
+  ({ 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 (
-    <EuiButtonIcon
-      id={TIMELINE_TOUR_CONFIG_ANCHORS.ADD_TO_FAVORITES}
-      iconType={isFavorite ? 'starFilled' : 'starEmpty'}
-      isSelected={isFavorite}
-      disabled={isTimelineDraftOrImmutable}
-      aria-label={label}
-      title={label}
-      data-test-subj={`timeline-favorite-${isFavorite ? 'filled' : 'empty'}-star`}
-      onClick={handleClick}
-    >
-      {label}
-    </EuiButtonIcon>
-  );
-});
+    return (
+      <EuiButtonIcon
+        id={isPartOfGuidedTour ? TIMELINE_TOUR_CONFIG_ANCHORS.ADD_TO_FAVORITES : undefined}
+        iconType={isFavorite ? 'starFilled' : 'starEmpty'}
+        isSelected={isFavorite}
+        disabled={isTimelineDraftOrImmutable}
+        aria-label={label}
+        title={label}
+        data-test-subj={`timeline-favorite-${isFavorite ? 'filled' : 'empty'}-star`}
+        onClick={handleClick}
+      >
+        {label}
+      </EuiButtonIcon>
+    );
+  }
+);
 
 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
@@ -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
@@ -120,7 +120,7 @@ export const TimelineModalHeader = React.memo<FlyoutHeaderPanelProps>(({ timelin
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
-              <AddToFavoritesButton timelineId={timelineId} />
+              <AddToFavoritesButton timelineId={timelineId} isPartOfGuidedTour />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText