Ftr 142 create detector desc text below header (opensearch-project#150)

* Add description text below header

Signed-off-by: Sinisa Andric <[email protected]>

* Update subtitles as per design

Signed-off-by: Sinisa Andric <[email protected]>

* Update ContentPanel subtitleText

Signed-off-by: Sinisa Andric <[email protected]>

* Fix PR remarks

Signed-off-by: Sinisa Andric <[email protected]>

* Fix subtitle size

Signed-off-by: Sinisa Andric <[email protected]>

* Cypress test fix

Signed-off-by: Sinisa Andric <[email protected]>

Signed-off-by: Sinisa Andric <[email protected]>
Co-authored-by: Amardeepsingh Siglani <[email protected]>

Author: paladin-tech

cypress/integration/1_detectors.spec.js

@@ -56,7 +56,7 @@ describe('Detectors', () => {
     cy.get(`input[id="windows"]`).click({ force: true });
 
     // Open Detection rules accordion
-    cy.contains('Detection rules').click({ timeout: 5000 });
+    cy.get('[data-test-subj="detection-rules-btn"]').click({ timeout: 5000 });
 
     // find search, type USB
     cy.get(`[placeholder="Search..."]`).type('USB Device Plugged').trigger('search');

public/components/ContentPanel/ContentPanel.tsx

@@ -28,8 +28,8 @@ const renderSubTitleText = (subTitleText: string | JSX.Element): JSX.Element | n
   if (typeof subTitleText === 'string') {
     if (!subTitleText) return null;
     return (
-      <EuiText size="s">
-        <span style={{ color: 'grey', fontWeight: 200, fontSize: '15px' }}>{subTitleText}</span>
+      <EuiText size="s" color="subdued">
+        {subTitleText}
       </EuiText>
     );
   }

public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx

@@ -12,6 +12,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { createDetectorSteps } from '../../../utils/constants';
 import { EMPTY_DEFAULT_ALERT_CONDITION, MAX_ALERT_CONDITIONS } from '../utils/constants';
@@ -105,6 +106,10 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
           </h3>
         </EuiTitle>
 
+        <EuiText size="s" color="subdued">
+          Get notified when specific rule conditions are found by the detector.
+        </EuiText>
+
         <EuiSpacer size={'m'} />
 
         {triggers.map((alertCondition, index) => (

public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui';
 import FieldMappingsTable from '../components/RequiredFieldMapping';
 import { createDetectorSteps } from '../../../utils/constants';
 import { ContentPanel } from '../../../../../components/ContentPanel';
@@ -143,12 +143,19 @@ export default class ConfigureFieldMapping extends Component<
     return (
       <div>
         {!isEdit && (
-          <div>
+          <>
             <EuiTitle size={'m'}>
               <h3>{createDetectorSteps[DetectorCreationStep.CONFIGURE_FIELD_MAPPING].title}</h3>
             </EuiTitle>
+
+            <EuiText size="s" color="subdued">
+              To perform threat detection, known field names from your log data source are
+              automatically mapped to rule field names. Additional fields that may require manual
+              mapping will be shown below.
+            </EuiText>
+
             <EuiSpacer size={'m'} />
-          </div>
+          </>
         )}
 
         {ruleFields.length > 0 && (

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx

@@ -9,6 +9,7 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   CriteriaWithPagination,
+  EuiText,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { DetectionRulesTable } from './DetectionRulesTable';
@@ -63,9 +64,15 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
     <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px' }}>
       <EuiAccordion
         buttonContent={
-          <EuiTitle>
-            <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
-          </EuiTitle>
+          <div data-test-subj="detection-rules-btn">
+            <EuiTitle>
+              <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
+            </EuiTitle>
+            <EuiText size="s" color="subdued">
+              Detection rules are automatically added based on your chosen log types. Additionally,
+              you may add or remove detection rules for this detector.
+            </EuiText>
+          </div>
         }
         buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
         id={'detectorRulesAccordion'}

public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx

@@ -68,8 +68,11 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
       </EuiFlexItem>
     ));
     return (
-      <ContentPanel title={'Threat detector type'} titleSize={'m'}>
-        <EuiSpacer size={'m'} />
+      <ContentPanel
+        title={'Log types and rules'}
+        titleSize={'m'}
+        subTitleText="Choose the log types that correspond to your data source. Detection rules are automatically added based on your chosen log types."
+      >
         <EuiFormRow
           label={
             <div>

public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui';
 import { Detector, PeriodSchedule } from '../../../../../../models/interfaces';
 import DetectorBasicDetailsForm from '../components/DetectorDetails';
 import DetectorDataSource from '../components/DetectorDataSource';
@@ -169,6 +169,11 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
           <h3>{`${isEdit ? 'Edit' : 'Define'} detector`}</h3>
         </EuiTitle>
 
+        <EuiText size="s" color="subdued">
+          Configure your detector to identify relevant security findings and potential threats from
+          your log data.
+        </EuiText>
+
         <EuiSpacer size={'m'} />
 
         <DetectorBasicDetailsForm

public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx

@@ -41,6 +41,9 @@ export class ReviewAndCreate extends React.Component<ReviewAndCreateProps, Revie
         <EuiTitle size={'m'}>
           <h3>Review and create</h3>
         </EuiTitle>
+
+        <EuiSpacer size={'m'} />
+
         <DetectorDetailsView
           {...this.props}
           detector={this.props.detector}