[SecuritySolution] Fix minimize amd maximize panel actions

x-pack/plugins/security_solution/public/dashboards/pages/details/index.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { DashboardView } from '.';
+import { useCapabilities } from '../../../common/lib/kibana';
+import { TestProviders } from '../../../common/mock';
+
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: jest.fn().mockReturnValue({ detailName: 'mockSavedObjectId' }),
+  };
+});
+
+jest.mock('../../../common/lib/kibana', () => {
+  const actual = jest.requireActual('../../../common/lib/kibana');
+  return {
+    ...actual,
+    useCapabilities: jest.fn().mockReturnValue({ show: true, showWriteControls: true }),
+  };
+});
+
+jest.mock('../../../common/components/dashboards/dashboard_renderer', () => ({
+  DashboardRenderer: jest
+    .fn()
+    .mockImplementation((props) => (
+      <div data-test-subj={`dashboard-view-${props.savedObjectId}`} />
+    )),
+}));
+
+type Action = 'PUSH' | 'POP' | 'REPLACE';
+const pop: Action = 'POP';
+const location = {
+  pathname: '/network',
+  search: '',
+  state: '',
+  hash: '',
+};
+const mockHistory = {
+  length: 2,
+  location,
+  action: pop,
+  push: jest.fn(),
+  replace: jest.fn(),
+  go: jest.fn(),
+  goBack: jest.fn(),
+  goForward: jest.fn(),
+  block: jest.fn(),
+  createHref: jest.fn(),
+  listen: jest.fn(),
+};
+
+describe('DashboardView', () => {
+  beforeEach(() => {
+    (useCapabilities as unknown as jest.Mock).mockReturnValue({
+      show: true,
+      showWriteControls: true,
+    });
+  });
+  test('render when no error state', () => {
+    const { queryByTestId } = render(
+      <Router history={mockHistory}>
+        <DashboardView />
+      </Router>,
+      { wrapper: TestProviders }
+    );
+
+    expect(queryByTestId(`dashboard-view-mockSavedObjectId`)).toBeInTheDocument();
+  });
+
+  test('render a prompt when error state exists', () => {
+    (useCapabilities as unknown as jest.Mock).mockReturnValue({
+      show: false,
+      showWriteControls: true,
+    });
+    const { queryByTestId } = render(
+      <Router history={mockHistory}>
+        <DashboardView />
+      </Router>,
+      { wrapper: TestProviders }
+    );
+
+    expect(queryByTestId(`dashboard-view-mockSavedObjectId`)).not.toBeInTheDocument();
+    expect(queryByTestId(`dashboard-view-error-prompt-wrapper`)).toBeInTheDocument();
+  });
+
+  test('render dashbard view with height', () => {
+    const { queryByTestId } = render(
+      <Router history={mockHistory}>
+        <DashboardView />
+      </Router>,
+      { wrapper: TestProviders }
+    );
+
+    expect(queryByTestId(`dashboard-view-wrapper`)).toHaveStyle({
+      'min-height': `calc(100vh - 140px)`,
+    });
+  });
+});

x-pack/plugins/security_solution/public/dashboards/pages/details/index.tsx

@@ -13,7 +13,7 @@ import type { DashboardCapabilities } from '@kbn/dashboard-plugin/common/types';
 import { useParams } from 'react-router-dom';
 
 import { pick } from 'lodash/fp';
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import { SecurityPageName } from '../../../../common/constants';
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
 import { useCapabilities } from '../../../common/lib/kibana';
@@ -33,6 +33,8 @@ import { EditDashboardButton } from '../../components/edit_dashboard_button';
 
 type DashboardDetails = Record<string, string>;
 
+const dashboardViewFlexGroupStyle = { minHeight: `calc(100vh - 140px)` };
+
 const DashboardViewComponent: React.FC = () => {
   const { fromStr, toStr, from, to } = useDeepEqualSelector((state) =>
     pick(['fromStr', 'toStr', 'from', 'to'], inputsSelectors.globalTimeRangeSelector(state))
@@ -76,34 +78,47 @@ const DashboardViewComponent: React.FC = () => {
         </FiltersGlobal>
       )}
       <SecuritySolutionPageWrapper>
-        <HeaderPage border title={dashboardDetails?.title ?? <EuiLoadingSpinner size="m" />}>
-          {showWriteControls && dashboardExists && (
-            <EditDashboardButton
-              filters={filters}
-              query={query}
-              savedObjectId={savedObjectId}
-              timeRange={timeRange}
-            />
+        <EuiFlexGroup
+          direction="column"
+          style={dashboardViewFlexGroupStyle}
+          gutterSize="none"
+          data-test-subj="dashboard-view-wrapper"
+        >
+          <EuiFlexItem grow={false}>
+            <HeaderPage border title={dashboardDetails?.title ?? <EuiLoadingSpinner size="m" />}>
+              {showWriteControls && dashboardExists && (
+                <EditDashboardButton
+                  filters={filters}
+                  query={query}
+                  savedObjectId={savedObjectId}
+                  timeRange={timeRange}
+                />
+              )}
+            </HeaderPage>
+          </EuiFlexItem>
+          {!errorState && (
+            <EuiFlexItem grow>
+              <DashboardRenderer
+                query={query}
+                filters={filters}
+                canReadDashboard={canReadDashboard}
+                id={`dashboard-view-${savedObjectId}`}
+                onDashboardContainerLoaded={onDashboardContainerLoaded}
+                savedObjectId={savedObjectId}
+                timeRange={timeRange}
+              />
+            </EuiFlexItem>
           )}
-        </HeaderPage>
-
-        {!errorState && (
-          <DashboardRenderer
-            query={query}
-            filters={filters}
-            canReadDashboard={canReadDashboard}
-            id={`dashboard-view-${savedObjectId}`}
-            onDashboardContainerLoaded={onDashboardContainerLoaded}
-            savedObjectId={savedObjectId}
-            timeRange={timeRange}
+          {errorState && (
+            <EuiFlexItem data-test-subj="dashboard-view-error-prompt-wrapper" grow>
+              <StatusPropmpt currentState={errorState} />
+            </EuiFlexItem>
+          )}
+          <SpyRoute
+            pageName={SecurityPageName.dashboards}
+            state={{ dashboardName: dashboardDetails?.title }}
           />
-        )}
-
-        <StatusPropmpt currentState={errorState} />
-        <SpyRoute
-          pageName={SecurityPageName.dashboards}
-          state={{ dashboardName: dashboardDetails?.title }}
-        />
+        </EuiFlexGroup>
       </SecuritySolutionPageWrapper>
     </>
   );