[Security Solution][Alerts] Add tour to rule management page for supp…

…ression and new terms multi fields (#145775)

## Summary

Adds new tour highlighting new rule capabilities in 8.6 - new terms
multi fields (#143943) and alert
suppression (#142686).

I tried using the generic `RulesFeatureTour` again
(main...marshallmain:kibana:failed-tour)
but it still crashes the page.

I also looked at integrating this tour with the Guided onboarding tour
for rules management (#145223),
but concluded that they should be separate since guided onboarding is
experimental and this tour should be displayed to users even if they are
not new users.

This PR is essentially a copy of the new terms tour in 8.4
(#138469).

x-pack/plugins/security_solution/common/constants.ts

@@ -448,7 +448,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 =

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>
+  );
+};

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`,
+  }
+);

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' ||