From b610f6f352efc1f294c1ea78c307d784f9d8012e Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Tue, 14 Sep 2021 20:56:05 +0200
Subject: [PATCH] [UX App] Add ux app no data screen (#111866)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../components/app/RumDashboard/RumHome.tsx   | 31 ++++++++++++++++++-
 .../app/RumDashboard/hooks/useHasRumData.ts   | 16 ++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useHasRumData.ts

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
index cb80698adeaa7..0371f7eb669e5 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
+++ b/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
             ? {
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useHasRumData.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useHasRumData.ts
new file mode 100644
index 0000000000000..170ecc235aa6c
--- /dev/null
+++ b/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',
+    });
+  }, []);
+}