From ced9d09efcffe121ceb70635353516a7c9cd8269 Mon Sep 17 00:00:00 2001
From: Sinisa Andric <johnsie@gmail.com>
Date: Mon, 21 Nov 2022 20:16:43 +0100
Subject: [PATCH 1/6] Add description text below header

Signed-off-by: Sinisa Andric <johnsie@gmail.com>
---
 .../containers/ConfigureAlerts.tsx              | 11 +++++++++++
 .../containers/ConfigureFieldMapping.tsx        | 16 +++++++++++++---
 .../components/DetectorType/DetectorType.tsx    | 17 ++++++++++++++---
 .../containers/DefineDetector.tsx               | 11 ++++++++++-
 .../containers/ReviewAndCreate.tsx              | 14 +++++++++++++-
 .../containers/CreateDetector.tsx               | 11 ++++++++++-
 6 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
index d86586f8d..67515ae1a 100644
--- a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
+++ b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -12,6 +12,8 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
+  EuiTextColor,
 } from '@elastic/eui';
 import { createDetectorSteps } from '../../../utils/constants';
 import { EMPTY_DEFAULT_ALERT_CONDITION, MAX_ALERT_CONDITIONS } from '../utils/constants';
@@ -104,6 +106,15 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
           </h3>
         </EuiTitle>
 
+        <EuiText>
+          <p>
+            <EuiTextColor color="subdued">
+              Configure your detector to identify relevant security findings and potential threats
+              from your log data.
+            </EuiTextColor>
+          </p>
+        </EuiText>
+
         <EuiSpacer size={'m'} />
 
         {triggers.map((alertCondition, index) => (
diff --git a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx b/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
index d7ca99a29..5ad9fe157 100644
--- a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
+++ b/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, EuiTextColor } from '@elastic/eui';
 import FieldMappingsTable from '../components/RequiredFieldMapping';
 import { createDetectorSteps } from '../../../utils/constants';
 import { ContentPanel } from '../../../../../components/ContentPanel';
@@ -143,12 +143,22 @@ export default class ConfigureFieldMapping extends Component<
     return (
       <div>
         {!isEdit && (
-          <div>
+          <>
             <EuiTitle size={'l'}>
               <h3>{createDetectorSteps[DetectorCreationStep.CONFIGURE_FIELD_MAPPING].title}</h3>
             </EuiTitle>
+
+            <EuiText>
+              <p>
+                <EuiTextColor color="subdued">
+                  Configure your detector to identify relevant security findings and potential
+                  threats from your log data.
+                </EuiTextColor>
+              </p>
+            </EuiText>
+
             <EuiSpacer size={'m'} />
-          </div>
+          </>
         )}
 
         {ruleFields.length > 0 && (
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
index 7ba9e3559..fdc4a543e 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
+++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
@@ -5,7 +5,15 @@
 
 import React, { Component } from 'react';
 import { ContentPanel } from '../../../../../../components/ContentPanel';
-import { EuiFormRow, EuiFlexGrid, EuiFlexItem, EuiRadio, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiRadio,
+  EuiSpacer,
+  EuiText,
+  EuiTextColor,
+} from '@elastic/eui';
 import { FormFieldHeader } from '../../../../../../components/FormFieldHeader/FormFieldHeader';
 import { DETECTOR_TYPES } from '../../../../../Detectors/utils/constants';
 import { DetectorTypeOption } from '../../../../../Detectors/models/interfaces';
@@ -68,8 +76,11 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
       </EuiFlexItem>
     ));
     return (
-      <ContentPanel title={'Threat detector type'} titleSize={'m'}>
-        <EuiSpacer size={'m'} />
+      <ContentPanel
+        title={'Threat detector type'}
+        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>
diff --git a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
index 4bd85e40d..efba10bad 100644
--- a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
+++ b/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, EuiTextColor } from '@elastic/eui';
 import { Detector, PeriodSchedule } from '../../../../../../models/interfaces';
 import DetectorBasicDetailsForm from '../components/DetectorDetails';
 import DetectorDataSource from '../components/DetectorDataSource';
@@ -169,6 +169,15 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
           <h3>{`${isEdit ? 'Edit' : 'Define'} detector`}</h3>
         </EuiTitle>
 
+        <EuiText>
+          <p>
+            <EuiTextColor color="subdued">
+              Configure your detector to identify relevant security findings and potential threats
+              from your log data.
+            </EuiTextColor>
+          </p>
+        </EuiText>
+
         <EuiSpacer size={'m'} />
 
         <DetectorBasicDetailsForm
diff --git a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
index 1acf66922..c4201b838 100644
--- a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
+++ b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiText, EuiTextColor } from '@elastic/eui';
 import { DetectorDetailsView } from '../../../../Detectors/containers/DetectorDetailsView/DetectorDetailsView';
 import { FieldMappingsView } from '../../../../Detectors/components/FieldMappingsView/FieldMappingsView';
 import { AlertTriggersView } from '../../../../Detectors/containers/AlertTriggersView/AlertTriggersView';
@@ -41,6 +41,18 @@ export class ReviewAndCreate extends React.Component<ReviewAndCreateProps, Revie
         <EuiTitle size={'l'}>
           <h3>Review and create</h3>
         </EuiTitle>
+
+        <EuiText>
+          <p>
+            <EuiTextColor color="subdued">
+              Configure your detector to identify relevant security findings and potential threats
+              from your log data.
+            </EuiTextColor>
+          </p>
+        </EuiText>
+
+        <EuiSpacer size={'m'} />
+
         <DetectorDetailsView
           {...this.props}
           detector={this.props.detector}
diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
index b19aa2fe2..c77a35787 100644
--- a/public/pages/CreateDetector/containers/CreateDetector.tsx
+++ b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -5,7 +5,16 @@
 
 import React, { Component } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSteps } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSteps,
+  EuiSpacer,
+  EuiText,
+  EuiTextColor,
+} from '@elastic/eui';
 import DefineDetector from '../components/DefineDetector/containers/DefineDetector';
 import { createDetectorSteps } from '../utils/constants';
 import { BREADCRUMBS, EMPTY_DEFAULT_DETECTOR, PLUGIN_NAME, ROUTES } from '../../../utils/constants';

