[Observability] New "No Data" screens

src/plugins/kibana_react/public/index.ts

@@ -15,6 +15,7 @@ export * from './overlays';
 export * from './ui_settings';
 export * from './field_icon';
 export * from './field_button';
+export * from './no_data_page';
 export * from './table_list_view';
 export * from './toolbar_button';
 export * from './split_panel';

src/plugins/kibana_react/public/no_data_page/no_data_page.scss

@@ -0,0 +1,7 @@
+.kbnNoDataPageContents__item:only-child {
+  min-width: 400px;
+
+  @include euiBreakpoint('xs', 's') {
+    min-width: auto;
+  }
+}

src/plugins/kibana_react/public/no_data_page/no_data_page.tsx

@@ -0,0 +1,202 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import './no_data_page.scss';
+
+import React, { ReactNode, useMemo, FunctionComponent, MouseEventHandler } from 'react';
+import {
+  EuiFlexItem,
+  EuiCardProps,
+  EuiFlexGrid,
+  EuiSpacer,
+  EuiText,
+  EuiTextColor,
+  EuiLink,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { KibanaPageTemplateProps, KibanaPageTemplateSolutionNavAvatar } from '../page_template';
+
+import { ElasticAgentCard, ElasticBeatsCard, NoDataCard } from './no_data_card';
+
+export const NO_DATA_PAGE_MAX_WIDTH = 950;
+export const NO_DATA_PAGE_TEMPLATE_PROPS: KibanaPageTemplateProps = {
+  restrictWidth: NO_DATA_PAGE_MAX_WIDTH,
+  template: 'centeredBody',
+  pageContentProps: {
+    hasShadow: false,
+    color: 'transparent',
+  },
+};
+
+export const NO_DATA_RECOMMENDED = i18n.translate(
+  'kibana-react.noDataPage.noDataPage.recommended',
+  {
+    defaultMessage: 'Recommended',
+  }
+);
+
+export type NoDataPageActions = Partial<EuiCardProps> & {
+  /**
+   * Applies the `Recommended` beta badge and makes the button `fill`
+   */
+  recommended?: boolean;
+  /**
+   * Provide just a string for the button's label, or a whole component
+   */
+  button?: string | ReactNode;
+  /**
+   * Remapping `onClick` to any element
+   */
+  onClick?: MouseEventHandler<HTMLElement>;
+};
+
+export type NoDataPageActionsProps = Record<string, NoDataPageActions>;
+
+export interface NoDataPageProps {
+  /**
+   * Single name for the current solution, used to auto-generate the title, logo, description, and button label
+   */
+  solution: string;
+  /**
+   * Optionally replace the auto-generated logo
+   */
+  logo?: string;
+  /**
+   * Required to set the docs link for the whole solution
+   */
+  docsLink: string;
+  /**
+   * Optionally replace the auto-generated page title (h1)
+   */
+  pageTitle?: string;
+  /**
+   * An object of `NoDataPageActions` configurations with unique primary keys.
+   * Use `elasticAgent` or `beats` as the primary key for pre-configured cards of this type.
+   * Otherwise use a custom key that contains `EuiCard` props.
+   */
+  actions: NoDataPageActionsProps;
+}
+
+export const NoDataPage: FunctionComponent<NoDataPageProps> = ({
+  solution,
+  logo,
+  actions,
+  docsLink,
+  pageTitle,
+}) => {
+  // Convert obj data into an iterable array
+  const entries = Object.entries(actions);
+
+  // This sort fn may look nonsensical, but it's some Good Ol' Javascript (TM)
+  // Sort functions want either a 1, 0, or -1 returned to determine order,
+  // and it turns out in JS you CAN minus booleans from each other to get a 1, 0, or -1 - e.g., (true - false == 1) :whoa:
+  const sortedEntries = entries.sort(([, firstObj], [, secondObj]) => {
+    // The `??` fallbacks are because the recommended key can be missing or undefined
+    return Number(secondObj.recommended ?? false) - Number(firstObj.recommended ?? false);
+  });
+
+  // Convert the iterated [[key, value]] array format back into an object
+  const sortedData = Object.fromEntries(sortedEntries);
+  const actionsKeys = Object.keys(sortedData);
+  const renderActions = useMemo(() => {
+    return Object.values(sortedData).map((action, i) => {
+      if (actionsKeys[i] === 'elasticAgent') {
+        return (
+          <EuiFlexItem key={`empty-page-agent-action`} className="kbnNoDataPageContents__item">
+            <ElasticAgentCard solution={solution} {...action} />
+          </EuiFlexItem>
+        );
+      } else if (actionsKeys[i] === 'beats') {
+        return (
+          <EuiFlexItem key={`empty-page-beats-action`} className="kbnNoDataPageContents__item">
+            <ElasticBeatsCard solution={solution} {...action} />
+          </EuiFlexItem>
+        );
+      } else {
+        return (
+          <EuiFlexItem
+            key={`empty-page-${actionsKeys[i]}-action`}
+            className="kbnNoDataPageContents__item"
+          >
+            <NoDataCard {...action} />
+          </EuiFlexItem>
+        );
+      }
+    });
+  }, [actions, sortedData, actionsKeys]);
+
+  return (
+    <div className="kbnNoDataPageContents">
+      <EuiText textAlign="center">
+        <KibanaPageTemplateSolutionNavAvatar
+          name={solution}
+          iconType={logo || `logo${solution}`}
+          size="xxl"
+        />
+        <EuiSpacer />
+        <h1>
+          {pageTitle || (
+            <FormattedMessage
+              id="kibana-react.noDataPage.welcomeTitle"
+              defaultMessage="Welcome to Elastic {solution}!"
+              values={{ solution }}
+            />
+          )}
+        </h1>
+        <EuiTextColor color="subdued">
+          <p>
+            <FormattedMessage
+              id="kibana-react.noDataPage.intro"
+              defaultMessage="Add your data to get started or {link} about {solution}."
+              values={{
+                solution,
+                link: (
+                  <EuiLink href={docsLink}>
+                    <FormattedMessage
+                      id="kibana-react.noDataPage.intro.link"
+                      defaultMessage="learn more"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiTextColor>
+      </EuiText>
+      <EuiSpacer size="xxl" />
+      <EuiSpacer size="l" />
+      <EuiFlexGrid columns={2} style={{ justifyContent: 'space-around' }}>
+        {renderActions}
+      </EuiFlexGrid>
+      {actionsKeys.length > 1 ? (
+        <>
+          <EuiSpacer size="xxl" />
+          <EuiText textAlign="center" color="subdued">
+            <p>
+              <FormattedMessage
+                id="kibana-react.noDataPage.cantDecide"
+                defaultMessage="Confused on which to use? {link}"
+                values={{
+                  link: (
+                    <EuiLink href="https://www.elastic.co/guide/en/fleet/current/beats-agent-comparison.html">
+                      <FormattedMessage
+                        id="kibana-react.noDataPage.cantDecide.link"
+                        defaultMessage="Check our docs for more information."
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+          </EuiText>
+        </>
+      ) : undefined}
+    </div>
+  );
+};

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

@@ -33,6 +33,7 @@ import { UXActionMenu } from '../components/app/RumDashboard/ActionMenu';
 import { redirectTo } from '../components/routing/redirect_to';
 import { useBreadcrumbs } from '../../../observability/public';
 import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
+import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
 
 export const uxRoutes: APMRouteDefinition[] = [
   {
@@ -66,7 +67,11 @@ function UxApp() {
         darkMode,
       })}
     >
-      <div data-test-subj="csmMainContainer" role="main">
+      <div
+        className={APP_WRAPPER_CLASS}
+        data-test-subj="csmMainContainer"
+        role="main"
+      >
         <ReactRouterRoute component={ScrollToTopOnPathChange} />
         <RumHome />
       </div>
@@ -104,14 +109,17 @@ export function UXAppRoot({
   };
 
   return (
-    <RedirectAppLinks application={core.application}>
+    <RedirectAppLinks
+      className={APP_WRAPPER_CLASS}
+      application={core.application}
+    >
       <ApmPluginContext.Provider value={apmPluginContextValue}>
         <KibanaContextProvider
           services={{ ...core, ...plugins, embeddable, data }}
         >
           <i18nCore.Context>
             <RouterProvider history={history} router={uxRouter}>
-              <UrlParamsProvider>
+              <UrlParamsProvider className={APP_WRAPPER_CLASS}>
                 <UxApp />
                 <UXActionMenu appMountParameters={appMountParameters} />
               </UrlParamsProvider>

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

@@ -5,33 +5,52 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import { RumOverview } from '../RumDashboard';
-import { CsmSharedContextProvider } from './CsmSharedContext';
+import { CsmSharedContext, CsmSharedContextProvider } from './CsmSharedContext';
 import { WebApplicationSelect } from './Panels/WebApplicationSelect';
 import { DatePicker } from '../../shared/DatePicker';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
 import { UserPercentile } from './UserPercentile';
 import { useBreakPoints } from '../../../hooks/use_break_points';
+import { KibanaPageTemplateProps } from '../../../../../../../src/plugins/kibana_react/public';
 
 export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'User Experience',
 });
 
 export function RumHome() {
-  const { observability } = useApmPluginContext();
+  const { core, observability } = useApmPluginContext();
   const PageTemplateComponent = observability.navigation.PageTemplate;
 
   const { isSmall, isXXL } = useBreakPoints();
 
   const envStyle = isSmall ? {} : { maxWidth: 500 };
 
+  // TODO: NOT THE RIGHT METRIC TO CHECK
+  const {
+    sharedData: { totalPageViews },
+  } = useContext(CsmSharedContext);
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = totalPageViews
+    ? {
+        solution: 'Observability',
+        pageTitle: 'Set up User Experience Tracking for Observability!',
+        actions: {
+          beats: {
+            href: core.http.basePath.prepend(`/app/home#/tutorial/apm`),
+          },
+        },
+        docsLink: '#',
+      }
+    : undefined;
+
   return (
     <CsmSharedContextProvider>
       <PageTemplateComponent
+        noDataConfig={noDataConfig}
         pageHeader={
           isXXL
             ? {

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

@@ -5,9 +5,12 @@
  * 2.0.
  */
 
-import { EuiPageHeaderProps, EuiPageTemplateProps } from '@elastic/eui';
+import { EuiPageHeaderProps } from '@elastic/eui';
 import React from 'react';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import {
+  useKibana,
+  KibanaPageTemplateProps,
+} from '../../../../../../../src/plugins/kibana_react/public';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { EnvironmentFilter } from '../../shared/EnvironmentFilter';
 
@@ -29,14 +32,33 @@ export function ApmMainTemplate({
   pageTitle?: React.ReactNode;
   pageHeader?: EuiPageHeaderProps;
   children: React.ReactNode;
-} & EuiPageTemplateProps) {
+} & KibanaPageTemplateProps) {
+  const { http } = useKibana().services;
+  const basePath = http!.basePath.get();
   const { services } = useKibana<ApmPluginStartDeps>();
 
   const ObservabilityPageTemplate =
     services.observability.navigation.PageTemplate;
 
+  // TODO: NEEDS A DATA CHECK
+  const hasData = true;
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = !hasData
+    ? {
+        solution: 'Observability',
+        pageTitle: 'Set up APM for Observability!',
+        actions: {
+          beats: {
+            href: basePath + `/app/home#/tutorial/apm`,
+          },
+        },
+        docsLink: '#',
+      }
+    : undefined;
+
+  // TODO: GET A CHECK
   return (
     <ObservabilityPageTemplate
+      noDataConfig={noDataConfig}
       pageHeader={{
         pageTitle,
         rightSideItems: [<EnvironmentFilter />],

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/license_callout/license_callout.tsx

@@ -23,7 +23,7 @@ export const LicenseCallout: React.FC = () => {
   if (hasPlatinumLicense && !isTrial) return null;
 
   return (
-    <EuiPanel hasShadow={false} hasBorder className="productCard" paddingSize="l">
+    <EuiPanel hasBorder color="transparent" paddingSize="l">
       <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={7}>
           <EuiText>