From be35f698d69dd1262869ec7197dfb466800cd32b Mon Sep 17 00:00:00 2001
From: Davis Plumlee <davis.plumlee@elastic.co>
Date: Tue, 13 Feb 2024 11:01:16 -0500
Subject: [PATCH] addresses comments

---
 .../rule_details/rule_details_flyout.tsx      |  3 ++
 .../upgrade_prebuilt_rules_table_context.tsx  |  2 +
 .../upgrade_prebuilt_rules_tour.tsx           | 52 ++++---------------
 3 files changed, 14 insertions(+), 43 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx
index c2d00c819253a..d6507115bcd48 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx
@@ -109,6 +109,7 @@ interface RuleDetailsFlyoutProps {
   size?: EuiFlyoutProps['size'];
   extraTabs?: EuiTabbedContentTab[];
   dataTestSubj?: string;
+  id?: string;
   closeFlyout: () => void;
 }
 
@@ -118,6 +119,7 @@ export const RuleDetailsFlyout = ({
   size = 'm',
   extraTabs = [],
   dataTestSubj,
+  id,
   closeFlyout,
 }: RuleDetailsFlyoutProps) => {
   const { expandedOverviewSections, toggleOverviewSection } = useOverviewTabSections();
@@ -181,6 +183,7 @@ export const RuleDetailsFlyout = ({
 
   return (
     <EuiFlyout
+      id={id}
       size={size}
       onClose={closeFlyout}
       ownFocus={false}
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx
index ee3e438e1f37b..dde8a74de1a93 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx
+++ b/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,6 +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';
 
 export interface UpgradePrebuiltRulesTableState {
   /**
@@ -343,6 +344,7 @@ export const UpgradePrebuiltRulesTableContextProvider = ({
           <RuleDetailsFlyout
             rule={previewedRule}
             size={isJsonPrebuiltRulesDiffingEnabled ? 'l' : 'm'}
+            id={PREBUILT_RULE_UPDATE_FLYOUT_ANCHOR}
             dataTestSubj="updatePrebuiltRulePreview"
             closeFlyout={closeRulePreview}
             ruleActions={
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx
index bbd4122fe1142..cfb2d7bade30d 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx
@@ -11,15 +11,7 @@ import type {
   EuiTourState,
   EuiTourStepProps,
 } from '@elastic/eui';
-import {
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiText,
-  EuiTourStep,
-  useEuiTour,
-} from '@elastic/eui';
+import { EuiText, EuiTourStep, useEuiTour } from '@elastic/eui';
 import { noop } from 'lodash';
 import type { FC } from 'react';
 import React, { useEffect, useMemo } from 'react';
@@ -34,6 +26,7 @@ export interface RulesFeatureTourContextType {
 }
 
 export const PER_FIELD_UPGRADE_TOUR_ANCHOR = 'perFieldUpgradeTour';
+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;
@@ -68,51 +61,24 @@ export const PrebuiltRulesUpgradeTour: FC = () => {
     [storage]
   );
 
-  const [tourSteps, tourActions, tourState] = useEuiTour(stepsConfig, restoredState);
+  const [tourSteps, , tourState] = useEuiTour(stepsConfig, restoredState);
 
   useEffect(() => {
     const { isTourActive, currentTourStep } = tourState;
     storage.set(TOUR_STORAGE_KEY, { isTourActive, currentTourStep });
   }, [tourState, storage]);
 
-  const shouldShowRuleUpgradeTour = useIsElementMounted(PER_FIELD_UPGRADE_TOUR_ANCHOR);
+  const isTourAnchorMounted = useIsElementMounted(PER_FIELD_UPGRADE_TOUR_ANCHOR);
+  const isFlyoutOpen = useIsElementMounted(PREBUILT_RULE_UPDATE_FLYOUT_ANCHOR);
+  const shouldShowRuleUpgradeTour = isTourAnchorMounted && !isFlyoutOpen;
 
   const enhancedSteps = useMemo(
     () =>
-      tourSteps.map((item, index) => ({
+      tourSteps.map((item) => ({
         ...item,
-        content: (
-          <>
-            {item.content}
-            {tourSteps.length > 1 && (
-              <>
-                <EuiSpacer size="s" />
-                <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      iconType="arrowLeft"
-                      aria-label={'previous'}
-                      display="empty"
-                      disabled={index === 0}
-                      onClick={tourActions.decrementStep}
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      iconType="arrowRight"
-                      aria-label={'next'}
-                      display="base"
-                      disabled={index === tourSteps.length - 1}
-                      onClick={tourActions.incrementStep}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </>
-            )}
-          </>
-        ),
+        content: item.content,
       })),
-    [tourSteps, tourActions]
+    [tourSteps]
   );
 
   return shouldShowRuleUpgradeTour ? (