Hide Graph from UI when license/product tier not met

x-pack/solutions/security/packages/features/src/product_features_keys.ts

@@ -117,6 +117,11 @@ export enum ProductFeatureSecurityKey {
    * Enables customization of prebuilt Elastic rules
    */
   prebuiltRuleCustomization = 'prebuilt_rule_customization',
+
+  /**
+   * Enables graph visualization for alerts and events
+   */
+  graphVisualization = 'graph_visualization',
 }
 
 export enum ProductFeatureCasesKey {

x-pack/solutions/security/plugins/security_solution/public/common/hooks/use_has_graph_visualization_access.test.ts

@@ -0,0 +1,158 @@
+/*
+ * 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 { renderHook } from '@testing-library/react';
+import { useHasGraphVisualizationAccess } from './use_has_graph_visualization_access';
+import { useKibana } from '../lib/kibana';
+import { useLicense } from './use_license';
+import { BehaviorSubject } from 'rxjs';
+
+jest.mock('../lib/kibana');
+jest.mock('./use_license');
+
+describe('useHasGraphVisualizationAccess', () => {
+  const mockUseKibana = useKibana as jest.Mock;
+  const mockUseLicense = useLicense as jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('ESS/Self-Managed Environment', () => {
+    it('should return true when user has Enterprise license', () => {
+      const productFeatureKeys$ = new BehaviorSubject<Set<string> | null>(null);
+
+      mockUseKibana.mockReturnValue({
+        services: {
+          productFeatureKeys$,
+          serverless: undefined,
+        },
+      });
+
+      mockUseLicense.mockReturnValue({
+        isEnterprise: jest.fn(() => true),
+      });
+
+      const { result } = renderHook(() => useHasGraphVisualizationAccess());
+
+      expect(result.current).toBe(true);
+    });
+
+    it('should return false when user does not have Enterprise license', () => {
+      const productFeatureKeys$ = new BehaviorSubject<Set<string> | null>(null);
+
+      mockUseKibana.mockReturnValue({
+        services: {
+          productFeatureKeys$,
+          serverless: undefined,
+        },
+      });
+
+      mockUseLicense.mockReturnValue({
+        isEnterprise: jest.fn(() => false),
+      });
+
+      const { result } = renderHook(() => useHasGraphVisualizationAccess());
+
+      expect(result.current).toBe(false);
+    });
+  });
+
+  describe('Serverless Environment', () => {
+    it('should return true when user has Complete tier with graphVisualization feature', () => {
+      const productFeatureKeys$ = new BehaviorSubject<Set<string> | null>(
+        new Set<string>(['graph_visualization'])
+      );
+
+      mockUseKibana.mockReturnValue({
+        services: {
+          productFeatureKeys$,
+          serverless: {
+            projectType: 'security',
+          },
+        },
+      });
+
+      mockUseLicense.mockReturnValue({
+        isEnterprise: jest.fn(() => false),
+      });
+
+      const { result } = renderHook(() => useHasGraphVisualizationAccess());
+
+      expect(result.current).toBe(true);
+    });
+
+    it('should return false when user has Essentials tier without graphVisualization feature', () => {
+      const productFeatureKeys$ = new BehaviorSubject<Set<string> | null>(new Set<string>([]));
+
+      mockUseKibana.mockReturnValue({
+        services: {
+          productFeatureKeys$,
+          serverless: {
+            projectType: 'security',
+          },
+        },
+      });
+
+      mockUseLicense.mockReturnValue({
+        isEnterprise: jest.fn(() => false),
+      });
+
+      const { result } = renderHook(() => useHasGraphVisualizationAccess());
+
+      expect(result.current).toBe(false);
+    });
+
+    it('should return false when productFeatureKeys is null', () => {
+      const productFeatureKeys$ = new BehaviorSubject<Set<string> | null>(null);
+
+      mockUseKibana.mockReturnValue({
+        services: {
+          productFeatureKeys$,
+          serverless: {
+            projectType: 'security',
+          },
+        },
+      });
+
+      mockUseLicense.mockReturnValue({
+        isEnterprise: jest.fn(() => true),
+      });
+
+      const { result } = renderHook(() => useHasGraphVisualizationAccess());
+
+      expect(result.current).toBe(false);
+    });
+
+    it('should prioritize PLI check over license check in serverless mode', () => {
+      const productFeatureKeys$ = new BehaviorSubject<Set<string> | null>(new Set<string>([]));
+
+      mockUseKibana.mockReturnValue({
+        services: {
+          productFeatureKeys$,
+          serverless: {
+            projectType: 'security',
+          },
+        },
+      });
+
+      // Even though isEnterprise returns true, PLI check should take precedence
+      const isEnterpriseMock = jest.fn(() => true);
+      mockUseLicense.mockReturnValue({
+        isEnterprise: isEnterpriseMock,
+      });
+
+      const { result } = renderHook(() => useHasGraphVisualizationAccess());
+
+      // Should return false because graphVisualization is not in PLI
+      expect(result.current).toBe(false);
+
+      // isEnterprise should not be called in serverless mode
+      expect(isEnterpriseMock).not.toHaveBeenCalled();
+    });
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/common/hooks/use_has_graph_visualization_access.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 useObservable from 'react-use/lib/useObservable';
+import { ProductFeatureSecurityKey } from '@kbn/security-solution-features/keys';
+import { useKibana } from '../lib/kibana';
+import { useLicense } from './use_license';
+
+/**
+ * Hook to determine if the user has the required license for graph visualization feature.
+ *
+ * In ESS/Self-Managed: Requires Enterprise license or higher
+ * In Serverless: Requires Security Analytics Complete tier (not Essentials)
+ *
+ * @returns boolean indicating if graph visualization is available
+ */
+export const useHasGraphVisualizationAccess = (): boolean => {
+  const { productFeatureKeys$, serverless } = useKibana().services;
+  const licenseService = useLicense();
+
+  // Get current product feature keys from observable (serverless PLI system)
+  const productFeatureKeys = useObservable(productFeatureKeys$, null);
+
+  // Detect if running in serverless mode
+  const isServerless = serverless !== undefined;
+
+  if (isServerless) {
+    // In serverless: Check if Complete tier feature is enabled
+    return productFeatureKeys?.has(ProductFeatureSecurityKey.graphVisualization) ?? false;
+  } else {
+    // In ESS/Self-Managed: Check for Enterprise license or higher
+    return licenseService.isEnterprise();
+  }
+};

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.test.tsx

@@ -8,7 +8,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { useGraphPreview } from '../../shared/hooks/use_graph_preview';
-import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import { useExpandableFlyoutState } from '@kbn/expandable-flyout';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { GRAPH_ID } from '../components/graph_visualization';
@@ -22,7 +21,6 @@ const mockSessionViewTestId = 'session-view';
 
 // Mock all required dependencies
 jest.mock('../../shared/hooks/use_graph_preview');
-jest.mock('@kbn/kibana-react-plugin/public');
 jest.mock('@kbn/expandable-flyout');
 jest.mock('../../shared/context');
 jest.mock('../components/graph_visualization', () => ({
@@ -83,8 +81,10 @@ describe('VisualizeTab', () => {
     });
   });
 
-  it('should not render GraphVisualization component when feature flag is disabled', () => {
-    (useUiSetting$ as jest.Mock).mockImplementation((setting) => [false]);
+  it('should not render GraphVisualization component when graph is not available', () => {
+    (useGraphPreview as jest.Mock).mockReturnValue({
+      hasGraphRepresentation: false,
+    });
 
     renderVisualizeTab();
 
@@ -95,8 +95,10 @@ describe('VisualizeTab', () => {
     expect(screen.getByTestId(mockSessionViewTestId)).toBeInTheDocument();
   });
 
-  it('should render GraphVisualization component when feature flag is enabled', () => {
-    (useUiSetting$ as jest.Mock).mockImplementation((setting) => [true]);
+  it('should render GraphVisualization component when graph is available', () => {
+    (useGraphPreview as jest.Mock).mockReturnValue({
+      hasGraphRepresentation: true,
+    });
 
     renderVisualizeTab();
 

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx

@@ -15,7 +15,6 @@ import {
   uiMetricService,
   GRAPH_INVESTIGATION,
 } from '@kbn/cloud-security-posture-common/utils/ui_metrics';
-import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import { useDocumentDetailsContext } from '../../shared/context';
 import {
   VISUALIZE_TAB_BUTTON_GROUP_TEST_ID,
@@ -30,7 +29,6 @@ import { useStartTransaction } from '../../../../common/lib/apm/use_start_transa
 import { GRAPH_ID, GraphVisualization } from '../components/graph_visualization';
 import { useGraphPreview } from '../../shared/hooks/use_graph_preview';
 import { METRIC_TYPE } from '../../../../common/lib/telemetry';
-import { ENABLE_GRAPH_VISUALIZATION_SETTING } from '../../../../../common/constants';
 
 const visualizeButtons: EuiButtonGroupOptionProps[] = [
   {
@@ -113,20 +111,18 @@ export const VisualizeTab = memo(() => {
     dataFormattedForFieldBrowser,
   });
 
-  const [graphVisualizationEnabled] = useUiSetting$<boolean>(ENABLE_GRAPH_VISUALIZATION_SETTING);
-
   const options = [...visualizeButtons];
 
-  if (hasGraphRepresentation && graphVisualizationEnabled) {
+  if (hasGraphRepresentation) {
     options.push(graphVisualizationButton);
   }
 
   useEffect(() => {
     if (panels.left?.path?.subTab) {
       const newId = panels.left.path.subTab;
 
-      // Check if we need to select a different tab when graph feature flag is disabled
-      if (newId === GRAPH_ID && hasGraphRepresentation && !graphVisualizationEnabled) {
+      // Check if we need to select a different tab when graph is not available
+      if (newId === GRAPH_ID && !hasGraphRepresentation) {
         setActiveVisualizationId(SESSION_VIEW_ID);
       } else {
         setActiveVisualizationId(newId);
@@ -136,7 +132,7 @@ export const VisualizeTab = memo(() => {
         }
       }
     }
-  }, [panels.left?.path?.subTab, graphVisualizationEnabled, hasGraphRepresentation]);
+  }, [panels.left?.path?.subTab, hasGraphRepresentation]);
 
   return (
     <>

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/visualizations_section.test.tsx

@@ -113,8 +113,9 @@ describe('<VisualizationsSection />', () => {
       alertIds: undefined,
       statsNodes: undefined,
     });
+    // Default mock: graph visualization not available (UI setting is false by default)
     mockUseGraphPreview.mockReturnValue({
-      hasGraphRepresentation: true,
+      hasGraphRepresentation: false,
       eventIds: [],
     });
     mockUseFetchGraphData.mockReturnValue({
@@ -178,6 +179,12 @@ describe('<VisualizationsSection />', () => {
       return useUiSetting$Mock(key, defaultValue);
     });
 
+    // Mock useGraphPreview to reflect that graph is available when UI setting is enabled
+    mockUseGraphPreview.mockReturnValue({
+      hasGraphRepresentation: true,
+      eventIds: [],
+    });
+
     const { getByTestId } = renderVisualizationsSection();
 
     expect(getByTestId(`${GRAPH_PREVIEW_TEST_ID}LeftSection`)).toBeInTheDocument();

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/visualizations_section.tsx

@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import { useExpandSection } from '../hooks/use_expand_section';
 import { AnalyzerPreviewContainer } from './analyzer_preview_container';
 import { SessionPreviewContainer } from './session_preview_container';
@@ -17,7 +16,6 @@ import { VISUALIZATIONS_TEST_ID } from './test_ids';
 import { GraphPreviewContainer } from './graph_preview_container';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { useGraphPreview } from '../../shared/hooks/use_graph_preview';
-import { ENABLE_GRAPH_VISUALIZATION_SETTING } from '../../../../../common/constants';
 
 const KEY = 'visualizations';
 
@@ -29,20 +27,13 @@ export const VisualizationsSection = memo(() => {
   const { dataAsNestedObject, getFieldsData, dataFormattedForFieldBrowser } =
     useDocumentDetailsContext();
 
-  const [graphVisualizationEnabled] = useUiSetting$<boolean>(ENABLE_GRAPH_VISUALIZATION_SETTING);
-
   // Decide whether to show the graph preview or not
   const { hasGraphRepresentation } = useGraphPreview({
     getFieldsData,
     ecsData: dataAsNestedObject,
     dataFormattedForFieldBrowser,
   });
 
-  const shouldShowGraphPreview = useMemo(
-    () => graphVisualizationEnabled && hasGraphRepresentation,
-    [graphVisualizationEnabled, hasGraphRepresentation]
-  );
-
   return (
     <ExpandableSection
       expanded={expanded}
@@ -58,7 +49,7 @@ export const VisualizationsSection = memo(() => {
       <SessionPreviewContainer />
       <EuiSpacer />
       <AnalyzerPreviewContainer />
-      {shouldShowGraphPreview && (
+      {hasGraphRepresentation && (
         <>
           <EuiSpacer />
           <GraphPreviewContainer />