From 8472bb7d10f11a1593f6a84a45063dcecc889da2 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 6 Oct 2020 20:05:41 -0400 Subject: [PATCH] [Uptime] Add callout for synthetics UI (#79563) * Add callout for synthetics UI. * Refresh outdated test snapshots. * Test synthetics callout component. * Update callout copy. * Update URL for announcement link. * Update test snapshots. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../__tests__/synthetics_callout.test.tsx | 137 ++++++++++ .../overview/synthetics_callout.tsx | 78 ++++++ .../__snapshots__/page_header.test.tsx.snap | 239 ++++++++++++++++++ .../uptime/public/pages/page_header.tsx | 4 +- 4 files changed, 457 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/uptime/public/components/overview/__tests__/synthetics_callout.test.tsx create mode 100644 x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx diff --git a/x-pack/plugins/uptime/public/components/overview/__tests__/synthetics_callout.test.tsx b/x-pack/plugins/uptime/public/components/overview/__tests__/synthetics_callout.test.tsx new file mode 100644 index 0000000000000..88bae4c72b686 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/__tests__/synthetics_callout.test.tsx @@ -0,0 +1,137 @@ +/* + * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import React from 'react'; +import { SyntheticsCallout } from '../synthetics_callout'; + +describe('SyntheticsCallout', () => { + let setItemMock; + let localStorageMock: any; + + beforeEach(() => { + setItemMock = jest.fn(); + localStorageMock = { + getItem: jest.fn().mockImplementation(() => null), + setItem: setItemMock, + }; + + // @ts-expect-error replacing a call to localStorage we use for monitor list size + global.localStorage = localStorageMock; + }); + + it('renders component if dismissal flag is unset', () => { + expect(shallowWithIntl()).toMatchInlineSnapshot(` + + +

+ +

+ + + + + + + + + + + + + + + + `); + }); + + it('returns null if callout has been dismissed', () => { + localStorageMock.getItem = jest.fn().mockImplementation(() => 'true'); + expect(shallowWithIntl()).toEqual({}); + }); + + it('renders the component, and then returns null when dismiss button clicked', () => { + localStorageMock.getItem = jest + .fn() + .mockImplementationOnce(() => null) + .mockImplementationOnce(() => 'true'); + const wrapper = shallowWithIntl(); + expect(wrapper).toMatchInlineSnapshot(` + + +

+ +

+ + + + + + + + + + + + + + + + `); + wrapper.find('EuiButton').simulate('click'); + expect(wrapper).toEqual({}); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx b/x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx new file mode 100644 index 0000000000000..375758215d9a0 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx @@ -0,0 +1,78 @@ +/* + * 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 { + EuiButton, + EuiButtonEmpty, + EuiCallOut, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, +} from '@elastic/eui'; +import React, { useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +const SYNTHETICS_CALLOUT_LS_KEY = 'xpack.uptime.syntheticsCallout.display'; +const shouldShowSyntheticsCallout = () => { + let value = localStorage.getItem(SYNTHETICS_CALLOUT_LS_KEY); + if (value === null) { + localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'true'); + value = 'true'; + } + return value === 'true'; +}; +const hideSyntheticsCallout = () => localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'false'); + +export const SyntheticsCallout = () => { + const [shouldShow, setShouldShow] = useState(shouldShowSyntheticsCallout()); + if (!shouldShow) { + return null; + } + return ( + <> + +

+ +

+ + + + + + + + { + if (shouldShow) { + hideSyntheticsCallout(); + setShouldShow(false); + } + }} + > + + + + + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap index 7a5f498ced85c..6d0b90e29269b 100644 --- a/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap +++ b/x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap @@ -3,6 +3,91 @@ 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; } @@ -231,6 +316,91 @@ Array [ 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; } @@ -372,6 +542,75 @@ Array [ exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = ` Array [ +
+
+ +
+

+ 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 + + + +
+
+ +
+
+
+
, +
,
diff --git a/x-pack/plugins/uptime/public/pages/page_header.tsx b/x-pack/plugins/uptime/public/pages/page_header.tsx index 600185e7cc216..08e753f38ab74 100644 --- a/x-pack/plugins/uptime/public/pages/page_header.tsx +++ b/x-pack/plugins/uptime/public/pages/page_header.tsx @@ -5,7 +5,7 @@ */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiButtonEmpty } from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; import { UptimeDatePicker } from '../components/common/uptime_date_picker'; @@ -13,6 +13,7 @@ import { SETTINGS_ROUTE } from '../../common/constants'; import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers'; import { useKibana } from '../../../../../src/plugins/kibana_react/public'; import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers'; +import { SyntheticsCallout } from '../components/overview/synthetics_callout'; interface PageHeaderProps { headingText: string | JSX.Element; @@ -83,6 +84,7 @@ export const PageHeader = React.memo( return ( <> +