[UX App] Add ux app no data screen (elastic#111866)

Co-authored-by: Kibana Machine <[email protected]>

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

@@ -16,22 +16,51 @@ import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_
 import { UxEnvironmentFilter } from '../../shared/EnvironmentFilter';
 import { UserPercentile } from './UserPercentile';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
+import { KibanaPageTemplateProps } from '../../../../../../../src/plugins/kibana_react/public';
+import { useHasRumData } from './hooks/useHasRumData';
 
 export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'Dashboard',
 });
 
 export function RumHome() {
-  const { observability } = useApmPluginContext();
+  const { core, observability } = useApmPluginContext();
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
   const { isSmall, isXXL } = useBreakpoints();
 
+  const { data: rumHasData } = useHasRumData();
+
   const envStyle = isSmall ? {} : { maxWidth: 500 };
 
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = !rumHasData?.hasData
+    ? {
+        solution: i18n.translate('xpack.apm.ux.overview.solutionName', {
+          defaultMessage: 'Observability',
+        }),
+        actions: {
+          beats: {
+            title: i18n.translate('xpack.apm.ux.overview.beatsCard.title', {
+              defaultMessage: 'Add RUM data',
+            }),
+            description: i18n.translate(
+              'xpack.apm.ux.overview.beatsCard.description',
+              {
+                defaultMessage:
+                  'Use the RUM (JS) agent to collect user experience data.',
+              }
+            ),
+            href: core.http.basePath.prepend(`/app/home#/tutorial/apm`),
+          },
+        },
+        docsLink: core.docLinks.links.observability.guide,
+      }
+    : undefined;
+
   return (
     <CsmSharedContextProvider>
       <PageTemplateComponent
+        noDataConfig={noDataConfig}
         pageHeader={
           isXXL
             ? {

x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useHasRumData.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 { useFetcher } from '../../../../hooks/use_fetcher';
+
+export function useHasRumData() {
+  return useFetcher((callApmApi) => {
+    return callApmApi({
+      endpoint: 'GET /api/apm/observability_overview/has_rum_data',
+    });
+  }, []);
+}