From 0b8162c06157f663a4bad53c1a3787cf19818aa9 Mon Sep 17 00:00:00 2001
From: Sinisa Andric <johnsie@gmail.com>
Date: Mon, 21 Nov 2022 21:16:11 +0100
Subject: [PATCH 2/6] Update subtitles as per design

Signed-off-by: Sinisa Andric <johnsie@gmail.com>
---
 .../containers/ConfigureAlerts.tsx                |  3 +--
 .../containers/ConfigureFieldMapping.tsx          |  5 +++--
 .../components/DetectionRules/DetectionRules.tsx  | 15 ++++++++++++---
 .../components/DetectorType/DetectorType.tsx      | 12 ++----------
 .../containers/ReviewAndCreate.tsx                |  9 ---------
 5 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
index 67515ae1a..7cbad22af 100644
--- a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
+++ b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -109,8 +109,7 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
         <EuiText>
           <p>
             <EuiTextColor color="subdued">
-              Configure your detector to identify relevant security findings and potential threats
-              from your log data.
+              Get notified when specific rule conditions are found by the detector.
             </EuiTextColor>
           </p>
         </EuiText>
diff --git a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx b/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
index 5ad9fe157..60b181812 100644
--- a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
+++ b/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
@@ -151,8 +151,9 @@ export default class ConfigureFieldMapping extends Component<
             <EuiText>
               <p>
                 <EuiTextColor color="subdued">
-                  Configure your detector to identify relevant security findings and potential
-                  threats from your log data.
+                  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.
                 </EuiTextColor>
               </p>
             </EuiText>
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
index aa77c8829..ab95486ef 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
+++ b/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,17 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
     <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px' }}>
       <EuiAccordion
         buttonContent={
-          <EuiTitle>
-            <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
-          </EuiTitle>
+          <>
+            <EuiTitle>
+              <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
+            </EuiTitle>
+            <EuiText size="s">
+              <span style={{ color: 'grey', fontWeight: 200, fontSize: '15px' }}>
+                Detection rules are automatically added based on your chosen log types.
+                Additionally, you may add or remove detection rules for this detector.
+              </span>
+            </EuiText>
+          </>
         }
         buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
         id={'detectorRulesAccordion'}
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
index fdc4a543e..7fb2dc616 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
+++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
@@ -5,15 +5,7 @@
 
 import React, { Component } from 'react';
 import { ContentPanel } from '../../../../../../components/ContentPanel';
