[8.9] [SecuritySolution] Add dashboard controls (#162514) (#162548)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[SecuritySolution] Add dashboard controls
(#162514)](https://github.com/elastic/kibana/pull/162514)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"6295984+angorayc@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-07-26T08:28:20Z","message":"[SecuritySolution]
Add dashboard controls (#162514)\n\n## Summary\r\n\r\nissue: Dashboard
control was not rendered in Security dashboard
page.\r\n\r\n\r\n\r\n![portable-dashboard-controls](4337046e-57d2-4f25-9c30-a987e59f79f3)\r\n\r\n\r\n\r\n**Steps
to verify:**\r\n1. Import this dashboard to
/app/management/kibana/object\r\n\r\n[dashboard.zip](12163666/dashboard.zip)\r\n2.
Go to Security dashboard list and select this dashboard.\r\n3. Observe
the control should be there.\r\n\r\n<img width=\"2546\" alt=\"Screenshot
2023-07-25 at 17 43
11\"\r\nsrc=\"ba4e9c09-19b7-40ed-ab22-4835c6b3c765\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"2f975eb708710e55dba3ea0568c754ddf25aa452","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Explore","v8.10.0","v8.9.1"],"number":162514,"url":"https://github.com/elastic/kibana/pull/162514","mergeCommit":{"message":"[SecuritySolution]
Add dashboard controls (#162514)\n\n## Summary\r\n\r\nissue: Dashboard
control was not rendered in Security dashboard
page.\r\n\r\n\r\n\r\n![portable-dashboard-controls](4337046e-57d2-4f25-9c30-a987e59f79f3)\r\n\r\n\r\n\r\n**Steps
to verify:**\r\n1. Import this dashboard to
/app/management/kibana/object\r\n\r\n[dashboard.zip](12163666/dashboard.zip)\r\n2.
Go to Security dashboard list and select this dashboard.\r\n3. Observe
the control should be there.\r\n\r\n<img width=\"2546\" alt=\"Screenshot
2023-07-25 at 17 43
11\"\r\nsrc=\"ba4e9c09-19b7-40ed-ab22-4835c6b3c765\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"2f975eb708710e55dba3ea0568c754ddf25aa452"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/162514","number":162514,"mergeCommit":{"message":"[SecuritySolution]
Add dashboard controls (#162514)\n\n## Summary\r\n\r\nissue: Dashboard
control was not rendered in Security dashboard
page.\r\n\r\n\r\n\r\n![portable-dashboard-controls](4337046e-57d2-4f25-9c30-a987e59f79f3)\r\n\r\n\r\n\r\n**Steps
to verify:**\r\n1. Import this dashboard to
/app/management/kibana/object\r\n\r\n[dashboard.zip](12163666/dashboard.zip)\r\n2.
Go to Security dashboard list and select this dashboard.\r\n3. Observe
the control should be there.\r\n\r\n<img width=\"2546\" alt=\"Screenshot
2023-07-25 at 17 43
11\"\r\nsrc=\"ba4e9c09-19b7-40ed-ab22-4835c6b3c765\">\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"2f975eb708710e55dba3ea0568c754ddf25aa452"}},{"branch":"8.9","label":"v8.9.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>

x-pack/plugins/security_solution/public/dashboards/components/dashboard_renderer.test.tsx

@@ -6,6 +6,9 @@
  */
 import { render } from '@testing-library/react';
 import React from 'react';
+import { ViewMode } from '@kbn/embeddable-plugin/public';
+import { DashboardRenderer as DashboardContainerRenderer } from '@kbn/dashboard-plugin/public';
+
 import { TestProviders } from '../../common/mock';
 import { DashboardRenderer } from './dashboard_renderer';
 
@@ -13,9 +16,7 @@ jest.mock('@kbn/dashboard-plugin/public', () => {
   const actual = jest.requireActual('@kbn/dashboard-plugin/public');
   return {
     ...actual,
-    DashboardRenderer: jest
-      .fn()
-      .mockImplementation(() => <div data-test-subj="dashboardRenderer" />),
+    DashboardRenderer: jest.fn().mockReturnValue(<div data-test-subj="dashboardRenderer" />),
   };
 });
 
@@ -40,19 +41,41 @@ describe('DashboardRenderer', () => {
     },
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders', () => {
     const { queryByTestId } = render(<DashboardRenderer {...props} />, { wrapper: TestProviders });
     expect(queryByTestId(`dashboardRenderer`)).toBeInTheDocument();
   });
 
-  it.skip('does not render when No Read Permission', () => {
+  it('renders with correct options', async () => {
+    render(<DashboardRenderer {...props} />, { wrapper: TestProviders });
+    const options = await (
+      DashboardContainerRenderer as unknown as jest.Mock
+    ).mock.calls[0][0].getCreationOptions();
+    const input = options.getInitialInput();
+
+    expect(input).toEqual(
+      expect.objectContaining({
+        timeRange: props.timeRange,
+        viewMode: ViewMode.VIEW,
+        query: undefined,
+        filters: undefined,
+      })
+    );
+    expect(options.useControlGroupIntegration).toEqual(true);
+  });
+
+  it('does not render when No Read Permission', () => {
     const testProps = {
       ...props,
       canReadDashboard: false,
     };
-    const { queryByTestId } = render(<DashboardRenderer {...testProps} />, {
+    render(<DashboardRenderer {...testProps} />, {
       wrapper: TestProviders,
     });
-    expect(queryByTestId(`dashboardRenderer`)).not.toBeInTheDocument();
+    expect(DashboardContainerRenderer).not.toHaveBeenCalled();
   });
 });

x-pack/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx

@@ -45,6 +45,7 @@ const DashboardRendererComponent = ({
     () =>
       Promise.resolve({
         getInitialInput: () => ({ timeRange, viewMode: ViewMode.VIEW, query, filters }),
+        useControlGroupIntegration: true,
       }),
     [filters, query, timeRange]
   );