From 9ca0b2baf8939ecbbb383ae0b3559d40b6615828 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Wed, 21 Oct 2020 09:15:58 -0400
Subject: [PATCH] [O11y Overview] Add code to display/hide UX section when
 appropriate (#80873) (#81307)

* Add code to display/hide UX section when appropriate.

* Suppress errors with link to dedicated issue.

* Fix typo in call to action.

* Remove type error suppression.
---
 .../observability/public/pages/overview/data_sections.tsx     | 2 +-
 .../observability/public/pages/overview/empty_section.ts      | 2 +-
 x-pack/plugins/observability/public/pages/overview/index.tsx  | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/overview/data_sections.tsx b/x-pack/plugins/observability/public/pages/overview/data_sections.tsx
index dfb335902b7b87..2d3142d4e5804c 100644
--- a/x-pack/plugins/observability/public/pages/overview/data_sections.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/data_sections.tsx
@@ -64,7 +64,7 @@ export function DataSections({ bucketSize, hasData, absoluteTime, relativeTime }
             />
           </EuiFlexItem>
         )}
-        {hasData?.ux && (
+        {(hasData.ux as UXHasDataResponse).hasData && (
           <EuiFlexItem grow={false}>
             <UXSection
               serviceName={(hasData.ux as UXHasDataResponse).serviceName as string}
diff --git a/x-pack/plugins/observability/public/pages/overview/empty_section.ts b/x-pack/plugins/observability/public/pages/overview/empty_section.ts
index 5b13f2bcbbbd7e..e13efbb8ffdd2a 100644
--- a/x-pack/plugins/observability/public/pages/overview/empty_section.ts
+++ b/x-pack/plugins/observability/public/pages/overview/empty_section.ts
@@ -80,7 +80,7 @@ export const getEmptySections = ({ core }: { core: AppMountContext['core'] }): I
           'Performance is a distribution. Measure the experiences of all visitors to your web application and understand how to improve the experience for everyone.',
       }),
       linkTitle: i18n.translate('xpack.observability.emptySection.apps.ux.link', {
-        defaultMessage: 'Install Rum Agent',
+        defaultMessage: 'Install RUM Agent',
       }),
       href: core.http.basePath.prepend('/app/home#/tutorial/apm'),
     },
diff --git a/x-pack/plugins/observability/public/pages/overview/index.tsx b/x-pack/plugins/observability/public/pages/overview/index.tsx
index e041f8c50f7f83..ff91b08d709aa0 100644
--- a/x-pack/plugins/observability/public/pages/overview/index.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/index.tsx
@@ -24,7 +24,7 @@ import { getEmptySections } from './empty_section';
 import { LoadingObservability } from './loading_observability';
 import { getNewsFeed } from '../../services/get_news_feed';
 import { DataSections } from './data_sections';
-import { useTrackPageview } from '../..';
+import { useTrackPageview, UXHasDataResponse } from '../..';
 
 interface Props {
   routeParams: RouteParams<'/overview'>;
@@ -87,6 +87,8 @@ export function OverviewPage({ routeParams }: Props) {
   const appEmptySections = getEmptySections({ core }).filter(({ id }) => {
     if (id === 'alert') {
       return alertStatus !== FETCH_STATUS.FAILURE && !alerts.length;
+    } else if (id === 'ux') {
+      return !(hasData[id] as UXHasDataResponse).hasData;
     }
     return !hasData[id];
   });