[APM] Fix condition for enabling isEntityCentricExperienceView

x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx

@@ -15,7 +15,6 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { entityCentricExperience } from '@kbn/observability-plugin/common';
 import { i18n } from '@kbn/i18n';
 import { isEmpty, sortBy } from 'lodash';
 import React, { useState, useCallback } from 'react';
@@ -25,18 +24,14 @@ import { Sort } from './sort';
 import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber';
 import { ServiceGroupSaveButton } from '../service_group_save';
 import { BetaBadge } from '../../../shared/beta_badge';
-import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { useEntityManagerEnablementContext } from '../../../../context/entity_manager_context/use_entity_manager_enablement_context';
 
 export type ServiceGroupsSortType = 'recently_added' | 'alphabetical';
 
 const GET_STARTED_URL = 'https://www.elastic.co/guide/en/apm/get-started/current/index.html';
 
 export function ServiceGroupsList() {
-  const { core } = useApmPluginContext();
-  const isEntityCentricExperienceEnabled = core.uiSettings.get<boolean>(
-    entityCentricExperience,
-    false
-  );
+  const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext();
 
   const [filter, setFilter] = useState('');
 
@@ -141,7 +136,7 @@ export function ServiceGroupsList() {
                         {i18n.translate('xpack.apm.serviceGroups.listDescription', {
                           defaultMessage: 'Displayed service counts reflect the last 24 hours.',
                         })}
-                        {isEntityCentricExperienceEnabled && (
+                        {isEntityCentricExperienceViewEnabled && (
                           <FormattedMessage
                             id="xpack.apm.serviceGroups.onlyApm"
                             defaultMessage="Only showing services {link}"

x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/index.tsx

@@ -14,7 +14,8 @@ import { useApmParams } from '../../../hooks/use_apm_params';
 import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
 
 export function ServiceInventory() {
-  const { isEntityManagerEnabled, isEnablementPending } = useEntityManagerEnablementContext();
+  const { isEnablementPending, isEntityCentricExperienceViewEnabled } =
+    useEntityManagerEnablementContext();
 
   const {
     query: { serviceGroup },
@@ -35,7 +36,7 @@ export function ServiceInventory() {
     );
   }
 
-  return isEntityManagerEnabled && isEmpty(serviceGroup) ? (
+  return isEntityCentricExperienceViewEnabled && isEmpty(serviceGroup) ? (
     <MultiSignalInventory />
   ) : (
     <ApmServiceInventory />

x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/index.tsx

@@ -33,7 +33,8 @@ export function ApmHeaderActionMenu() {
     capabilities
   );
   const canSaveApmAlerts = capabilities.apm.save && canSaveAlerts;
-  const { isEntityManagerEnabled, isEnablementPending } = useEntityManagerEnablementContext();
+  const { isEntityCentricExperienceViewEnabled, isEnablementPending } =
+    useEntityManagerEnablementContext();
 
   function apmHref(path: string) {
     return getLegacyApmHref({ basePath, path, search });
@@ -72,7 +73,7 @@ export function ApmHeaderActionMenu() {
           canReadMlJobs={canReadMlJobs}
         />
       )}
-      {isEntityManagerEnabled ? (
+      {isEntityCentricExperienceViewEnabled ? (
         <AddDataContextMenu />
       ) : (
         <EuiHeaderLink

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

@@ -7,6 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiPageHeaderProps } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+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';
@@ -70,8 +71,12 @@ export function ApmMainTemplate({
   const { http, docLinks, observabilityShared, application } = services;
   const { kibanaVersion, isCloudEnv, isServerlessEnv } = kibanaEnvironment;
   const basePath = http?.basePath.get();
-  const { config } = useApmPluginContext();
-  const { isEntityManagerEnabled } = useEntityManagerEnablementContext();
+  const { config, core } = useApmPluginContext();
+  const isEntityCentricExperienceSettingEnabled = core.uiSettings.get<boolean>(
+    entityCentricExperience,
+    false
+  );
+  const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext();
 
   const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate;
 
@@ -139,7 +144,7 @@ export function ApmMainTemplate({
             <FeatureFeedbackButton
               data-test-subj="infraApmFeedbackLink"
               formUrl={
-                isEntityManagerEnabled && sanitizedPath.includes('service')
+                isEntityCentricExperienceViewEnabled && sanitizedPath.includes('service')
                   ? APM_NEW_EXPERIENCE_FEEDBACK_LINK
                   : APM_FEEDBACK_LINK
               }
@@ -165,7 +170,9 @@ export function ApmMainTemplate({
         pageTitle: pageHeaderTitle,
         children: (
           <EuiFlexGroup direction="column">
-            {showEnablementCallout && selectedNavButton === 'allServices' && <EntityEnablement />}
+            {isEntityCentricExperienceSettingEnabled &&
+              showEnablementCallout &&
+              selectedNavButton === 'allServices' && <EntityEnablement />}
             {showServiceGroupsNav && selectedNavButton && (
               <ServiceGroupsButtonGroup selectedNavButton={selectedNavButton} />
             )}

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

@@ -12,7 +12,6 @@ import {
   EuiSkeletonTitle,
   EuiIcon,
 } from '@elastic/eui';
-import { entityCentricExperience } from '@kbn/observability-plugin/common';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
@@ -21,8 +20,8 @@ import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
 import { ApmMainTemplate } from './apm_main_template';
 import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb';
-import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { TechnicalPreviewBadge } from '../../shared/technical_preview_badge';
+import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
 
 export function ServiceGroupTemplate({
   pageTitle,
@@ -153,11 +152,7 @@ type ServiceGroupContextTab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
 function useTabs(selectedTab: ServiceGroupContextTab['key']) {
   const router = useApmRouter();
   const { query } = useAnyOfApmParams('/services', '/service-map');
-  const { core } = useApmPluginContext();
-  const isEntityCentricExperienceEnabled = core.uiSettings.get<boolean>(
-    entityCentricExperience,
-    false
-  );
+  const { isEntityCentricExperienceViewEnabled } = useEntityManagerEnablementContext();
 
   const tabs: ServiceGroupContextTab[] = [
     {
@@ -170,7 +165,7 @@ function useTabs(selectedTab: ServiceGroupContextTab['key']) {
             })}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            {isEntityCentricExperienceEnabled && (
+            {isEntityCentricExperienceViewEnabled && (
               <TechnicalPreviewBadge icon="beaker" style={{ verticalAlign: 'middle' }} />
             )}
           </EuiFlexItem>

x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx

@@ -25,6 +25,7 @@ import { TechnicalPreviewBadge } from '../technical_preview_badge';
 import { ApmPluginStartDeps } from '../../../plugin';
 import { useEntityManagerEnablementContext } from '../../../context/entity_manager_context/use_entity_manager_enablement_context';
 import { FeedbackModal } from './feedback_modal';
+import { ServiceInventoryView } from '../../../context/entity_manager_context/entity_manager_context';
 import { Unauthorized } from './unauthorized_modal';
 
 export function EntityEnablement() {
@@ -35,25 +36,19 @@ export function EntityEnablement() {
     services: { entityManager },
   } = useKibana<ApmPluginStartDeps>();
 
-  const { isEntityManagerEnabled, isEnablementPending, refetch } =
-    useEntityManagerEnablementContext();
+  const {
+    isEnablementPending,
+    refetch,
+    setUserServiceInventoryView,
+    isEntityCentricExperienceViewEnabled,
+  } = useEntityManagerEnablementContext();
 
   const [isPopoverOpen, togglePopover] = useToggle(false);
   const [isLoading, setIsLoading] = useToggle(false);
 
   const handleRestoreView = async () => {
-    setIsLoading(true);
-    try {
-      const response = await entityManager.entityClient.disableManagedEntityDiscovery();
-      if (response.success) {
-        setIsLoading(false);
-        setsIsFeedbackModalVisible(true);
-      }
-    } catch (error) {
-      setIsLoading(false);
-      setsIsFeedbackModalVisible(true);
-      console.error(error);
-    }
+    setUserServiceInventoryView(ServiceInventoryView.classic);
+    setsIsFeedbackModalVisible(true);
   };
 
   const handleEnablement = async () => {
@@ -62,6 +57,7 @@ export function EntityEnablement() {
       const response = await entityManager.entityClient.enableManagedEntityDiscovery();
       if (response.success) {
         setIsLoading(false);
+        setUserServiceInventoryView(ServiceInventoryView.entity);
         refetch();
       }
 
@@ -77,7 +73,6 @@ export function EntityEnablement() {
 
   const handleOnCloseFeedback = () => {
     setsIsFeedbackModalVisible(false);
-    refetch();
   };
 
   return isEnablementPending ? (
@@ -91,11 +86,11 @@ export function EntityEnablement() {
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiLink
-          disabled={isEntityManagerEnabled}
+          disabled={isEntityCentricExperienceViewEnabled}
           data-test-subj="tryOutEEMLink"
           onClick={handleEnablement}
         >
-          {isEntityManagerEnabled
+          {isEntityCentricExperienceViewEnabled
             ? i18n.translate('xpack.apm.eemEnablement.enabled.', {
                 defaultMessage: 'Viewing our new experience',
               })
@@ -147,7 +142,7 @@ export function EntityEnablement() {
           </EuiPopoverFooter>
         </EuiPopover>
       </EuiFlexItem>
-      {isEntityManagerEnabled && (
+      {isEntityCentricExperienceViewEnabled && (
         <EuiFlexItem grow={false}>
           <EuiLink data-test-subj="restoreClassicView" onClick={handleRestoreView}>
             {i18n.translate('xpack.apm.eemEnablement.restoreClassicView.', {

x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx

@@ -5,15 +5,28 @@
  * 2.0.
  */
 import React, { createContext } from 'react';
+import { entityCentricExperience } from '@kbn/observability-plugin/common';
 import { ENTITY_FETCH_STATUS, useEntityManager } from '../../hooks/use_entity_manager';
+import { useLocalStorage } from '../../hooks/use_local_storage';
+import { useApmPluginContext } from '../apm_plugin/use_apm_plugin_context';
 
 export interface EntityManagerEnablementContextValue {
   isEntityManagerEnabled: boolean;
   entityManagerEnablementStatus: ENTITY_FETCH_STATUS;
   isEnablementPending: boolean;
   refetch: () => void;
+  userServiceInventoryView: ServiceInventoryView;
+  setUserServiceInventoryView: (view: ServiceInventoryView) => void;
+  isEntityCentricExperienceViewEnabled: boolean;
 }
 
+export enum ServiceInventoryView {
+  classic = 'classic',
+  entity = 'entity',
+}
+
+export const serviceInventoryStorageKey = 'apm.service.inventory.view';
+
 export const EntityManagerEnablementContext = createContext(
   {} as EntityManagerEnablementContextValue
 );
@@ -23,15 +36,34 @@ export function EntityManagerEnablementContextProvider({
 }: {
   children: React.ReactChild;
 }) {
-  const { isEnabled, status, refetch } = useEntityManager();
+  const { core } = useApmPluginContext();
+  const { isEnabled: isEntityManagerEnabled, status, refetch } = useEntityManager();
+
+  const [userServiceInventoryView, setUserServiceInventoryView] = useLocalStorage(
+    serviceInventoryStorageKey,
+    ServiceInventoryView.classic
+  );
+
+  const isEntityCentricExperienceSettingEnabled = core.uiSettings.get<boolean>(
+    entityCentricExperience,
+    false
+  );
+
+  const isEntityCentricExperienceViewEnabled =
+    isEntityManagerEnabled &&
+    userServiceInventoryView === ServiceInventoryView.entity &&
+    isEntityCentricExperienceSettingEnabled;
 
   return (
     <EntityManagerEnablementContext.Provider
       value={{
-        isEntityManagerEnabled: isEnabled,
+        isEntityManagerEnabled,
         entityManagerEnablementStatus: status,
         isEnablementPending: status === ENTITY_FETCH_STATUS.LOADING,
         refetch,
+        userServiceInventoryView,
+        setUserServiceInventoryView,
+        isEntityCentricExperienceViewEnabled,
       }}
     >
       {children}