From c8c288ab8331be62b0d6440827d257874770ac83 Mon Sep 17 00:00:00 2001
From: Amardeepsingh Siglani <amardeep7194@gmail.com>
Date: Mon, 17 Apr 2023 10:42:43 -0700
Subject: [PATCH] Create detector refactor alert triggers per mocks (#503)
 (#514)

* [FEATURE] Create detector \ Refactor and move field mapping to first the page of create detector feature #495



* [FEATURE] Create global state object for async requests #493



* [FEATURE] Create detector \ Refactor alert triggers per mocks #498



* [FEATURE] Create detector \ Refactor alert triggers per mocks #498



* [FEATURE] Create detector \ Refactor alert triggers per mocks #498



* Create detector refactor alert triggers per mocks
#503



* Update detector details component #504



---------

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Co-authored-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 cypress/integration/1_detectors.spec.js       | 17 ++--
 .../AlertCondition/AlertConditionPanel.tsx    |  2 +-
 .../AlertConditionPanel.test.tsx.snap         |  4 +-
 .../containers/ConfigureAlerts.tsx            | 97 +++++++++++++------
 .../containers/CreateDetector.tsx             |  5 +-
 .../pages/CreateDetector/utils/constants.ts   |  2 +-
 .../AlertTriggerView/AlertTriggerView.tsx     |  7 +-
 .../AlertTriggerView.test.tsx.snap            | 20 +---
 .../FieldMappingsView/FieldMappingsView.tsx   |  2 +-
 .../FieldMappingsView.test.tsx.snap           | 16 +--
 .../AlertTriggersView/AlertTriggersView.tsx   | 23 ++++-
 .../AlertTriggersView.test.tsx.snap           | 39 ++------
 12 files changed, 131 insertions(+), 103 deletions(-)

diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
index 2d4d253ea..81a33f2cc 100644
--- a/cypress/integration/1_detectors.spec.js
+++ b/cypress/integration/1_detectors.spec.js
@@ -18,6 +18,10 @@ const testMappings = {
 
 const cypressDNSRule = dns_rule_data.title;
 
+const cypressIndexDns = 'cypress-index-dns';
+const cypressIndexWindows = 'cypress-index-windows';
+const detectorName = 'test detector';
+
 const createDetector = (detectorName, dataSource, expectFailure) => {
   // Locate Create detector button click to start
   cy.get('.euiButton').filter(':contains("Create detector")').click({ force: true });
@@ -73,10 +77,10 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
   cy.get('button').contains('Next').click({ force: true });
 
   // Check that correct page now showing
-  cy.contains('Set up alerts');
+  cy.contains('Set up alert triggers');
 
   // Type name of new trigger
-  cy.get(`input[placeholder="Enter a name for the alert condition."]`)
+  cy.get(`input[placeholder="Enter a name to describe the alert condition"]`)
     .focus()
     .realType('test_trigger');
 
@@ -113,8 +117,7 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
   cy.contains('Detector details');
   cy.contains(detectorName);
   cy.contains('dns');
-  cy.contains(dataSource);
-  cy.contains('Alert on test_trigger');
+  cy.contains('test_trigger');
 
   // Create the detector
   cy.get('button').contains('Create').click({ force: true });
@@ -141,10 +144,6 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
 };
 
 describe('Detectors', () => {
-  const cypressIndexDns = 'cypress-index-dns';
-  const cypressIndexWindows = 'cypress-index-windows';
-  const detectorName = 'test detector';
-
   before(() => {
     cy.cleanUpTests();
 
@@ -362,6 +361,8 @@ describe('Detectors', () => {
     cy.get(`[data-test-subj="define-detector-select-data-source"]`).type(
       `${cypressIndexWindows}{enter}`
     );
+
+    cy.get('.reviewFieldMappings').should('be.visible');
   });
 
   it('...should show field mappings if rule selection is changed', () => {
diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
index ae7c5ef45..79939763b 100644
--- a/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
+++ b/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
@@ -311,7 +311,7 @@ export default class AlertConditionPanel extends Component<
           error={getNameErrorMessage(name, nameIsInvalid, nameFieldTouched)}
         >
           <EuiFieldText
-            placeholder={'Enter a name for the alert condition.'}
+            placeholder={'Enter a name to describe the alert condition'}
             readOnly={false}
             value={name}
             onBlur={this.onNameBlur}
diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap b/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap
index 11e571e9b..c2b3c34f5 100644
--- a/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap
+++ b/public/pages/CreateDetector/components/ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap
@@ -40,7 +40,7 @@ Object {
                   class="euiFieldText"
                   data-test-subj="alert-condition-name-0"
                   id="some_html_id"
-                  placeholder="Enter a name for the alert condition."
+                  placeholder="Enter a name to describe the alert condition"
                   type="text"
                   value="alert_name"
                 />
@@ -779,7 +779,7 @@ Object {
                 class="euiFieldText"
                 data-test-subj="alert-condition-name-0"
                 id="some_html_id"
-                placeholder="Enter a name for the alert condition."
+                placeholder="Enter a name to describe the alert condition"
                 type="text"
                 value="alert_name"
               />
diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
index 9041ccab6..2bcc2223c 100644
--- a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
+++ b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
@@ -8,16 +8,17 @@ import { RouteComponentProps } from 'react-router-dom';
 import {
   EuiAccordion,
   EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
-  EuiTitle,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
-import { createDetectorSteps } from '../../../utils/constants';
 import { MAX_ALERT_CONDITIONS } from '../utils/constants';
 import AlertConditionPanel from '../components/AlertCondition';
-import { Detector } from '../../../../../../models/interfaces';
 import { DetectorCreationStep } from '../../../models/types';
 import { CreateDetectorRulesOptions } from '../../../../../models/types';
 import { NotificationChannelTypeOptions } from '../models/interfaces';
@@ -30,6 +31,7 @@ import { NotificationsService } from '../../../../../services';
 import { validateName } from '../../../../../utils/validation';
 import { CoreServicesContext } from '../../../../../components/core_services';
 import { BREADCRUMBS } from '../../../../../utils/constants';
+import { Detector } from '../../../../../../types';
 
 interface ConfigureAlertsProps extends RouteComponentProps {
   detector: Detector;
@@ -39,6 +41,7 @@ interface ConfigureAlertsProps extends RouteComponentProps {
   updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
   notificationsService: NotificationsService;
   hasNotificationPlugin: boolean;
+  skipAndConfigureHandler: () => void;
 }
 
 interface ConfigureAlertsState {
@@ -77,12 +80,10 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
   componentDidMount = async () => {
     this.updateBreadcrumbs();
     const {
-      isEdit,
-      detector,
       detector: { triggers },
     } = this.props;
     this.getNotificationChannels();
-    
+
     if (triggers.length === 0) {
       this.addCondition();
     }
@@ -114,9 +115,11 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
   };
 
   onAlertTriggerChanged = (newDetector: Detector): void => {
-    const isTriggerDataValid = newDetector.triggers.every((trigger) => {
-      return !!trigger.name && validateName(trigger.name) && trigger.severity;
-    });
+    const isTriggerDataValid =
+      !newDetector.triggers.length ||
+      newDetector.triggers.every((trigger) => {
+        return !!trigger.name && validateName(trigger.name) && trigger.severity;
+      });
 
     this.props.changeDetector(newDetector);
     this.props.updateDataValidState(DetectorCreationStep.CONFIGURE_ALERTS, isTriggerDataValid);
@@ -135,22 +138,45 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
     const {
       isEdit,
       detector: { triggers },
+      skipAndConfigureHandler,
     } = this.props;
+
+    let getPageTitle = (): string | JSX.Element => {
+      if (isEdit) {
+        return <>Alert triggers (${triggers.length})</>;
+      }
+
+      return (
+        <EuiFlexGroup alignItems={'center'}>
+          <EuiFlexItem grow={true}>
+            <EuiTitle size={'m'}>
+              <h3>Set up alert triggers</h3>
+            </EuiTitle>
+            <EuiText size="s" color="subdued">
+              Get notified when specific rule conditions are found by the detector.
+            </EuiText>
+          </EuiFlexItem>
+          {triggers?.length && (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={() => {
+                  const { changeDetector, detector } = this.props;
+                  changeDetector({ ...detector, triggers: [] });
+                  skipAndConfigureHandler();
+                }}
+              >
+                Skip and configure later
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      );
+    };
+
     const { loading, notificationChannels } = this.state;
     return (
       <div>
-        <EuiTitle size={'m'}>
-          <h3>
-            {isEdit
-              ? 'Edit alert triggers'
-              : createDetectorSteps[DetectorCreationStep.CONFIGURE_ALERTS].title +
-                ` (${triggers.length})`}
-          </h3>
-        </EuiTitle>
-
-        <EuiText size="s" color="subdued">
-          Get notified when specific rule conditions are found by the detector.
-        </EuiText>
+        {getPageTitle()}
 
         <EuiSpacer size={'m'} />
 
@@ -162,19 +188,15 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
                 id={`alert-condition-${index}`}
                 buttonContent={
                   <EuiTitle>
-                    <h4>{alertCondition.name}</h4>
+                    <h4>{isEdit ? alertCondition.name : 'Alert trigger'}</h4>
                   </EuiTitle>
                 }
                 paddingSize={'none'}
                 initialIsOpen={true}
                 extraAction={
-                  triggers.length > 1 ? (
-                    <EuiButton color="danger" onClick={() => this.onDelete(index)}>
-                      Remove alert trigger
-                    </EuiButton>
-                  ) : (
-                    <></>
-                  )
+                  <EuiButton color="danger" onClick={() => this.onDelete(index)}>
+                    Remove
+                  </EuiButton>
                 }
               >
                 <EuiHorizontalRule margin={'xs'} />
@@ -193,11 +215,26 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
             </EuiPanel>
           </div>
         ))}
+        {!triggers?.length && (
+          <EuiCallOut
+            color={'primary'}
+            iconType={'iInCircle'}
+            title={
+              <>
+                <p>
+                  We recommend creating alert triggers to get notified when specific conditions are
+                  found by the detector.
+                </p>
+                <p>You can also configure alert triggers after the detector is created.</p>
+              </>
+            }
+          />
+        )}
 
         <EuiSpacer size={'m'} />
 
         <EuiButton disabled={triggers.length >= MAX_ALERT_CONDITIONS} onClick={this.addCondition}>
-          {`Add ${triggers.length > 0 ? 'another' : 'an'} alert condition`}
+          {triggers.length > 0 ? 'Add another alert trigger' : 'Add alert triggers'}
         </EuiButton>
       </div>
     );
diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
index 5bdf62eb8..be04440da 100644
--- a/public/pages/CreateDetector/containers/CreateDetector.tsx
+++ b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -312,6 +312,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
             updateDataValidState={this.updateDataValidState}
             notificationsService={services.notificationsService}
             hasNotificationPlugin={this.state.plugins.includes(OS_NOTIFICATION_PLUGIN)}
+            skipAndConfigureHandler={this.onNextClick}
           />
         );
       case DetectorCreationStep.REVIEW_CREATE:
@@ -355,7 +356,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
           {currentStep > DetectorCreationStep.DEFINE_DETECTOR && (
             <EuiFlexItem grow={false}>
               <EuiButton disabled={creatingDetector} onClick={this.onPreviousClick}>
-                Previous
+                Back
               </EuiButton>
             </EuiFlexItem>
           )}
@@ -380,7 +381,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
                 fill={true}
                 onClick={this.onCreateClick}
               >
-                Create
+                Create detector
               </EuiButton>
             </EuiFlexItem>
           )}
diff --git a/public/pages/CreateDetector/utils/constants.ts b/public/pages/CreateDetector/utils/constants.ts
index 91cc66760..d4a27e787 100644
--- a/public/pages/CreateDetector/utils/constants.ts
+++ b/public/pages/CreateDetector/utils/constants.ts
@@ -12,7 +12,7 @@ export const createDetectorSteps: Record<DetectorCreationStep, DetectorCreationS
     step: 1,
   },
   [DetectorCreationStep.CONFIGURE_ALERTS]: {
-    title: 'Set up alerts',
+    title: 'Set up alert triggers',
     step: 2,
   },
   [DetectorCreationStep.REVIEW_CREATE]: {
diff --git a/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx b/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx
index 97d4ace6c..a3db9f2dc 100644
--- a/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx
+++ b/public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx
@@ -44,15 +44,15 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
   const conditionRuleNames = ids.map((ruleId) => rules[ruleId]?._source.title);
   return (
     <div>
-      {orderPosition > 0 && <EuiHorizontalRule />}
-      <EuiSpacer size={'l'} />
+      {orderPosition > 0 && <EuiHorizontalRule margin={'m'} />}
+      {orderPosition === 0 && <EuiSpacer size={'s'} />}
       <EuiAccordion
         id={`alert-trigger-${orderPosition}`}
         paddingSize={'m'}
         initialIsOpen={false}
         buttonContent={
           <EuiText size="m">
-            <p>{`Alert on ${name}`}</p>
+            <p>{name}</p>
           </EuiText>
         }
       >
@@ -104,7 +104,6 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
           },
         ])}
       </EuiAccordion>
-      <EuiSpacer size={'m'} />
     </div>
   );
 };
diff --git a/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap b/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
index cc6d33387..bfceeddf3 100644
--- a/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
+++ b/public/pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
@@ -7,10 +7,7 @@ Object {
     <div>
       <div>
         <hr
-          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-        />
-        <div
-          class="euiSpacer euiSpacer--l"
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
         />
         <div
           class="euiAccordion"
@@ -37,7 +34,7 @@ Object {
                   class="euiText euiText--medium"
                 >
                   <p>
-                    Alert on alert_name
+                    alert_name
                   </p>
                 </div>
               </span>
@@ -362,19 +359,13 @@ Object {
             </div>
           </div>
         </div>
-        <div
-          class="euiSpacer euiSpacer--m"
-        />
       </div>
     </div>
   </body>,
   "container": <div>
     <div>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
-      />
-      <div
-        class="euiSpacer euiSpacer--l"
+        class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
       />
       <div
         class="euiAccordion"
@@ -401,7 +392,7 @@ Object {
                 class="euiText euiText--medium"
               >
                 <p>
-                  Alert on alert_name
+                  alert_name
                 </p>
               </div>
             </span>
@@ -726,9 +717,6 @@ Object {
           </div>
         </div>
       </div>
-      <div
-        class="euiSpacer euiSpacer--m"
-      />
     </div>
   </div>,
   "debug": [Function],
diff --git a/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx b/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx
index 76b4d55f9..da8599dfd 100644
--- a/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx
+++ b/public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx
@@ -29,7 +29,7 @@ const columns: EuiBasicTableColumn<FieldMappingsTableItem>[] = [
   },
   {
     field: 'logFieldName',
-    name: 'Mapped index field name',
+    name: 'Mapped log field name',
   },
 ];
 
diff --git a/public/pages/Detectors/components/FieldMappingsView/__snapshots__/FieldMappingsView.test.tsx.snap b/public/pages/Detectors/components/FieldMappingsView/__snapshots__/FieldMappingsView.test.tsx.snap
index 199178e02..86c71d206 100644
--- a/public/pages/Detectors/components/FieldMappingsView/__snapshots__/FieldMappingsView.test.tsx.snap
+++ b/public/pages/Detectors/components/FieldMappingsView/__snapshots__/FieldMappingsView.test.tsx.snap
@@ -112,9 +112,9 @@ Object {
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="Mapped index field name"
+                          title="Mapped log field name"
                         >
-                          Mapped index field name
+                          Mapped log field name
                         </span>
                       </span>
                     </th>
@@ -148,7 +148,7 @@ Object {
                       <div
                         class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                       >
-                        Mapped index field name
+                        Mapped log field name
                       </div>
                       <div
                         class="euiTableCellContent"
@@ -188,7 +188,7 @@ Object {
                       <div
                         class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                       >
-                        Mapped index field name
+                        Mapped log field name
                       </div>
                       <div
                         class="euiTableCellContent"
@@ -317,9 +317,9 @@ Object {
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Mapped index field name"
+                        title="Mapped log field name"
                       >
-                        Mapped index field name
+                        Mapped log field name
                       </span>
                     </span>
                   </th>
@@ -353,7 +353,7 @@ Object {
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                     >
-                      Mapped index field name
+                      Mapped log field name
                     </div>
                     <div
                       class="euiTableCellContent"
@@ -393,7 +393,7 @@ Object {
                     <div
                       class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                     >
-                      Mapped index field name
+                      Mapped log field name
                     </div>
                     <div
                       class="euiTableCellContent"
diff --git a/public/pages/Detectors/containers/AlertTriggersView/AlertTriggersView.tsx b/public/pages/Detectors/containers/AlertTriggersView/AlertTriggersView.tsx
index 5129f3144..af8ab6506 100644
--- a/public/pages/Detectors/containers/AlertTriggersView/AlertTriggersView.tsx
+++ b/public/pages/Detectors/containers/AlertTriggersView/AlertTriggersView.tsx
@@ -5,7 +5,7 @@
 
 import { ContentPanel } from '../../../../components/ContentPanel';
 import React, { useMemo, useEffect, useState, useContext } from 'react';
-import { EuiButton } from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { AlertTriggerView } from '../../components/AlertTriggerView/AlertTriggerView';
 import { ServicesContext } from '../../../../services';
 import { ServerResponse } from '../../../../../server/models/types';
@@ -102,6 +102,27 @@ export const AlertTriggersView: React.FC<AlertTriggersViewProps> = ({
           rules={rules}
         />
       ))}
+      {!detector?.triggers?.length && (
+        <>
+          <EuiSpacer size={'m'} />
+          <p>No alert triggers defined.</p>
+          <EuiSpacer size={'m'} />
+
+          <EuiCallOut
+            color={'primary'}
+            iconType={'iInCircle'}
+            title={
+              <>
+                <p>
+                  We recommend creating alert triggers to get notified when specific conditions are
+                  found by the detector.
+                </p>
+                <p>You can also configure alert triggers after the detector is created.</p>
+              </>
+            }
+          />
+        </>
+      )}
     </ContentPanel>
   );
 };
diff --git a/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap b/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
index df175c554..812c5575a 100644
--- a/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
+++ b/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
@@ -579,10 +579,10 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
           >
             <div>
               <EuiSpacer
-                size="l"
+                size="s"
               >
                 <div
-                  className="euiSpacer euiSpacer--l"
+                  className="euiSpacer euiSpacer--s"
                 />
               </EuiSpacer>
               <EuiAccordion
@@ -592,7 +592,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                     size="m"
                   >
                     <p>
-                      Alert on alert_name
+                      alert_name
                     </p>
                   </EuiText>
                 }
@@ -637,7 +637,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             className="euiText euiText--medium"
                           >
                             <p>
-                              Alert on alert_name
+                              alert_name
                             </p>
                           </div>
                         </EuiText>
@@ -1357,13 +1357,6 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                   </div>
                 </div>
               </EuiAccordion>
-              <EuiSpacer
-                size="m"
-              >
-                <div
-                  className="euiSpacer euiSpacer--m"
-                />
-              </EuiSpacer>
             </div>
           </AlertTriggerView>
           <AlertTriggerView
@@ -1606,18 +1599,13 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
             rules={Object {}}
           >
             <div>
-              <EuiHorizontalRule>
+              <EuiHorizontalRule
+                margin="m"
+              >
                 <hr
-                  className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+                  className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
                 />
               </EuiHorizontalRule>
-              <EuiSpacer
-                size="l"
-              >
-                <div
-                  className="euiSpacer euiSpacer--l"
-                />
-              </EuiSpacer>
               <EuiAccordion
                 arrowDisplay="left"
                 buttonContent={
@@ -1625,7 +1613,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                     size="m"
                   >
                     <p>
-                      Alert on alert_name
+                      alert_name
                     </p>
                   </EuiText>
                 }
@@ -1670,7 +1658,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                             className="euiText euiText--medium"
                           >
                             <p>
-                              Alert on alert_name
+                              alert_name
                             </p>
                           </div>
                         </EuiText>
@@ -2390,13 +2378,6 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
                   </div>
                 </div>
               </EuiAccordion>
-              <EuiSpacer
-                size="m"
-              >
-                <div
-                  className="euiSpacer euiSpacer--m"
-                />
-              </EuiSpacer>
             </div>
           </AlertTriggerView>
         </div>