diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c323b4871..5bdbe5577a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -58,6 +58,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Removed AngularJS component `click-action` [#6613](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6613) - Removed AngularJS service `config-handler` [#6631](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6631) - Removed legacy discover references and methods [#6646](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6646) +- Removed custom EuiSuggestItem component in favor of OUI's native component [#6714](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6714) ## Wazuh v4.8.0 - OpenSearch Dashboards 2.10.0 - Revision 08 diff --git a/plugins/main/public/components/eui-suggest/index.js b/plugins/main/public/components/eui-suggest/index.js index 2204a3cb21..93ac8c3eab 100644 --- a/plugins/main/public/components/eui-suggest/index.js +++ b/plugins/main/public/components/eui-suggest/index.js @@ -1,5 +1,3 @@ export { EuiSuggestInput } from './suggest_input'; -export { EuiSuggestItem } from './suggest_item'; - export { EuiSuggest } from './suggest'; diff --git a/plugins/main/public/components/eui-suggest/suggest.js b/plugins/main/public/components/eui-suggest/suggest.js index cfb4cd1f24..4298a003d7 100644 --- a/plugins/main/public/components/eui-suggest/suggest.js +++ b/plugins/main/public/components/eui-suggest/suggest.js @@ -1,17 +1,17 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { EuiSuggestItem } from './suggest_item'; +import { EuiSuggestItem } from '@elastic/eui'; import { EuiSuggestInput } from './suggest_input'; export class EuiSuggest extends Component { state = { value: '', - status: 'unsaved' + status: 'unsaved', }; getValue = val => { this.setState({ - value: val + value: val, }); }; @@ -76,9 +76,9 @@ EuiSuggest.propTypes = { onInputChange: PropTypes.func, isOpen: PropTypes.bool, onClosePopover: PropTypes.func, - onPopoverFocus: PropTypes.func + onPopoverFocus: PropTypes.func, }; EuiSuggestInput.defaultProps = { - status: 'unchanged' + status: 'unchanged', }; diff --git a/plugins/main/public/components/eui-suggest/suggest_item.js b/plugins/main/public/components/eui-suggest/suggest_item.js deleted file mode 100644 index 31d7c2bc4f..0000000000 --- a/plugins/main/public/components/eui-suggest/suggest_item.js +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { EuiIcon, IconPropType } from '@elastic/eui'; - -const colorToClassNameMap = { - tint0: 'euiSuggestItem__type--tint0', - tint1: 'euiSuggestItem__type--tint1', - tint2: 'euiSuggestItem__type--tint2', - tint3: 'euiSuggestItem__type--tint3', - tint4: 'euiSuggestItem__type--tint4', - tint5: 'euiSuggestItem__type--tint5', - tint6: 'euiSuggestItem__type--tint6', - tint7: 'euiSuggestItem__type--tint7', - tint8: 'euiSuggestItem__type--tint8', - tint9: 'euiSuggestItem__type--tint9' -}; - -export const COLORS = Object.keys(colorToClassNameMap); - -const labelDisplayToClassMap = { - fixed: 'euiSuggestItem__labelDisplay--fixed', - expand: 'euiSuggestItem__labelDisplay--expand' -}; - -export const DISPLAYS = Object.keys(labelDisplayToClassMap); - -export const EuiSuggestItem = ({ - className, - label, - type, - labelDisplay, - description, - onClick, - ...rest -}) => { - const classes = classNames( - 'euiSuggestItem', - { - 'euiSuggestItem-isClickable': onClick - }, - className - ); - - let colorClass = ''; - - const labelDisplayClass = classNames( - 'euiSuggestItem__label', - labelDisplayToClassMap[labelDisplay], - { - 'euiSuggestItem__labelDisplay--expand': !description - } - ); - - if (type && type.color) { - if (COLORS.indexOf(type.color) > -1) { - colorClass = colorToClassNameMap[type.color]; - } - } - - let OuterElement = 'div'; - if (onClick) { - OuterElement = 'button'; - } - - return ( - - - - - {label} - {description} - - ); -}; - -EuiSuggestItem.propTypes = { - className: PropTypes.string, - /** - * Takes 'iconType' for EuiIcon and 'color'. 'color' can be tint1 through tint9. - */ - type: PropTypes.shape({ - iconType: IconPropType, - color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]) - }), - /** - * Label or primary text. - */ - label: PropTypes.string, - /** - * Description or secondary text (optional). - */ - description: PropTypes.string, - /** - * 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 = { - labelDisplay: 'fixed' -};