[Synthetics UI] Add deprecation warnings for the synthetics integration monitors

x-pack/plugins/synthetics/common/constants/rest_api.ts

@@ -45,7 +45,7 @@ export enum API_URLS {
   TRIGGER_MONITOR = '/internal/uptime/service/monitors/trigger',
   SERVICE_ALLOWED = '/internal/uptime/service/allowed',
   SYNTHETICS_APIKEY = '/internal/uptime/service/api_key',
-  SYNTHETICS_HAS_ZIP_URL_MONITORS = '/internal/uptime/fleet/has_zip_url_monitors',
+  SYNTHETICS_HAS_INTEGRATION_MONITORS = '/internal/uptime/fleet/has_integration_monitors',
 
   // Project monitor public endpoint
   SYNTHETICS_MONITORS_PROJECT = '/api/synthetics/project/{projectName}/monitors',

x-pack/plugins/synthetics/common/types/index.ts

@@ -8,4 +8,4 @@
 export * from './monitor_duration';
 export * from './synthetics_monitor';
 export * from './monitor_validation';
-export * from './zip_url_deprecation';
+export * from './integration_deprecation';

x-pack/plugins/synthetics/common/types/zip_url_deprecation.ts → x-pack/plugins/synthetics/common/types/integration_deprecation.ts

@@ -5,6 +5,6 @@
  * 2.0.
  */
 
-export interface SyntheticsHasZipUrlMonitorsResponse {
-  hasZipUrlMonitors: boolean;
+export interface SyntheticsHasIntegrationMonitorsResponse {
+  hasIntegrationMonitors: boolean;
 }

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

@@ -8,7 +8,7 @@
 import React, { memo, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { PackagePolicyEditExtensionComponentProps } from '@kbn/fleet-plugin/public';
-import { EuiButton, EuiCallOut } from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { PolicyConfig, MonitorFields } from './types';
 import { ConfigKey, DataStream, TLSFields } from './types';
@@ -22,6 +22,7 @@ import {
   TLSFieldsContextProvider,
 } from './contexts';
 import { normalizers } from './helpers/normalizers';
+import { IntegrationDeprecationCallout } from '../overview/integration_deprecation/integration_deprecation_callout';
 
 /**
  * Exports Synthetics-specific package policy instructions
@@ -124,6 +125,8 @@ export const SyntheticsPolicyEditExtensionWrapper = memo<PackagePolicyEditExtens
             <TCPContextProvider defaultValues={fullDefaultConfig?.[DataStream.TCP]}>
               <ICMPSimpleFieldsContextProvider defaultValues={fullDefaultConfig?.[DataStream.ICMP]}>
                 <BrowserContextProvider defaultValues={fullDefaultConfig?.[DataStream.BROWSER]}>
+                  <IntegrationDeprecationCallout />
+                  <EuiSpacer />
                   <SyntheticsPolicyEditExtension
                     newPolicy={newPolicy}
                     onChange={onChange}

x-pack/plugins/synthetics/public/legacy_uptime/components/overview/integration_deprecation/index.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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, { useState, useEffect } from 'react';
+import { EuiSpacer } from '@elastic/eui';
+import { useFetcher } from '@kbn/observability-plugin/public';
+import { useSelector } from 'react-redux';
+import { getHasIntegrationMonitors } from '../../../state/api/has_integration_monitors';
+import { monitorListSelector } from '../../../state/selectors';
+import { IntegrationDeprecationCallout } from './integration_deprecation_callout';
+
+export const INTEGRATION_DEPRECATION_SESSION_STORAGE_KEY =
+  'SYNTHETICS_INTEGRATION_DEPRECATION_HAS_BEEN_DISMISSED';
+
+export const IntegrationDeprecation = () => {
+  const monitorList = useSelector(monitorListSelector);
+  const noticeHasBeenDismissed =
+    window.sessionStorage.getItem(INTEGRATION_DEPRECATION_SESSION_STORAGE_KEY) === 'true';
+  const { data, loading } = useFetcher(() => {
+    // load it when list is loaded
+    if (!noticeHasBeenDismissed && monitorList.isLoaded) {
+      return getHasIntegrationMonitors();
+    }
+    return undefined;
+  }, [monitorList.isLoaded]);
+  const hasIntegrationMonitors = !loading && data && data.hasIntegrationMonitors;
+  const [shouldShowNotice, setShouldShowNotice] = useState(
+    Boolean(hasIntegrationMonitors && !noticeHasBeenDismissed)
+  );
+
+  const handleDismissDeprecationNotice = () => {
+    window.sessionStorage.setItem(INTEGRATION_DEPRECATION_SESSION_STORAGE_KEY, 'true');
+    setShouldShowNotice(false);
+  };
+
+  useEffect(() => {
+    setShouldShowNotice(Boolean(hasIntegrationMonitors && !noticeHasBeenDismissed));
+  }, [hasIntegrationMonitors, noticeHasBeenDismissed]);
+
+  return shouldShowNotice ? (
+    <>
+      <IntegrationDeprecationCallout
+        handleDismissDeprecationNotice={handleDismissDeprecationNotice}
+      />
+      <EuiSpacer size="s" />
+    </>
+  ) : null;
+};

x-pack/plugins/synthetics/public/legacy_uptime/components/overview/zip_url_deprecation/zip_url_deprecation.test.tsx → x-pack/plugins/synthetics/public/legacy_uptime/components/overview/integration_deprecation/integration_deprecation.test.tsx

@@ -9,62 +9,64 @@ import userEvent from '@testing-library/user-event';
 import { StubBrowserStorage } from '@kbn/test-jest-helpers';
 import { screen } from '@testing-library/react';
 import { render } from '../../../lib/helper/rtl_helpers';
-import { ZipUrlDeprecation, ZIP_URL_DEPRECATION_SESSION_STORAGE_KEY } from '.';
+import { IntegrationDeprecation, INTEGRATION_DEPRECATION_SESSION_STORAGE_KEY } from '.';
 import * as observabilityPublic from '@kbn/observability-plugin/public';
 
 export const mockStorage = new StubBrowserStorage();
 jest.mock('@kbn/observability-plugin/public');
 
-describe('ZipUrlDeprecation', () => {
+const DEPRECATION_TITLE = 'Migrate your Elastic Synthetics integration monitors before Elastic 8.8';
+
+describe('IntegrationDeprecation', () => {
   const { FETCH_STATUS } = observabilityPublic;
-  it('shows deprecation notice when hasZipUrlMonitors is true', () => {
+  it('shows deprecation notice when hasIntegrationMonitors is true', () => {
     jest.spyOn(observabilityPublic, 'useFetcher').mockReturnValue({
       status: FETCH_STATUS.SUCCESS,
-      data: { hasZipUrlMonitors: true },
+      data: { hasIntegrationMonitors: true },
       refetch: () => null,
       loading: false,
     });
 
-    render(<ZipUrlDeprecation />);
-    expect(screen.getByText('Deprecation notice')).toBeInTheDocument();
+    render(<IntegrationDeprecation />);
+    expect(screen.getByText(DEPRECATION_TITLE)).toBeInTheDocument();
   });
 
-  it('does not show deprecation notice when hasZipUrlMonitors is false', () => {
+  it('does not show deprecation notice when hasIntegrationMonitors is false', () => {
     jest.spyOn(observabilityPublic, 'useFetcher').mockReturnValue({
       status: FETCH_STATUS.SUCCESS,
-      data: { hasZipUrlMonitors: false },
+      data: { hasIntegrationMonitors: false },
       refetch: () => null,
       loading: false,
     });
 
-    render(<ZipUrlDeprecation />);
-    expect(screen.queryByText('Deprecation notice')).not.toBeInTheDocument();
+    render(<IntegrationDeprecation />);
+    expect(screen.queryByText(DEPRECATION_TITLE)).not.toBeInTheDocument();
   });
 
   it('dismisses notification', () => {
     jest.spyOn(observabilityPublic, 'useFetcher').mockReturnValue({
       status: FETCH_STATUS.SUCCESS,
-      data: { hasZipUrlMonitors: true },
+      data: { hasIntegrationMonitors: true },
       refetch: () => null,
       loading: false,
     });
 
-    render(<ZipUrlDeprecation />);
-    expect(screen.getByText('Deprecation notice')).toBeInTheDocument();
+    render(<IntegrationDeprecation />);
+    expect(screen.getByText(DEPRECATION_TITLE)).toBeInTheDocument();
     userEvent.click(screen.getByText('Dismiss'));
-    expect(screen.queryByText('Deprecation notice')).not.toBeInTheDocument();
+    expect(screen.queryByText(DEPRECATION_TITLE)).not.toBeInTheDocument();
   });
 
   it('does not show notification when session storage key is true', () => {
     jest.spyOn(observabilityPublic, 'useFetcher').mockReturnValue({
       status: FETCH_STATUS.SUCCESS,
-      data: { hasZipUrlMonitors: true },
+      data: { hasIntegrationMonitors: true },
       refetch: () => null,
       loading: false,
     });
-    mockStorage.setItem(ZIP_URL_DEPRECATION_SESSION_STORAGE_KEY, 'true');
+    mockStorage.setItem(INTEGRATION_DEPRECATION_SESSION_STORAGE_KEY, 'true');
 
-    render(<ZipUrlDeprecation />);
-    expect(screen.queryByText('Deprecation notice')).not.toBeInTheDocument();
+    render(<IntegrationDeprecation />);
+    expect(screen.queryByText(DEPRECATION_TITLE)).not.toBeInTheDocument();
   });
 });

x-pack/plugins/synthetics/public/legacy_uptime/components/overview/integration_deprecation/integration_deprecation_callout.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { getDocLinks } from '../../../../kibana_services';
+
+interface IntegrationDeprecationCalloutProps {
+  handleDismissDeprecationNotice?: () => void;
+}
+
+export function IntegrationDeprecationCallout({
+  handleDismissDeprecationNotice,
+}: IntegrationDeprecationCalloutProps) {
+  return (
+    <EuiCallOut
+      title={
+        <FormattedMessage
+          id="xpack.synthetics.integration.deprecation.title"
+          defaultMessage="Migrate your Elastic Synthetics integration monitors before Elastic 8.8"
+        />
+      }
+      color="warning"
+    >
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>
+          <span>
+            <FormattedMessage
+              id="xpack.synthetics.integration.deprecation.content"
+              defaultMessage="You have at least one monitor configured using the Elastic Synthetics integration. From Elastic 8.8, the integration will be deprecated and you will no longer be able to edit these monitors. To avoid this, migrate them to Project monitors or add them to the new Synthetics app directly available in Observability before the 8.8 update. Check our {link} for more details."
+              values={{
+                link: (
+                  <EuiLink
+                    target="_blank"
+                    href={getDocLinks()?.links?.observability?.syntheticsProjectMonitors}
+                    external
+                  >
+                    <FormattedMessage
+                      id="xpack.synthetics.integration.deprecation.link"
+                      defaultMessage="Synthetics migration docs"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </span>
+        </EuiFlexItem>
+        {handleDismissDeprecationNotice ? (
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={handleDismissDeprecationNotice} color="warning">
+              <FormattedMessage
+                id="xpack.synthetics.integration.deprecation.dismiss"
+                defaultMessage="Dismiss"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
+    </EuiCallOut>
+  );
+}

x-pack/plugins/synthetics/public/legacy_uptime/pages/overview.tsx

@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
 import { MonitorList } from '../components/overview/monitor_list/monitor_list_container';
-import { ZipUrlDeprecation } from '../components/overview/zip_url_deprecation';
+import { IntegrationDeprecation } from '../components/overview/integration_deprecation';
 import { StatusPanel } from '../components/overview/status_panel';
 import { QueryBar } from '../components/overview/query_bar/query_bar';
 import { MONITORING_OVERVIEW_LABEL } from '../routes';
@@ -40,7 +40,7 @@ export const OverviewPageComponent = () => {
     <>
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem grow={true}>
-          <ZipUrlDeprecation />
+          <IntegrationDeprecation />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="xs" wrap responsive={false}>

x-pack/plugins/synthetics/public/legacy_uptime/state/api/has_zip_url_monitors.ts → x-pack/plugins/synthetics/public/legacy_uptime/state/api/has_integration_monitors.ts

@@ -6,9 +6,10 @@
  */
 
 import { API_URLS } from '../../../../common/constants';
-import { SyntheticsHasZipUrlMonitorsResponse } from '../../../../common/types/zip_url_deprecation';
+import { SyntheticsHasIntegrationMonitorsResponse } from '../../../../common/types/integration_deprecation';
 import { apiService } from './utils';
 
-export const getHasZipUrlMonitors = async (): Promise<SyntheticsHasZipUrlMonitorsResponse> => {
-  return await apiService.get(API_URLS.SYNTHETICS_HAS_ZIP_URL_MONITORS);
-};
+export const getHasIntegrationMonitors =
+  async (): Promise<SyntheticsHasIntegrationMonitorsResponse> => {
+    return await apiService.get(API_URLS.SYNTHETICS_HAS_INTEGRATION_MONITORS);
+  };