forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Uptime] Add callout for synthetics UI (elastic#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 <[email protected]>
- Loading branch information
1 parent
7f5b824
commit 8472bb7
Showing
4 changed files
with
457 additions
and
1 deletion.
There are no files selected for viewing
137 changes: 137 additions & 0 deletions
137
x-pack/plugins/uptime/public/components/overview/__tests__/synthetics_callout.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(<SyntheticsCallout />)).toMatchInlineSnapshot(` | ||
| <Fragment> | ||
| <EuiCallOut | ||
| iconType="beaker" | ||
| title="Elastic Synthetics" | ||
| > | ||
| <p> | ||
| <FormattedMessage | ||
| defaultMessage="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." | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.content" | ||
| values={Object {}} | ||
| /> | ||
| </p> | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <EuiButton | ||
| href="https://www.elastic.co/what-is/synthetic-monitoring" | ||
| > | ||
| <FormattedMessage | ||
| defaultMessage="Read announcement" | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink" | ||
| values={Object {}} | ||
| /> | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <EuiButtonEmpty | ||
| onClick={[Function]} | ||
| > | ||
| <FormattedMessage | ||
| defaultMessage="Dismiss" | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText" | ||
| values={Object {}} | ||
| /> | ||
| </EuiButtonEmpty> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiCallOut> | ||
| <EuiSpacer | ||
| size="s" | ||
| /> | ||
| </Fragment> | ||
| `); | ||
| }); | ||
|
|
||
| it('returns null if callout has been dismissed', () => { | ||
| localStorageMock.getItem = jest.fn().mockImplementation(() => 'true'); | ||
| expect(shallowWithIntl(<SyntheticsCallout />)).toEqual({}); | ||
| }); | ||
|
|
||
| it('renders the component, and then returns null when dismiss button clicked', () => { | ||
| localStorageMock.getItem = jest | ||
| .fn() | ||
| .mockImplementationOnce(() => null) | ||
| .mockImplementationOnce(() => 'true'); | ||
| const wrapper = shallowWithIntl(<SyntheticsCallout />); | ||
| expect(wrapper).toMatchInlineSnapshot(` | ||
| <Fragment> | ||
| <EuiCallOut | ||
| iconType="beaker" | ||
| title="Elastic Synthetics" | ||
| > | ||
| <p> | ||
| <FormattedMessage | ||
| defaultMessage="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." | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.content" | ||
| values={Object {}} | ||
| /> | ||
| </p> | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <EuiButton | ||
| href="https://www.elastic.co/what-is/synthetic-monitoring" | ||
| > | ||
| <FormattedMessage | ||
| defaultMessage="Read announcement" | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink" | ||
| values={Object {}} | ||
| /> | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <EuiButtonEmpty | ||
| onClick={[Function]} | ||
| > | ||
| <FormattedMessage | ||
| defaultMessage="Dismiss" | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText" | ||
| values={Object {}} | ||
| /> | ||
| </EuiButtonEmpty> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiCallOut> | ||
| <EuiSpacer | ||
| size="s" | ||
| /> | ||
| </Fragment> | ||
| `); | ||
| wrapper.find('EuiButton').simulate('click'); | ||
| expect(wrapper).toEqual({}); | ||
| }); | ||
| }); |
78 changes: 78 additions & 0 deletions
78
x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<boolean>(shouldShowSyntheticsCallout()); | ||
| if (!shouldShow) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <> | ||
| <EuiCallOut | ||
| title={i18n.translate('xpack.uptime.overview.pageHeader.syntheticsCallout.title', { | ||
| defaultMessage: 'Elastic Synthetics', | ||
| })} | ||
| iconType="beaker" | ||
| > | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.content" | ||
| defaultMessage="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." | ||
| /> | ||
| </p> | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton href="https://www.elastic.co/what-is/synthetic-monitoring"> | ||
| <FormattedMessage | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink" | ||
| defaultMessage="Read announcement" | ||
| /> | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButtonEmpty | ||
| onClick={() => { | ||
| if (shouldShow) { | ||
| hideSyntheticsCallout(); | ||
| setShouldShow(false); | ||
| } | ||
| }} | ||
| > | ||
| <FormattedMessage | ||
| id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText" | ||
| defaultMessage="Dismiss" | ||
| /> | ||
| </EuiButtonEmpty> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiCallOut> | ||
| <EuiSpacer size="s" /> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.