addresses comments

x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/tab_navigation.tsx

@@ -25,7 +25,6 @@ const TabNavigationItemComponent = ({
   isSelected,
   isBeta,
   betaOptions,
-  tourAnchor,
 }: TabNavigationItemProps) => {
   const { getAppUrl, navigateTo } = useNavigation();
 
@@ -51,7 +50,7 @@ const TabNavigationItemComponent = ({
       href={appHref}
       onClick={handleClick}
       append={isBeta && <EuiBadge color={'#E0E5EE'}>{betaOptions?.text ?? BETA}</EuiBadge>}
-      id={tourAnchor}
+      id={id}
     >
       {name}
     </EuiTab>
@@ -98,7 +97,6 @@ export const TabNavigationComponent: React.FC<TabNavigationProps> = ({ navTabs }
             isSelected={isSelected}
             isBeta={tab.isBeta}
             betaOptions={tab.betaOptions}
-            tourAnchor={tab.tourAnchor}
           />
         );
       }),

x-pack/plugins/security_solution/public/common/components/navigation/tab_navigation/types.ts

@@ -21,5 +21,4 @@ export interface TabNavigationItemProps {
   betaOptions?: {
     text: string;
   };
-  tourAnchor?: string;
 }

x-pack/plugins/security_solution/public/common/components/navigation/types.ts

@@ -42,5 +42,4 @@ export interface NavTab {
   betaOptions?: {
     text: string;
   };
-  tourAnchor?: string;
 }

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/json_diff/translations.ts

@@ -17,20 +17,6 @@ export const EXPAND_UNCHANGED_LINES = (linesCount: number) =>
     }
   );
 
