[UX] Update csm app name to UX (#78179)

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts

@@ -16,7 +16,7 @@ Given(`a user browses the APM UI application for RUM Data`, () => {
   const RANGE_FROM = 'now-24h';
   const RANGE_TO = 'now';
   loginAndWaitForPage(
-    `/app/csm`,
+    `/app/ux`,
     {
       from: RANGE_FROM,
       to: RANGE_TO,

x-pack/plugins/apm/public/application/csmApp.tsx

@@ -20,7 +20,7 @@ import {
 import { APMRouteDefinition } from '../application/routes';
 import { renderAsRedirectTo } from '../components/app/Main/route_config';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
-import { RumHome } from '../components/app/RumDashboard/RumHome';
+import { RumHome, UX_LABEL } from '../components/app/RumDashboard/RumHome';
 import { ApmPluginContext } from '../context/ApmPluginContext';
 import { LoadingIndicatorProvider } from '../context/LoadingIndicatorContext';
 import { UrlParamsProvider } from '../context/UrlParamsContext';
@@ -39,8 +39,8 @@ export const rumRoutes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/',
-    render: renderAsRedirectTo('/csm'),
-    breadcrumb: 'Client Side Monitoring',
+    render: renderAsRedirectTo('/ux'),
+    breadcrumb: UX_LABEL,
   },
 ];
 

x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx

@@ -10,6 +10,10 @@ import { i18n } from '@kbn/i18n';
 import { RumOverview } from '../RumDashboard';
 import { RumHeader } from './RumHeader';
 
+export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
+  defaultMessage: 'User Experience',
+});
+
 export function RumHome() {
   return (
     <div>
@@ -17,11 +21,7 @@ export function RumHome() {
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
-              <h1>
-                {i18n.translate('xpack.apm.csm.title', {
-                  defaultMessage: 'Client Side Monitoring',
-                })}
-              </h1>
+              <h1>{UX_LABEL}</h1>
             </EuiTitle>
           </EuiFlexItem>
         </EuiFlexGroup>

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

@@ -11,14 +11,14 @@ import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 
 export function ClientSideMonitoringCallout() {
   const { core } = useApmPluginContext();
-  const clientSideMonitoringHref = core.http.basePath.prepend(`/app/csm`);
+  const clientSideMonitoringHref = core.http.basePath.prepend(`/app/ux`);
 
   return (
     <EuiCallOut
       iconType="cheer"
       title={i18n.translate(
         'xpack.apm.transactionOverview.clientSideMonitoring.calloutTitle',
-        { defaultMessage: 'Introducing: Client Side Monitoring' }
+        { defaultMessage: 'Introducing: Elastic User Experience' }
       )}
     >
       <EuiText>

x-pack/plugins/apm/public/plugin.ts

@@ -120,8 +120,8 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     });
 
     core.application.register({
-      id: 'csm',
-      title: 'Client Side Monitoring',
+      id: 'ux',
+      title: 'User Experience',
       order: 8500,
       euiIconType: 'logoObservability',
       category: DEFAULT_APP_CATEGORIES.observability,

x-pack/plugins/apm/server/feature.ts

@@ -16,13 +16,13 @@ import {
 export const APM_FEATURE = {
   id: 'apm',
   name: i18n.translate('xpack.apm.featureRegistry.apmFeatureName', {
-    defaultMessage: 'APM and Client Side Monitoring',
+    defaultMessage: 'APM and User Experience',
   }),
   order: 900,
   category: DEFAULT_APP_CATEGORIES.observability,
   icon: 'apmApp',
   navLinkId: 'apm',
-  app: ['apm', 'csm', 'kibana'],
+  app: ['apm', 'ux', 'kibana'],
   catalogue: ['apm'],
   management: {
     insightsAndAlerting: ['triggersActions'],
@@ -31,7 +31,7 @@ export const APM_FEATURE = {
   // see x-pack/plugins/features/common/feature_kibana_privileges.ts
   privileges: {
     all: {
-      app: ['apm', 'csm', 'kibana'],
+      app: ['apm', 'ux', 'kibana'],
       api: ['apm', 'apm_write'],
       catalogue: ['apm'],
       savedObject: {
@@ -47,7 +47,7 @@ export const APM_FEATURE = {
       ui: ['show', 'save', 'alerting:show', 'alerting:save'],
     },
     read: {
-      app: ['apm', 'csm', 'kibana'],
+      app: ['apm', 'ux', 'kibana'],
       api: ['apm'],
       catalogue: ['apm'],
       savedObject: {

x-pack/test/functional/apps/apm/feature_controls/apm_security.ts

@@ -63,7 +63,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         expect(navLinks.map((link) => link.text)).to.eql([
           'Overview',
           'APM',
-          'Client Side Monitoring',
+          'User Experience',
           'Stack Management',
         ]);
       });
@@ -114,7 +114,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
       it('shows apm navlink', async () => {
         const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
-        expect(navLinks).to.eql(['Overview', 'APM', 'Client Side Monitoring', 'Stack Management']);
+        expect(navLinks).to.eql(['Overview', 'APM', 'User Experience', 'Stack Management']);
       });
 
       it('can navigate to APM app', async () => {