addresses comments

elastic · Feb 13, 2024 · be35f69 · jpdjere · Feb 13, 2024 · be35f69
1 parent b401e9e
commit be35f69
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 43 deletions.
diff --git a/...n/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx b/...n/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/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx b/...ponents/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/...nt_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx b/...nt_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 ? (