Merge pull request #37 from andreadelrio/esql-controls-dsgn-1

[ES|QL controls] Design cleanup #1
stratoula · Jan 17, 2025 · 5ecf596 · 5ecf596
2 parents 13ada24 + 6aaf3c6
commit 5ecf596
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 45 deletions.
diff --git a/...lugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.tsx b/...lugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.tsx
@@ -10,6 +10,7 @@
 import React, { useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiLink, EuiPopover, EuiSelectable, EuiSelectableOption } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 export function ChooseColumnPopover({
   columns,
@@ -27,7 +28,13 @@ export function ChooseColumnPopover({
   const closePopover = () => setIsPopoverOpen(false);
 
   const button = (
-    <EuiLink onClick={onButtonClick} data-test-subj="chooseColumnBtn">
+    <EuiLink
+      css={css`
+        vertical-align: top;
+      `}
+      onClick={onButtonClick}
+      data-test-subj="chooseColumnBtn"
+    >
       {i18n.translate('esql.flyout.chooseColumnBtn.label', {
         defaultMessage: 'here',
       })}

diff --git a/...ugins/shared/esql/public/triggers/esql_controls/control_flyout/shared_form_components.tsx b/...ugins/shared/esql/public/triggers/esql_controls/control_flyout/shared_form_components.tsx
@@ -28,6 +28,8 @@ import {
   EuiTitle,
   EuiBetaBadge,
   EuiToolTip,
+  EuiText,
+  EuiTextColor,
 } from '@elastic/eui';
 import { esqlVariablesService } from '@kbn/esql-variables/common';
 import { EsqlControlType } from '../types';
@@ -217,9 +219,15 @@ export function ControlLabel({
       label={i18n.translate('esql.flyout.label.label', {
         defaultMessage: 'Label',
       })}
-      labelAppend={i18n.translate('esql.flyout.label.extraLabel', {
-        defaultMessage: 'Optional',
-      })}
+      labelAppend={
+        <EuiText size="xs">
+          <EuiTextColor color="subdued">
+            {i18n.translate('esql.flyout.label.extraLabel', {
+              defaultMessage: 'Optional',
+            })}
+          </EuiTextColor>
+        </EuiText>
+      }
       fullWidth
     >
       <EuiFieldText
@@ -288,9 +296,9 @@ export function ControlWidth({
 export function Header({ isInEditMode }: { isInEditMode: boolean }) {
   return (
     <EuiFlyoutHeader hasBorder>
-      <EuiFlexGroup alignItems="center" responsive={false}>
+      <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
         <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
+          <EuiTitle size="xs">
             <h2>
               {isInEditMode
                 ? i18n.translate('esql.flyout.editTitle', {

diff --git a/...m/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx b/...m/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx
@@ -382,45 +382,44 @@ export function ValueControlForm({
                 })}
                 fullWidth
               >
-                <EuiPanel
-                  paddingSize="s"
-                  hasBorder
-                  css={css`
-                    white-space: wrap;
-                    overflow-y: auto;
-                    max-height: 200px;
-                  `}
-                  data-test-subj="esqlValuesPreview"
-                >
-                  {queryColumns.length === 1 ? (
-                    selectedValues.map((value) => value.label).join(', ')
-                  ) : (
-                    <EuiCallOut
-                      title={i18n.translate('esql.flyout.displayMultipleColsCallout.title', {
-                        defaultMessage: 'Your query must return a single column',
-                      })}
-                      iconType="warning"
-                      data-test-subj="esqlMoreThanOneColumnCallout"
-                    >
-                      <p>
-                        <FormattedMessage
-                          id="esql.flyout.displayMultipleColsCallout.description"
-                          defaultMessage="Your query is currently returning {totalColumns} columns. Choose column {chooseColumnPopover} or use {boldText}."
-                          values={{
-                            totalColumns: queryColumns.length,
-                            boldText: <strong>STATS BY</strong>,
-                            chooseColumnPopover: (
-                              <ChooseColumnPopover
-                                columns={queryColumns}
-                                updateQuery={updateQuery}
-                              />
-                            ),
-                          }}
-                        />
-                      </p>
-                    </EuiCallOut>
-                  )}
-                </EuiPanel>
+                {queryColumns.length === 1 ? (
+                  <EuiPanel
+                    paddingSize="s"
+                    color="primary"
+                    css={css`
+                      white-space: wrap;
+                      overflow-y: auto;
+                      max-height: 200px;
+                    `}
+                    data-test-subj="esqlValuesPreview"
+                  >
+                    {selectedValues.map((value) => value.label).join(', ')}
+                  </EuiPanel>
+                ) : (
+                  <EuiCallOut
+                    title={i18n.translate('esql.flyout.displayMultipleColsCallout.title', {
+                      defaultMessage: 'Your query must return a single column',
+                    })}
+                    color="warning"
+                    iconType="warning"
+                    size="s"
+                    data-test-subj="esqlMoreThanOneColumnCallout"
+                  >
+                    <p>
+                      <FormattedMessage
+                        id="esql.flyout.displayMultipleColsCallout.description"
+                        defaultMessage="Your query is currently returning {totalColumns} columns. Choose column {chooseColumnPopover} or use {boldText}."
+                        values={{
+                          totalColumns: queryColumns.length,
+                          boldText: <strong>STATS BY</strong>,
+                          chooseColumnPopover: (
+                            <ChooseColumnPopover columns={queryColumns} updateQuery={updateQuery} />
+                          ),
+                        }}
+                      />
+                    </p>
+                  </EuiCallOut>
+                )}
               </EuiFormRow>
             )}
           </>