Skip to content

Commit

Permalink
[Vis Editor] EUIfication of agg and agg-group directives (#40866) (#4…
Browse files Browse the repository at this point in the history 
…2126)

* Create default_editor_agg.tsx

* Create default_editor_agg_group

* Apply drag and drop

* Remove unused dragula dependency

* Remove old mocha tests

* Add ts for state

* Update functional tests

* Update touched condition

* Apply styles for accordion button content

* Apply truncate for agg description

* Remove unused styles

* Separate common props

* Move aggGroupNamesMap to agg_group.js

* Update _sidebar.scss

* Pass schemas prop

* Prevent scroll bar and add space

* Remove unused min from stats

* Add OnAggParamsChange type

* Show error as an icon

* Update background color

* Update title size

* Remove Schema.deprecate since it's not used
  • Loading branch information
@maryia-lapata
maryia-lapata authored Jul 29, 2019
1 parent fefa154 commit 1fb0b65
Show file tree
Hide file tree
Showing 51 changed files with 1,035 additions and 1,516 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,6 @@
"d3": "3.5.17",
"d3-cloud": "1.2.5",
"del": "^4.0.0",
"dragula": "3.7.2",
"elasticsearch": "^16.2.0",
"elasticsearch-browser": "^16.2.0",
"encode-uri-query": "1.0.1",
Expand Down
15 changes: 0 additions & 15 deletions src/legacy/core_plugins/kibana/public/management/_hacks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,6 @@ kbn-management-objects-view {
.ace_editor { height: 300px; }
}

// SASSTODO: These are some dragula settings.
.gu-handle {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}

.gu-mirror,
.gu-mirror .gu-handle {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}

