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

[Lens] "Add field to workspace" button design tweaks #4

Merged
merged 1 commit into from
Dec 18, 2020
Merged

[Lens] "Add field to workspace" button design tweaks #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 1 addition & 2 deletions x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
max-width: 300px;
}

.lnsFieldItem__buttonGroup {
// Enforce lowercase for buttons or else some browsers inherit all caps from flyout title
.lnsFieldItem__fieldPanelTitle {
text-transform: none;
}
152 changes: 67 additions & 85 deletions x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import React, { useState } from 'react';
import DateMath from '@elastic/datemath';
import {
EuiButtonGroup,
EuiButton,
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiIconTip,
Expand All @@ -19,7 +19,9 @@ import {
EuiPopoverFooter,
EuiPopoverTitle,
EuiProgress,
EuiSpacer,
EuiText,
EuiTitle,
EuiToolTip,
} from '@elastic/eui';
import {
Expand Down Expand Up @@ -270,20 +272,28 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {

const [showingHistogram, setShowingHistogram] = useState(histogramDefault);

if (hideDetails) {
return (
<EuiFlexItem grow={true}>
<DragToWorkspaceButton
getSuggestionForField={getSuggestionForField}
dropOntoWorkspace={dropOntoWorkspace}
field={{
indexPatternId: indexPattern.id,
id: field.name,
field,
}}
/>
const FieldPanelHeader = () => (
<EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
<EuiFlexItem>
<EuiTitle size="xxs">
<h5 className="lnsFieldItem__fieldPanelTitle">{field.displayName}</h5>
</EuiTitle>
</EuiFlexItem>
);

<DragToWorkspaceButton
getSuggestionForField={getSuggestionForField}
dropOntoWorkspace={dropOntoWorkspace}
field={{
indexPatternId: indexPattern.id,
id: field.name,
field,
}}
/>
</EuiFlexGroup>
);

if (hideDetails) {
return <FieldPanelHeader />;
}

let formatter: { convert: (data: unknown) => string };
Expand Down Expand Up @@ -316,25 +326,18 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
(!props.topValues || props.topValues.buckets.length === 0)
) {
return (
<div>
<>
<EuiPopoverTitle>
<FieldPanelHeader />
</EuiPopoverTitle>

<EuiText size="s">
{i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
defaultMessage:
'This field is empty because it doesn’t exist in the 500 sampled documents. Adding this field to the configuration may result in a blank chart.',
})}
</EuiText>
<EuiFlexItem grow={true}>
<DragToWorkspaceButton
getSuggestionForField={getSuggestionForField}
dropOntoWorkspace={dropOntoWorkspace}
field={{
indexPatternId: indexPattern.id,
id: field.name,
field,
}}
/>
</EuiFlexItem>
</div>
</>
);
}

Expand Down Expand Up @@ -369,31 +372,42 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
);
} else if (field.type === 'date') {
title = (
<>
{i18n.translate('xpack.lens.indexPattern.fieldTimeDistributionLabel', {
defaultMessage: 'Time distribution',
})}
</>
<EuiTitle size="xxxs">
<h6>
{i18n.translate('xpack.lens.indexPattern.fieldTimeDistributionLabel', {
defaultMessage: 'Time distribution',
})}
</h6>
</EuiTitle>
);
} else if (topValues && topValues.buckets.length) {
title = (
<>
{i18n.translate('xpack.lens.indexPattern.fieldTopValuesLabel', {
defaultMessage: 'Top values',
})}
</>
<EuiTitle size="xxxs">
<h6>
{i18n.translate('xpack.lens.indexPattern.fieldTopValuesLabel', {
defaultMessage: 'Top values',
})}
</h6>
</EuiTitle>
);
}

function wrapInPopover(el: React.ReactElement) {
return (
<>
{title ? <EuiPopoverTitle>{title}</EuiPopoverTitle> : <></>}
<EuiPopoverTitle>
<FieldPanelHeader />
</EuiPopoverTitle>

{title ? title : <></>}

<EuiSpacer size="s" />

{el}

{props.totalDocuments ? (
<EuiPopoverFooter>
<EuiText size="xs" textAlign="center">
<EuiText color="subdued" size="xs">
{props.sampledDocuments && (
<>
{i18n.translate('xpack.lens.indexPattern.percentageOfLabel', {
Expand All @@ -413,17 +427,6 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
defaultMessage: 'documents',
})}
</EuiText>
<EuiFlexItem grow={true}>
<DragToWorkspaceButton
getSuggestionForField={getSuggestionForField}
dropOntoWorkspace={dropOntoWorkspace}
field={{
indexPatternId: indexPattern.id,
id: field.name,
field,
}}
/>
</EuiFlexItem>
</EuiPopoverFooter>
) : (
<></>
Expand Down Expand Up @@ -585,45 +588,24 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
}

const DragToWorkspaceButton = ({ field, getSuggestionForField, dropOntoWorkspace }) => {
if (!getSuggestionForField(field)) {
const buttonTitle = i18n.translate('xpack.lens.indexPattern.moveToWorkspace', {
defaultMessage: 'Add field to workspace',
});

if (getSuggestionForField(field)) {
return (
<EuiToolTip
position="right"
content={i18n.translate('xpack.lens.indexPattern.moveToWorkspaceDisabledTooltip', {
defaultMessage: `Field cannot be moved to workspace. There are no suggestions for this field for current visualization. Move the field directly to the editor.`,
})}
>
<EuiButton
iconSide="right"
iconType="arrowRight"
color="primary"
fullWidth
disabled
<EuiFlexItem grow={false}>
<EuiButtonIcon
aria-label={buttonTitle}
iconType="plusInCircle"
onClick={() => {
dropOntoWorkspace(field);
}}
>
{i18n.translate('xpack.lens.indexPattern.moveToWorkspace', {
defaultMessage: 'Move to workspace',
})}
</EuiButton>
</EuiToolTip>
title={buttonTitle}
/>
</EuiFlexItem>
);
} else {
return null;
}

return (
<EuiButton
iconSide="right"
iconType="arrowRight"
color="primary"
fullWidth
onClick={() => {
dropOntoWorkspace(field);
}}
>
{i18n.translate('xpack.lens.indexPattern.moveToWorkspace', {
defaultMessage: 'Move to workspace',
})}
</EuiButton>
);
};