checks feature flag before showing graph tab

elastic · Oct 30, 2024 · 6f71b19 · 6f71b19
1 parent 1589ef8
commit 6f71b19
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx
@@ -11,6 +11,7 @@ import type { EuiButtonGroupOptionProps } from '@elastic/eui/src/components/butt
 import { useExpandableFlyoutApi, useExpandableFlyoutState } from '@kbn/expandable-flyout';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { useWhichFlyout } from '../../shared/hooks/use_which_flyout';
 import { DocumentDetailsAnalyzerPanelKey } from '../../shared/constants/panel_keys';
@@ -30,6 +31,7 @@ import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
 import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
 import { GRAPH_VISUALIZATION_ID, GraphVisualization } from '../components/graph_visualization';
 import { useGraphPreview } from '../../right/hooks/use_graph_preview';
+import { GRAPH_VISUALIZATION_EXPERIMENTAL_FEATURE } from '../../shared/constants/feature_flags';
 
 const visualizeButtons: EuiButtonGroupOptionProps[] = [
   {
@@ -100,6 +102,10 @@ export const VisualizeTab = memo(() => {
     }
   }, [panels.left?.path?.subTab]);
 
+  const graphVisualizationInFlyoutEnabled = useIsExperimentalFeatureEnabled(
+    GRAPH_VISUALIZATION_EXPERIMENTAL_FEATURE
+  );
+
   // Decide whether to show the graph preview or not
   const { isAuditLog: isGraphPreviewEnabled } = useGraphPreview({
     getFieldsData,
@@ -108,7 +114,8 @@ export const VisualizeTab = memo(() => {
 
   const options = [...visualizeButtons];
 
-  if (isGraphPreviewEnabled) options.push(graphVisualizationButton);
+  if (graphVisualizationInFlyoutEnabled && isGraphPreviewEnabled)
+    options.push(graphVisualizationButton);
 
   return (
     <>

diff --git a/...urity_solution/public/flyout/document_details/right/components/visualizations_section.tsx b/...urity_solution/public/flyout/document_details/right/components/visualizations_section.tsx
@@ -17,6 +17,7 @@ import { GraphPreviewContainer } from './graph_preview_container';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { useGraphPreview } from '../hooks/use_graph_preview';
+import { GRAPH_VISUALIZATION_EXPERIMENTAL_FEATURE } from '../../shared/constants/feature_flags';
 
 const KEY = 'visualizations';
 
@@ -26,7 +27,7 @@ const KEY = 'visualizations';
 export const VisualizationsSection = memo(() => {
   const expanded = useExpandSection({ title: KEY, defaultValue: false });
   const graphVisualizationInFlyoutEnabled = useIsExperimentalFeatureEnabled(
-    'graphVisualizationInFlyoutEnabled'
+    GRAPH_VISUALIZATION_EXPERIMENTAL_FEATURE
   );
 
   const { dataAsNestedObject, getFieldsData } = useDocumentDetailsContext();

diff --git a/...lugins/security_solution/public/flyout/document_details/shared/constants/feature_flags.ts b/...lugins/security_solution/public/flyout/document_details/shared/constants/feature_flags.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export const GRAPH_VISUALIZATION_EXPERIMENTAL_FEATURE =
+  'graphVisualizationInFlyoutEnabled' as const;