-export const BASE_VERSION = i18n.translate(
-  'xpack.securitySolution.detectionEngine.rules.upgradeRules.baseVersionLabel',
-  {
-    defaultMessage: 'Base version',
-  }
-);
-
-export const BASE_VERSION_DESCRIPTION = i18n.translate(
-  'xpack.securitySolution.detectionEngine.rules.upgradeRules.baseVersionDescriptionLabel',
-  {
-    defaultMessage: 'Shows currently installed rule',
-  }
-);
-
 export const CURRENT_RULE_VERSION = i18n.translate(
   'xpack.securitySolution.detectionEngine.rules.upgradeRules.currentVersionLabel',
   {

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_diff_tab.tsx

@@ -150,13 +150,13 @@ export const RuleDiffTab = ({ oldRule, newRule }: RuleDiffTabProps) => {
           <EuiFlexGroup alignItems="baseline" gutterSize="xs">
             <EuiIconTip
               color="subdued"
-              content={i18n.BASE_VERSION_DESCRIPTION}
+              content={i18n.CURRENT_VERSION_DESCRIPTION}
               type="iInCircle"
               size="m"
               display="block"
             />
             <EuiTitle size="xxxs">
-              <h6>{i18n.BASE_VERSION}</h6>
+              <h6>{i18n.CURRENT_RULE_VERSION}</h6>
             </EuiTitle>
           </EuiFlexGroup>
           <EuiFlexGroup alignItems="baseline" gutterSize="xs">

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/feature_tour/rules_feature_tour.tsx

@@ -22,17 +22,19 @@ import {
 } from '@elastic/eui';
 import { noop } from 'lodash';
 import type { FC } from 'react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { NEW_FEATURES_TOUR_STORAGE_KEYS } from '../../../../../../common/constants';
 import { useKibana } from '../../../../../common/lib/kibana';
+import { useIsElementMounted } from '../rules_table/guided_onboarding/use_is_element_mounted';
 import * as i18n from './translations';
 
 export interface RulesFeatureTourContextType {
   steps: EuiTourStepProps[];
   actions: EuiTourActions;
 }
 
-export const SEARCH_CAPABILITIES_TOUR_ANCHOR = 'search-capabilities-tour-anchor';
+export const PER_FIELD_UPGRADE_TOUR_ANCHOR = 'updates';
+export const PREBUILT_RULE_UPDATE_FLYOUT_ANCHOR = 'updatePrebuiltRulePreview';
 
 const TOUR_STORAGE_KEY = NEW_FEATURES_TOUR_STORAGE_KEYS.RULE_MANAGEMENT_PAGE;
 const TOUR_POPOVER_WIDTH = 400;
@@ -41,22 +43,22 @@ const tourConfig: EuiTourState = {
   currentTourStep: 1,
   isTourActive: true,
   tourPopoverWidth: TOUR_POPOVER_WIDTH,
-  tourSubtitle: i18n.TOUR_TITLE,
+  tourSubtitle: '',
 };
 
 const stepsConfig: EuiStatelessTourStep[] = [
   {
     step: 1,
-    title: i18n.SEARCH_CAPABILITIES_TITLE,
-    content: <EuiText>{i18n.SEARCH_CAPABILITIES_DESCRIPTION}</EuiText>,
+    title: i18n.UPDATE_TOUR_TITLE,
+    content: <EuiText>{i18n.UPDATE_TOUR_DESCRIPTION}</EuiText>,
     stepsTotal: 1,
     children: <></>,
     onFinish: noop,
     maxWidth: TOUR_POPOVER_WIDTH,
   },
 ];
 
-export const RulesFeatureTour: FC = () => {
+export const RuleFeatureTour: FC = () => {
   const { storage } = useKibana().services;
 
   const restoredState = useMemo<EuiTourState>(
@@ -74,28 +76,9 @@ export const RulesFeatureTour: FC = () => {
     storage.set(TOUR_STORAGE_KEY, { isTourActive, currentTourStep });
   }, [tourState, storage]);
 
-  const [shouldShowSearchCapabilitiesTour, setShouldShowSearchCapabilitiesTour] = useState(false);
-
-  useEffect(() => {
-    /**
-     * Wait until the tour target elements are visible on the page and mount
-     * EuiTourStep components only after that. Otherwise, the tours would never
-     * show up on the page.
-     */
-    const observer = new MutationObserver(() => {
-      if (document.querySelector(`#${SEARCH_CAPABILITIES_TOUR_ANCHOR}`)) {
-        setShouldShowSearchCapabilitiesTour(true);
-        observer.disconnect();
-      }
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => observer.disconnect();
-  }, []);
+  const isTourAnchorMounted = useIsElementMounted(PER_FIELD_UPGRADE_TOUR_ANCHOR);
+  const isFlyoutOpen = useIsElementMounted(PREBUILT_RULE_UPDATE_FLYOUT_ANCHOR);
+  const shouldShowRuleUpgradeTour = isTourAnchorMounted && !isFlyoutOpen;
 
   const enhancedSteps = useMemo(
     () =>
@@ -135,7 +118,7 @@ export const RulesFeatureTour: FC = () => {
     [tourSteps, tourActions]
   );
 
-  return shouldShowSearchCapabilitiesTour ? (
+  return shouldShowRuleUpgradeTour ? (
     <EuiTourStep
       {...enhancedSteps[0]}
       /**
@@ -144,7 +127,7 @@ export const RulesFeatureTour: FC = () => {
        */
       // eslint-disable-next-line react/no-children-prop
       children={undefined}
-      anchor={`#${SEARCH_CAPABILITIES_TOUR_ANCHOR}`}
+      anchor={`#${PER_FIELD_UPGRADE_TOUR_ANCHOR}`}
       anchorPosition="downCenter"
     />
   ) : null;

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/feature_tour/translations.ts

@@ -28,17 +28,17 @@ export const NEXT_STEP_LABEL = i18n.translate(
   }
 );
 
-export const SEARCH_CAPABILITIES_TITLE = i18n.translate(
-  'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.searchCapabilitiesTitle',
+export const UPDATE_TOUR_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.updateTourTitle',
   {
-    defaultMessage: 'Enhanced search capabilities',
+    defaultMessage: 'New field view of updates',
   }
 );
 
-export const SEARCH_CAPABILITIES_DESCRIPTION = i18n.translate(
-  'xpack.securitySolution.detectionEngine.rules.allRules.featureTour.searchCapabilitiesDescription',
+export const UPDATE_TOUR_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.ruleDetails.updateTourDescription',
   {
     defaultMessage:
-      'It is now possible to search rules by index patterns, like "filebeat-*", or by MITRE ATT&CK™ tactics or techniques, like "Defense Evasion" or "TA0005".',
+      'You can now view the diff of updates in the flyout by clicking on the rule name.',
   }
 );

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table_toolbar.tsx

@@ -17,7 +17,6 @@ import { getPromptContextFromDetectionRules } from '../../../../assistant/helper
 import { useRulesTableContext } from './rules_table/rules_table_context';
 import { useAssistantAvailability } from '../../../../assistant/use_assistant_availability';
 import * as i18nAssistant from '../../../../detections/pages/detection_engine/rules/translations';
-import { PER_FIELD_UPGRADE_TOUR_ANCHOR } from './upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour';
 
 export enum AllRulesTabs {
   management = 'management',
@@ -71,7 +70,6 @@ export const RulesTableToolbar = React.memo(() => {
               betaOptions: {
                 text: `${updateTotal}`,
               },
-              tourAnchor: PER_FIELD_UPGRADE_TOUR_ANCHOR,
             },
           }
         : {}),

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/translations.ts

@@ -38,21 +38,6 @@ export const UPDATE_BUTTON_LABEL = i18n.translate(
   }
 );
 
-export const UPDATE_TOUR_TITLE = i18n.translate(
-  'xpack.securitySolution.detectionEngine.ruleDetails.updateTourTitle',
-  {
-    defaultMessage: 'New field view of updates',
-  }
-);
-
-export const UPDATE_TOUR_DESCRIPTION = i18n.translate(
-  'xpack.securitySolution.detectionEngine.ruleDetails.updateTourDescription',
-  {
-    defaultMessage:
-      'You can now view the diff of updates in the flyout by clicking on the rule name.',
-  }
-);
-
 export const UPDATE_FLYOUT_PER_FIELD_TOOLTIP_DESCRIPTION = i18n.translate(
   'xpack.securitySolution.detectionEngine.ruleDetails.perFieldTooltip',
   {

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx

@@ -35,7 +35,7 @@ import { MlJobUpgradeModal } from '../../../../../detections/components/modals/m
 import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
 import * as ruleDetailsI18n from '../../../../rule_management/components/rule_details/translations';
 import * as i18n from './translations';
-import { PREBUILT_RULE_UPDATE_FLYOUT_ANCHOR } from './upgrade_prebuilt_rules_tour';
+import { PREBUILT_RULE_UPDATE_FLYOUT_ANCHOR } from '../feature_tour/rules_feature_tour';
 
 export interface UpgradePrebuiltRulesTableState {
   /**

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx

@@ -9,6 +9,7 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/
 import { MaintenanceWindowCallout } from '@kbn/alerts-ui-shared';
 import React, { useCallback } from 'react';
 import { DEFAULT_APP_CATEGORIES } from '@kbn/core-application-common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { APP_UI_ID } from '../../../../../common/constants';
 import { SecurityPageName } from '../../../../app/types';
 import { ImportDataModal } from '../../../../common/components/import_data_modal';
@@ -35,7 +36,7 @@ import { AllRules } from '../../components/rules_table';
 import { RulesTableContextProvider } from '../../components/rules_table/rules_table/rules_table_context';
 import { useInvalidateFetchCoverageOverviewQuery } from '../../../rule_management/api/hooks/use_fetch_coverage_overview_query';
 import { HeaderPage } from '../../../../common/components/header_page';
-import { PrebuiltRulesUpgradeTour } from '../../components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour';
+import { RuleFeatureTour } from '../../components/rules_table/feature_tour/rules_feature_tour';
 
 const RulesPageComponent: React.FC = () => {
   const [isImportModalVisible, showImportModal, hideImportModal] = useBoolState();
@@ -54,6 +55,9 @@ const RulesPageComponent: React.FC = () => {
     invalidateFetchRuleManagementFilters,
     invalidateFetchCoverageOverviewQuery,
   ]);
+  const isPerFieldPrebuiltRulesDiffingEnabled = useIsExperimentalFeatureEnabled(
+    'perFieldPrebuiltRulesDiffingEnabled'
+  );
 
   const [
     {
@@ -173,7 +177,7 @@ const RulesPageComponent: React.FC = () => {
             kibanaServices={kibanaServices}
             categories={[DEFAULT_APP_CATEGORIES.security.id]}
           />
-          <PrebuiltRulesUpgradeTour />
+          {isPerFieldPrebuiltRulesDiffingEnabled && <RuleFeatureTour />}
           <AllRules data-test-subj="all-rules" />
         </SecuritySolutionPageWrapper>
       </RulesTableContextProvider>