From fb26fe2102192d2fe0bdc66789072843bd2a9d18 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 24 Jul 2019 09:54:36 -0400
Subject: [PATCH] Simplify accordion button markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

… and move error message to icon
---
 .../public/vis/editors/default/_sidebar.scss  |  8 ++++
 .../default/components/default_editor_agg.tsx | 40 ++++++++-----------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
index 1b713917e4a9f..19401fd08d0ee 100644
--- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss
+++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@@ -223,3 +223,11 @@
 .visEditorSidebar__aggGroup .euiAccordion__button {
   padding-left: 2px;
 }
+
+.visEditorSidebar__aggGroupAccordionButtonContent {
+  font-size: $euiFontSizeS;
+
+  span {
+    color: $euiColorDarkShade;
+  }
+}
diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx
index 9e767096b3c1a..be86574368703 100644
--- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx
+++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import {
   EuiAccordion,
   EuiToolTip,
@@ -121,6 +121,17 @@ function DefaultEditorAgg({
   const renderAggButtons = () => {
     const actionIcons = [];
 
+    if (showError) {
+      actionIcons.push({
+        id: 'hasErrors',
+        color: 'danger',
+        type: 'alert',
+        tooltip: i18n.translate('common.ui.vis.editors.agg.errorsAriaLabel', {
+          defaultMessage: 'Aggregation has errors',
+        }),
+        dataTestSubj: 'hasErrorsAggregationIcon',
+      });
+    }
     if (agg.enabled && isRemovable) {
       actionIcons.push({
         id: 'disableAggregation',
@@ -202,28 +213,9 @@ function DefaultEditorAgg({
   };
 
   const buttonContent = (
-    <EuiFlexGroup gutterSize="xs" alignItems="baseline" responsive={false}>
-      <EuiFlexItem grow={false}>{agg.schema.title}</EuiFlexItem>
-      <EuiFlexItem className="eui-textTruncate">
-        {showDescription && (
-          <EuiText size="s" color="subdued">
-            <p className="eui-textTruncate">{aggDescription}</p>
-          </EuiText>
-        )}
-        {showError && (
-          <EuiTextColor
-            color="danger"
-            aria-label={i18n.translate('common.ui.vis.editors.agg.errorsAriaLabel', {
-              defaultMessage: 'Aggregation has errors',
-            })}
-          >
-            <h6>
-              <FormattedMessage id="common.ui.vis.editors.agg.errorsText" defaultMessage="Errors" />
-            </h6>
-          </EuiTextColor>
-        )}
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <Fragment>
+      {agg.schema.title} {showDescription && <span>{aggDescription}</span>}
+    </Fragment>
   );
 
   return (
@@ -231,6 +223,8 @@ function DefaultEditorAgg({
       id={`visEditorAggAccordion${agg.id}`}
       initialIsOpen={isEditorOpen}
       buttonContent={buttonContent}
+      buttonClassName="eui-textTruncate"
+      buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
       className="visEditorSidebar__section visEditorSidebar__collapsible visEditorSidebar__collapsible--marginBottom"
       aria-label={i18n.translate('common.ui.vis.editors.agg.toggleEditorButtonAriaLabel', {
         defaultMessage: 'Toggle {schema} editor',