[Synthetics] Deprecate adding synthetics integrations from fleet

x-pack/plugins/synthetics/public/legacy_uptime/components/common/header/manage_monitors_btn.tsx

@@ -20,11 +20,6 @@ export const ManageMonitorsBtn = () => {
 
   const history = useHistory();
 
-  const handleOnClick = () => {
-    setIsOpen(false);
-    history.push(MONITOR_MANAGEMENT_ROUTE + '/all');
-  };
-
   return (
     <EuiTourStep
       content={
@@ -33,7 +28,13 @@ export const ManageMonitorsBtn = () => {
             <p>{PUBLIC_BETA_DESCRIPTION}</p>
           </EuiText>
           <EuiSpacer />
-          <EuiButton color="primary" fill onClick={handleOnClick}>
+          <EuiButton
+            color="primary"
+            fill
+            href={history.createHref({
+              pathname: MONITOR_MANAGEMENT_ROUTE,
+            })}
+          >
             {MONITOR_MANAGEMENT_LABEL}
           </EuiButton>
         </>
@@ -56,7 +57,9 @@ export const ManageMonitorsBtn = () => {
         aria-label={NAVIGATE_LABEL}
         color="text"
         data-test-subj="syntheticsManagementPageLink"
-        onClick={handleOnClick}
+        href={history.createHref({
+          pathname: MONITOR_MANAGEMENT_ROUTE,
+        })}
       >
         <FormattedMessage
           id="xpack.synthetics.page_header.manageMonitors"

x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/deprecate_notice_modal.tsx

@@ -0,0 +1,129 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiConfirmModal, EuiIcon, EuiLink } from '@elastic/eui';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useLocation } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { PrivateLocationDocsLink } from '../monitor_management/manage_locations/empty_locations';
+
+export const DeprecateNoticeModal = () => {
+  const { application } = useKibana().services;
+  const location = useLocation();
+
+  return (
+    <EuiConfirmModal
+      title={
+        <>
+          {HEADER_TEXT} <EuiIcon type="cheer" />
+        </>
+      }
+      onCancel={() => {
+        const [app, options] = location.state.onCancelNavigateTo;
+        application?.navigateToApp(app, options);
+      }}
+      onConfirm={() => {
+        application?.navigateToApp('uptime', { path: '/manage-monitors' });
+      }}
+      confirmButtonText={GO_MONITOR_MANAGEMENT_TEXT}
+      cancelButtonText={GO_BACK_TEXT}
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.synthetics.deprecateNoticeModal.description"
+          defaultMessage="We no longer support adding synthetics monitors via synthetics integration. We have a new
+        and a better way to add monitors via uptime app, where you can"
+        />
+      </p>
+      <p>
+        <li>
+          <PrivateLocationDocsLink label={ADD_PRIVATE_LOCATIONS_TEXT} /> {POLICIES_TEXT}
+        </li>
+        <li>
+          <ManageMonitorDocsLink />
+        </li>
+        <li>
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.runYourMonitors"
+            defaultMessage="In Elastic cloud run your monitors against Elastic managed global locations"
+          />
+        </li>
+        <li>
+          <ProjectMonitorDocsLink />
+        </li>
+      </p>
+    </EuiConfirmModal>
+  );
+};
+
+export const ManageMonitorDocsLink = ({ label }: { label?: string }) => (
+  <FormattedMessage
+    id="xpack.synthetics.deprecateNoticeModal.manageMonitors"
+    defaultMessage="Manage lightweight or browser monitors via {link}"
+    values={{
+      link: (
+        <EuiLink
+          href="hhttps://www.elastic.co/guide/en/observability/current/synthetics-manage-monitors.html"
+          target="_blank"
+        >
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.uptimeApp"
+            defaultMessage="Uptime app"
+          />
+        </EuiLink>
+      ),
+    }}
+  />
+);
+
+export const ProjectMonitorDocsLink = ({ label }: { label?: string }) => (
+  <FormattedMessage
+    id="xpack.synthetics.deprecateNoticeModal.runYourMonitors"
+    defaultMessage="Automate adding monitors via {link}"
+    values={{
+      link: (
+        <EuiLink
+          href="https://www.elastic.co/guide/en/observability/current/uptime-set-up-choose-project-monitors.html"
+          target="_blank"
+        >
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.projectMonitors"
+            defaultMessage="Project Monitors"
+          />
+        </EuiLink>
+      ),
+    }}
+  />
+);
+
+const HEADER_TEXT = i18n.translate('xpack.synthetics.deprecateNoticeModal.headerText', {
+  defaultMessage: 'Better way to add monitors',
+});
+
+const POLICIES_TEXT = i18n.translate('xpack.synthetics.deprecateNoticeModal.againstPolicies', {
+  defaultMessage: 'against your fleet policies',
+});
+
+const GO_BACK_TEXT = i18n.translate('xpack.synthetics.deprecateNoticeModal.goBack', {
+  defaultMessage: 'Go back',
+});
+
+const ADD_PRIVATE_LOCATIONS_TEXT = i18n.translate(
+  'xpack.synthetics.deprecateNoticeModal.addPrivateLocations',
+  {
+    defaultMessage: 'Add private locations',
+  }
+);
+
+const GO_MONITOR_MANAGEMENT_TEXT = i18n.translate(
+  'xpack.synthetics.deprecateNoticeModal.goToMonitorManagement',
+  {
+    defaultMessage: 'Go to Monitor Management',
+  }
+);

x-pack/plugins/synthetics/public/legacy_uptime/components/fleet_package/synthetics_policy_create_extension.tsx

@@ -5,16 +5,13 @@
  * 2.0.
  */
 
-import React, { memo, useEffect, useMemo } from 'react';
+import React, { memo, useEffect } from 'react';
 import { PackagePolicyCreateExtensionComponentProps } from '@kbn/fleet-plugin/public';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
-import { DataStream, PolicyConfig, MonitorFields } from './types';
-import { usePolicyConfigContext } from './contexts';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { DeprecateNoticeModal } from './deprecate_notice_modal';
+import { PolicyConfig } from './types';
 import { DEFAULT_FIELDS } from '../../../../common/constants/monitor_defaults';
-import { CustomFields } from './custom_fields';
-import { useUpdatePolicy } from './hooks/use_update_policy';
-import { usePolicy } from './hooks/use_policy';
-import { validate } from './validation';
 
 export const defaultConfig: PolicyConfig = DEFAULT_FIELDS;
 
@@ -27,39 +24,13 @@ export const SyntheticsPolicyCreateExtension = memo<PackagePolicyCreateExtension
     useTrackPageview({ app: 'fleet', path: 'syntheticsCreate' });
     useTrackPageview({ app: 'fleet', path: 'syntheticsCreate', delay: 15000 });
 
-    const { monitorType } = usePolicyConfigContext();
-    const policyConfig: PolicyConfig = usePolicy(newPolicy.name);
+    const { application } = useKibana().services;
 
-    const dataStreams: DataStream[] = useMemo(() => {
-      return newPolicy.inputs.map((input) => {
-        return input.type.replace(/synthetics\//g, '') as DataStream;
-      });
-    }, [newPolicy]);
-
-    useUpdatePolicy({
-      monitorType,
-      defaultConfig: defaultConfig[monitorType] as Partial<MonitorFields>,
-      config: policyConfig[monitorType] as Partial<MonitorFields>,
-      newPolicy,
-      onChange,
-      validate,
-    });
-
-    // Fleet will initialize the create form with a default name for the integratin policy, however,
-    // for synthetics, we want the user to explicitely type in a name to use as the monitor name,
-    // so we blank it out only during 1st component render (thus why the eslint disabled rule below).
     useEffect(() => {
-      onChange({
-        isValid: false,
-        updatedPolicy: {
-          ...newPolicy,
-          name: '',
-        },
-      });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+      // application?.navigateToApp('uptime');
+    }, [application]);
 
-    return <CustomFields validate={validate[monitorType]} dataStreams={dataStreams} />;
+    return <DeprecateNoticeModal />;
   }
 );
 SyntheticsPolicyCreateExtension.displayName = 'SyntheticsPolicyCreateExtension';

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/hooks/use_monitor_list.ts

@@ -27,7 +27,7 @@ export function useMonitorList() {
 
   const { pageIndex, pageSize, sortField, sortOrder } = pageState as MonitorManagementListPageState;
 
-  const { type: viewType } = useParams<{ type: 'all' | 'invalid' }>();
+  const { type: viewType = 'all' } = useParams<{ type: 'all' | 'invalid' }>();
 
   useEffect(() => {
     if (viewType === 'all') {

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/manage_locations/empty_locations.tsx

@@ -48,19 +48,22 @@ export const EmptyLocations = ({
       }
       footer={
         <EuiText size="s">
-          {LEARN_MORE}{' '}
-          <EuiLink
-            href="https://www.elastic.co/guide/en/observability/current/uptime-set-up-choose-agent.html#private-locations"
-            target="_blank"
-          >
-            {READ_DOCS}
-          </EuiLink>
+          {LEARN_MORE} <PrivateLocationDocsLink />
         </EuiText>
       }
     />
   );
 };
 
+export const PrivateLocationDocsLink = ({ label }: { label?: string }) => (
+  <EuiLink
+    href="https://www.elastic.co/guide/en/observability/current/uptime-set-up-choose-agent.html#private-locations"
+    target="_blank"
+  >
+    {label ?? READ_DOCS}
+  </EuiLink>
+);
+
 const FIRST_MONITOR = i18n.translate('xpack.synthetics.monitorManagement.firstLocationMonitor', {
   defaultMessage: 'In order to create a monitor, you will need to add a location first.',
 });

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/list_tabs.tsx

@@ -35,7 +35,7 @@ export const MonitorListTabs = ({
 
   const history = useHistory();
 
-  const { type: viewType } = useParams<{ type: 'all' | 'invalid' }>();
+  const { type: viewType = 'all' } = useParams<{ type: 'all' | 'invalid' }>();
 
   useEffect(() => {
     setSelectedTabId(viewType);
@@ -52,7 +52,7 @@ export const MonitorListTabs = ({
       id: 'all',
       name: ALL_MONITORS_LABEL,
       content: <Fragment />,
-      href: history.createHref({ pathname: '/manage-monitors/all' }),
+      href: history.createHref({ pathname: '/manage-monitors' }),
       disabled: false,
     },
     {

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor_management/monitor_list/monitor_list_container.tsx

@@ -46,7 +46,7 @@ export const MonitorListContainer = ({
 
   const monitorList = useSelector(monitorManagementListSelector);
 
-  const { type: viewType } = useParams<{ type: 'all' | 'invalid' }>();
+  const { type: viewType = 'all' } = useParams<{ type: 'all' | 'invalid' }>();
   const { errorSummaries, loading, count } = useInlineErrors({
     onlyInvalidMonitors: viewType === 'invalid',
     sortField: pageState.sortField,

x-pack/plugins/synthetics/public/legacy_uptime/routes.tsx

@@ -240,7 +240,7 @@ const getRoutes = (): RouteProps[] => {
         defaultMessage: 'Monitor Management | {baseTitle}',
         values: { baseTitle },
       }),
-      path: MONITOR_MANAGEMENT_ROUTE + '/:type',
+      path: MONITOR_MANAGEMENT_ROUTE + '/:type?',
       component: () => (
         <ServiceAllowedWrapper>
           <MonitorManagementPage />