From 70bcd1d604618b964ee5d1eab29bff1b2e0b207e Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 27 Jun 2023 18:18:19 +0200 Subject: [PATCH] [Synthetics] Call enable Synthetics from Getting started and Add monitor flow (#160360) (cherry picked from commit 58b3c3298f5c024045c0fd1642503857aab82277) --- .../getting_started_page.test.tsx | 20 +++++++++++++++++++ .../getting_started/getting_started_page.tsx | 4 +++- .../simple_monitor_form.test.tsx | 8 ++++++++ .../monitor_add_edit/monitor_add_page.tsx | 4 ++++ .../apps/synthetics/hooks/use_enablement.ts | 11 ++++++++++ 5 files changed, 46 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.test.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.test.tsx index 3630517831653e..d66a079d8a2ea4 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.test.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.test.tsx @@ -13,6 +13,7 @@ import * as privateLocationsHooks from '../settings/private_locations/hooks/use_ import * as settingsHooks from '../../contexts/synthetics_settings_context'; import { SyntheticsSettingsContextValues } from '../../contexts/synthetics_settings_context'; import { fireEvent } from '@testing-library/react'; +import { kibanaService } from '../../../../utils/kibana_service'; describe('GettingStartedPage', () => { beforeEach(() => { @@ -163,4 +164,23 @@ describe('GettingStartedPage', () => { await findByText(/You do not have sufficient permissions to perform this action./) ).toBeInTheDocument(); }); + + it('should call enablement API and redirect to monitors', function () { + render(, { + state: { + syntheticsEnablement: { + loading: false, + enablement: { + canEnable: false, + isEnabled: false, + }, + }, + }, + }); + + // page is loaded + expect(kibanaService.core.application.navigateToApp).toHaveBeenCalledWith('synthetics', { + path: '/monitors', + }); + }); }); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.tsx index 60f1d4e5c96483..1aa6c0257da333 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/getting_started_page.tsx @@ -20,7 +20,7 @@ import { useHistory } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import styled from 'styled-components'; -import { useBreadcrumbs, useLocations } from '../../hooks'; +import { useBreadcrumbs, useEnablement, useLocations } from '../../hooks'; import { usePrivateLocationsAPI } from '../settings/private_locations/hooks/use_locations_api'; import { LoadingState } from '../monitors_page/overview/overview/monitor_detail_flyout'; import { @@ -40,6 +40,8 @@ export const GettingStartedPage = () => { const dispatch = useDispatch(); const history = useHistory(); + useEnablement(); + useEffect(() => { dispatch(getServiceLocations()); dispatch(getAgentPoliciesAction.get()); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/simple_monitor_form.test.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/simple_monitor_form.test.tsx index 0ab9834f190bd8..9c392b6a409f0a 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/simple_monitor_form.test.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/getting_started/simple_monitor_form.test.tsx @@ -18,13 +18,21 @@ import React from 'react'; import { act, fireEvent, waitFor } from '@testing-library/react'; import { syntheticsTestSubjects } from '../../../../../common/constants/data_test_subjects'; import { apiService } from '../../../../utils/api_service'; +import * as reduxHooks from 'react-redux'; describe('SimpleMonitorForm', () => { const apiSpy = jest.spyOn(apiService, 'post'); + const dispatchSpy = jest.spyOn(reduxHooks, 'useDispatch'); + it('renders', async () => { render(); expect(screen.getByText(WEBSITE_URL_LABEL)).toBeInTheDocument(); expect(screen.getByText(WEBSITE_URL_HELP_TEXT)).toBeInTheDocument(); + + // calls enabled API + await waitFor(async () => { + expect(dispatchSpy).toHaveBeenCalledTimes(3); + }); }); it('do not show validation error on touch', async () => { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_add_page.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_add_page.tsx index adfcc028ffe480..debe978973bac9 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_add_page.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_add_page.tsx @@ -9,6 +9,7 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useTrackPageview } from '@kbn/observability-shared-plugin/public'; +import { useEnablement } from '../../hooks'; import { getServiceLocations, selectServiceLocationsState } from '../../state'; import { ServiceAllowedWrapper } from '../common/wrappers/service_allowed_wrapper'; @@ -25,6 +26,9 @@ export const MonitorAddPage = () => { const { space } = useKibanaSpace(); useTrackPageview({ app: 'synthetics', path: 'add-monitor', delay: 15000 }); useMonitorAddEditBreadcrumbs(); + + useEnablement(); + const dispatch = useDispatch(); useEffect(() => { dispatch(getServiceLocations()); diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_enablement.ts b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_enablement.ts index 057d15218ac2ec..99b34ec3b86e51 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_enablement.ts +++ b/x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_enablement.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { useKibana } from '@kbn/kibana-react-plugin/public'; import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { getSyntheticsEnablement, selectSyntheticsEnablement } from '../state'; @@ -12,6 +13,8 @@ import { getSyntheticsEnablement, selectSyntheticsEnablement } from '../state'; export function useEnablement() { const dispatch = useDispatch(); + const { application } = useKibana().services; + const { loading, error, enablement } = useSelector(selectSyntheticsEnablement); useEffect(() => { @@ -20,6 +23,14 @@ export function useEnablement() { } }, [dispatch, enablement, error, loading]); + useEffect(() => { + if (!enablement?.canEnable && !enablement?.isEnabled && !loading && enablement) { + application?.navigateToApp('synthetics', { + path: '/monitors', + }); + } + }, [application, enablement, loading]); + return { enablement: { areApiKeysEnabled: enablement?.areApiKeysEnabled,