[7.x] Collapse alert chart previews by default (#77479) (#77587)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Sep 18, 2020 · 278c0d0 · 278c0d0
1 parent 950969c
commit 278c0d0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 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
@@ -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
@@ -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>
       )}