[8.6] [Security Solution][Alerts] Add tour to rule management page for suppression and new terms multi fields (#145775) (#146479)

# Backport This will backport the following commits from `main` to `8.6`: - [[Security Solution][Alerts] Add tour to rule management page for suppression and new terms multi fields (#145775)](https://github.com/elastic/kibana/pull/145775)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Marshall Main <55718608+marshallmain@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2022-11-28 20:03:43 -05:00 · 2022-11-28 20:03:43 -05:00 · 5f8b171ee3
commit 5f8b171ee3
parent c4de26f9e0
4 changed files with 106 additions and 12 deletions
--- a/x-pack/plugins/security_solution/common/constants.ts
+++ b/x-pack/plugins/security_solution/common/constants.ts
@ -449,7 +449,7 @@ export const RULES_TABLE_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, RULES_TABLE_MAX_PAG
 * we will need to update these constants with the corresponding version.
 */
 export const NEW_FEATURES_TOUR_STORAGE_KEYS = {
-  RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.4',
+  RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.6',
 };

 export const RULE_DETAILS_EXECUTION_LOG_TABLE_SHOW_METRIC_COLUMNS_STORAGE_KEY =
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/alternative_tour/tour.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/alternative_tour/tour.tsx
@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiText, EuiTourStep } from '@elastic/eui';
+import React, { useCallback, useEffect, useState } from 'react';
+import { NEW_FEATURES_TOUR_STORAGE_KEYS } from '../../../../../../common/constants';
+import { useKibana } from '../../../../../common/lib/kibana';
+import * as i18n from './translations';
+
+export interface Props {
+  children: React.ReactElement;
+}
+
+export const RulesPageTourComponent: React.FC<Props> = ({ children }) => {
+  const tourConfig = {
+    currentTourStep: 1,
+    isTourActive: true,
+    tourPopoverWidth: 300,
+  };
+
+  const { storage } = useKibana().services;
+
+  const [tourState, setTourState] = useState(() => {
+    const restoredTourState = storage.get(NEW_FEATURES_TOUR_STORAGE_KEYS.RULE_MANAGEMENT_PAGE);
+
+    if (restoredTourState != null) {
+      return restoredTourState;
+    }
+    return tourConfig;
+  });
+
+  const demoTourSteps = [
+    {
+      step: 1,
+      title: i18n.CREATE_RULE_TOUR_TITLE,
+      content: <EuiText>{i18n.CREATE_RULE_TOUR_CONTENT}</EuiText>,
+    },
+  ];
+  const finishTour = useCallback(() => {
+    setTourState({
+      ...tourState,
+      isTourActive: false,
+    });
+  }, [tourState]);
+
+  useEffect(() => {
+    storage.set(NEW_FEATURES_TOUR_STORAGE_KEYS.RULE_MANAGEMENT_PAGE, tourState);
+  }, [tourState, storage]);
+
+  return (
+    <EuiTourStep
+      content={demoTourSteps[0].content}
+      isStepOpen={tourState.currentTourStep === 1 && tourState.isTourActive}
+      minWidth={tourState.tourPopoverWidth}
+      onFinish={finishTour}
+      step={1}
+      stepsTotal={demoTourSteps.length}
+      subtitle={tourState.tourSubtitle}
+      title={demoTourSteps[0].title}
+      anchorPosition="rightUp"
+    >
+      {children}
+    </EuiTourStep>
+  );
+};
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/alternative_tour/translations.ts
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/alternative_tour/translations.ts
@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const CREATE_RULE_TOUR_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.tour.createRuleTourTitle',
+  {
+    defaultMessage: 'New security rule features are available',
+  }
+);
+
+export const CREATE_RULE_TOUR_CONTENT = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.tour.createRuleTourContent',
+  {
+    defaultMessage: `Alert suppression options are now available for Custom Query rules and multiple fields can be selected in New Terms rules`,
+  }
+);
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx
@ -41,6 +41,7 @@ import { AllRules } from '../../components/rules_table';
 import { RulesTableContextProvider } from '../../components/rules_table/rules_table/rules_table_context';

 import * as i18n from '../../../../detections/pages/detection_engine/rules/translations';
+import { RulesPageTourComponent } from '../../components/rules_table/alternative_tour/tour';

 const RulesPageComponent: React.FC = () => {
  const [isImportModalVisible, showImportModal, hideImportModal] = useBoolState();
@ -140,17 +141,19 @@ const RulesPageComponent: React.FC = () => {
                  {i18n.IMPORT_RULE}
                </EuiButton>
              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <SecuritySolutionLinkButton
-                  data-test-subj="create-new-rule"
-                  fill
-                  iconType="plusInCircle"
-                  isDisabled={!hasUserCRUDPermission(canUserCRUD) || loading}
-                  deepLinkId={SecurityPageName.rulesCreate}
-                >
-                  {i18n.ADD_NEW_RULE}
-                </SecuritySolutionLinkButton>
-              </EuiFlexItem>
+              <RulesPageTourComponent>
+                <EuiFlexItem grow={false}>
+                  <SecuritySolutionLinkButton
+                    data-test-subj="create-new-rule"
+                    fill
+                    iconType="plusInCircle"
+                    isDisabled={!hasUserCRUDPermission(canUserCRUD) || loading}
+                    deepLinkId={SecurityPageName.rulesCreate}
+                  >
+                    {i18n.ADD_NEW_RULE}
+                  </SecuritySolutionLinkButton>
+                </EuiFlexItem>
+              </RulesPageTourComponent>
            </EuiFlexGroup>
          </HeaderPage>
          {(prePackagedRuleStatus === 'ruleNeedUpdate' ||