[SecuritySolution] Enabling and Removing alertsPreviewChartEmbeddable…

…sEnabled feature flag (#173884)

## Summary

This PR is a part of #171287,
the final goal is to remove `chartEmbeddablesEnabled` feature flag
1. Enabling and removing **alertsPreviewChartEmbeddablesEnabled**
feature flag (It's unblocked by
#136409 item 9)
2. Replacing **rules preview** histogram with Lens Embeddable.



https://github.com/elastic/kibana/assets/6295984/c29aa600-c86b-4d32-933b-4d8f6f1fd04f



![Screenshot 2024-01-02 at 21 47
39](https://github.com/elastic/kibana/assets/6295984/300b1357-12fe-4601-b4c2-0c97cc5d5bba)

![Screenshot 2024-01-09 at 02 18
37](https://github.com/elastic/kibana/assets/6295984/832bbb04-477e-4c71-8589-4cec19da5c6e)

### Checklist

Delete any items that are not applicable to this PR.


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

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -21,7 +21,6 @@ export const allowedExperimentalValues = Object.freeze({
   kubernetesEnabled: true,
   chartEmbeddablesEnabled: true,
   donutChartEmbeddablesEnabled: false, // Depends on https://github.com/elastic/kibana/issues/136409 item 2 - 6
-  alertsPreviewChartEmbeddablesEnabled: false, // Depends on https://github.com/elastic/kibana/issues/136409 item 9
   /**
    * This is used for enabling the end-to-end tests for the security_solution telemetry.
    * We disable the telemetry since we don't have specific roles or permissions around it and

x-pack/plugins/security_solution/public/common/components/inspect/use_inspect.tsx

@@ -35,11 +35,12 @@ export const useInspect = ({
 
   const getGlobalQuery = inputsSelectors.globalQueryByIdSelector();
   const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
-  const { loading, inspect, selectedInspectIndex, isInspected } = useDeepEqualSelector((state) =>
-    inputId === InputsModelId.global
-      ? getGlobalQuery(state, queryId)
-      : getTimelineQuery(state, queryId)
-  );
+  const { loading, inspect, selectedInspectIndex, isInspected, searchSessionId } =
+    useDeepEqualSelector((state) =>
+      inputId === InputsModelId.global
+        ? getGlobalQuery(state, queryId)
+        : getTimelineQuery(state, queryId)
+    );
 
   const handleClick = useCallback(() => {
     if (onClick) {
@@ -51,9 +52,10 @@ export const useInspect = ({
         inputId,
         isInspected: true,
         selectedInspectIndex: inspectIndex,
+        searchSessionId,
       })
     );
-  }, [onClick, dispatch, queryId, inputId, inspectIndex]);
+  }, [onClick, dispatch, queryId, inputId, inspectIndex, searchSessionId]);
 
   const handleCloseModal = useCallback(() => {
     if (onCloseInspect != null) {
@@ -65,9 +67,10 @@ export const useInspect = ({
         inputId,
         isInspected: false,
         selectedInspectIndex: inspectIndex,
+        searchSessionId,
       })
     );
-  }, [onCloseInspect, dispatch, queryId, inputId, inspectIndex]);
+  }, [onCloseInspect, dispatch, queryId, inputId, inspectIndex, searchSessionId]);
 
   let request: string | null = null;
   let additionalRequests: string[] | null = null;

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx

@@ -45,9 +45,9 @@ jest.mock('./utils', () => ({
   getCustomChartData: jest.fn().mockReturnValue(true),
 }));
 
-const mockUseVisualizationResponse = jest.fn(() => [
-  { aggregations: [{ buckets: [{ key: '1234' }] }], hits: { total: 999 } },
-]);
+const mockUseVisualizationResponse = jest.fn(() => ({
+  responses: [{ aggregations: [{ buckets: [{ key: '1234' }] }], hits: { total: 999 } }],
+}));
 jest.mock('../visualization_actions/use_visualization_response', () => ({
   useVisualizationResponse: () => mockUseVisualizationResponse(),
 }));
@@ -345,9 +345,9 @@ describe('Matrix Histogram Component', () => {
     });
 
     test('it should render 0 as subtitle when buckets are empty', () => {
-      mockUseVisualizationResponse.mockReturnValue([
-        { aggregations: [{ buckets: [] }], hits: { total: 999 } },
-      ]);
+      mockUseVisualizationResponse.mockReturnValue({
+        responses: [{ aggregations: [{ buckets: [] }], hits: { total: 999 } }],
+      });
       mockUseMatrix.mockReturnValue([
         false,
         {

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx

@@ -82,10 +82,14 @@ const HistogramPanel = styled(Panel)<{ height?: number }>`
 
 const CHART_HEIGHT = 150;
 
-const visualizationResponseHasData = (response: VisualizationResponse): boolean =>
-  Object.values<AggregationsTermsAggregateBase<unknown[]>>(response.aggregations ?? {}).some(
-    ({ buckets }) => buckets.length > 0
-  );
+const visualizationResponseHasData = (response: VisualizationResponse[]): boolean => {
+  if (response.length === 0) {
+    return false;
+  }
+  return Object.values<AggregationsTermsAggregateBase<unknown[]>>(
+    response[0].aggregations ?? {}
+  ).some(({ buckets }) => buckets.length > 0);
+};
 
 export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> = ({
   chartHeight,
@@ -209,26 +213,26 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
     () => (title != null && typeof title === 'function' ? title(selectedStackByOption) : title),
     [title, selectedStackByOption]
   );
-  const visualizationResponse = useVisualizationResponse({ visualizationId });
+  const { responses } = useVisualizationResponse({ visualizationId });
   const subtitleWithCounts = useMemo(() => {
     if (isInitialLoading) {
       return null;
     }
 
     if (typeof subtitle === 'function') {
       if (isChartEmbeddablesEnabled) {
-        if (!visualizationResponse || !visualizationResponseHasData(visualizationResponse[0])) {
+        if (!responses || !visualizationResponseHasData(responses)) {
           return subtitle(0);
         }
-        const visualizationCount = visualizationResponse[0].hits.total;
+        const visualizationCount = responses[0].hits.total;
         return visualizationCount >= 0 ? subtitle(visualizationCount) : null;
       } else {
         return totalCount >= 0 ? subtitle(totalCount) : null;
       }
     }
 
     return subtitle;
-  }, [isChartEmbeddablesEnabled, isInitialLoading, subtitle, totalCount, visualizationResponse]);
+  }, [isChartEmbeddablesEnabled, isInitialLoading, responses, subtitle, totalCount]);
 
   const hideHistogram = useMemo(
     () => (totalCount <= 0 && hideHistogramIfEmpty ? true : false),

x-pack/plugins/security_solution/public/common/components/visualization_actions/__mocks__/use_actions.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 VISUALIZATION_CONTEXT_MENU_TRIGGER = 'VISUALIZATION_CONTEXT_MENU_TRIGGER';
+export const DEFAULT_ACTIONS = [
+  'inspect',
+  'addToNewCase',
+  'addToExistingCase',
+  'saveToLibrary',
+  'openInLens',
+];
+export const MOCK_ACTIONS = [
+  {
+    id: 'inspect',
+    getDisplayName: () => 'Inspect',
+    getIconType: () => 'inspect',
+    type: 'actionButton',
+    order: 4,
+    isCompatible: () => true,
+    execute: jest.fn(),
+  },
+  {
+    id: 'addToNewCase',
+    getDisplayName: () => 'Add to new case',
+    getIconType: () => 'casesApp',
+    type: 'actionButton',
+    order: 3,
+    isCompatible: () => true,
+    execute: jest.fn(),
+  },
+  {
+    id: 'addToExistingCase',
+    getDisplayName: () => 'Add to existing case',
+    getIconType: () => 'casesApp',
+    type: 'actionButton',
+    order: 2,
+    isCompatible: () => true,
+    execute: jest.fn(),
+  },
+  {
+    id: 'saveToLibrary',
+    getDisplayName: () => 'Added to library',
+    getIconType: () => 'save',
+    type: 'actionButton',
+    order: 1,
+    isCompatible: () => true,
+    execute: jest.fn(),
+  },
+  {
+    id: 'openInLens',
+    getDisplayName: () => 'Open in Lens',
+    getIconType: () => 'visArea',
+    type: 'actionButton',
+    order: 0,
+    isCompatible: () => true,
+    execute: jest.fn(),
+  },
+];
+export const useActions = jest.fn().mockReturnValue(MOCK_ACTIONS);