From b189d05bc3304ad6180787b8e48f78a352814ffc Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 26 May 2021 15:31:15 -0400 Subject: [PATCH] [Uptime] Move uptime actions to Header Actions Menu (#100298) * Move uptime actions to Kibana's HeaderActionsMenu. * Delete a comment. * Extract ActionMenu content to dedicated component to make testing easier. * Add tests. * Use `EuiHeaderLinks` instead of `EuiFlexItem`. * Clean up tests. * Prefer `getByRole` for a test. * Fix copy mistake. * Fix a test broken by the previous commit. * Prefer `EuiHeaderSectionItem` over `EuiHeaderSectionLink` to avoid nesting `button`s within `buttons`. * Reverse "Settings" and "Alerts" menu options to make them uniform with APM. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/common/header/action_menu.tsx | 72 ++----------- .../header/action_menu_content.test.tsx | 55 ++++++++++ .../common/header/action_menu_content.tsx | 101 ++++++++++++++++++ .../components/common/header/page_header.tsx | 4 - .../common/header/page_tabs.test.tsx | 5 - .../components/common/header/page_tabs.tsx | 17 +-- 6 files changed, 166 insertions(+), 88 deletions(-) create mode 100644 x-pack/plugins/uptime/public/components/common/header/action_menu_content.test.tsx create mode 100644 x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx index 1d5a375acedee..6186d6f38b968 100644 --- a/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx @@ -6,70 +6,12 @@ */ import React from 'react'; -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; -import { - createExploratoryViewUrl, - HeaderMenuPortal, - SeriesUrl, -} from '../../../../../observability/public'; +import { HeaderMenuPortal } from '../../../../../observability/public'; import { AppMountParameters } from '../../../../../../../src/core/public'; -import { useUptimeSettingsContext } from '../../../contexts/uptime_settings_context'; -import { useGetUrlParams } from '../../../hooks'; +import { ActionMenuContent } from './action_menu_content'; -const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', { - defaultMessage: 'Add data', -}); - -const ANALYZE_DATA = i18n.translate('xpack.uptime.analyzeDataButtonLabel', { - defaultMessage: 'Analyze data', -}); - -const ANALYZE_MESSAGE = i18n.translate('xpack.uptime.analyzeDataButtonLabel.message', { - defaultMessage: - 'EXPERIMENTAL - Analyze Data allows you to select and filter result data in any dimension and look for the cause or impact of performance problems.', -}); - -export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => { - const kibana = useKibana(); - const { basePath } = useUptimeSettingsContext(); - const { dateRangeStart, dateRangeEnd } = useGetUrlParams(); - - const syntheticExploratoryViewLink = createExploratoryViewUrl( - { - 'synthetics-series': { - dataType: 'synthetics', - time: { from: dateRangeStart, to: dateRangeEnd }, - } as SeriesUrl, - }, - basePath - ); - - return ( - - - - {ANALYZE_MESSAGE}

}> - - {ANALYZE_DATA} - - - - - - {ADD_DATA_LABEL} - - - - - ); -}; +export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => ( + + + +); diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.test.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.test.tsx new file mode 100644 index 0000000000000..bc5eab6f92111 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.test.tsx @@ -0,0 +1,55 @@ +/* + * 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 React from 'react'; +import { fireEvent, waitFor } from '@testing-library/react'; +import { render } from '../../../lib/helper/rtl_helpers'; +import { ActionMenuContent } from './action_menu_content'; + +describe('ActionMenuContent', () => { + it('renders alerts dropdown', async () => { + const { getByLabelText, getByText } = render(); + + const alertsDropdown = getByLabelText('Open alert context menu'); + fireEvent.click(alertsDropdown); + + await waitFor(() => { + expect(getByText('Create alert')); + expect(getByText('Manage alerts')); + }); + }); + + it('renders settings link', () => { + const { getByRole, getByText } = render(); + + const settingsAnchor = getByRole('link', { name: 'Navigate to the Uptime settings page' }); + expect(settingsAnchor.getAttribute('href')).toBe('/settings'); + expect(getByText('Settings')); + }); + + it('renders exploratory view link', () => { + const { getByLabelText, getByText } = render(); + + const analyzeAnchor = getByLabelText( + 'Navigate to the "Analyze Data" view to visualize Synthetics/User data' + ); + + expect(analyzeAnchor.getAttribute('href')).toContain('/app/observability/exploratory-view'); + expect(getByText('Analyze data')); + }); + + it('renders Add Data link', () => { + const { getByLabelText, getByText } = render(); + + const addDataAnchor = getByLabelText('Navigate to a tutorial about adding Uptime data'); + + // this href value is mocked, so it doesn't correspond to the real link + // that Kibana core services will provide + expect(addDataAnchor.getAttribute('href')).toBe('/app/uptime'); + expect(getByText('Add data')); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx new file mode 100644 index 0000000000000..ac7c8ae0a95c6 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx @@ -0,0 +1,101 @@ +/* + * 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 React from 'react'; +import { EuiButtonEmpty, EuiHeaderLinks, EuiHeaderSectionItem, EuiToolTip } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { useHistory } from 'react-router-dom'; +import { createExploratoryViewUrl, SeriesUrl } from '../../../../../observability/public'; +import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; +import { useUptimeSettingsContext } from '../../../contexts/uptime_settings_context'; +import { useGetUrlParams } from '../../../hooks'; +import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers'; +import { SETTINGS_ROUTE } from '../../../../common/constants'; +import { stringifyUrlParams } from '../../../lib/helper/stringify_url_params'; + +const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', { + defaultMessage: 'Add data', +}); + +const ANALYZE_DATA = i18n.translate('xpack.uptime.analyzeDataButtonLabel', { + defaultMessage: 'Analyze data', +}); + +const ANALYZE_MESSAGE = i18n.translate('xpack.uptime.analyzeDataButtonLabel.message', { + defaultMessage: + 'EXPERIMENTAL - Analyze Data allows you to select and filter result data in any dimension and look for the cause or impact of performance problems.', +}); + +export function ActionMenuContent(): React.ReactElement { + const kibana = useKibana(); + const { basePath } = useUptimeSettingsContext(); + const params = useGetUrlParams(); + const { dateRangeStart, dateRangeEnd } = params; + const history = useHistory(); + + const syntheticExploratoryViewLink = createExploratoryViewUrl( + { + 'synthetics-series': { + dataType: 'synthetics', + time: { from: dateRangeStart, to: dateRangeEnd }, + } as SeriesUrl, + }, + basePath + ); + + return ( + + + + + + + + + + + {ANALYZE_MESSAGE}

}> + + {ANALYZE_DATA} + + + + + + {ADD_DATA_LABEL} + + + + ); +} diff --git a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx index 753ce267d141c..28a133698ae8b 100644 --- a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx @@ -12,7 +12,6 @@ import { UptimeDatePicker } from '../uptime_date_picker'; import { SyntheticsCallout } from '../../overview/synthetics_callout'; import { PageTabs } from './page_tabs'; import { CertRefreshBtn } from '../../certificates/cert_refresh_btn'; -import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers'; import { MonitorPageTitle } from '../../monitor/monitor_title'; export interface Props { @@ -52,9 +51,6 @@ export const PageHeader = ({ {showMonitorTitle && } {showTabs && } - - - {showCertificateRefreshBtn && } {showDatePicker && ( diff --git a/x-pack/plugins/uptime/public/components/common/header/page_tabs.test.tsx b/x-pack/plugins/uptime/public/components/common/header/page_tabs.test.tsx index edb1b56668b15..2870006dc20be 100644 --- a/x-pack/plugins/uptime/public/components/common/header/page_tabs.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/page_tabs.test.tsx @@ -15,7 +15,6 @@ describe('PageTabs', () => { const { getByText } = render(); expect(getByText('Overview')).toBeInTheDocument(); expect(getByText('Certificates')).toBeInTheDocument(); - expect(getByText('Settings')).toBeInTheDocument(); }); it('it keep params while switching', () => { @@ -32,10 +31,6 @@ describe('PageTabs', () => { 'href', '/certificates?dateRangeStart=now-10m' ); - expect(getByTestId('settings-page-link')).toHaveAttribute( - 'href', - '/settings?dateRangeStart=now-10m' - ); }); it('it resets params on overview if already on overview', () => { diff --git a/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx b/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx index 263351d4ea4d0..74b037971c126 100644 --- a/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx @@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react'; import { EuiTabs, EuiTab } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useHistory, useRouteMatch } from 'react-router-dom'; -import { CERTIFICATES_ROUTE, OVERVIEW_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants'; +import { CERTIFICATES_ROUTE, OVERVIEW_ROUTE } from '../../../../common/constants'; import { useGetUrlParams } from '../../../hooks'; import { stringifyUrlParams } from '../../../lib/helper/stringify_url_params'; @@ -28,13 +28,6 @@ const tabs = [ name: 'Certificates', dataTestSubj: 'uptimeCertificatesLink', }, - { - id: SETTINGS_ROUTE, - dataTestSubj: 'settings-page-link', - name: i18n.translate('xpack.uptime.page_header.settingsLink', { - defaultMessage: 'Settings', - }), - }, ]; export const PageTabs = () => { @@ -45,7 +38,6 @@ export const PageTabs = () => { const params = useGetUrlParams(); const isOverView = useRouteMatch(OVERVIEW_ROUTE); - const isSettings = useRouteMatch(SETTINGS_ROUTE); const isCerts = useRouteMatch(CERTIFICATES_ROUTE); useEffect(() => { @@ -55,13 +47,10 @@ export const PageTabs = () => { if (isCerts) { setSelectedTabId(CERTIFICATES_ROUTE); } - if (isSettings) { - setSelectedTabId(SETTINGS_ROUTE); - } - if (!isOverView?.isExact && !isCerts && !isSettings) { + if (!isOverView?.isExact && !isCerts) { setSelectedTabId(null); } - }, [isCerts, isSettings, isOverView]); + }, [isCerts, isOverView]); const createHrefForTab = (id: string) => { if (selectedTabId === OVERVIEW_ROUTE && id === OVERVIEW_ROUTE) {