@@ -122,39 +111,5 @@ export const HeaderExample = {
snippet: headerLinksSnippet,
demo: ,
},
- {
- title: 'Global query and filters',
- source: [
- {
- type: GuideSectionTypes.JS,
- code: globalQuerySource,
- },
- {
- type: GuideSectionTypes.HTML,
- code: globalQueryHtml,
- },
- ],
- text: (
-
-
-
- This documents a visual pattern for the eventual
- replacement of Kibana's global query and filter bars. The
- filter bar has been broken down into multiple components. There
- are still bugs and not all the logic is well-formed.
-
-
-
+
+ Save query text and filters that you want to use again.
+
+
+
+
+
+
+
+ {this.props.value !== '' ? (
+
+
+
+ Save
+
+
+
+ ) : (
+ undefined
+ )}
+
+
+
+ }
+ append={append}
+ suggestions={sampleItems}
+ onItemClick={this.onItemClick}
+ onInputChange={this.getInputValue}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js
index 3c4c903427b..b2a0dc3d12e 100644
--- a/src-docs/src/views/suggest/suggest.js
+++ b/src-docs/src/views/suggest/suggest.js
@@ -1,3 +1,101 @@
-import React from 'react';
+import React, { Component } from 'react';
-export default () => ;
+import {
+ EuiRadioGroup,
+ EuiSuggest,
+ EuiSpacer,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+const shortDescription = 'This is the description';
+
+const sampleItems = [
+ {
+ type: { iconType: 'kqlField', color: 'tint4' },
+ label: 'Field sample',
+ description: shortDescription,
+ },
+ {
+ type: { iconType: 'kqlValue', color: 'tint0' },
+ label: 'Value sample',
+ description: shortDescription,
+ },
+ {
+ type: { iconType: 'kqlSelector', color: 'tint2' },
+ label: 'Conjunction sample',
+ description: shortDescription,
+ },
+ {
+ type: { iconType: 'kqlOperand', color: 'tint1' },
+ label: 'Operator sample',
+ description: shortDescription,
+ },
+ {
+ type: { iconType: 'search', color: 'tint8' },
+ label: 'Recent search',
+ },
+ {
+ type: { iconType: 'save', color: 'tint3' },
+ label: 'Saved search',
+ },
+];
+
+export default class extends Component {
+ constructor(props) {
+ super(props);
+
+ const idPrefix = makeId();
+
+ this.radios = [
+ { id: `${idPrefix}0`, value: 'unchanged', label: 'No new changes' },
+ { id: `${idPrefix}1`, value: 'unsaved', label: 'Not yet saved' },
+ { id: `${idPrefix}2`, value: 'saved', label: 'Saved' },
+ { id: `${idPrefix}3`, value: 'loading', label: 'Loading' },
+ ];
+
+ this.state = {
+ status: 'unchanged',
+ radioIdSelected: `${idPrefix}0`,
+ value: '',
+ tooltipContent: '',
+ };
+ }
+
+ onChange = optionId => {
+ this.setState({
+ radioIdSelected: optionId,
+ status: this.radios.find(x => x.id === optionId).value,
+ });
+ };
+
+ onItemClick(item) {
+ alert(`Item [${item.label}] was clicked`);
+ }
+
+ getInputValue = val => {
+ this.setState({
+ value: val,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js
index b884f78846b..3b755e465e2 100644
--- a/src-docs/src/views/suggest/suggest_example.js
+++ b/src-docs/src/views/suggest/suggest_example.js
@@ -4,12 +4,22 @@ import { renderToHtml } from '../../services';
import { GuideSectionTypes } from '../../components';
-import { EuiCode, EuiSuggestItem } from '../../../../src/components';
+import {
+ EuiCallOut,
+ EuiCode,
+ EuiSpacer,
+ EuiSuggest,
+ EuiSuggestItem,
+} from '../../../../src/components';
import Suggest from './suggest';
const suggestSource = require('!!raw-loader!./suggest');
const suggestHtml = renderToHtml(Suggest);
+import SavedQueries from './saved_queries';
+const savedQueriesSource = require('!!raw-loader!./saved_queries');
+const savedQueriesHtml = renderToHtml(SavedQueries);
+
import SuggestItem from './suggest_item';
const suggestItemSource = require('!!raw-loader!./suggest_item');
const suggestItemHtml = renderToHtml(SuggestItem);
@@ -28,6 +38,27 @@ const suggestItemSnippet = [
/>`,
];
+const suggestSnippet = [
+ ``,
+];
+
export const SuggestExample = {
title: 'Suggest',
sections: [
@@ -45,10 +76,17 @@ export const SuggestExample = {
text: (
- EuiSuggest description goes here.
+ EuiSuggest is a text field component used to
+ display suggestions. The status of the component is shown on its
+ right side. The available status are:{' '}
+ unsaved, saved,
+ unchanged and isLoading.
),
+ props: { EuiSuggest },
+ snippet: suggestSnippet,
+ demo: ,
},
{
title: 'Suggest Item',
@@ -67,9 +105,9 @@ export const SuggestExample = {
EuiSuggestItem is a list item component to
display suggestions when typing queries in{' '}
- EuiSuggestInput. Use{' '}
- labelDisplay to set whether the{' '}
- label has a fixed width or not.
+ EuiSuggest. Use labelDisplay{' '}
+ to set whether the label has a fixed width or
+ not.
),
@@ -77,5 +115,33 @@ export const SuggestExample = {
snippet: suggestItemSnippet,
demo: ,
},
+ {
+ title: 'Saved queries and filters',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: savedQueriesSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: savedQueriesHtml,
+ },
+ ],
+ text: (
+
+
+
+ This documents a visual pattern for Kibana's
+ global query and filter bars. The filter bar has been broken down
+ into multiple components. There are still bugs and not all the
+ logic is well-formed.
+
+
+
+
{suggestInput}
;
+ }
+}
+
+EuiSuggest.propTypes = {
+ className: PropTypes.string,
+ /**
+ * Status of the current query 'notYetSaved', 'saved', 'unchanged' or 'loading'.
+ */
+ status: PropTypes.oneOf(['unsaved', 'saved', 'unchanged', 'loading']),
+ tooltipContent: PropTypes.string,
+ /**
+ * Element to be appended to the input bar (e.g. hashtag popover).
+ */
+ append: PropTypes.node,
+ /**
+ * List of suggestions to display using 'suggestItem'.
+ */
+ suggestions: PropTypes.array,
+ /**
+ * Handler for click on a suggestItem.
+ */
+ onItemClick: PropTypes.func,
+ onInputChange: PropTypes.func,
+};
+
+EuiSuggestInput.defaultProps = {
+ status: 'unchanged',
+};
diff --git a/src/components/suggest/suggest.test.js b/src/components/suggest/suggest.test.js
new file mode 100644
index 00000000000..69e5a9ccd5f
--- /dev/null
+++ b/src/components/suggest/suggest.test.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiSuggest } from './suggest';
+
+const sampleItems = [
+ {
+ type: { iconType: 'kqlField', color: 'tint4' },
+ label: 'Field sample',
+ description: 'Description',
+ },
+ {
+ type: { iconType: 'kqlValue', color: 'tint0' },
+ label: 'Value sample',
+ description: 'Description',
+ },
+];
+
+describe('EuiSuggest', () => {
+ test('is rendered', () => {
+ const component = render(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/src/components/suggest/suggest_input.js b/src/components/suggest/suggest_input.js
new file mode 100644
index 00000000000..6147b5cc4d3
--- /dev/null
+++ b/src/components/suggest/suggest_input.js
@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { EuiFilterButton } from '../filter_group';
+import { EuiFieldText } from '../form';
+import { EuiToolTip } from '../tool_tip';
+import { EuiIcon } from '../icon';
+import { EuiPopover, EuiInputPopover } from '../popover';
+
+const statusMap = {
+ unsaved: {
+ icon: 'dot',
+ color: 'accent',
+ tooltip: 'Changes have not been saved.',
+ },
+ saved: {
+ icon: 'checkInCircleFilled',
+ color: 'secondary',
+ tooltip: 'Saved.',
+ },
+ unchanged: {
+ icon: '',
+ color: 'secondary',
+ },
+};
+
+export class EuiSuggestInput extends Component {
+ state = {
+ value: '',
+ isPopoverOpen: false,
+ };
+
+ onFieldChange = e => {
+ this.setState({
+ value: e.target.value,
+ isPopoverOpen: e.target.value !== '' ? true : false,
+ });
+ this.props.sendValue(e.target.value);
+ };
+
+ closePopover = () => {
+ this.setState({
+ isPopoverOpen: false,
+ });
+ };
+
+ render() {
+ const {
+ className,
+ status,
+ append,
+ tooltipContent,
+ suggestions,
+ sendValue,
+ ...rest
+ } = this.props;
+
+ let icon;
+ let color;
+
+ if (statusMap[status]) {
+ icon = statusMap[status].icon;
+ color = statusMap[status].color;
+ }
+ const classes = classNames('euiSuggestInput', className);
+
+ // EuiFieldText's append accepts an array of elements so start by creating an empty array
+ const appendArray = [];
+
+ const statusElement = (status === 'saved' || status === 'unsaved') && (
+
+
+
+ );
+
+ // Push the status element to the array if it is not undefined
+ if (statusElement) appendArray.push(statusElement);
+
+ // Check to see if consumer passed an append item and if so, add it to the array
+ if (append) appendArray.push(append);
+
+ const customInput = (
+
+ );
+
+ return (
+
+ );
+ }
+}
+
+EuiSuggestInput.propTypes = {
+ className: PropTypes.string,
+ /**
+ * Status of the current query 'unsaved', 'saved', 'unchanged' or 'loading'.
+ */
+ status: PropTypes.oneOf(['unsaved', 'saved', 'unchanged', 'loading']),
+ tooltipContent: PropTypes.string,
+ /**
+ * Element to be appended to the input bar.
+ */
+ append: PropTypes.node,
+ /**
+ * List of suggestions to display using 'suggestItem'.
+ */
+ suggestions: PropTypes.array,
+};
+
+EuiSuggestInput.defaultProps = {
+ status: 'unchanged',
+};
diff --git a/src/components/suggest/suggest_input.test.js b/src/components/suggest/suggest_input.test.js
new file mode 100644
index 00000000000..d96dae5b097
--- /dev/null
+++ b/src/components/suggest/suggest_input.test.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiSuggestInput } from './suggest_input';
+
+const sampleItems = [
+ {
+ type: { iconType: 'kqlField', color: 'tint4' },
+ label: 'Field sample',
+ description: 'Description',
+ },
+ {
+ type: { iconType: 'kqlValue', color: 'tint0' },
+ label: 'Value sample',
+ description: 'Description',
+ },
+];
+
+describe('EuiSuggestInput', () => {
+ test('is rendered', () => {
+ const component = render(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest/suggest_item.js
similarity index 85%
rename from src/components/suggest_item/suggest_item.js
rename to src/components/suggest/suggest_item.js
index 0d396023414..7b07559c936 100644
--- a/src/components/suggest_item/suggest_item.js
+++ b/src/components/suggest/suggest_item.js
@@ -31,9 +31,16 @@ export const EuiSuggestItem = ({
type,
labelDisplay,
description,
+ onClick,
...rest
}) => {
- const classes = classNames('euiSuggestItem', className);
+ const classes = classNames(
+ 'euiSuggestItem',
+ {
+ 'euiSuggestItem-isClickable': onClick,
+ },
+ className
+ );
let colorClass = '';
@@ -51,14 +58,19 @@ export const EuiSuggestItem = ({
}
}
+ let OuterElement = 'div';
+ if (onClick) {
+ OuterElement = 'button';
+ }
+
return (
-
+
{label}
{description}
-
+
);
};
@@ -84,6 +96,10 @@ EuiSuggestItem.propTypes = {
* Label display is 'fixed' by default. Label will increase its width beyond 50% if needed with 'expand'.
*/
labelDisplay: PropTypes.oneOf(DISPLAYS),
+ /**
+ * Handler for click on a suggestItem.
+ */
+ onClick: PropTypes.func,
};
EuiSuggestItem.defaultProps = {
diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest/suggest_item.test.js
similarity index 100%
rename from src/components/suggest_item/suggest_item.test.js
rename to src/components/suggest/suggest_item.test.js
diff --git a/src/components/suggest_item/index.js b/src/components/suggest_item/index.js
deleted file mode 100644
index fde82176579..00000000000
--- a/src/components/suggest_item/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiSuggestItem } from './suggest_item';