Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ES|QL controls] Design cleanup #1 #37

Merged
merged 4 commits into from
Jan 17, 2025
Merged

[ES|QL controls] Design cleanup #1 #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e68c0d3
design cleanup, first pass
andreadelrio Jan 10, 2025
1b5a9bf
update gi
andreadelrio Jan 10, 2025
90bfe7d
revert gi
andreadelrio Jan 10, 2025
6aaf3c6
delete comment
andreadelrio Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion ...lugins/shared/esql/public/triggers/esql_controls/control_flyout/choose_column_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
})}
Expand Down
18 changes: 13 additions & 5 deletions ...ugins/shared/esql/public/triggers/esql_controls/control_flyout/shared_form_components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import {
EuiTitle,
EuiBetaBadge,
EuiToolTip,
EuiText,
EuiTextColor,
} from '@elastic/eui';
import { esqlVariablesService } from '@kbn/esql-variables/common';
import { EsqlControlType } from '../types';
Expand Down Expand Up @@ -198,9 +200,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
Expand Down Expand Up @@ -269,9 +277,9 @@ export function ControlWidth({
export function Header() {
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>
{i18n.translate('esql.flyout.title', {
defaultMessage: 'Create ES|QL control',
Expand Down
77 changes: 38 additions & 39 deletions ...m/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,45 +376,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>
)}
</>
Expand Down
Loading