-import {
-  EuiFormRow,
-  EuiFlexGrid,
-  EuiFlexItem,
-  EuiRadio,
-  EuiSpacer,
-  EuiText,
-  EuiTextColor,
-} from '@elastic/eui';
+import { EuiFormRow, EuiFlexGrid, EuiFlexItem, EuiRadio, EuiSpacer } from '@elastic/eui';
 import { FormFieldHeader } from '../../../../../../components/FormFieldHeader/FormFieldHeader';
 import { DETECTOR_TYPES } from '../../../../../Detectors/utils/constants';
 import { DetectorTypeOption } from '../../../../../Detectors/models/interfaces';
@@ -77,7 +69,7 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
     ));
     return (
       <ContentPanel
-        title={'Threat detector type'}
+        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."
       >
diff --git a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
index c4201b838..d1cb850a7 100644
--- a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
+++ b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
@@ -42,15 +42,6 @@ export class ReviewAndCreate extends React.Component<ReviewAndCreateProps, Revie
           <h3>Review and create</h3>
         </EuiTitle>
 
-        <EuiText>
-          <p>
-            <EuiTextColor color="subdued">
-              Configure your detector to identify relevant security findings and potential threats
-              from your log data.
-            </EuiTextColor>
-          </p>
-        </EuiText>
-
         <EuiSpacer size={'m'} />
 
         <DetectorDetailsView

From 20a5a38331b1789f1a04643a051064cc617ab75b Mon Sep 17 00:00:00 2001
From: Sinisa Andric <johnsie@gmail.com>
Date: Tue, 22 Nov 2022 21:52:24 +0100
Subject: [PATCH 3/6] Update ContentPanel subtitleText

Signed-off-by: Sinisa Andric <johnsie@gmail.com>
---
 public/components/ContentPanel/ContentPanel.tsx     |  7 +++++--
 .../components/DetectionRules/DetectionRules.tsx    | 13 ++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
index 28bf08ac0..24699bf75 100644
--- a/public/components/ContentPanel/ContentPanel.tsx
+++ b/public/components/ContentPanel/ContentPanel.tsx
@@ -11,6 +11,7 @@ import {
   EuiPanel,
   EuiTitle,
   EuiText,
+  EuiTextColor,
 } from '@elastic/eui';
 
 interface ContentPanelProps {
@@ -28,8 +29,10 @@ 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>
+        <p>
+          <EuiTextColor color="subdued">{subTitleText}</EuiTextColor>
+        </p>
       </EuiText>
     );
   }
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
index ab95486ef..63729256c 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
+++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -10,6 +10,7 @@ import {
   EuiHorizontalRule,
   CriteriaWithPagination,
   EuiText,
+  EuiTextColor,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { DetectionRulesTable } from './DetectionRulesTable';
@@ -68,11 +69,13 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
             <EuiTitle>
               <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
             </EuiTitle>
-            <EuiText size="s">
-              <span style={{ color: 'grey', fontWeight: 200, fontSize: '15px' }}>
-                Detection rules are automatically added based on your chosen log types.
-                Additionally, you may add or remove detection rules for this detector.
-              </span>
+            <EuiText>
+              <p>
+                <EuiTextColor color="subdued">
+                  Detection rules are automatically added based on your chosen log types.
+                  Additionally, you may add or remove detection rules for this detector.
+                </EuiTextColor>
+              </p>
             </EuiText>
           </>
         }

From f75e8386d8c080b61996f3c05a416462d77b1e51 Mon Sep 17 00:00:00 2001
From: Sinisa Andric <johnsie@gmail.com>
Date: Tue, 22 Nov 2022 23:45:55 +0100
Subject: [PATCH 4/6] Fix PR remarks

