From 3c555e2ca256b0601bf89345a85eb79df20740e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Wed, 16 Sep 2020 11:30:51 +0200
Subject: [PATCH] Collapse alert chart previews by default (#77479)

---
 .../logs/expression_editor/criteria.tsx       | 30 +++++++++++--------
 .../logs/expression_editor/criterion.tsx      | 15 ++++++++--
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criteria.tsx b/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criteria.tsx
index 7a4b2ecaa5e4..627ea2bbef42 100644
--- a/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criteria.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criteria.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiAccordion } from '@elastic/eui';
 import { IFieldType } from 'src/plugins/data/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { IErrorObject } from '../../../../../../triggers_actions_ui/public/types';
@@ -44,23 +44,29 @@ export const Criteria: React.FC<Props> = ({
       <EuiFlexItem grow>
         {criteria.map((criterion, idx) => {
           return (
-            <React.Fragment key={idx}>
-              <Criterion
-                idx={idx}
-                fields={fields}
-                criterion={criterion}
-                updateCriterion={updateCriterion}
-                removeCriterion={removeCriterion}
-                canDelete={criteria.length > 1}
-                errors={errors[idx.toString()] as IErrorObject}
-              />
+            <EuiAccordion
+              id={`criterion-${idx}`}
+              buttonContent={
+                <Criterion
+                  idx={idx}
+                  fields={fields}
+                  criterion={criterion}
+                  updateCriterion={updateCriterion}
+                  removeCriterion={removeCriterion}
+                  canDelete={criteria.length > 1}
+                  errors={errors[idx.toString()] as IErrorObject}
+                />
+              }
+              key={idx}
+              arrowDisplay="right"
+            >
               <CriterionPreview
                 alertParams={alertParams}
                 context={context}
                 chartCriterion={criterion}
                 sourceId={sourceId}
               />
-            </React.Fragment>
+            </EuiAccordion>
           );
         })}
       </EuiFlexItem>
diff --git a/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criterion.tsx b/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criterion.tsx
index 66bde380a6d9..9ee9373bd2c1 100644
--- a/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criterion.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/logs/expression_editor/criterion.tsx
@@ -162,7 +162,10 @@ export const Criterion: React.FC<Props> = ({
                   value={criterion.field}
                   isActive={isFieldPopoverOpen}
                   color={errors.field.length === 0 ? 'secondary' : 'danger'}
-                  onClick={() => setIsFieldPopoverOpen(true)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsFieldPopoverOpen(true);
+                  }}
                 />
               }
               isOpen={isFieldPopoverOpen}
@@ -202,7 +205,10 @@ export const Criterion: React.FC<Props> = ({
                       ? 'secondary'
                       : 'danger'
                   }
-                  onClick={() => setIsComparatorPopoverOpen(true)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsComparatorPopoverOpen(true);
+                  }}
                 />
               }
               isOpen={isComparatorPopoverOpen}
@@ -260,7 +266,10 @@ export const Criterion: React.FC<Props> = ({
             })}
             color={'danger'}
             iconType={'trash'}
-            onClick={() => removeCriterion(idx)}
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation();
+              removeCriterion(idx);
+            }}
           />
         </EuiFlexItem>
       )}