From ccf11077fbf9d1ceebbc6a181e5436d378973749 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 15 Dec 2020 14:53:00 +0100 Subject: [PATCH 01/20] Remove tabs from details page --- .../components/common/header/page_header.tsx | 12 ++-- .../components/monitor/monitor_title.tsx | 55 +++++++++++++++++++ .../plugins/uptime/public/pages/monitor.tsx | 17 +----- 3 files changed, 63 insertions(+), 21 deletions(-) create mode 100644 x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx 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 7d093efd31be0..49c414dde79fd 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 @@ -5,7 +5,7 @@ */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import styled from 'styled-components'; import { useRouteMatch } from 'react-router-dom'; import { UptimeDatePicker } from '../uptime_date_picker'; @@ -19,6 +19,7 @@ import { } from '../../../../common/constants'; import { CertRefreshBtn } from '../../certificates/cert_refresh_btn'; import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers'; +import { MonitorPageTitle } from '../../monitor/monitor_title'; const StyledPicker = styled(EuiFlexItem)` &&& { @@ -52,19 +53,20 @@ export const PageHeader = () => { const isMonRoute = useRouteMatch(MONITOR_ROUTE); + if (isStepDetailRoute) { + return null; + } + return ( <> - - - + {isMonRoute ? : } {!isSettingsRoute && } - {isMonRoute && } {!isMonRoute && } ); diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx new file mode 100644 index 0000000000000..00398fed8d48a --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.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; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; +import React from 'react'; +import { useSelector } from 'react-redux'; +import { useMonitorId } from '../../hooks'; +import { monitorStatusSelector } from '../../state/selectors'; +import { EnableMonitorAlert } from '../overview/monitor_list/columns/enable_alert'; +import { Ping } from '../../../common/runtime_types/ping'; + +const isAutogeneratedId = (id: string) => { + const autoGeneratedId = /^auto-(icmp|http|tcp)-OX[A-F0-9]{16}-[a-f0-9]{16}/; + return autoGeneratedId.test(id); +}; + +// For monitors with no explicit ID, we display the URL instead of the +// auto-generated ID because it is difficult to derive meaning from a +// generated id like `auto-http-0X8D6082B94BBE3B8A`. +// We may deprecate this behavior in the next major release, because +// the heartbeat config will require an explicit ID. +const getPageTitle = (monId: string, selectedMonitor: Ping | null) => { + if (isAutogeneratedId(monId)) { + return selectedMonitor?.url?.full || monId; + } + return monId; +}; + +export const MonitorPageTitle: React.FC = () => { + const monitorId = useMonitorId(); + + const selectedMonitor = useSelector(monitorStatusSelector); + + const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor); + + return ( + + + +

{nameOrId}

+ + + + + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx index 559f118e89665..43116e6b02680 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { EuiSpacer } from '@elastic/eui'; import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { monitorStatusSelector } from '../state/selectors'; @@ -16,7 +16,6 @@ import { MonitorStatusDetails, PingList } from '../components/monitor'; import { getDynamicSettings } from '../state/actions/dynamic_settings'; import { Ping } from '../../common/runtime_types/ping'; import { setSelectedMonitorId } from '../state/actions'; -import { EnableMonitorAlert } from '../components/overview/monitor_list/columns/enable_alert'; import { getMonitorAlertsAction } from '../state/alerts/alerts'; import { useInitApp } from '../hooks/use_init_app'; @@ -63,20 +62,6 @@ export const MonitorPage: React.FC = () => { return ( <> - - - -

{nameOrId}

- - - - - - - From 12b3303329e5e8ceaf3d48661f50e47f786ece28 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 15 Dec 2020 16:09:00 +0100 Subject: [PATCH 02/20] update --- .../uptime/public/components/common/header/page_header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 49c414dde79fd..3db39e8607eda 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 @@ -45,7 +45,7 @@ export const PageHeader = () => { const DatePickerComponent = () => isCertRoute ? ( - ) : isStepDetailRoute ? null : ( + ) : ( From b8977ca56ade2bae810f40c59b1eec7782ae342e Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 15 Dec 2020 17:51:31 +0100 Subject: [PATCH 03/20] fix monitord id --- .../components/common/header/page_header.tsx | 6 ++--- .../components/monitor/monitor_title.tsx | 3 +++ .../plugins/uptime/public/pages/monitor.tsx | 27 +------------------ x-pack/plugins/uptime/public/routes.tsx | 26 +++++++++--------- 4 files changed, 19 insertions(+), 43 deletions(-) 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 3db39e8607eda..c554a54e69d64 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 @@ -51,7 +51,7 @@ export const PageHeader = () => { ); - const isMonRoute = useRouteMatch(MONITOR_ROUTE); + const isMonitorRoute = useRouteMatch(MONITOR_ROUTE); if (isStepDetailRoute) { return null; @@ -61,13 +61,13 @@ export const PageHeader = () => { <> - {isMonRoute ? : } + {isMonitorRoute ? : } {!isSettingsRoute && } - {!isMonRoute && } + {!isMonitorRoute && } ); }; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index 00398fed8d48a..c0dec8f589d1c 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -11,6 +11,7 @@ import { useMonitorId } from '../../hooks'; import { monitorStatusSelector } from '../../state/selectors'; import { EnableMonitorAlert } from '../overview/monitor_list/columns/enable_alert'; import { Ping } from '../../../common/runtime_types/ping'; +import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; const isAutogeneratedId = (id: string) => { const autoGeneratedId = /^auto-(icmp|http|tcp)-OX[A-F0-9]{16}-[a-f0-9]{16}/; @@ -36,6 +37,8 @@ export const MonitorPageTitle: React.FC = () => { const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor); + useBreadcrumbs([{ text: nameOrId }]); + return ( diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx index 43116e6b02680..e62809bd863cc 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.tsx @@ -6,36 +6,16 @@ import { EuiSpacer } from '@elastic/eui'; import React, { useEffect } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { monitorStatusSelector } from '../state/selectors'; -import { useBreadcrumbs } from '../hooks/use_breadcrumbs'; +import { useDispatch } from 'react-redux'; import { useTrackPageview } from '../../../observability/public'; import { useMonitorId } from '../hooks'; import { MonitorCharts } from '../components/monitor'; import { MonitorStatusDetails, PingList } from '../components/monitor'; import { getDynamicSettings } from '../state/actions/dynamic_settings'; -import { Ping } from '../../common/runtime_types/ping'; import { setSelectedMonitorId } from '../state/actions'; import { getMonitorAlertsAction } from '../state/alerts/alerts'; import { useInitApp } from '../hooks/use_init_app'; -const isAutogeneratedId = (id: string) => { - const autoGeneratedId = /^auto-(icmp|http|tcp)-OX[A-F0-9]{16}-[a-f0-9]{16}/; - return autoGeneratedId.test(id); -}; - -// For monitors with no explicit ID, we display the URL instead of the -// auto-generated ID because it is difficult to derive meaning from a -// generated id like `auto-http-0X8D6082B94BBE3B8A`. -// We may deprecate this behavior in the next major release, because -// the heartbeat config will require an explicit ID. -const getPageTitle = (monId: string, selectedMonitor: Ping | null) => { - if (isAutogeneratedId(monId)) { - return selectedMonitor?.url?.full || monId; - } - return monId; -}; - export const MonitorPage: React.FC = () => { const dispatch = useDispatch(); @@ -52,14 +32,9 @@ export const MonitorPage: React.FC = () => { dispatch(getMonitorAlertsAction.get()); }, [monitorId, dispatch]); - const selectedMonitor = useSelector(monitorStatusSelector); - useTrackPageview({ app: 'uptime', path: 'monitor' }); useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 }); - const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor); - useBreadcrumbs([{ text: nameOrId }]); - return ( <> diff --git a/x-pack/plugins/uptime/public/routes.tsx b/x-pack/plugins/uptime/public/routes.tsx index 65526f9bca4fc..465b225dcb374 100644 --- a/x-pack/plugins/uptime/public/routes.tsx +++ b/x-pack/plugins/uptime/public/routes.tsx @@ -81,19 +81,17 @@ const RouteInit: React.FC> = export const PageRouter: FC = () => { return ( - <> - - - {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => ( - -
- - -
- - ))} - - - + + {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => ( + +
+ + + +
+ + ))} + + ); }; From 914f9b3fce69c518cdba68a4021e899578bed894 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 15 Dec 2020 17:56:15 +0100 Subject: [PATCH 04/20] var name --- .../uptime/public/components/monitor/monitor_title.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index c0dec8f589d1c..b96bdf457d055 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -23,11 +23,11 @@ const isAutogeneratedId = (id: string) => { // generated id like `auto-http-0X8D6082B94BBE3B8A`. // We may deprecate this behavior in the next major release, because // the heartbeat config will require an explicit ID. -const getPageTitle = (monId: string, selectedMonitor: Ping | null) => { - if (isAutogeneratedId(monId)) { - return selectedMonitor?.url?.full || monId; +const getPageTitle = (monitorId: string, selectedMonitor: Ping | null) => { + if (isAutogeneratedId(monitorId)) { + return selectedMonitor?.url?.full || monitorId; } - return monId; + return monitorId; }; export const MonitorPageTitle: React.FC = () => { From 0b9a3b28b08636323dafa9602b9d93448dba820f Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Thu, 17 Dec 2020 09:18:30 -0500 Subject: [PATCH 05/20] add Uptime PageHeader tests to test for the presences of tabs or header --- .../header/__tests__/page_header.test.tsx | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx index 0b72cc64f8102..b57f31a6c2bba 100644 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx @@ -6,9 +6,32 @@ import React from 'react'; import { PageHeader } from '../page_header'; +import { createMemoryHistory } from 'history'; import { renderWithRouter, MountWithReduxProvider } from '../../../../lib'; +import { AppState, store } from '../../../../state'; describe('PageHeader', () => { + const monitorName = 'sample monitor'; + const initialState = store.getState(); + const state: AppState = { + ...initialState, + monitorStatus: { + loading: false, + status: { + docId: '', + timestamp: '', + monitor: { + duration: { us: 0 }, + id: '', + status: '', + type: '', + ...initialState?.monitorStatus?.status, + name: monitorName, + }, + }, + }, + }; + it('shallow renders with the date picker', () => { const component = renderWithRouter( @@ -35,4 +58,46 @@ describe('PageHeader', () => { ); expect(component).toMatchSnapshot('page_header_with_extra_links'); }); + + it('renders null when on a step detail page', () => { + const history = createMemoryHistory(); + // navigate to step page + history.push('/journey/1/step/1'); + const component = renderWithRouter( + + + , + history + ); + expect(component.html()).toBe(null); + }); + + it('renders monitor header without tabs when on a monitor page', () => { + const history = createMemoryHistory(); + // navigate to monitor page + history.push('/monitor/1'); + const component = renderWithRouter( + + + , + history + ); + expect(component.find('h1').text()).toBe(monitorName); + expect(component.find('[data-test-subj="uptimeSettingsToOverviewLink"]').length).toBe(0); + expect(component.find('[data-test-subj="uptimeCertificatesLink"]').length).toBe(0); + expect(component.find('[data-test-subj="settings-page-link"]').length).toBe(0); + }); + + it('renders tabs when not on a monitor or step detail page', () => { + const history = createMemoryHistory(); + const component = renderWithRouter( + + + , + history + ); + expect(component.find('[data-test-subj="uptimeSettingsToOverviewLink"]').length).toBe(1); + expect(component.find('[data-test-subj="uptimeCertificatesLink"]').length).toBe(1); + expect(component.find('[data-test-subj="settings-page-link"]').length).toBe(1); + }); }); From 57439d60b58e05009f5db8844498d0b9b5f86ccf Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Thu, 17 Dec 2020 12:12:16 -0500 Subject: [PATCH 06/20] add Uptime MonitorPageTitle test --- .../monitor/__tests__/monitor_title.test.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx diff --git a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx new file mode 100644 index 0000000000000..d366935b6e8f4 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { MonitorPageTitle } from '../monitor_title'; +import { renderWithRouter, MountWithReduxProvider } from '../../../lib'; +import { AppState, store } from '../../../state'; + +describe('MonitorTitle component', () => { + const monitorName = 'sample monitor'; + const initialState = store.getState(); + const state: AppState = { + ...initialState, + monitorStatus: { + loading: false, + status: { + docId: '', + timestamp: '', + monitor: { + duration: { us: 0 }, + id: '', + status: '', + type: '', + ...initialState?.monitorStatus?.status, + name: monitorName, + }, + }, + }, + }; + + it('renders the monitor heading and EnableMonitorAlert toggle', () => { + const component = renderWithRouter( + + + + ); + expect(component.find('h1').text()).toBe(monitorName); + expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1); + }); +}); From b157dae69685bc6482775e16c8eeeee20b7e5f76 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Thu, 17 Dec 2020 15:02:48 -0500 Subject: [PATCH 07/20] Uptime adjust auto generated monitor id regex --- .../plugins/uptime/public/components/monitor/monitor_title.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index b96bdf457d055..7acafba92caa0 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -14,7 +14,7 @@ import { Ping } from '../../../common/runtime_types/ping'; import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; const isAutogeneratedId = (id: string) => { - const autoGeneratedId = /^auto-(icmp|http|tcp)-OX[A-F0-9]{16}-[a-f0-9]{16}/; + const autoGeneratedId = /^auto-(icmp|http|tcp|browser)-0X[A-F0-9]{16}.*/; return autoGeneratedId.test(id); }; From 1792f21e13be1e17853f07c0ee1fe747939e4aee Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Thu, 17 Dec 2020 15:03:40 -0500 Subject: [PATCH 08/20] Uptime add tests for MonitorPageTitle to test behavior for missing monitor names and auto generated monitor ids --- .../monitor/__tests__/monitor_title.test.tsx | 80 ++++++++++++++++--- 1 file changed, 69 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx index d366935b6e8f4..146b19942bb18 100644 --- a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx @@ -5,27 +5,56 @@ */ import React from 'react'; +import * as reactRouterDom from 'react-router-dom'; +import { createMemoryHistory } from 'history'; import { MonitorPageTitle } from '../monitor_title'; import { renderWithRouter, MountWithReduxProvider } from '../../../lib'; import { AppState, store } from '../../../state'; +jest.mock('react-router-dom', () => ({ + __esModule: true, + // @ts-ignore + ...jest.requireActual('react-router-dom'), +})); + describe('MonitorTitle component', () => { const monitorName = 'sample monitor'; + const monitorId = 'always-down'; const initialState = store.getState(); - const state: AppState = { + const url = { + full: 'https://www.elastic.co/', + }; + const monitorStatus = { + loading: false, + status: { + docId: '', + timestamp: '', + monitor: { + duration: { us: 0 }, + id: monitorId, + status: '', + type: '', + ...initialState?.monitorStatus?.status, + name: monitorName, + }, + url, + }, + }; + + const stateWithMonitorName: AppState = { + ...initialState, + monitorStatus, + }; + + const stateWithoutMonitorName: AppState = { ...initialState, monitorStatus: { - loading: false, + ...monitorStatus, status: { - docId: '', - timestamp: '', + ...monitorStatus.status, monitor: { - duration: { us: 0 }, - id: '', - status: '', - type: '', - ...initialState?.monitorStatus?.status, - name: monitorName, + ...monitorStatus.status.monitor, + name: undefined, }, }, }, @@ -33,11 +62,40 @@ describe('MonitorTitle component', () => { it('renders the monitor heading and EnableMonitorAlert toggle', () => { const component = renderWithRouter( - + ); expect(component.find('h1').text()).toBe(monitorName); expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1); }); + + it('renders the user provided monitorId when the name is not present', () => { + jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ + monitorId: 'YWx3YXlzLWRvd24', // resolves to always-down + })); + const component = renderWithRouter( + + + + ); + expect(component.find('h1').text()).toBe(monitorId); + }); + + it('renders the url when the monitorId is auto generated and the monitor name is not present', () => { + jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ + monitorId: 'YXV0by1pY21wLTBYMjQ5NDhGNDY3QzZDNEYwMQ', // resolves to auto-icmp-0X24948F467C6C4F01 + })); + + const history = createMemoryHistory(); + // navigate to monitor page + + const component = renderWithRouter( + + + , + history + ); + expect(component.find('h1').text()).toBe(url.full); + }); }); From b1df186106ec6f7b21620cb427a4d84f5b8cfa7b Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Thu, 17 Dec 2020 15:10:48 -0500 Subject: [PATCH 09/20] remove history from MonitorPageTitle test --- .../components/monitor/__tests__/monitor_title.test.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx index 146b19942bb18..a26b427c1d9f3 100644 --- a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx @@ -6,7 +6,6 @@ import React from 'react'; import * as reactRouterDom from 'react-router-dom'; -import { createMemoryHistory } from 'history'; import { MonitorPageTitle } from '../monitor_title'; import { renderWithRouter, MountWithReduxProvider } from '../../../lib'; import { AppState, store } from '../../../state'; @@ -86,15 +85,10 @@ describe('MonitorTitle component', () => { jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ monitorId: 'YXV0by1pY21wLTBYMjQ5NDhGNDY3QzZDNEYwMQ', // resolves to auto-icmp-0X24948F467C6C4F01 })); - - const history = createMemoryHistory(); - // navigate to monitor page - const component = renderWithRouter( - , - history + ); expect(component.find('h1').text()).toBe(url.full); }); From fd703a6b253da5008811ed0ad2f457246a922173 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 22 Dec 2020 20:09:57 -0500 Subject: [PATCH 10/20] adjust uptime tabs tests --- .../__tests__/__snapshots__/page_header.test.tsx.snap | 3 +++ .../common/header/__tests__/page_header.test.tsx | 8 ++------ .../uptime/public/components/common/header/page_tabs.tsx | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap index 05a78624848c6..84b2e21e50d60 100644 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap @@ -114,6 +114,7 @@ Array [ >
@@ -416,6 +417,7 @@ Array [ >
@@ -718,6 +720,7 @@ Array [ >
diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx index b57f31a6c2bba..da74f8582dcbb 100644 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx @@ -83,9 +83,7 @@ describe('PageHeader', () => { history ); expect(component.find('h1').text()).toBe(monitorName); - expect(component.find('[data-test-subj="uptimeSettingsToOverviewLink"]').length).toBe(0); - expect(component.find('[data-test-subj="uptimeCertificatesLink"]').length).toBe(0); - expect(component.find('[data-test-subj="settings-page-link"]').length).toBe(0); + expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(0); }); it('renders tabs when not on a monitor or step detail page', () => { @@ -96,8 +94,6 @@ describe('PageHeader', () => { , history ); - expect(component.find('[data-test-subj="uptimeSettingsToOverviewLink"]').length).toBe(1); - expect(component.find('[data-test-subj="uptimeCertificatesLink"]').length).toBe(1); - expect(component.find('[data-test-subj="settings-page-link"]').length).toBe(1); + expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(1); }); }); 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 68df15c52c65e..56da7d5f92803 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 @@ -73,7 +73,7 @@ export const PageTabs = () => { }; return ( - + {renderTabs()} ); From 34cbb1859b48702ad7ef49f7b14b040b092f8d9e Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 29 Dec 2020 17:03:06 -0500 Subject: [PATCH 11/20] adjust MonitorPageTitle tests to mock useSelector --- .../monitor/__tests__/monitor_title.test.tsx | 123 +++++++++--------- 1 file changed, 59 insertions(+), 64 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx index a26b427c1d9f3..2063d641e77c4 100644 --- a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx @@ -5,91 +5,86 @@ */ import React from 'react'; +import moment from 'moment'; import * as reactRouterDom from 'react-router-dom'; +import * as redux from 'react-redux'; +import { Ping } from '../../../../common/runtime_types'; import { MonitorPageTitle } from '../monitor_title'; -import { renderWithRouter, MountWithReduxProvider } from '../../../lib'; -import { AppState, store } from '../../../state'; +import { renderWithRouter } from '../../../lib'; -jest.mock('react-router-dom', () => ({ - __esModule: true, - // @ts-ignore - ...jest.requireActual('react-router-dom'), -})); +jest.mock('react-router-dom', () => { + const originalModule = jest.requireActual('react-router-dom'); + + return { + ...originalModule, + useParams: jest.fn(), + }; +}); + +jest.mock('react-redux', () => { + const originalModule = jest.requireActual('react-redux'); + + return { + ...originalModule, + useSelector: jest.fn(), + }; +}); describe('MonitorTitle component', () => { const monitorName = 'sample monitor'; - const monitorId = 'always-down'; - const initialState = store.getState(); - const url = { - full: 'https://www.elastic.co/', - }; - const monitorStatus = { - loading: false, - status: { - docId: '', - timestamp: '', - monitor: { - duration: { us: 0 }, - id: monitorId, - status: '', - type: '', - ...initialState?.monitorStatus?.status, - name: monitorName, + const defaultMonitorId = 'always-down'; + const defaultMonitorIdEncoded = 'YWx3YXlzLWRvd24'; // resolves to always-down + const autoGeneratedMonitorIdEncoded = 'YXV0by1pY21wLTBYMjQ5NDhGNDY3QzZDNEYwMQ'; // resolves to auto-icmp-0X24948F467C6C4F01 + + const defaultMonitorStatus: Ping = { + docId: 'few213kl', + timestamp: moment(new Date()).subtract(15, 'm').toString(), + monitor: { + duration: { + us: 1234567, }, - url, + id: defaultMonitorId, + status: 'up', + type: 'http', + }, + url: { + full: 'https://www.elastic.co/', }, }; - const stateWithMonitorName: AppState = { - ...initialState, - monitorStatus, - }; - - const stateWithoutMonitorName: AppState = { - ...initialState, - monitorStatus: { - ...monitorStatus, - status: { - ...monitorStatus.status, - monitor: { - ...monitorStatus.status.monitor, - name: undefined, - }, - }, + const monitorStatusWithName: Ping = { + ...defaultMonitorStatus, + monitor: { + ...defaultMonitorStatus.monitor, + name: monitorName, }, }; + beforeEach(() => { + jest.spyOn(reactRouterDom, 'useParams').mockReturnValue({ monitorId: defaultMonitorIdEncoded }); + jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn()); + jest.spyOn(redux, 'useSelector').mockReturnValue(defaultMonitorStatus); + }); + it('renders the monitor heading and EnableMonitorAlert toggle', () => { - const component = renderWithRouter( - - - - ); + jest.spyOn(redux, 'useSelector').mockReturnValue(monitorStatusWithName); + + const component = renderWithRouter(); expect(component.find('h1').text()).toBe(monitorName); expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1); }); it('renders the user provided monitorId when the name is not present', () => { - jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ - monitorId: 'YWx3YXlzLWRvd24', // resolves to always-down - })); - const component = renderWithRouter( - - - - ); - expect(component.find('h1').text()).toBe(monitorId); + jest.spyOn(reactRouterDom, 'useParams').mockReturnValue({ monitorId: defaultMonitorIdEncoded }); // resolves to always-down + const component = renderWithRouter(); + expect(component.find('h1').text()).toBe(defaultMonitorId); }); it('renders the url when the monitorId is auto generated and the monitor name is not present', () => { - jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ - monitorId: 'YXV0by1pY21wLTBYMjQ5NDhGNDY3QzZDNEYwMQ', // resolves to auto-icmp-0X24948F467C6C4F01 - })); - const component = renderWithRouter( - - - - ); - expect(component.find('h1').text()).toBe(url.full); + jest + .spyOn(reactRouterDom, 'useParams') + .mockReturnValue({ monitorId: autoGeneratedMonitorIdEncoded }); // resolves to auto-icmp-0X24948F467C6C4F01 + const component = renderWithRouter(); + expect(component.find('h1').text()).toBe(defaultMonitorStatus.url?.full); }); }); From c96b6e36de88e5e07d683cf1780824e8445e170b Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 29 Dec 2020 18:00:26 -0500 Subject: [PATCH 12/20] adjust uptime PageHeader tests --- .../header/__tests__/page_header.test.tsx | 90 ++++++++----------- 1 file changed, 39 insertions(+), 51 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx index da74f8582dcbb..bbf98ef713409 100644 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx @@ -5,57 +5,60 @@ */ import React from 'react'; +import moment from 'moment'; import { PageHeader } from '../page_header'; +import * as redux from 'react-redux'; +import { Ping } from '../../../../../common/runtime_types'; import { createMemoryHistory } from 'history'; -import { renderWithRouter, MountWithReduxProvider } from '../../../../lib'; -import { AppState, store } from '../../../../state'; +import { renderWithRouter } from '../../../../lib'; + +jest.mock('react-redux', () => { + const originalModule = jest.requireActual('react-redux'); + + return { + ...originalModule, + useSelector: jest.fn(), + }; +}); describe('PageHeader', () => { const monitorName = 'sample monitor'; - const initialState = store.getState(); - const state: AppState = { - ...initialState, - monitorStatus: { - loading: false, - status: { - docId: '', - timestamp: '', - monitor: { - duration: { us: 0 }, - id: '', - status: '', - type: '', - ...initialState?.monitorStatus?.status, - name: monitorName, - }, + const defaultMonitorId = 'always-down'; + + const defaultMonitorStatus: Ping = { + docId: 'few213kl', + timestamp: moment(new Date()).subtract(15, 'm').toString(), + monitor: { + duration: { + us: 1234567, }, + id: defaultMonitorId, + status: 'up', + type: 'http', + name: monitorName, + }, + url: { + full: 'https://www.elastic.co/', }, }; + beforeEach(() => { + jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn()); + jest.spyOn(redux, 'useSelector').mockReturnValue(defaultMonitorStatus); + }); + it('shallow renders with the date picker', () => { - const component = renderWithRouter( - - - - ); + const component = renderWithRouter(); expect(component).toMatchSnapshot('page_header_with_date_picker'); }); it('shallow renders without the date picker', () => { - const component = renderWithRouter( - - - - ); + const component = renderWithRouter(); expect(component).toMatchSnapshot('page_header_no_date_picker'); }); it('shallow renders extra links', () => { - const component = renderWithRouter( - - - - ); + const component = renderWithRouter(); expect(component).toMatchSnapshot('page_header_with_extra_links'); }); @@ -63,12 +66,7 @@ describe('PageHeader', () => { const history = createMemoryHistory(); // navigate to step page history.push('/journey/1/step/1'); - const component = renderWithRouter( - - - , - history - ); + const component = renderWithRouter(, history); expect(component.html()).toBe(null); }); @@ -76,24 +74,14 @@ describe('PageHeader', () => { const history = createMemoryHistory(); // navigate to monitor page history.push('/monitor/1'); - const component = renderWithRouter( - - - , - history - ); + const component = renderWithRouter(, history); expect(component.find('h1').text()).toBe(monitorName); expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(0); }); it('renders tabs when not on a monitor or step detail page', () => { const history = createMemoryHistory(); - const component = renderWithRouter( - - - , - history - ); + const component = renderWithRouter(, history); expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(1); }); }); From d7dcfc08779db170348f0f76eec943ab8af82d0e Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 29 Dec 2020 18:25:23 -0500 Subject: [PATCH 13/20] adjust import order in page_header.test --- .../components/common/header/__tests__/page_header.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx index bbf98ef713409..be58559087167 100644 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx @@ -5,9 +5,9 @@ */ import React from 'react'; +import * as redux from 'react-redux'; import moment from 'moment'; import { PageHeader } from '../page_header'; -import * as redux from 'react-redux'; import { Ping } from '../../../../../common/runtime_types'; import { createMemoryHistory } from 'history'; import { renderWithRouter } from '../../../../lib'; From d0912abb79fd22ce38eae10ec34aff3884751ac0 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 29 Dec 2020 20:52:42 -0500 Subject: [PATCH 14/20] add props to Uptime PageHeader to determine render, rather than route context --- .../certificates/cert_refresh_btn.tsx | 6 +- .../__snapshots__/page_header.test.tsx.snap | 910 ------------------ .../header/__tests__/page_header.test.tsx | 41 +- .../components/common/header/page_header.tsx | 56 +- .../components/monitor/monitor_title.tsx | 2 +- .../overview/overview_container.tsx | 16 +- .../uptime/public/pages/certificates.tsx | 54 +- .../plugins/uptime/public/pages/monitor.tsx | 2 + .../plugins/uptime/public/pages/settings.tsx | 2 + x-pack/plugins/uptime/public/routes.tsx | 2 - 10 files changed, 91 insertions(+), 1000 deletions(-) delete mode 100644 x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap diff --git a/x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx b/x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx index d0823276f1885..39661fe84a4be 100644 --- a/x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx +++ b/x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx @@ -20,7 +20,11 @@ export const CertRefreshBtn = () => { const { refreshApp } = useContext(UptimeRefreshContext); return ( - + diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap deleted file mode 100644 index 84b2e21e50d60..0000000000000 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/__snapshots__/page_header.test.tsx.snap +++ /dev/null @@ -1,910 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PageHeader shallow renders extra links: page_header_with_extra_links 1`] = ` -Array [ - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
-
-
-
-

- Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime. -

-
-
- - - - Read announcement - - - -
-
- -
-
-
-
, - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
, - @media only screen and (max-width:1024px) and (min-width:868px) { - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { - width: 500px; - } -} - -@media only screen and (max-width:880px) { - .c0.c0.c0 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - } - - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { - width: calc(100% + 8px); - } -} - -
-
-
- - - Overview - - - - - Certificates - - - - - Settings - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- - - -
-
-
-
, - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
, -] -`; - -exports[`PageHeader shallow renders with the date picker: page_header_with_date_picker 1`] = ` -Array [ - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
-
-
-
-

- Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime. -

-
-
- - - - Read announcement - - - -
-
- -
-
-
-
, - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
, - @media only screen and (max-width:1024px) and (min-width:868px) { - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { - width: 500px; - } -} - -@media only screen and (max-width:880px) { - .c0.c0.c0 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - } - - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { - width: calc(100% + 8px); - } -} - -
-
-
- - - Overview - - - - - Certificates - - - - - Settings - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- - - -
-
-
-
, - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
, -] -`; - -exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = ` -Array [ - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
-
-
-
-

- Uptime is now previewing support for scripted multi-step availability checks. This means you can interact with elements of a webpage and check the availability of an entire journey (such as making a purchase or signing into a system) instead of just a simple single page up/down check. Please click below to read more and, if you'd like to be one of the first to use these capabilities, you can download our preview synthetics agent and view your synthetic checks in Uptime. -

-
-
- - - - Read announcement - - - -
-
- -
-
-
-
, - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
, - @media only screen and (max-width:1024px) and (min-width:868px) { - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { - width: 500px; - } -} - -@media only screen and (max-width:880px) { - .c0.c0.c0 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - } - - .c0.c0.c0 .euiSuperDatePicker__flexWrapper { - width: calc(100% + 8px); - } -} - -
-
-
- - - Overview - - - - - Certificates - - - - - Settings - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- - - -
-
-
-
, - @media only screen and (max-width:1024px) and (min-width:868px) { - -} - -@media only screen and (max-width:880px) { - -} - -
, -] -`; diff --git a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx index be58559087167..e643b98b13c52 100644 --- a/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx @@ -9,7 +9,6 @@ import * as redux from 'react-redux'; import moment from 'moment'; import { PageHeader } from '../page_header'; import { Ping } from '../../../../../common/runtime_types'; -import { createMemoryHistory } from 'history'; import { renderWithRouter } from '../../../../lib'; jest.mock('react-redux', () => { @@ -47,41 +46,33 @@ describe('PageHeader', () => { jest.spyOn(redux, 'useSelector').mockReturnValue(defaultMonitorStatus); }); - it('shallow renders with the date picker', () => { + it('does not render dynamic elements by default', () => { const component = renderWithRouter(); - expect(component).toMatchSnapshot('page_header_with_date_picker'); - }); - it('shallow renders without the date picker', () => { - const component = renderWithRouter(); - expect(component).toMatchSnapshot('page_header_no_date_picker'); + expect(component.find('[data-test-subj="superDatePickerShowDatesButton"]').length).toBe(0); + expect(component.find('[data-test-subj="certificatesRefreshButton"]').length).toBe(0); + expect(component.find('[data-test-subj="monitorTitle"]').length).toBe(0); + expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(0); }); - it('shallow renders extra links', () => { - const component = renderWithRouter(); - expect(component).toMatchSnapshot('page_header_with_extra_links'); + it('shallow renders with the date picker', () => { + const component = renderWithRouter(); + expect(component.find('[data-test-subj="superDatePickerShowDatesButton"]').length).toBe(1); }); - it('renders null when on a step detail page', () => { - const history = createMemoryHistory(); - // navigate to step page - history.push('/journey/1/step/1'); - const component = renderWithRouter(, history); - expect(component.html()).toBe(null); + it('shallow renders with certificate refresh button', () => { + const component = renderWithRouter(); + expect(component.find('[data-test-subj="certificatesRefreshButton"]').length).toBe(1); }); - it('renders monitor header without tabs when on a monitor page', () => { - const history = createMemoryHistory(); - // navigate to monitor page - history.push('/monitor/1'); - const component = renderWithRouter(, history); + it('renders monitor title when showMonitorTitle', () => { + const component = renderWithRouter(); + expect(component.find('[data-test-subj="monitorTitle"]').length).toBe(1); expect(component.find('h1').text()).toBe(monitorName); - expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(0); }); - it('renders tabs when not on a monitor or step detail page', () => { - const history = createMemoryHistory(); - const component = renderWithRouter(, history); + it('renders tabs when showTabs is true', () => { + const component = renderWithRouter(); expect(component.find('[data-test-subj="uptimeTabs"]').length).toBe(1); }); }); 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 c554a54e69d64..1c30074761c13 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 @@ -7,20 +7,21 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import styled from 'styled-components'; -import { useRouteMatch } from 'react-router-dom'; import { UptimeDatePicker } from '../uptime_date_picker'; import { SyntheticsCallout } from '../../overview/synthetics_callout'; import { PageTabs } from './page_tabs'; -import { - CERTIFICATES_ROUTE, - MONITOR_ROUTE, - SETTINGS_ROUTE, - STEP_DETAIL_ROUTE, -} from '../../../../common/constants'; import { CertRefreshBtn } from '../../certificates/cert_refresh_btn'; import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers'; import { MonitorPageTitle } from '../../monitor/monitor_title'; +interface Props { + showTabs?: boolean; + showDatePicker?: boolean; + showMonitorTitle?: boolean; + includeSpacer?: boolean; + showCertificateRefreshBtn?: boolean; +} + const StyledPicker = styled(EuiFlexItem)` &&& { @media only screen and (max-width: 1024px) and (min-width: 868px) { @@ -37,37 +38,32 @@ const StyledPicker = styled(EuiFlexItem)` } `; -export const PageHeader = () => { - const isCertRoute = useRouteMatch(CERTIFICATES_ROUTE); - const isSettingsRoute = useRouteMatch(SETTINGS_ROUTE); - const isStepDetailRoute = useRouteMatch(STEP_DETAIL_ROUTE); - - const DatePickerComponent = () => - isCertRoute ? ( - - ) : ( - - - - ); - - const isMonitorRoute = useRouteMatch(MONITOR_ROUTE); - - if (isStepDetailRoute) { - return null; - } - +export const PageHeader = ({ + showTabs = false, + showDatePicker = false, + showMonitorTitle = false, + includeSpacer = false, + showCertificateRefreshBtn = false, +}: Props) => { return ( <> - {isMonitorRoute ? : } + + {showMonitorTitle && } + {showTabs && } + - {!isSettingsRoute && } + {showCertificateRefreshBtn && } + {showDatePicker && ( + + + + )} - {!isMonitorRoute && } + {includeSpacer && } ); }; diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx index 7acafba92caa0..cecef14298267 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx @@ -40,7 +40,7 @@ export const MonitorPageTitle: React.FC = () => { useBreadcrumbs([{ text: nameOrId }]); return ( - +

{nameOrId}

diff --git a/x-pack/plugins/uptime/public/components/overview/overview_container.tsx b/x-pack/plugins/uptime/public/components/overview/overview_container.tsx index b47ee4a308dbd..a27e70bd827d1 100644 --- a/x-pack/plugins/uptime/public/components/overview/overview_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/overview_container.tsx @@ -9,6 +9,7 @@ import React, { useCallback } from 'react'; import { OverviewPageComponent } from '../../pages/overview'; import { selectIndexPattern } from '../../state/selectors'; import { setEsKueryString } from '../../state/actions'; +import { PageHeader } from '../../components/common/header/page_header'; export const OverviewPage: React.FC = (props) => { const dispatch = useDispatch(); @@ -20,11 +21,14 @@ export const OverviewPage: React.FC = (props) => { const { index_pattern: indexPattern, loading } = useSelector(selectIndexPattern); return ( - + <> + + + ); }; diff --git a/x-pack/plugins/uptime/public/pages/certificates.tsx b/x-pack/plugins/uptime/public/pages/certificates.tsx index 2f5d1fa04d9b6..d18faaf0bde51 100644 --- a/x-pack/plugins/uptime/public/pages/certificates.tsx +++ b/x-pack/plugins/uptime/public/pages/certificates.tsx @@ -14,6 +14,7 @@ import { getDynamicSettings } from '../state/actions/dynamic_settings'; import { UptimeRefreshContext } from '../contexts'; import { certificatesSelector, getCertificatesAction } from '../state/certificates/certificates'; import { CertificateList, CertificateSearch, CertSort } from '../components/certificates'; +import { PageHeader } from '../components/common/header/page_header'; const DEFAULT_PAGE_SIZE = 10; const LOCAL_STORAGE_KEY = 'xpack.uptime.certList.pageSize'; @@ -60,31 +61,34 @@ export const CertificatesPage: React.FC = () => { const { data: certificates } = useSelector(certificatesSelector); return ( - - -

- {certificates?.total ?? 0}, - }} - /> -

- + <> + + + +

+ {certificates?.total ?? 0}, + }} + /> +

+ - - - - { - setPage(pageVal); - setSort(sortVal); - localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString()); - }} - sort={sort} - /> - + + + + { + setPage(pageVal); + setSort(sortVal); + localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString()); + }} + sort={sort} + /> + + ); }; diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx index e62809bd863cc..b46d854b7429c 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.tsx @@ -10,6 +10,7 @@ import { useDispatch } from 'react-redux'; import { useTrackPageview } from '../../../observability/public'; import { useMonitorId } from '../hooks'; import { MonitorCharts } from '../components/monitor'; +import { PageHeader } from '../components/common/header/page_header'; import { MonitorStatusDetails, PingList } from '../components/monitor'; import { getDynamicSettings } from '../state/actions/dynamic_settings'; import { setSelectedMonitorId } from '../state/actions'; @@ -37,6 +38,7 @@ export const MonitorPage: React.FC = () => { return ( <> + diff --git a/x-pack/plugins/uptime/public/pages/settings.tsx b/x-pack/plugins/uptime/public/pages/settings.tsx index f19a462f41218..1f89dad991928 100644 --- a/x-pack/plugins/uptime/public/pages/settings.tsx +++ b/x-pack/plugins/uptime/public/pages/settings.tsx @@ -27,6 +27,7 @@ import { CertificateExpirationForm, OnFieldChangeType, } from '../components/settings/certificate_form'; +import { PageHeader } from '../components/common/header/page_header'; import * as Translations from './translations'; import { VALUE_MUST_BE_GREATER_THAN_ZERO, @@ -145,6 +146,7 @@ export const SettingsPage: React.FC = () => { return ( <> + diff --git a/x-pack/plugins/uptime/public/routes.tsx b/x-pack/plugins/uptime/public/routes.tsx index 465b225dcb374..7c03a5f2d3d0a 100644 --- a/x-pack/plugins/uptime/public/routes.tsx +++ b/x-pack/plugins/uptime/public/routes.tsx @@ -17,7 +17,6 @@ import { import { MonitorPage, StepDetailPage, NotFoundPage, SettingsPage } from './pages'; import { CertificatesPage } from './pages/certificates'; import { UptimePage, useUptimeTelemetry } from './hooks'; -import { PageHeader } from './components/common/header/page_header'; interface RouteProps { path: string; @@ -85,7 +84,6 @@ export const PageRouter: FC = () => { {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => (
-
From 6d63f3cc67b812383a8288cd8b22f3683f5351bd Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Sun, 3 Jan 2021 20:26:51 -0500 Subject: [PATCH 15/20] alphabetize props in Uptime PageHeader --- .../public/components/common/header/page_header.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 1c30074761c13..6b34edd26f023 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 @@ -15,11 +15,11 @@ import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers import { MonitorPageTitle } from '../../monitor/monitor_title'; interface Props { - showTabs?: boolean; - showDatePicker?: boolean; - showMonitorTitle?: boolean; includeSpacer?: boolean; showCertificateRefreshBtn?: boolean; + showDatePicker?: boolean; + showMonitorTitle?: boolean; + showTabs?: boolean; } const StyledPicker = styled(EuiFlexItem)` @@ -39,11 +39,11 @@ const StyledPicker = styled(EuiFlexItem)` `; export const PageHeader = ({ - showTabs = false, - showDatePicker = false, - showMonitorTitle = false, includeSpacer = false, showCertificateRefreshBtn = false, + showDatePicker = false, + showMonitorTitle = false, + showTabs = false, }: Props) => { return ( <> From 9bac833c1326c06b859cdb71791b49636ed00b2e Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 5 Jan 2021 10:49:17 -0500 Subject: [PATCH 16/20] remove header from individual pages --- .../overview/overview_container.tsx | 16 +++--- .../uptime/public/pages/certificates.tsx | 54 +++++++++---------- .../plugins/uptime/public/pages/monitor.tsx | 2 - .../plugins/uptime/public/pages/settings.tsx | 2 - 4 files changed, 31 insertions(+), 43 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/overview/overview_container.tsx b/x-pack/plugins/uptime/public/components/overview/overview_container.tsx index a27e70bd827d1..b47ee4a308dbd 100644 --- a/x-pack/plugins/uptime/public/components/overview/overview_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/overview_container.tsx @@ -9,7 +9,6 @@ import React, { useCallback } from 'react'; import { OverviewPageComponent } from '../../pages/overview'; import { selectIndexPattern } from '../../state/selectors'; import { setEsKueryString } from '../../state/actions'; -import { PageHeader } from '../../components/common/header/page_header'; export const OverviewPage: React.FC = (props) => { const dispatch = useDispatch(); @@ -21,14 +20,11 @@ export const OverviewPage: React.FC = (props) => { const { index_pattern: indexPattern, loading } = useSelector(selectIndexPattern); return ( - <> - - - + ); }; diff --git a/x-pack/plugins/uptime/public/pages/certificates.tsx b/x-pack/plugins/uptime/public/pages/certificates.tsx index d18faaf0bde51..2f5d1fa04d9b6 100644 --- a/x-pack/plugins/uptime/public/pages/certificates.tsx +++ b/x-pack/plugins/uptime/public/pages/certificates.tsx @@ -14,7 +14,6 @@ import { getDynamicSettings } from '../state/actions/dynamic_settings'; import { UptimeRefreshContext } from '../contexts'; import { certificatesSelector, getCertificatesAction } from '../state/certificates/certificates'; import { CertificateList, CertificateSearch, CertSort } from '../components/certificates'; -import { PageHeader } from '../components/common/header/page_header'; const DEFAULT_PAGE_SIZE = 10; const LOCAL_STORAGE_KEY = 'xpack.uptime.certList.pageSize'; @@ -61,34 +60,31 @@ export const CertificatesPage: React.FC = () => { const { data: certificates } = useSelector(certificatesSelector); return ( - <> - - - -

- {certificates?.total ?? 0}, - }} - /> -

- + + +

+ {certificates?.total ?? 0}, + }} + /> +

+ - - - - { - setPage(pageVal); - setSort(sortVal); - localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString()); - }} - sort={sort} - /> - - + + + + { + setPage(pageVal); + setSort(sortVal); + localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString()); + }} + sort={sort} + /> + ); }; diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx index b46d854b7429c..e62809bd863cc 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.tsx @@ -10,7 +10,6 @@ import { useDispatch } from 'react-redux'; import { useTrackPageview } from '../../../observability/public'; import { useMonitorId } from '../hooks'; import { MonitorCharts } from '../components/monitor'; -import { PageHeader } from '../components/common/header/page_header'; import { MonitorStatusDetails, PingList } from '../components/monitor'; import { getDynamicSettings } from '../state/actions/dynamic_settings'; import { setSelectedMonitorId } from '../state/actions'; @@ -38,7 +37,6 @@ export const MonitorPage: React.FC = () => { return ( <> - diff --git a/x-pack/plugins/uptime/public/pages/settings.tsx b/x-pack/plugins/uptime/public/pages/settings.tsx index 1f89dad991928..f19a462f41218 100644 --- a/x-pack/plugins/uptime/public/pages/settings.tsx +++ b/x-pack/plugins/uptime/public/pages/settings.tsx @@ -27,7 +27,6 @@ import { CertificateExpirationForm, OnFieldChangeType, } from '../components/settings/certificate_form'; -import { PageHeader } from '../components/common/header/page_header'; import * as Translations from './translations'; import { VALUE_MUST_BE_GREATER_THAN_ZERO, @@ -146,7 +145,6 @@ export const SettingsPage: React.FC = () => { return ( <> - From 104320f8d36d17859dcd339daa4191d2da405b89 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Tue, 5 Jan 2021 10:51:41 -0500 Subject: [PATCH 17/20] add indepdent page header route that matches all paths --- .../components/common/header/page_header.tsx | 2 +- x-pack/plugins/uptime/public/routes.tsx | 69 +++++++++++++++---- 2 files changed, 58 insertions(+), 13 deletions(-) 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 6b34edd26f023..d063e7a5ff3fb 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 @@ -14,7 +14,7 @@ import { CertRefreshBtn } from '../../certificates/cert_refresh_btn'; import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers'; import { MonitorPageTitle } from '../../monitor/monitor_title'; -interface Props { +export interface Props { includeSpacer?: boolean; showCertificateRefreshBtn?: boolean; showDatePicker?: boolean; diff --git a/x-pack/plugins/uptime/public/routes.tsx b/x-pack/plugins/uptime/public/routes.tsx index 7c03a5f2d3d0a..0425bc2e58955 100644 --- a/x-pack/plugins/uptime/public/routes.tsx +++ b/x-pack/plugins/uptime/public/routes.tsx @@ -5,8 +5,9 @@ */ import React, { FC, useEffect } from 'react'; -import { Route, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { OverviewPage } from './components/overview/overview_container'; +import { Props as PageHeaderProps, PageHeader } from './components/common/header/page_header'; import { CERTIFICATES_ROUTE, MONITOR_ROUTE, @@ -24,6 +25,7 @@ interface RouteProps { dataTestSubj: string; title: string; telemetryId: UptimePage; + headerProps?: PageHeaderProps; } const baseTitle = 'Uptime - Kibana'; @@ -35,6 +37,10 @@ const Routes: RouteProps[] = [ component: MonitorPage, dataTestSubj: 'uptimeMonitorPage', telemetryId: UptimePage.Monitor, + headerProps: { + showDatePicker: true, + showMonitorTitle: true, + }, }, { title: `Settings | ${baseTitle}`, @@ -42,6 +48,10 @@ const Routes: RouteProps[] = [ component: SettingsPage, dataTestSubj: 'uptimeSettingsPage', telemetryId: UptimePage.Settings, + headerProps: { + includeSpacer: true, + showTabs: true, + }, }, { title: `Certificates | ${baseTitle}`, @@ -49,6 +59,11 @@ const Routes: RouteProps[] = [ component: CertificatesPage, dataTestSubj: 'uptimeCertificatesPage', telemetryId: UptimePage.Certificates, + headerProps: { + includeSpacer: true, + showCertificateRefreshBtn: true, + showTabs: true, + }, }, { title: baseTitle, @@ -63,6 +78,22 @@ const Routes: RouteProps[] = [ component: OverviewPage, dataTestSubj: 'uptimeOverviewPage', telemetryId: UptimePage.Overview, + headerProps: { + showDatePicker: true, + showTabs: true, + }, + }, + { + title: baseTitle, + path: OVERVIEW_ROUTE, + component: OverviewPage, + dataTestSubj: 'uptimeOverviewPage', + telemetryId: UptimePage.Overview, + headerProps: { + includeSpacer: true, + showDatePicker: true, + showTabs: true, + }, }, ]; @@ -80,16 +111,30 @@ const RouteInit: React.FC> = export const PageRouter: FC = () => { return ( - - {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => ( - -
- - -
- - ))} - - + <> + {/* Independent page header route that matches all paths and passes appropriate header props */} + {/* Prevents the header from being remounted on route changes */} + route.path)]} + exact={true} + render={({ match }: RouteComponentProps) => { + const routeProps: RouteProps | undefined = Routes.find( + (route: RouteProps) => route?.path === match?.path + ); + return routeProps?.headerProps && ; + }} + /> + + {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => ( + +
+ + +
+ + ))} + + + ); }; From d884b92c7f8dfe969b26de882c0077275136f4f0 Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Wed, 6 Jan 2021 20:31:33 -0500 Subject: [PATCH 18/20] adjust monitor tests to use mockReduxHooks helper, and add mockReactRouterDomHooks --- .../monitor/__tests__/monitor_title.test.tsx | 26 +++++-------------- .../uptime/public/lib/helper/test_helpers.ts | 5 ++++ 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx index 2063d641e77c4..204a4bc23366a 100644 --- a/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/__tests__/monitor_title.test.tsx @@ -6,11 +6,10 @@ import React from 'react'; import moment from 'moment'; -import * as reactRouterDom from 'react-router-dom'; -import * as redux from 'react-redux'; import { Ping } from '../../../../common/runtime_types'; import { MonitorPageTitle } from '../monitor_title'; import { renderWithRouter } from '../../../lib'; +import { mockReduxHooks, mockReactRouterDomHooks } from '../../../lib/helper/test_helpers'; jest.mock('react-router-dom', () => { const originalModule = jest.requireActual('react-router-dom'); @@ -21,15 +20,6 @@ jest.mock('react-router-dom', () => { }; }); -jest.mock('react-redux', () => { - const originalModule = jest.requireActual('react-redux'); - - return { - ...originalModule, - useSelector: jest.fn(), - }; -}); - describe('MonitorTitle component', () => { const monitorName = 'sample monitor'; const defaultMonitorId = 'always-down'; @@ -61,29 +51,25 @@ describe('MonitorTitle component', () => { }; beforeEach(() => { - jest.spyOn(reactRouterDom, 'useParams').mockReturnValue({ monitorId: defaultMonitorIdEncoded }); - jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn()); - jest.spyOn(redux, 'useSelector').mockReturnValue(defaultMonitorStatus); + mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } }); + mockReduxHooks(defaultMonitorStatus); }); it('renders the monitor heading and EnableMonitorAlert toggle', () => { - jest.spyOn(redux, 'useSelector').mockReturnValue(monitorStatusWithName); - + mockReduxHooks(monitorStatusWithName); const component = renderWithRouter(); expect(component.find('h1').text()).toBe(monitorName); expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1); }); it('renders the user provided monitorId when the name is not present', () => { - jest.spyOn(reactRouterDom, 'useParams').mockReturnValue({ monitorId: defaultMonitorIdEncoded }); // resolves to always-down + mockReactRouterDomHooks({ useParamsResponse: { monitorId: defaultMonitorIdEncoded } }); const component = renderWithRouter(); expect(component.find('h1').text()).toBe(defaultMonitorId); }); it('renders the url when the monitorId is auto generated and the monitor name is not present', () => { - jest - .spyOn(reactRouterDom, 'useParams') - .mockReturnValue({ monitorId: autoGeneratedMonitorIdEncoded }); // resolves to auto-icmp-0X24948F467C6C4F01 + mockReactRouterDomHooks({ useParamsResponse: { monitorId: autoGeneratedMonitorIdEncoded } }); const component = renderWithRouter(); expect(component.find('h1').text()).toBe(defaultMonitorStatus.url?.full); }); diff --git a/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts b/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts index faa1b968d2546..8102bdee9485b 100644 --- a/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts +++ b/x-pack/plugins/uptime/public/lib/helper/test_helpers.ts @@ -9,6 +9,7 @@ import moment from 'moment'; import { Moment } from 'moment-timezone'; import * as redux from 'react-redux'; +import * as reactRouterDom from 'react-router-dom'; export function mockMoment() { // avoid timezone issues @@ -27,3 +28,7 @@ export function mockReduxHooks(response?: any) { jest.spyOn(redux, 'useSelector').mockReturnValue(response); } + +export function mockReactRouterDomHooks({ useParamsResponse }: { useParamsResponse: any }) { + jest.spyOn(reactRouterDom, 'useParams').mockReturnValue(useParamsResponse); +} From 8aae9e0e8572b5f6214a2caf6d491d7ddbd797df Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Wed, 6 Jan 2021 21:09:26 -0500 Subject: [PATCH 19/20] update tests --- .../common/header/page_header.test.tsx | 14 +- .../components/monitor/monitor_title.test.tsx | 7 +- .../lib/helper/component_test_helpers.tsx | 213 ------------------ .../uptime/public/lib/helper/test_hepers.tsx | 97 -------- 4 files changed, 8 insertions(+), 323 deletions(-) delete mode 100644 x-pack/plugins/uptime/public/lib/helper/component_test_helpers.tsx delete mode 100644 x-pack/plugins/uptime/public/lib/helper/test_hepers.tsx diff --git a/x-pack/plugins/uptime/public/components/common/header/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/page_header.test.tsx index a3f6077e54d5d..e3c62fb2a48f2 100644 --- a/x-pack/plugins/uptime/public/components/common/header/page_header.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/header/page_header.test.tsx @@ -5,20 +5,11 @@ */ import React from 'react'; -import * as redux from 'react-redux'; import moment from 'moment'; import { PageHeader } from './page_header'; import { Ping } from '../../../../common/runtime_types'; import { renderWithRouter } from '../../../lib'; - -jest.mock('react-redux', () => { - const originalModule = jest.requireActual('react-redux'); - - return { - ...originalModule, - useSelector: jest.fn(), - }; -}); +import { mockReduxHooks } from '../../../lib/helper/test_helpers'; describe('PageHeader', () => { const monitorName = 'sample monitor'; @@ -42,8 +33,7 @@ describe('PageHeader', () => { }; beforeEach(() => { - jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn()); - jest.spyOn(redux, 'useSelector').mockReturnValue(defaultMonitorStatus); + mockReduxHooks(defaultMonitorStatus); }); it('does not render dynamic elements by default', () => { diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx index 5e308b8c1cd0e..6ee25f8360933 100644 --- a/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx @@ -6,10 +6,11 @@ import React from 'react'; import moment from 'moment'; +import * as reactRouterDom from 'react-router-dom'; import { Ping } from '../../../common/runtime_types'; import { MonitorPageTitle } from './monitor_title'; import { renderWithRouter } from '../../lib'; -import { mockReduxHooks, mockReactRouterDomHooks } from '../../lib/helper/test_helpers'; +import { mockReduxHooks } from '../../lib/helper/test_helpers'; jest.mock('react-router-dom', () => { const originalModule = jest.requireActual('react-router-dom'); @@ -20,6 +21,10 @@ jest.mock('react-router-dom', () => { }; }); +export function mockReactRouterDomHooks({ useParamsResponse }: { useParamsResponse: any }) { + jest.spyOn(reactRouterDom, 'useParams').mockReturnValue(useParamsResponse); +} + describe('MonitorTitle component', () => { const monitorName = 'sample monitor'; const defaultMonitorId = 'always-down'; diff --git a/x-pack/plugins/uptime/public/lib/helper/component_test_helpers.tsx b/x-pack/plugins/uptime/public/lib/helper/component_test_helpers.tsx deleted file mode 100644 index 5d4c609ebb511..0000000000000 --- a/x-pack/plugins/uptime/public/lib/helper/component_test_helpers.tsx +++ /dev/null @@ -1,213 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React, { ReactElement } from 'react'; -import { render } from '@testing-library/react'; -import { Router } from 'react-router-dom'; -import { MemoryHistory } from 'history/createMemoryHistory'; -import { createMemoryHistory, History } from 'history'; -import { I18nProvider } from '@kbn/i18n/react'; -import { mountWithIntl, renderWithIntl, shallowWithIntl } from '@kbn/test/jest'; -import { ChromeBreadcrumb } from 'kibana/public'; -import { - KibanaContextProvider, - KibanaReactContextValue, -} from '../../../../../../src/plugins/kibana_react/public'; -import { MountWithReduxProvider } from './helper_with_redux'; -import { AppState } from '../../state'; - -/* default mock core */ -const mockCore: () => any = () => { - let breadcrumbObj: ChromeBreadcrumb[] = []; - const core = { - application: { - getUrlForApp: () => '/app/uptime', - navigateToUrl: jest.fn(), - }, - chrome: { - setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => { - breadcrumbObj = newBreadcrumbs; - }, - }, - }; - - return core; -}; - -/* Higher Order Components */ -export function withKibanaContext( - WrappedComponent: React.ComponentType, - { - kibanaProps, - customCoreOptions, - }: { kibanaProps?: KibanaReactContextValue; customCoreOptions?: any } -) { - const core = { - ...mockCore(), - customCoreOptions, - }; - return (props: any) => ( - - - - - - ); -} - -export function withRouter(WrappedComponent: React.ComponentType, customHistory: History) { - const history = customHistory || createMemoryHistory(); - return (props: T) => ( - - - - ); -} - -/* Mock Provider Components */ -export function MockKibanaProvider({ - children, - customCoreOptions, - kibanaProps, -}: { - children: ReactElement; - customCoreOptions?: any; - kibanaProps?: KibanaReactContextValue; -}) { - const core = { - ...mockCore(), - customCoreOptions, - }; - return ( - - {children} - - ); -} - -export function MockRouter({ - children, - customCoreOptions, - customHistory, - kibanaProps, -}: { - children: ReactElement; - customCoreOptions?: any; - customHistory?: History; - kibanaProps?: KibanaReactContextValue; -}) { - const history = customHistory || createMemoryHistory(); - return ( - - - {children} - - - ); -} - -/* React testing library custom render functions */ -export const renderTLWithKibana = ( - ui: ReactElement, - { - customCoreOptions, - kibanaProps, - renderOptions, - }: { - customCoreOptions?: any; - kibanaProps?: KibanaReactContextValue; - renderOptions?: any; - } = {} -) => { - return render( - - {ui} - , - renderOptions - ); -}; - -export const renderTLWithRouter = ( - ui: ReactElement, - { - customHistory, - customCoreOptions, - kibanaProps, - renderOptions, - }: { - customHistory?: History; - customCoreOptions?: any; - kibanaProps?: KibanaReactContextValue; - renderOptions?: any; - } = {} -) => { - return render( - - {ui} - , - renderOptions - ); -}; - -/* Enzyme helpers */ -const helperWithRouter: ( - helper: (node: ReactElement) => R, - component: ReactElement, - customHistory?: MemoryHistory, - wrapReduxStore?: boolean, - storeState?: AppState -) => R = (helper, component, customHistory, wrapReduxStore, storeState) => { - const history = customHistory ?? createMemoryHistory(); - - history.location.key = 'TestKeyForTesting'; - - const routerWrapper = {component}; - - if (wrapReduxStore) { - return helper( - {routerWrapper} - ); - } - - return helper(routerWrapper); -}; - -export const renderWithRouter = (component: ReactElement, customHistory?: MemoryHistory) => { - return helperWithRouter(renderWithIntl, component, customHistory); -}; - -export const shallowWithRouter = (component: ReactElement, customHistory?: MemoryHistory) => { - return helperWithRouter(shallowWithIntl, component, customHistory); -}; - -export const mountWithRouter = (component: ReactElement, customHistory?: MemoryHistory) => { - return helperWithRouter(mountWithIntl, component, customHistory); -}; - -export const renderWithRouterRedux = (component: ReactElement, customHistory?: MemoryHistory) => { - return helperWithRouter(renderWithIntl, component, customHistory, true); -}; - -export const shallowWithRouterRedux = (component: ReactElement, customHistory?: MemoryHistory) => { - return helperWithRouter(shallowWithIntl, component, customHistory, true); -}; - -export const mountWithRouterRedux = ( - component: ReactElement, - options?: { customHistory?: MemoryHistory; storeState?: AppState } -) => { - return helperWithRouter( - mountWithIntl, - component, - options?.customHistory, - true, - options?.storeState - ); -}; diff --git a/x-pack/plugins/uptime/public/lib/helper/test_hepers.tsx b/x-pack/plugins/uptime/public/lib/helper/test_hepers.tsx deleted file mode 100644 index ba6a4a8e05189..0000000000000 --- a/x-pack/plugins/uptime/public/lib/helper/test_hepers.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import { createMemoryHistory } from 'history'; -import { Router } from 'react-router-dom'; -import { ChromeBreadcrumb } from 'kibana/public'; -import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; -import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; - -const mockCore: () => [() => ChromeBreadcrumb[], any] = () => { - let breadcrumbObj: ChromeBreadcrumb[] = []; - const get = () => { - return breadcrumbObj; - }; - const core = { - application: { - getUrlForApp: () => '/app/uptime', - navigateToUrl: jest.fn(), - }, - chrome: { - setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => { - breadcrumbObj = newBreadcrumbs; - }, - }, - }; - - return [get, core]; -}; - -/* Higher Order Components */ -export function withKibanaContext(WrappedComponent, kibanaProps, i18nProps) { - const [getBreadcrumbs, core] = mockCore(); - return (props: T) => ( - - - - - - ); -} - -export function withRouter(WrappedComponent, customHistory) { - const history = customHistory || createMemoryHistory(); - return (props: T) => ( - - - - ); -} - -/* Mock Providers */ -export function MockKibanaProvider({ children, kibanaProps, i18nProps }) { - const [getBreadcrumbs, core] = mockCore(); - return ( - - {children} - - ); -} - -export function MockRouter({ children, customHistory, kibanaProps, i18nProps }) { - const history = customHistory || createMemoryHistory(); - return ( - - - {children} - - - ); -} - -/* React testing library custom renders */ -const renderWithKibana = (ui, { kibanaProps, i18nProps } = {}) => { - return render( - - {ui} - , - renderOptions - ); -}; - -export const renderWithRouter = ( - ui, - { customHistory, i18nProps, kibanaProps, renderOptions } = {} -) => { - return render( - - {ui} - , - renderOptions - ); -}; From f29460524c547809928c634411fe9e84d73bc51c Mon Sep 17 00:00:00 2001 From: Dominique Clarke Date: Thu, 7 Jan 2021 12:35:15 -0500 Subject: [PATCH 20/20] adjust header spacing --- .../components/common/header/page_header.tsx | 4 +--- x-pack/plugins/uptime/public/pages/monitor.tsx | 1 - x-pack/plugins/uptime/public/pages/settings.tsx | 1 - x-pack/plugins/uptime/public/routes.tsx | 14 -------------- 4 files changed, 1 insertion(+), 19 deletions(-) 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 d063e7a5ff3fb..2bb14d279f2d9 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 @@ -15,7 +15,6 @@ import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers import { MonitorPageTitle } from '../../monitor/monitor_title'; export interface Props { - includeSpacer?: boolean; showCertificateRefreshBtn?: boolean; showDatePicker?: boolean; showMonitorTitle?: boolean; @@ -39,7 +38,6 @@ const StyledPicker = styled(EuiFlexItem)` `; export const PageHeader = ({ - includeSpacer = false, showCertificateRefreshBtn = false, showDatePicker = false, showMonitorTitle = false, @@ -63,7 +61,7 @@ export const PageHeader = ({ )} - {includeSpacer && } + ); }; diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx index e62809bd863cc..d68f791e3b77b 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.tsx @@ -37,7 +37,6 @@ export const MonitorPage: React.FC = () => { return ( <> - diff --git a/x-pack/plugins/uptime/public/pages/settings.tsx b/x-pack/plugins/uptime/public/pages/settings.tsx index f19a462f41218..5231f590d2dbb 100644 --- a/x-pack/plugins/uptime/public/pages/settings.tsx +++ b/x-pack/plugins/uptime/public/pages/settings.tsx @@ -145,7 +145,6 @@ export const SettingsPage: React.FC = () => { return ( <> - {cannotEditNotice} diff --git a/x-pack/plugins/uptime/public/routes.tsx b/x-pack/plugins/uptime/public/routes.tsx index 0425bc2e58955..5eb689e72bc1b 100644 --- a/x-pack/plugins/uptime/public/routes.tsx +++ b/x-pack/plugins/uptime/public/routes.tsx @@ -49,7 +49,6 @@ const Routes: RouteProps[] = [ dataTestSubj: 'uptimeSettingsPage', telemetryId: UptimePage.Settings, headerProps: { - includeSpacer: true, showTabs: true, }, }, @@ -60,7 +59,6 @@ const Routes: RouteProps[] = [ dataTestSubj: 'uptimeCertificatesPage', telemetryId: UptimePage.Certificates, headerProps: { - includeSpacer: true, showCertificateRefreshBtn: true, showTabs: true, }, @@ -83,18 +81,6 @@ const Routes: RouteProps[] = [ showTabs: true, }, }, - { - title: baseTitle, - path: OVERVIEW_ROUTE, - component: OverviewPage, - dataTestSubj: 'uptimeOverviewPage', - telemetryId: UptimePage.Overview, - headerProps: { - includeSpacer: true, - showDatePicker: true, - showTabs: true, - }, - }, ]; const RouteInit: React.FC> = ({