Signed-off-by: Sinisa Andric <johnsie@gmail.com>
---
 .../components/DetectionRules/DetectionRules.tsx   | 13 ++++---------
 .../DefineDetector/containers/DefineDetector.tsx   | 14 +++++---------
 .../CreateDetector/containers/CreateDetector.tsx   | 11 +----------
 3 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
index 63729256c..b41e2fc3d 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
+++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -9,7 +9,6 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   CriteriaWithPagination,
-  EuiText,
   EuiTextColor,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
@@ -69,14 +68,10 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
             <EuiTitle>
               <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
             </EuiTitle>
-            <EuiText>
-              <p>
-                <EuiTextColor color="subdued">
-                  Detection rules are automatically added based on your chosen log types.
-                  Additionally, you may add or remove detection rules for this detector.
-                </EuiTextColor>
-              </p>
-            </EuiText>
+            <EuiTextColor color="subdued">
+              Detection rules are automatically added based on your chosen log types. Additionally,
+              you may add or remove detection rules for this detector.
+            </EuiTextColor>
           </>
         }
         buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
diff --git a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
index efba10bad..0120a6c44 100644
--- a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
+++ b/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, EuiText, EuiTextColor } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiTextColor } from '@elastic/eui';
 import { Detector, PeriodSchedule } from '../../../../../../models/interfaces';
 import DetectorBasicDetailsForm from '../components/DetectorDetails';
 import DetectorDataSource from '../components/DetectorDataSource';
@@ -169,14 +169,10 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
           <h3>{`${isEdit ? 'Edit' : 'Define'} detector`}</h3>
         </EuiTitle>
 
-        <EuiText>
-          <p>
-            <EuiTextColor color="subdued">
-              Configure your detector to identify relevant security findings and potential threats
-              from your log data.
-            </EuiTextColor>
-          </p>
-        </EuiText>
+        <EuiTextColor color="subdued">
+          Configure your detector to identify relevant security findings and potential threats from
+          your log data.
+        </EuiTextColor>
 
         <EuiSpacer size={'m'} />
 
diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
index c77a35787..b19aa2fe2 100644
--- a/public/pages/CreateDetector/containers/CreateDetector.tsx
+++ b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -5,16 +5,7 @@
 
 import React, { Component } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSteps,
-  EuiSpacer,
-  EuiText,
-  EuiTextColor,
-} from '@elastic/eui';
+import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSteps } from '@elastic/eui';
 import DefineDetector from '../components/DefineDetector/containers/DefineDetector';
 import { createDetectorSteps } from '../utils/constants';
 import { BREADCRUMBS, EMPTY_DEFAULT_DETECTOR, PLUGIN_NAME, ROUTES } from '../../../utils/constants';

From 73350155907f1e5e206745935b7393eeffc209fd Mon Sep 17 00:00:00 2001
From: Sinisa Andric <johnsie@gmail.com>
Date: Wed, 23 Nov 2022 00:18:21 +0100
Subject: [PATCH 5/6] Fix subtitle size

Signed-off-by: Sinisa Andric <johnsie@gmail.com>
---
 public/components/ContentPanel/ContentPanel.tsx    |  7 ++-----
 .../ConfigureAlerts/containers/ConfigureAlerts.tsx |  9 ++-------
 .../containers/ConfigureFieldMapping.tsx           | 14 +++++---------
 .../components/DetectionRules/DetectionRules.tsx   |  6 +++---
 .../DefineDetector/containers/DefineDetector.tsx   |  6 +++---
 .../ReviewAndCreate/containers/ReviewAndCreate.tsx |  2 +-
 6 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
