Unify available data, license & feature checks in a single flag

Author: albertoblaz

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 />

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/hooks/use_graph_preview.test.tsx

@@ -17,6 +17,10 @@ import { useHasGraphVisualizationAccess } from '../../../../common/hooks/use_has
 jest.mock('../../../../common/hooks/use_has_graph_visualization_access');
 const mockUseHasGraphVisualizationAccess = useHasGraphVisualizationAccess as jest.Mock;
 
+jest.mock('@kbn/kibana-react-plugin/public');
+import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
+const mockUseUiSetting = useUiSetting$ as jest.Mock;
+
 const alertMockGetFieldsData: GetFieldsData = (field: string) => {
   if (field === 'kibana.alert.uuid') {
     return 'alertId';
@@ -56,6 +60,8 @@ describe('useGraphPreview', () => {
     jest.clearAllMocks();
     // Default mock: graph visualization feature is available
     mockUseHasGraphVisualizationAccess.mockReturnValue(true);
+    // Default mock: UI setting is enabled
+    mockUseUiSetting.mockReturnValue([true, jest.fn()]);
   });
   it(`should return false when missing actor`, () => {
     const getFieldsData: GetFieldsData = (field: string) => {
@@ -336,33 +342,50 @@ describe('useGraphPreview', () => {
     });
   });
 
-  describe('License checking', () => {
-    it('should return false when all conditions are met but env does not have required license', () => {
-      mockUseHasGraphVisualizationAccess.mockReturnValue(false);
-
-      const hookResult = renderHook((props: UseGraphPreviewParams) => useGraphPreview(props), {
-        initialProps: {
-          getFieldsData: alertMockGetFieldsData,
-          ecsData: {
-            _id: 'id',
-            event: {
-              action: ['action'],
-            },
+  it('should return false when all conditions are met but env does not have required license', () => {
+    mockUseHasGraphVisualizationAccess.mockReturnValue(false);
+
+    const hookResult = renderHook((props: UseGraphPreviewParams) => useGraphPreview(props), {
+      initialProps: {
+        getFieldsData: alertMockGetFieldsData,
+        ecsData: {
+          _id: 'id',
+          event: {
+            action: ['action'],
           },
-          dataFormattedForFieldBrowser: alertMockDataFormattedForFieldBrowser,
         },
-      });
-
-      expect(hookResult.result.current.hasGraphRepresentation).toBe(false);
-      expect(hookResult.result.current).toStrictEqual({
-        hasGraphRepresentation: false,
-        timestamp: mockFieldData['@timestamp'][0],
-        eventIds: ['eventId'],
-        actorIds: ['actorId'],
-        action: ['action'],
-        targetIds: ['targetId'],
-        isAlert: true,
-      });
+        dataFormattedForFieldBrowser: alertMockDataFormattedForFieldBrowser,
+      },
     });
+
+    expect(hookResult.result.current.hasGraphRepresentation).toBe(false);
+    expect(hookResult.result.current).toStrictEqual({
+      hasGraphRepresentation: false,
+      timestamp: mockFieldData['@timestamp'][0],
+      eventIds: ['eventId'],
+      actorIds: ['actorId'],
+      action: ['action'],
+      targetIds: ['targetId'],
+      isAlert: true,
+    });
+  });
+
+  it('should return false for hasGraphRepresentation when UI setting is disabled', () => {
+    mockUseUiSetting.mockReturnValue([false, jest.fn()]);
+
+    const hookResult = renderHook((props: UseGraphPreviewParams) => useGraphPreview(props), {
+      initialProps: {
+        getFieldsData: alertMockGetFieldsData,
+        ecsData: {
+          _id: 'id',
+          event: {
+            action: ['action'],
+          },
+        },
+        dataFormattedForFieldBrowser: alertMockDataFormattedForFieldBrowser,
+      },
+    });
+
+    expect(hookResult.result.current.hasGraphRepresentation).toBe(false);
   });
 });

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/hooks/use_graph_preview.ts

@@ -8,10 +8,12 @@
 import type { TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { get } from 'lodash/fp';
+import { useUiSetting$ } from '@kbn/kibana-react-plugin/public';
 import type { GetFieldsData } from './use_get_fields_data';
 import { getField, getFieldArray } from '../utils';
 import { useBasicDataFromDetailsData } from './use_basic_data_from_details_data';
 import { useHasGraphVisualizationAccess } from '../../../../common/hooks/use_has_graph_visualization_access';
+import { ENABLE_GRAPH_VISUALIZATION_SETTING } from '../../../../../common/constants';
 
 export interface UseGraphPreviewParams {
   /**
@@ -59,7 +61,8 @@ export interface UseGraphPreviewResult {
   action?: string[];
 
   /**
-   * Boolean indicating if the event has a graph representation (contains event ids, actor ids, action, and valid license)
+   * Boolean indicating if graph visualization is fully available
+   * Combines: data availability (event ids, actor ids and action) + valid license + feature enabled in settings
    */
   hasGraphRepresentation: boolean;
 
@@ -89,15 +92,29 @@ export const useGraphPreview = ({
   // Check if user license is high enough to access graph visualization
   const hasRequiredLicense = useHasGraphVisualizationAccess();
 
-  const hasGraphRepresentation =
+  // Check if graph visualization feature is enabled in UI settings
+  const [isGraphFeatureEnabled] = useUiSetting$<boolean>(ENABLE_GRAPH_VISUALIZATION_SETTING);
+
+  // Check if graph has all required data fields for graph visualization
+  const hasGraphData =
     Boolean(timestamp) &&
     Boolean(action?.length) &&
     actorIds.length > 0 &&
     eventIds.length > 0 &&
-    targetIds.length > 0 &&
-    hasRequiredLicense;
+    targetIds.length > 0;
+
+  // Combine all conditions: data availability + license + feature flag
+  const hasGraphRepresentation = hasGraphData && hasRequiredLicense && isGraphFeatureEnabled;
 
   const { isAlert } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
 
-  return { timestamp, eventIds, actorIds, action, targetIds, hasGraphRepresentation, isAlert };
+  return {
+    timestamp,
+    eventIds,
+    actorIds,
+    action,
+    targetIds,
+    hasGraphRepresentation,
+    isAlert,
+  };
 };