github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Improve alerts popover accessibility and semantics (#135270)

Browse source
This commit is contained in:
Davis McPhee 2022-06-28 10:59:57 -03:00 • committed by GitHub
parent a7c4f36ac7
commit 7fd4e6af0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.test.tsx Normal file
View file

@ -0,0 +1,46 @@
/*
* 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 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import { findTestSubject } from '@elastic/eui/lib/test';
import { createSearchSourceMock } from '@kbn/data-plugin/public/mocks';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { AlertsPopover } from './open_alerts_popover';
import { discoverServiceMock } from '../../../../__mocks__/services';
import { indexPatternWithTimefieldMock } from '../../../../__mocks__/index_pattern_with_timefield';
import { indexPatternMock } from '../../../../__mocks__/index_pattern';
const mount = (dataView = indexPatternMock) =>
mountWithIntl(
<KibanaContextProvider services={discoverServiceMock}>
<AlertsPopover
searchSource={createSearchSourceMock({ index: dataView })}
anchorElement={document.createElement('div')}
savedQueryId={undefined}
onClose={() => {}}
/>
</KibanaContextProvider>
);
describe('OpenAlertsPopover', () => {
it('should render with the create search threshold rule button disabled if the data view has no time field', () => {
const component = mount();
expect(findTestSubject(component, 'discoverCreateAlertButton').prop('disabled')).toBeTruthy();
});
it('should render with the create search threshold rule button enabled if the data view has a time field', () => {
const component = mount(indexPatternWithTimefieldMock);
expect(findTestSubject(component, 'discoverCreateAlertButton').prop('disabled')).toBeFalsy();
});
it('should render the manage rules and connectors link', () => {
const component = mount();
expect(findTestSubject(component, 'discoverManageAlertsButton').exists()).toBeTruthy();
});
});

63
src/plugins/discover/public/application/main/components/top_nav/open_alerts_popover.tsx
View file

@ -9,7 +9,7 @@
import React, { useCallback, useState, useMemo } from 'react';
import ReactDOM from 'react-dom';
import { I18nStart } from '@kbn/core/public';
import { EuiWrappingPopover, EuiLink, EuiContextMenu, EuiToolTip } from '@elastic/eui';
import { EuiWrappingPopover, EuiContextMenu } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { ISearchSource } from '@kbn/data-plugin/common';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@ -79,58 +79,41 @@ export function AlertsPopover({
}, [getParams, onClose, triggersActionsUi, alertFlyoutVisible]);
const hasTimeFieldName = dataView.timeFieldName;
let createSearchThresholdRuleLink = (
<EuiLink
data-test-subj="discoverCreateAlertButton"
onClick={() => setAlertFlyoutVisibility(true)}
disabled={!hasTimeFieldName}
>
<FormattedMessage
id="discover.alerts.createSearchThreshold"
defaultMessage="Create search threshold rule"
/>
</EuiLink>
);
if (!hasTimeFieldName) {
const toolTipContent = (
<FormattedMessage
id="discover.alerts.missedTimeFieldToolTip"
defaultMessage="Data view does not have a time field."
/>
);
createSearchThresholdRuleLink = (
<EuiToolTip position="top" content={toolTipContent}>
{createSearchThresholdRuleLink}
</EuiToolTip>
);
}
const panels = [
{
id: 'mainPanel',
name: 'Alerting',
items: [
{
name: <>{createSearchThresholdRuleLink}</>,
name: (
<FormattedMessage
id="discover.alerts.createSearchThreshold"
defaultMessage="Create search threshold rule"
/>
),
icon: 'bell',
onClick: () => setAlertFlyoutVisibility(true),
disabled: !hasTimeFieldName,
toolTipContent: hasTimeFieldName ? undefined : (
<FormattedMessage
id="discover.alerts.missedTimeFieldToolTip"
defaultMessage="Data view does not have a time field."
/>
),
['data-test-subj']: 'discoverCreateAlertButton',
},
{
name: (
<EuiLink
color="text"
href={services?.application?.getUrlForApp(
'management/insightsAndAlerting/triggersActions/alerts'
)}
>
<FormattedMessage
id="discover.alerts.manageRulesAndConnectors"
defaultMessage="Manage rules and connectors"
/>
</EuiLink>
<FormattedMessage
id="discover.alerts.manageRulesAndConnectors"
defaultMessage="Manage rules and connectors"
/>
),
icon: 'tableOfContents',
href: services?.application?.getUrlForApp(
'management/insightsAndAlerting/triggersActions/alerts'
),
['data-test-subj']: 'discoverManageAlertsButton',
},
],
},

4
test/functional/apps/discover/_discover_accessibility.ts
View file

@ -86,6 +86,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await focusAndPressButton('discoverAlertsButton');
expect(await hasFocus('discoverAlertsButton')).to.be(false);
await focusAndPressButton('discoverCreateAlertButton');
await retry.waitFor(
'Create Rule flyout is visible',
async () => await testSubjects.exists('addRuleFlyoutTitle')
);
expect(await hasFocus('discoverCreateAlertButton')).to.be(false);
await retry.try(async () => {
await browser.pressKeys(browser.keys.ESCAPE);