Skip to content

Commit

Permalink
[ML] Hide anomaly entity filter button tooltips when clicked (#117493)
Browse files Browse the repository at this point in the history
* [ML] Hide anomaly entity filter button tooltips when clicked

* [ML] Move logic into blurButtonOnClick helper function
  • Loading branch information
peteharverson authored Nov 4, 2021
1 parent 3ec0dd7 commit 46e91f3
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import React, { Component } from 'react';
import { EuiLink, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { blurButtonOnClick } from '../../util/component_utils';

/*
* Component for rendering a list of record influencers inside a cell in the anomalies table.
Expand Down Expand Up @@ -59,13 +60,13 @@ export class InfluencersCell extends Component {
<EuiButtonIcon
size="s"
className="filter-button"
onClick={() =>
onClick={blurButtonOnClick(() => {
influencerFilter(
influencer.influencerFieldName,
influencer.influencerFieldValue,
'+'
)
}
);
})}
iconType="plusInCircle"
aria-label={i18n.translate(
'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel',
Expand All @@ -86,13 +87,13 @@ export class InfluencersCell extends Component {
<EuiButtonIcon
size="s"
className="filter-button"
onClick={() =>
onClick={blurButtonOnClick(() => {
influencerFilter(
influencer.influencerFieldName,
influencer.influencerFieldValue,
'-'
)
}
);
})}
iconType="minusInCircle"
aria-label={i18n.translate(
'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { i18n } from '@kbn/i18n';
import { EMPTY_FIELD_VALUE_LABEL } from '../../timeseriesexplorer/components/entity_control/entity_control';
import { MLCATEGORY } from '../../../../common/constants/field_types';
import { ENTITY_FIELD_OPERATIONS } from '../../../../common/util/anomaly_utils';
import { blurButtonOnClick } from '../../util/component_utils';

export type EntityCellFilter = (
entityName: string,
Expand Down Expand Up @@ -41,7 +42,9 @@ function getAddFilter({ entityName, entityValue, filter }: EntityCellProps) {
<EuiButtonIcon
size="s"
className="filter-button"
onClick={() => filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.ADD)}
onClick={blurButtonOnClick(() => {
filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.ADD);
})}
iconType="plusInCircle"
aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', {
defaultMessage: 'Add filter',
Expand All @@ -66,7 +69,9 @@ function getRemoveFilter({ entityName, entityValue, filter }: EntityCellProps) {
<EuiButtonIcon
size="s"
className="filter-button"
onClick={() => filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.REMOVE)}
onClick={blurButtonOnClick(() => {
filter(entityName, entityValue, ENTITY_FIELD_OPERATIONS.REMOVE);
})}
iconType="minusInCircle"
aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', {
defaultMessage: 'Remove filter',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
ENTITY_FIELD_OPERATIONS,
EntityFieldOperation,
} from '../../../../../../../common/util/anomaly_utils';
import { blurButtonOnClick } from '../../../../../util/component_utils';
import './_entity_filter.scss';

interface EntityFilterProps {
Expand Down Expand Up @@ -41,13 +42,13 @@ export const EntityFilter: FC<EntityFilterProps> = ({
<EuiButtonIcon
size="s"
className="filter-button"
onClick={() =>
onClick={blurButtonOnClick(() => {
onFilter({
influencerFieldName,
influencerFieldValue,
action: ENTITY_FIELD_OPERATIONS.ADD,
})
}
});
})}
iconType="plusInCircle"
aria-label={i18n.translate('xpack.ml.entityFilter.addFilterAriaLabel', {
defaultMessage: 'Add filter for {influencerFieldName} {influencerFieldValue}',
Expand All @@ -66,13 +67,13 @@ export const EntityFilter: FC<EntityFilterProps> = ({
<EuiButtonIcon
size="s"
className="filter-button"
onClick={() =>
onClick={blurButtonOnClick(() => {
onFilter({
influencerFieldName,
influencerFieldValue,
action: ENTITY_FIELD_OPERATIONS.REMOVE,
})
}
});
})}
iconType="minusInCircle"
aria-label={i18n.translate('xpack.ml.entityFilter.removeFilterAriaLabel', {
defaultMessage: 'Remove filter for {influencerFieldName} {influencerFieldValue}',
Expand Down
17 changes: 17 additions & 0 deletions x-pack/plugins/ml/public/application/util/component_utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { MouseEvent } from 'react';

/**
* Removes focus from a button element when clicked, for example to
* ensure a wrapping tooltip is hidden on click.
*/
export const blurButtonOnClick = (callback: Function) => (event: MouseEvent<HTMLButtonElement>) => {
(event.target as HTMLButtonElement).blur();
callback();
};

0 comments on commit 46e91f3

Please sign in to comment.