[APM] Replace custom map with link to Client Side Monitoring (#77458) (…

…#78093)

* Closes #48538 by removing the average duration by country custom geo map.

* adds link to client side monitoring below the rum charts

* removes unused translations

* Removes RUM-specific chart for Avg Duration By Browser

* Replace link under charts with CallOut above charts with link to Client Side Monitoring

* removes api integration tests for  avg_duration_by_browser and usused i18n translations

* updates to copy in the CSM callout

x-pack/plugins/apm/public/components/app/TransactionOverview/ClientSideMonitoringCallout.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiButton, EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+
+export function ClientSideMonitoringCallout() {
+  const { core } = useApmPluginContext();
+  const clientSideMonitoringHref = core.http.basePath.prepend(`/app/csm`);
+
+  return (
+    <EuiCallOut
+      iconType="cheer"
+      title={i18n.translate(
+        'xpack.apm.transactionOverview.clientSideMonitoring.calloutTitle',
+        { defaultMessage: 'Introducing: Client Side Monitoring' }
+      )}
+    >
+      <EuiText>
+        {i18n.translate(
+          'xpack.apm.transactionOverview.clientSideMonitoring.calloutText',
+          {
+            defaultMessage:
+              'We are beyond excited to introduce a new experience for analyzing the user experience metrics specifically for your RUM services. It provides insights into the core vitals and visitor breakdown by browser and location. The app is always available in the left sidebar among the other Observability views.',
+          }
+        )}
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiButton href={clientSideMonitoringHref}>
+        {i18n.translate(
+          'xpack.apm.transactionOverview.clientSideMonitoring.linkLabel',
+          { defaultMessage: 'Take me there' }
+        )}
+      </EuiButton>
+    </EuiCallOut>
+  );
+}

x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx

@@ -35,6 +35,8 @@ import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { TransactionTypeFilter } from '../../shared/LocalUIFilters/TransactionTypeFilter';
 import { TransactionList } from './TransactionList';
 import { useRedirect } from './useRedirect';
+import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
+import { ClientSideMonitoringCallout } from './ClientSideMonitoringCallout';
 
 function getRedirectLocation({
   urlParams,
@@ -125,6 +127,12 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
           </LocalUIFilters>
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
+          {transactionType === TRANSACTION_PAGE_LOAD && (
+            <>
+              <ClientSideMonitoringCallout />
+              <EuiSpacer size="s" />
+            </>
+          )}
           <ChartsSyncContextProvider>
             <TransactionCharts
               charts={transactionCharts}