[Security Solution] Removes obselete Timeline Tour - New Features (#1…

…97385) ## Summary Handles #197295 This PR removes the obselete timeline tour which was introduced in `8.12` and may not be relevant now in `8.16`. From the perspective of users directly to `8.16` from `8.11`. I guess it might be okay for users to expect considerable changes that may have happened between `8.11` and `8.16` and a tour might not be necessary 🤷
elastic · Oct 25, 2024 · 663a339 · 663a339
1 parent da402ef
commit 663a339
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 605 deletions.
diff --git a/x-pack/plugins/fleet/cypress/tasks/common.ts b/x-pack/plugins/fleet/cypress/tasks/common.ts
@@ -67,7 +67,6 @@ export const internalRequest = <T = unknown>({
 const NEW_FEATURES_TOUR_STORAGE_KEYS = {
   RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.9',
   TIMELINES: 'securitySolution.security.timelineFlyoutHeader.saveTimelineTour',
-  TIMELINE: 'securitySolution.timeline.newFeaturesTour.v8.12',
   FLYOUT: 'securitySolution.documentDetails.newFeaturesTour.v8.14',
 };
 

diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts
@@ -422,7 +422,6 @@ export const RULES_TABLE_MAX_PAGE_SIZE = 100;
 export const NEW_FEATURES_TOUR_STORAGE_KEYS = {
   RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.13',
   TIMELINES: 'securitySolution.security.timelineFlyoutHeader.saveTimelineTour',
-  TIMELINE: 'securitySolution.timeline.newFeaturesTour.v8.12',
   FLYOUT: 'securitySolution.documentDetails.newFeaturesTour.v8.14',
 };
 

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 = (isPartOfGuidedTour = false) =>
+const renderAddFavoritesButton = () =>
   render(
     <TestProviders>
-      <AddToFavoritesButton timelineId="timeline-1" isPartOfGuidedTour={isPartOfGuidedTour} />
+      <AddToFavoritesButton timelineId="timeline-1" />
     </TestProviders>
   );
 
@@ -87,17 +87,4 @@ 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: TimelineStatusEnum.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
@@ -13,7 +13,6 @@ import type { State } from '../../../common/store';
 import { selectTimelineById } from '../../store/selectors';
 import { timelineActions } from '../../store';
 import { TimelineStatusEnum } from '../../../../common/api/timeline';
-import { TIMELINE_TOUR_CONFIG_ANCHORS } from '../timeline/tour/step_config';
 
 const ADD_TO_FAVORITES = i18n.translate(
   'xpack.securitySolution.timeline.addToFavoriteButtonLabel',
@@ -34,46 +33,39 @@ 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, isPartOfGuidedTour = false }) => {
-    const dispatch = useDispatch();
-    const { isFavorite, status } = useSelector((state: State) =>
-      selectTimelineById(state, timelineId)
-    );
+export const AddToFavoritesButton = React.memo<AddToFavoritesButtonProps>(({ timelineId }) => {
+  const dispatch = useDispatch();
+  const { isFavorite, status } = useSelector((state: State) =>
+    selectTimelineById(state, timelineId)
+  );
 
-    const isTimelineDraftOrImmutable = status !== TimelineStatusEnum.active;
-    const label = isFavorite ? REMOVE_FROM_FAVORITES : ADD_TO_FAVORITES;
+  const isTimelineDraftOrImmutable = status !== TimelineStatusEnum.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={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>
-    );
-  }
-);
+  return (
+    <EuiButtonIcon
+      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/...gins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx b/...gins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx
@@ -15,7 +15,6 @@ import { SaveTimelineModal } from './save_timeline_modal';
 import * as i18n from './translations';
 import { selectTimelineById } from '../../../store/selectors';
 import type { State } from '../../../../common/store';
-import { TIMELINE_TOUR_CONFIG_ANCHORS } from '../../timeline/tour/step_config';
 
 export interface SaveTimelineButtonProps {
   /**
@@ -75,7 +74,6 @@ export const SaveTimelineButton = React.memo<SaveTimelineButtonProps>(
           data-test-subj="timeline-modal-save-timeline-tooltip"
         >
           <EuiButton
-            id={TIMELINE_TOUR_CONFIG_ANCHORS.SAVE_TIMELINE}
             fill
             size="s"
             color={buttonColor}

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
@@ -18,7 +18,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import styled from 'styled-components';
-import { TIMELINE_TOUR_CONFIG_ANCHORS } from '../../timeline/tour/step_config';
 import { NewTimelineButton } from '../actions/new_timeline_button';
 import { OpenTimelineButton } from '../actions/open_timeline_button';
 import { APP_ID } from '../../../../../common';
@@ -125,7 +124,7 @@ export const TimelineModalHeader = React.memo<FlyoutHeaderPanelProps>(
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
               <EuiFlexItem grow={false}>
-                <AddToFavoritesButton timelineId={timelineId} isPartOfGuidedTour />
+                <AddToFavoritesButton timelineId={timelineId} />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiText
@@ -143,7 +142,6 @@ export const TimelineModalHeader = React.memo<FlyoutHeaderPanelProps>(
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup
-              id={TIMELINE_TOUR_CONFIG_ANCHORS.ACTION_MENU}
               justifyContent="flexEnd"
               alignItems="center"
               gutterSize="xs"

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -12,13 +12,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { isTab } from '@kbn/timelines-plugin/public';
-import { useUserPrivileges } from '../../../common/components/user_privileges';
 import { timelineActions, timelineSelectors } from '../../store';
 import { timelineDefaults } from '../../store/defaults';
 import type { CellValueElementProps } from './cell_rendering';
 import { SourcererScopeName } from '../../../sourcerer/store/model';
 import { TimelineModalHeader } from '../modal/header';
-import type { TimelineId, RowRenderer, TimelineTabs } from '../../../../common/types/timeline';
+import type { TimelineId, RowRenderer } from '../../../../common/types/timeline';
 import { TimelineTypeEnum } from '../../../../common/api/timeline';
 import { useDeepEqualSelector, useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import type { State } from '../../../common/store';
@@ -30,7 +29,6 @@ import { useTimelineFullScreen } from '../../../common/containers/use_full_scree
 import { EXIT_FULL_SCREEN_CLASS_NAME } from '../../../common/components/exit_full_screen';
 import { useResolveConflict } from '../../../common/hooks/use_resolve_conflict';
 import { sourcererSelectors } from '../../../common/store';
-import { TimelineTour } from './tour';
 import { defaultUdtHeaders } from './unified_components/default_headers';
 
 const TimelineTemplateBadge = styled.div`
@@ -90,9 +88,6 @@ const StatefulTimelineComponent: React.FC<Props> = ({
     description,
     sessionViewConfig,
     initialized,
-    show: isOpen,
-    isLoading,
-    activeTab,
   } = useDeepEqualSelector((state) =>
     pick(
       [
@@ -112,10 +107,6 @@ const StatefulTimelineComponent: React.FC<Props> = ({
     )
   );
 
-  const {
-    kibanaSecuritySolutionsPrivileges: { crud: canEditTimeline },
-  } = useUserPrivileges();
-
   const { timelineFullScreen } = useTimelineFullScreen();
 
   useEffect(() => {
@@ -205,20 +196,6 @@ const StatefulTimelineComponent: React.FC<Props> = ({
   const timelineContext = useMemo(() => ({ timelineId }), [timelineId]);
   const resolveConflictComponent = useResolveConflict();
 
-  const showTimelineTour = isOpen && !isLoading && canEditTimeline;
-
-  const handleSwitchToTab = useCallback(
-    (tab: TimelineTabs) => {
-      dispatch(
-        timelineActions.setActiveTabTimeline({
-          id: timelineId,
-          activeTab: tab,
-        })
-      );
-    },
-    [timelineId, dispatch]
-  );
-
   return (
     <TimelineContext.Provider value={timelineContext}>
       <TimelineContainer
@@ -254,13 +231,6 @@ const StatefulTimelineComponent: React.FC<Props> = ({
           />
         </TimelineBody>
       </TimelineContainer>
-      {showTimelineTour ? (
-        <TimelineTour
-          activeTab={activeTab}
-          switchToTab={handleSwitchToTab}
-          timelineType={timelineType}
-        />
-      ) : null}
     </TimelineContext.Provider>
   );
 };

diff --git a/...urity_solution/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx b/...urity_solution/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
@@ -28,7 +28,6 @@ import {
   DATA_PROVIDER_HIDDEN_POPULATED,
   DATA_PROVIDER_VISIBLE,
 } from './translations';
-import { TIMELINE_TOUR_CONFIG_ANCHORS } from '../tour/step_config';
 
 interface Props {
   dataProviders: DataProvider[];
@@ -112,7 +111,7 @@ export const SearchOrFilter = React.memo<Props>(
             alignItems="flexStart"
             responsive={false}
           >
-            <EuiFlexItem grow={false} id={TIMELINE_TOUR_CONFIG_ANCHORS.DATA_VIEW}>
+            <EuiFlexItem grow={false}>
               <Sourcerer scope={SourcererScopeName.timeline} />
             </EuiFlexItem>
             <EuiFlexItem data-test-subj="timeline-search-or-filter-search-container" grow={1}>
@@ -143,7 +142,6 @@ export const SearchOrFilter = React.memo<Props>(
                 <EuiFlexItem grow={false}>
                   <EuiToolTip content={dataProviderIconTooltipContent}>
                     <EuiButtonIcon
-                      id={TIMELINE_TOUR_CONFIG_ANCHORS.DATA_PROVIDER}
                       color={buttonColor}
                       isSelected={isDataProviderVisible}
                       iconType="timeline"