[Security Solution][Alerts] Add new terms tour (#138469)

* Add new terms tour

* Disable tour for cypress tests

* Move tour to separate component

* Try fixing cypress tests again

* Use existing tour constant

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

@@ -431,7 +431,7 @@ export const RULES_TABLE_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, RULES_TABLE_MAX_PAG
  * we will need to update this constant with the corresponding version.
  */
 export const RULES_MANAGEMENT_FEATURE_TOUR_STORAGE_KEY =
-  'securitySolution.rulesManagementPage.newFeaturesTour.v8.2';
+  'securitySolution.rulesManagementPage.newFeaturesTour.v8.4';
 
 export const RULE_DETAILS_EXECUTION_LOG_TABLE_SHOW_METRIC_COLUMNS_STORAGE_KEY =
   'securitySolution.ruleDetails.ruleExecutionLog.showMetrics.v8.2';

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/index.tsx

@@ -42,6 +42,7 @@ import { useInvalidateRules } from '../../../containers/detection_engine/rules/u
 import { useBoolState } from '../../../../common/hooks/use_bool_state';
 import { RULES_TABLE_ACTIONS } from '../../../../common/lib/apm/user_actions';
 import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
+import { RulesPageTourComponent } from './tour';
 
 const RulesPageComponent: React.FC = () => {
   const [isImportModalVisible, showImportModal, hideImportModal] = useBoolState();
@@ -230,17 +231,19 @@ const RulesPageComponent: React.FC = () => {
                   {i18n.IMPORT_RULE}
                 </EuiButton>
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <SecuritySolutionLinkButton
-                  data-test-subj="create-new-rule"
-                  fill
-                  iconType="plusInCircle"
-                  isDisabled={!userHasPermissions(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={!userHasPermissions(canUserCRUD) || loading}
+                    deepLinkId={SecurityPageName.rulesCreate}
+                  >
+                    {i18n.ADD_NEW_RULE}
+                  </SecuritySolutionLinkButton>
+                </EuiFlexItem>
+              </RulesPageTourComponent>
             </EuiFlexGroup>
           </HeaderPage>
           {(prePackagedRuleStatus === 'ruleNeedUpdate' ||

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/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 { RULES_MANAGEMENT_FEATURE_TOUR_STORAGE_KEY } 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(RULES_MANAGEMENT_FEATURE_TOUR_STORAGE_KEY);
+
+    if (restoredTourState != null) {
+      return restoredTourState;
+    }
+    return tourConfig;
+  });
+
+  const demoTourSteps = [
+    {
+      step: 1,
+      title: i18n.NEW_TERMS_TOUR_TITLE,
+      content: <EuiText>{i18n.NEW_TERMS_TOUR_CONTENT}</EuiText>,
+    },
+  ];
+  const finishTour = useCallback(() => {
+    setTourState({
+      ...tourState,
+      isTourActive: false,
+    });
+  }, [tourState]);
+
+  useEffect(() => {
+    storage.set(RULES_MANAGEMENT_FEATURE_TOUR_STORAGE_KEY, 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/detections/pages/detection_engine/rules/translations.ts

@@ -1074,3 +1074,17 @@ export const RULES_BULK_EDIT_FAILURE_DESCRIPTION = (rulesCount: number) =>
       defaultMessage: '{rulesCount, plural, =1 {# rule} other {# rules}} failed to update.',
     }
   );
+
+export const NEW_TERMS_TOUR_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.tour.newTermsTitle',
+  {
+    defaultMessage: 'A new Security Rule type is available!',
+  }
+);
+
+export const NEW_TERMS_TOUR_CONTENT = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.tour.newTermsContent',
+  {
+    defaultMessage: '"New Terms" rules alert on values that have not previously been seen',
+  }
+);