[Synthetics] Call enable Synthetics from Getting started and Add moni…

…tor flow (elastic#160360)

(cherry picked from commit 58b3c32)

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(<GettingStartedPage />, {
+      state: {
+        syntheticsEnablement: {
+          loading: false,
+          enablement: {
+            canEnable: false,
+            isEnabled: false,
+          },
+        },
+      },
+    });
+
+    // page is loaded
+    expect(kibanaService.core.application.navigateToApp).toHaveBeenCalledWith('synthetics', {
+      path: '/monitors',
+    });
+  });
 });

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());

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(<SimpleMonitorForm />);
     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 () => {

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());

x-pack/plugins/synthetics/public/apps/synthetics/hooks/use_enablement.ts

@@ -5,13 +5,16 @@
  * 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';
 
 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,