[Inventory] Promote new inventory plugin in APM

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

@@ -11,24 +11,23 @@ import { entityCentricExperience } from '@kbn/observability-plugin/common';
 import { ObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
 import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
 import React, { useContext } from 'react';
-import { i18n } from '@kbn/i18n';
 import { useLocation } from 'react-router-dom';
 import { FeatureFeedbackButton } from '@kbn/observability-shared-plugin/public';
-import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
-import { useDefaultAiAssistantStarterPromptsForAPM } from '../../../hooks/use_default_ai_assistant_starter_prompts_for_apm';
-import { KibanaEnvironmentContext } from '../../../context/kibana_environment_context/kibana_environment_context';
-import { getPathForFeedback } from '../../../utils/get_path_for_feedback';
-import { EnvironmentsContextProvider } from '../../../context/environments_context/environments_context';
-import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
-import { ApmPluginStartDeps } from '../../../plugin';
-import { ServiceGroupSaveButton } from '../../app/service_groups';
-import { ServiceGroupsButtonGroup } from '../../app/service_groups/service_groups_button_group';
-import { ApmEnvironmentFilter } from '../../shared/environment_filter';
-import { getNoDataConfig } from './no_data_config';
-import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
-import { EntityEnablement } from '../../shared/entity_enablement';
-import { CustomNoDataTemplate } from './custom_no_data_template';
-import { ServiceInventoryView } from '../../../context/entity_manager_context/entity_manager_context';
+import { useLocalStorage } from '../../../../hooks/use_local_storage';
+import { useEntityManagerEnablementContext } from '../../../../context/entity_manager_context/use_entity_manager_enablement_context';
+import { useDefaultAiAssistantStarterPromptsForAPM } from '../../../../hooks/use_default_ai_assistant_starter_prompts_for_apm';
+import { KibanaEnvironmentContext } from '../../../../context/kibana_environment_context/kibana_environment_context';
+import { getPathForFeedback } from '../../../../utils/get_path_for_feedback';
+import { EnvironmentsContextProvider } from '../../../../context/environments_context/environments_context';
+import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
+import { ApmPluginStartDeps } from '../../../../plugin';
+import { ServiceGroupSaveButton } from '../../../app/service_groups';
+import { ServiceGroupsButtonGroup } from '../../../app/service_groups/service_groups_button_group';
+import { ApmEnvironmentFilter } from '../../../shared/environment_filter';
+import { getNoDataConfig } from '../no_data_config';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { ServiceInventoryView } from '../../../../context/entity_manager_context/entity_manager_context';
+import { InventoryCallout } from './inventory_callout';
 
 // Paths that must skip the no data screen
 const bypassNoDataScreenPaths = ['/settings', '/diagnostics'];
@@ -117,11 +116,6 @@ export function ApmMainTemplate({
 
   const hasApmData = !!data?.hasData;
   const hasApmIntegrations = !!fleetApmPoliciesData?.hasApmPolicies;
-  const showCustomEmptyState =
-    !hasApmData &&
-    !isLoading &&
-    isEntityCentricExperienceSettingEnabled &&
-    serviceInventoryViewLocalStorageSetting === ServiceInventoryView.classic;
 
   const noDataConfig = getNoDataConfig({
     basePath,
@@ -142,6 +136,7 @@ export function ApmMainTemplate({
   const rightSideItems = [...(showServiceGroupSaveButton ? [<ServiceGroupSaveButton />] : [])];
 
   const sanitizedPath = getPathForFeedback(window.location.pathname);
+
   const pageHeaderTitle = (
     <EuiFlexGroup justifyContent="spaceBetween" wrap={true}>
       {pageHeader?.pageTitle ?? pageTitle}
@@ -168,47 +163,49 @@ export function ApmMainTemplate({
     </EuiFlexGroup>
   );
 
-  const pageTemplate = showCustomEmptyState ? (
-    <CustomNoDataTemplate isPageDataLoaded={isLoading === false} noDataConfig={noDataConfig} />
-  ) : (
-    <ObservabilityPageTemplate
-      noDataConfig={
-        shouldBypassNoDataScreen ||
-        serviceInventoryViewLocalStorageSetting === ServiceInventoryView.entity
-          ? undefined
-          : noDataConfig
-      }
-      isPageDataLoaded={isLoading === false}
-      pageHeader={{
-        rightSideItems,
-        ...pageHeader,
-        pageTitle: pageHeaderTitle,
-        children: (
-          <EuiFlexGroup direction="column">
-            {isEntityCentricExperienceSettingEnabled &&
-            showEnablementCallout &&
-            selectedNavButton === 'allServices' ? (
-              <EntityEnablement
-                label={i18n.translate('xpack.apm.eemEnablement.tryItButton.', {
-                  defaultMessage: 'Try our new experience!',
-                })}
-                tooltip={i18n.translate('xpack.apm.entityEnablement.content', {
-                  defaultMessage:
-                    'Our new experience combines both APM-instrumented services with services detected from logs in a single service inventory.',
-                })}
-              />
-            ) : null}
-            {showServiceGroupsNav && selectedNavButton && (
-              <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
-            )}
-          </EuiFlexGroup>
-        ),
-      }}
-      {...pageTemplateProps}
-    >
-      {children}
-    </ObservabilityPageTemplate>
+  const [dismissedInventoryCallout, setDismissedInventoryCallout] = useLocalStorage(
+    `apm.dismissedInventoryCallout`,
+    false
   );
 
-  return <EnvironmentsContextProvider>{pageTemplate}</EnvironmentsContextProvider>;
+  const showInventoryCallout =
+    !dismissedInventoryCallout &&
+    isEntityCentricExperienceSettingEnabled &&
+    selectedNavButton === 'allServices';
+
+  return (
+    <EnvironmentsContextProvider>
+      <ObservabilityPageTemplate
+        noDataConfig={
+          shouldBypassNoDataScreen ||
+          serviceInventoryViewLocalStorageSetting === ServiceInventoryView.entity
+            ? undefined
+            : noDataConfig
+        }
+        isPageDataLoaded={isLoading === false}
+        pageHeader={{
+          rightSideItems,
+          ...pageHeader,
+          pageTitle: pageHeaderTitle,
+          children: (
+            <EuiFlexGroup direction="column">
+              {showInventoryCallout ? (
+                <InventoryCallout
+                  onDissmiss={() => {
+                    setDismissedInventoryCallout(true);
+                  }}
+                />
+              ) : null}
+              {showServiceGroupsNav && selectedNavButton && (
+                <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
+              )}
+            </EuiFlexGroup>
+          ),
+        }}
+        {...pageTemplateProps}
+      >
+        {children}
+      </ObservabilityPageTemplate>
+    </EnvironmentsContextProvider>
+  );
 }

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

@@ -0,0 +1,55 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLink, EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { TechnicalPreviewBadge } from '@kbn/observability-shared-plugin/public';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { ENTITY_INVENTORY_LOCATOR_ID } from '@kbn/observability-shared-plugin/common';
+import { SerializableRecord } from '@kbn/utility-types';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+
+export interface InventoryCalloutProps {
+  onDissmiss: () => void;
+}
+
+export function InventoryCallout({ onDissmiss }: InventoryCalloutProps) {
+  const { share } = useApmPluginContext();
+  const inventoryLocator = share.url.locators.get<SerializableRecord>(ENTITY_INVENTORY_LOCATOR_ID);
+
+  return (
+    <EuiFlexGroup direction="row" alignItems="center" gutterSize="xs">
+      <EuiFlexItem grow={false}>
+        <TechnicalPreviewBadge icon="beaker" style={{ verticalAlign: 'middle' }} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiLink data-test-subj="inventoryCalloutLink" href={inventoryLocator?.useUrl({})}>
+          <FormattedMessage
+            id="xpack.apm.inventoryCallout.linklabel"
+            defaultMessage="Try our new Inventory!"
+          />
+        </EuiLink>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiToolTip
+          content={
+            <FormattedMessage
+              id="xpack.apm.inventoryCallout.linkTooltip"
+              defaultMessage="Hide this"
+            />
+          }
+        >
+          <EuiButtonIcon
+            data-test-subj="inventoryCalloutDismiss"
+            iconType="cross"
+            onClick={onDissmiss}
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}