[Synthetics] Deprecate adding synthetics integrations from fleet

.buildkite/ftr_configs.yml

@@ -156,7 +156,6 @@ enabled:
   - x-pack/test/functional_embedded/config.ts
   - x-pack/test/functional_enterprise_search/without_host_configured.config.ts
   - x-pack/test/functional_execution_context/config.ts
-  - x-pack/test/functional_synthetics/config.js
   - x-pack/test/functional_with_es_ssl/config.ts
   - x-pack/test/functional/apps/advanced_settings/config.ts
   - x-pack/test/functional/apps/aiops/config.ts

x-pack/plugins/fleet/README.md

@@ -181,7 +181,6 @@ As part of the bundled package update process, we'll likely also need to update
 - `x-pack/test/fleet_api_integration/config.ts`
 - `x-pack/plugins/fleet/server/integration_tests/helpers/docker_registry_helper.ts`
 - `x-pack/test/functional/config.base.js`
-- `x-pack/test/functional_synthetics/config.js`
 
 To update this registry image, pull the digest SHA from the package storage Jenkins pipeline at https://beats-ci.elastic.co/blue/organizations/jenkins/Ingest-manager%2Fpackage-storage/activity and update the files above. The digest value should appear in the "publish Docker image" step as part of the `docker push` command in the logs.
 

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,101 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+export const DeprecateNoticeModal = ({ onCancel }: { onCancel: () => void }) => {
+  const { application } = useKibana().services;
+
+  return (
+    <EuiConfirmModal
+      title={
+        <>
+          {HEADER_TEXT} <EuiIcon type="cheer" />
+        </>
+      }
+      onCancel={onCancel}
+      onConfirm={() => {
+        application?.navigateToApp('uptime', { path: '/manage-monitors' });
+      }}
+      confirmButtonText={GO_MONITOR_MANAGEMENT_TEXT}
+      cancelButtonText={GO_BACK_TEXT}
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.synthetics.deprecateNoticeModal.description"
+          defaultMessage="The Elastic Synthetics integration is deprecated. Instead, you can now monitor endpoints,
+        pages, and user journeys directly from Uptime much more efficiently:"
+        />
+      </p>
+      <p>
+        <li>
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.addPrivateLocations"
+            defaultMessage="Add private locations against your fleet policies"
+          />
+        </li>
+        <li>
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.manageMonitors"
+            defaultMessage="Manage lightweight and browser monitors from a single place"
+          />
+        </li>
+        <li>
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.elasticManagedLocations"
+            defaultMessage="Run monitors in multiple locations managed by Elastic, or from your own private locations"
+          />
+        </li>
+        <li>
+          <FormattedMessage
+            id="xpack.synthetics.deprecateNoticeModal.automateMonitors"
+            defaultMessage="Automate the creation of your monitors using project monitors"
+          />
+        </li>
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.synthetics.deprecateNoticeModal.forMoreInformation"
+          defaultMessage="For more information, {docsLink}"
+          values={{
+            docsLink: (
+              <EuiLink
+                target="_blank"
+                href="https://www.elastic.co/guide/en/observability/current/monitor-uptime-synthetics.html"
+              >
+                {READ_DOCS_TEXT}
+              </EuiLink>
+            ),
+          }}
+        />
+      </p>
+    </EuiConfirmModal>
+  );
+};
+
+const HEADER_TEXT = i18n.translate('xpack.synthetics.deprecateNoticeModal.headerText', {
+  defaultMessage: 'Synthetic Monitoring is now available out of the box in Uptime',
+});
+
+const GO_BACK_TEXT = i18n.translate('xpack.synthetics.deprecateNoticeModal.goBack', {
+  defaultMessage: 'Go back',
+});
+
+const READ_DOCS_TEXT = i18n.translate('xpack.synthetics.deprecateNoticeModal.readDocs', {
+  defaultMessage: 'read docs.',
+});
+
+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, useCallback } 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,16 @@ 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,
-    });
+    const { package: pkg } = newPolicy;
 
-    // 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: '',
-        },
+    const onCancel = useCallback(() => {
+      application?.navigateToApp('integrations', {
+        path: `/detail/${pkg?.name}-${pkg?.version}/overview`,
       });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return <CustomFields validate={validate[monitorType]} dataStreams={dataStreams} />;
+    }, [application, pkg?.name, pkg?.version]);
+    return <DeprecateNoticeModal onCancel={onCancel} />;
   }
 );
 SyntheticsPolicyCreateExtension.displayName = 'SyntheticsPolicyCreateExtension';