[Cloud Security] handle case when user redirects to graph visualization tab but the fe… (#217367)

## Summary

This PR fixes a bug where if the URL contains a state which takes the
user to the graph visualization, it will be show to them even when the
feature flag is disabled. The user will be redirect to the Session view
tab to make it consistent with current behaviour we have.

### Checklist
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

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

@@ -0,0 +1,108 @@
+/*
+ * 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 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';
+import { VisualizeTab } from './visualize_tab';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { VISUALIZE_TAB_GRAPH_VISUALIZATION_BUTTON_TEST_ID } from './test_ids';
+
+const mockGraphVisualizationTestId = 'graph-visualization';
+const mockAnalyzeGraphTestId = 'analyze-graph';
+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', () => ({
+  GRAPH_ID: 'graph-id',
+  GraphVisualization: () => (
+    <div data-test-subj={mockGraphVisualizationTestId}>{'Graph Visualization'}</div>
+  ),
+}));
+jest.mock('../components/analyze_graph', () => ({
+  ANALYZE_GRAPH_ID: 'analyze-graph-id',
+  AnalyzeGraph: () => <div data-test-subj={mockAnalyzeGraphTestId}>{'Analyze Graph'}</div>,
+}));
+jest.mock('../components/session_view', () => ({
+  SESSION_VIEW_ID: 'session-view-id',
+  SessionView: () => <div data-test-subj={mockSessionViewTestId}>{'Session View'}</div>,
+}));
+
+jest.mock('@kbn/cloud-security-posture-common/utils/ui_metrics', () => ({
+  uiMetricService: {
+    trackUiMetric: jest.fn(),
+  },
+  GRAPH_INVESTIGATION: 'graph-investigation',
+}));
+jest.mock('../../../../common/lib/apm/use_start_transaction', () => ({
+  useStartTransaction: () => ({
+    startTransaction: jest.fn(),
+  }),
+}));
+
+const renderVisualizeTab = () => {
+  return render(
+    <IntlProvider locale="en">
+      <VisualizeTab />
+    </IntlProvider>
+  );
+};
+
+describe('VisualizeTab', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useGraphPreview as jest.Mock).mockReturnValue({
+      hasGraphRepresentation: true,
+    });
+
+    (useExpandableFlyoutState as jest.Mock).mockReturnValue({
+      left: {
+        path: {
+          subTab: GRAPH_ID,
+        },
+      },
+    });
+
+    (useDocumentDetailsContext as jest.Mock).mockReturnValue({
+      getFieldsData: jest.fn(),
+      dataAsNestedObject: {},
+      dataFormattedForFieldBrowser: {},
+    });
+  });
+
+  it('should not render GraphVisualization component when feature flag is disabled', () => {
+    (useUiSetting$ as jest.Mock).mockImplementation((setting) => [false]);
+
+    renderVisualizeTab();
+
+    expect(
+      screen.queryByTestId(VISUALIZE_TAB_GRAPH_VISUALIZATION_BUTTON_TEST_ID)
+    ).not.toBeInTheDocument();
+    expect(screen.queryByTestId(mockGraphVisualizationTestId)).not.toBeInTheDocument();
+    expect(screen.getByTestId(mockSessionViewTestId)).toBeInTheDocument();
+  });
+
+  it('should render GraphVisualization component when feature flag is enabled', () => {
+    (useUiSetting$ as jest.Mock).mockImplementation((setting) => [true]);
+
+    renderVisualizeTab();
+
+    expect(
+      screen.queryByTestId(VISUALIZE_TAB_GRAPH_VISUALIZATION_BUTTON_TEST_ID)
+    ).toBeInTheDocument();
+    expect(screen.getByTestId(mockGraphVisualizationTestId)).toBeInTheDocument();
+  });
+});

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

@@ -106,16 +106,6 @@ export const VisualizeTab = memo(() => {
     [startTransaction]
   );
 
-  useEffect(() => {
-    if (panels.left?.path?.subTab) {
-      setActiveVisualizationId(panels.left?.path?.subTab);
-
-      if (panels.left?.path?.subTab === GRAPH_ID) {
-        uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, GRAPH_INVESTIGATION);
-      }
-    }
-  }, [panels.left?.path?.subTab]);
-
   // Decide whether to show the graph preview or not
   const { hasGraphRepresentation } = useGraphPreview({
     getFieldsData,
@@ -131,6 +121,23 @@ export const VisualizeTab = memo(() => {
     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) {
+        setActiveVisualizationId(SESSION_VIEW_ID);
+      } else {
+        setActiveVisualizationId(newId);
+
+        if (newId === GRAPH_ID) {
+          uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, GRAPH_INVESTIGATION);
+        }
+      }
+    }
+  }, [panels.left?.path?.subTab, graphVisualizationEnabled, hasGraphRepresentation]);
+
   return (
     <>
       <EuiButtonGroup