// Hack because the management wrapper is flat HTML and needs a class
.mgtPage__body {
max-width: map-get($euiBreakpoints, 'xl');
Expand Down
184 changes: 94 additions & 90 deletions src/legacy/ui/public/agg_types/controls/date_ranges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
EuiLink,
EuiSpacer,
EuiText,
EuiFormRow,
} from '@elastic/eui';
import dateMath from '@elastic/datemath';
import { FormattedMessage } from '@kbn/i18n/react';
Expand Down Expand Up @@ -110,96 +111,99 @@ function DateRangesParamEditor({
);

return (
<>
<EuiText size="xs">
<EuiLink href={getDocLink('date.dateMath')} target="_blank" rel="noopener">
<FormattedMessage
id="common.ui.aggTypes.dateRanges.acceptedDateFormatsLinkText"
defaultMessage="Acceptable date formats"
/>
</EuiLink>
</EuiText>
<EuiSpacer size="s" />

{ranges.map(({ from, to, id }) => {
const deleteBtnTitle = i18n.translate(
'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel',
{
defaultMessage: 'Remove the range of {from} to {to}',
values: { from: from || FROM_PLACEHOLDER, to: to || TO_PLACEHOLDER },
}
);
const areBothEmpty = !from && !to;

return (
<Fragment key={id}>
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem>
<EuiFieldText
aria-label={i18n.translate('common.ui.aggTypes.dateRanges.fromColumnLabel', {
defaultMessage: 'From',
description: 'Beginning of a date range, e.g. *From* 2018-02-26 To 2018-02-28',
})}
compressed
fullWidth={true}
isInvalid={areBothEmpty || !validateDateMath(from)}
placeholder={FROM_PLACEHOLDER}
value={from || ''}
onChange={ev => onChangeRange(id, 'from', ev.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="sortRight" color="subdued" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldText
aria-label={i18n.translate('common.ui.aggTypes.dateRanges.toColumnLabel', {
defaultMessage: 'To',
description: 'End of a date range, e.g. From 2018-02-26 *To* 2018-02-28',
})}
compressed
fullWidth={true}
isInvalid={areBothEmpty || !validateDateMath(to)}
placeholder={TO_PLACEHOLDER}
value={to || ''}
onChange={ev => onChangeRange(id, 'to', ev.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
title={deleteBtnTitle}
aria-label={deleteBtnTitle}
disabled={value.length === 1}
color="danger"
iconType="trash"
onClick={() => onRemoveRange(id)}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
</Fragment>
);
})}

{hasInvalidRange && (
<EuiFormErrorText>
<FormattedMessage
id="common.ui.aggTypes.dateRanges.errorMessage"
defaultMessage="Each range should have at least one valid date."
/>
</EuiFormErrorText>
)}

<EuiSpacer size="s" />
<EuiFlexItem>
<EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
<FormattedMessage
id="common.ui.aggTypes.dateRanges.addRangeButtonLabel"
defaultMessage="Add range"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</>
<EuiFormRow compressed>
<>
<EuiText size="xs">
<EuiLink href={getDocLink('date.dateMath')} target="_blank" rel="noopener">
<FormattedMessage
id="common.ui.aggTypes.dateRanges.acceptedDateFormatsLinkText"
defaultMessage="Acceptable date formats"
/>
</EuiLink>
</EuiText>
<EuiSpacer size="s" />

{ranges.map(({ from, to, id }) => {
const deleteBtnTitle = i18n.translate(
'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel',
{
defaultMessage: 'Remove the range of {from} to {to}',
values: { from: from || FROM_PLACEHOLDER, to: to || TO_PLACEHOLDER },
}
);
const areBothEmpty = !from && !to;

return (
<Fragment key={id}>
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<EuiFlexItem>
<EuiFieldText
aria-label={i18n.translate('common.ui.aggTypes.dateRanges.fromColumnLabel', {
defaultMessage: 'From',
description:
'Beginning of a date range, e.g. *From* 2018-02-26 To 2018-02-28',
})}
compressed
fullWidth={true}
isInvalid={areBothEmpty || !validateDateMath(from)}
placeholder={FROM_PLACEHOLDER}
value={from || ''}
onChange={ev => onChangeRange(id, 'from', ev.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="sortRight" color="subdued" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldText
aria-label={i18n.translate('common.ui.aggTypes.dateRanges.toColumnLabel', {
defaultMessage: 'To',
description: 'End of a date range, e.g. From 2018-02-26 *To* 2018-02-28',
})}
compressed
fullWidth={true}
isInvalid={areBothEmpty || !validateDateMath(to)}
placeholder={TO_PLACEHOLDER}
value={to || ''}
onChange={ev => onChangeRange(id, 'to', ev.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
title={deleteBtnTitle}
aria-label={deleteBtnTitle}
disabled={value.length === 1}
color="danger"
iconType="trash"
onClick={() => onRemoveRange(id)}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
</Fragment>
);
})}

{hasInvalidRange && (
<EuiFormErrorText>
<FormattedMessage
id="common.ui.aggTypes.dateRanges.errorMessage"
defaultMessage="Each range should have at least one valid date."
/>
</EuiFormErrorText>
)}

<EuiSpacer size="s" />
<EuiFlexItem>
<EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
<FormattedMessage
id="common.ui.aggTypes.dateRanges.addRangeButtonLabel"
defaultMessage="Add range"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</>
</EuiFormRow>
);
}

Expand Down
137 changes: 70 additions & 67 deletions src/legacy/ui/public/agg_types/controls/ranges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
EuiIcon,
EuiSpacer,
EuiButtonEmpty,
EuiFormRow,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -88,75 +89,77 @@ function RangesParamEditor({ agg, value = [], setValue }: AggParamEditorProps<Ra
);

return (
<>
{ranges.map(({ from, to, id }) => {
const deleteBtnTitle = i18n.translate(
'common.ui.aggTypes.ranges.removeRangeButtonAriaLabel',
{
defaultMessage: 'Remove the range of {from} to {to}',
values: {
from: isEmpty(from) ? FROM_PLACEHOLDER : from,
to: isEmpty(to) ? TO_PLACEHOLDER : to,
},
}
);
<EuiFormRow compressed>
<>
{ranges.map(({ from, to, id }) => {
const deleteBtnTitle = i18n.translate(
'common.ui.aggTypes.ranges.removeRangeButtonAriaLabel',
{
defaultMessage: 'Remove the range of {from} to {to}',
values: {
from: isEmpty(from) ? FROM_PLACEHOLDER : from,
to: isEmpty(to) ? TO_PLACEHOLDER : to,
},
}
);

return (
<Fragment key={id}>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem>
<EuiFieldNumber
aria-label={i18n.translate('common.ui.aggTypes.ranges.fromLabel', {
defaultMessage: 'From',
})}
value={isEmpty(from) ? '' : from}
placeholder={FROM_PLACEHOLDER}
onChange={ev => onChangeRange(id, 'from', ev.target.value)}
fullWidth={true}
compressed={true}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="sortRight" color="subdued" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber
aria-label={i18n.translate('common.ui.aggTypes.ranges.toLabel', {
defaultMessage: 'To',
})}
value={isEmpty(to) ? '' : to}
placeholder={TO_PLACEHOLDER}
onChange={ev => onChangeRange(id, 'to', ev.target.value)}
fullWidth={true}
compressed={true}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
title={deleteBtnTitle}
aria-label={deleteBtnTitle}
disabled={value.length === 1}
color="danger"
iconType="trash"
onClick={() => onRemoveRange(id)}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
</Fragment>
);
})}
return (
<Fragment key={id}>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem>
<EuiFieldNumber
aria-label={i18n.translate('common.ui.aggTypes.ranges.fromLabel', {
defaultMessage: 'From',
})}
value={isEmpty(from) ? '' : from}
placeholder={FROM_PLACEHOLDER}
onChange={ev => onChangeRange(id, 'from', ev.target.value)}
fullWidth={true}
compressed={true}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="sortRight" color="subdued" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber
aria-label={i18n.translate('common.ui.aggTypes.ranges.toLabel', {
defaultMessage: 'To',
})}
value={isEmpty(to) ? '' : to}
placeholder={TO_PLACEHOLDER}
onChange={ev => onChangeRange(id, 'to', ev.target.value)}
fullWidth={true}
compressed={true}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
title={deleteBtnTitle}
aria-label={deleteBtnTitle}
disabled={value.length === 1}
color="danger"
iconType="trash"
onClick={() => onRemoveRange(id)}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
</Fragment>
);
})}

<EuiSpacer size="s" />
<EuiFlexItem>
<EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
<FormattedMessage
id="common.ui.aggTypes.ranges.addRangeButtonLabel"
defaultMessage="Add range"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</>
<EuiSpacer size="s" />
<EuiFlexItem>
<EuiButtonEmpty iconType="plusInCircleFilled" onClick={onAddRange} size="xs">
<FormattedMessage
id="common.ui.aggTypes.ranges.addRangeButtonLabel"
defaultMessage="Add range"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</>
</EuiFormRow>
);
}

Expand Down
9 changes: 8 additions & 1 deletion src/legacy/ui/public/vis/agg_configs.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,11 @@
* under the License.
*/

export type AggConfigs = any;
import { IndexedArray } from '../indexed_array';
import { AggConfig } from './agg_config';

export interface AggConfigs extends IndexedArray<AggConfig> {
bySchemaGroup: {
[key: string]: AggConfig[];
};
}
Loading

0 comments on commit 1fb0b65

Please sign in to comment.