index 24699bf75..ad0cf55b7 100644
--- a/public/components/ContentPanel/ContentPanel.tsx
+++ b/public/components/ContentPanel/ContentPanel.tsx
@@ -11,7 +11,6 @@ import {
   EuiPanel,
   EuiTitle,
   EuiText,
-  EuiTextColor,
 } from '@elastic/eui';
 
 interface ContentPanelProps {
@@ -29,10 +28,8 @@ const renderSubTitleText = (subTitleText: string | JSX.Element): JSX.Element | n
   if (typeof subTitleText === 'string') {
     if (!subTitleText) return null;
     return (
-      <EuiText>
-        <p>
-          <EuiTextColor color="subdued">{subTitleText}</EuiTextColor>
-        </p>
+      <EuiText size="s" color="subdued">
+        {subTitleText}
       </EuiText>
     );
   }
diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
index 7cbad22af..5148e3315 100644
--- a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
+++ b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -13,7 +13,6 @@ import {
   EuiSpacer,
   EuiTitle,
   EuiText,
-  EuiTextColor,
 } from '@elastic/eui';
 import { createDetectorSteps } from '../../../utils/constants';
 import { EMPTY_DEFAULT_ALERT_CONDITION, MAX_ALERT_CONDITIONS } from '../utils/constants';
@@ -106,12 +105,8 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
           </h3>
         </EuiTitle>
 
-        <EuiText>
-          <p>
-            <EuiTextColor color="subdued">
-              Get notified when specific rule conditions are found by the detector.
-            </EuiTextColor>
-          </p>
+        <EuiText size="s" color="subdued">
+          Get notified when specific rule conditions are found by the detector.
         </EuiText>
 
         <EuiSpacer size={'m'} />
diff --git a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx b/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
index 60b181812..d919b4353 100644
--- a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
+++ b/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, EuiText, EuiTextColor } 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';
@@ -148,14 +148,10 @@ export default class ConfigureFieldMapping extends Component<
               <h3>{createDetectorSteps[DetectorCreationStep.CONFIGURE_FIELD_MAPPING].title}</h3>
             </EuiTitle>
 
-            <EuiText>
-              <p>
-                <EuiTextColor 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.
-                </EuiTextColor>
-              </p>
+            <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'} />
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
index b41e2fc3d..7deb7ed1e 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
+++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -9,7 +9,7 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   CriteriaWithPagination,
-  EuiTextColor,
+  EuiText,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { DetectionRulesTable } from './DetectionRulesTable';
@@ -68,10 +68,10 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
             <EuiTitle>
               <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
             </EuiTitle>
-            <EuiTextColor color="subdued">
+            <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.
-            </EuiTextColor>
+            </EuiText>
           </>
         }
         buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
diff --git a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
index 0120a6c44..bffda0496 100644
--- a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
+++ b/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, EuiTextColor } 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,10 +169,10 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
           <h3>{`${isEdit ? 'Edit' : 'Define'} detector`}</h3>
         </EuiTitle>
 
-        <EuiTextColor color="subdued">
+        <EuiText size="s" color="subdued">
           Configure your detector to identify relevant security findings and potential threats from
           your log data.
-        </EuiTextColor>
+        </EuiText>
 
         <EuiSpacer size={'m'} />
 
diff --git a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
index d1cb850a7..f15874c2b 100644
--- a/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
+++ b/public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiSpacer, EuiTitle, EuiText, EuiTextColor } from '@elastic/eui';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { DetectorDetailsView } from '../../../../Detectors/containers/DetectorDetailsView/DetectorDetailsView';
 import { FieldMappingsView } from '../../../../Detectors/components/FieldMappingsView/FieldMappingsView';
 import { AlertTriggersView } from '../../../../Detectors/containers/AlertTriggersView/AlertTriggersView';

From 69e747f975e823e84d3683dd4bce01047c6f228c Mon Sep 17 00:00:00 2001
From: Sinisa Andric <johnsie@gmail.com>
Date: Sat, 3 Dec 2022 02:34:19 +0100
Subject: [PATCH 6/6] Cypress test fix

Signed-off-by: Sinisa Andric <johnsie@gmail.com>
---
 cypress/integration/1_detectors.spec.js                       | 2 +-
 .../components/DetectionRules/DetectionRules.tsx              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
index 2ecf748c6..f13fdbaea 100644
--- a/cypress/integration/1_detectors.spec.js
+++ b/cypress/integration/1_detectors.spec.js
@@ -53,7 +53,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');
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
index 7deb7ed1e..09e19ef00 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
+++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -64,7 +64,7 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
     <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px' }}>
       <EuiAccordion
         buttonContent={
-          <>
+          <div data-test-subj="detection-rules-btn">
             <EuiTitle>
               <h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
             </EuiTitle>
@@ -72,7 +72,7 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
               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'}