[ENDPOINT] Hide the Timeline Flyout while on the Management Pages (#6…

…9998)

* hide timeline on Management pages
* adjust managment page view styles
* Added additional tests for validating no timeline button on management views
* centralize API Path responses and reuse across some tests
* Fix state being reset incorrectly

x-pack/plugins/security_solution/public/common/components/endpoint/page_view.tsx

@@ -21,14 +21,13 @@ import {
 import React, { memo, MouseEventHandler, ReactNode, useMemo } from 'react';
 import styled from 'styled-components';
 import { EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
-import { gutterTimeline } from '../../lib/helpers';
 
 const StyledEuiPage = styled(EuiPage)`
   &.endpoint--isListView {
-    padding: 0 ${gutterTimeline} 0 ${(props) => props.theme.eui.euiSizeL};
+    padding: 0 ${(props) => props.theme.eui.euiSizeL};
 
     .endpoint-header {
-      padding: ${(props) => props.theme.eui.euiSizeL} 0;
+      padding: ${(props) => props.theme.eui.euiSizeL};
       margin-bottom: 0;
     }
     .endpoint-page-content {
@@ -44,7 +43,7 @@ const StyledEuiPage = styled(EuiPage)`
     }
   }
   .endpoint-navTabs {
-    margin-left: ${(props) => props.theme.eui.euiSizeL};
+    margin-left: ${(props) => props.theme.eui.euiSizeM};
   }
 `;
 

x-pack/plugins/security_solution/public/common/utils/timeline/use_show_timeline.tsx

@@ -7,7 +7,7 @@
 import { useState, useEffect } from 'react';
 import { useRouteSpy } from '../route/use_route_spy';
 
-const hideTimelineForRoutes = [`/cases/configure`];
+const hideTimelineForRoutes = [`/cases/configure`, '/management'];
 
 export const useShowTimeline = () => {
   const [{ pageName, pathName }] = useRouteSpy();

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx

@@ -34,6 +34,12 @@ describe('when on the hosts page', () => {
     render = () => mockedContext.render(<HostList />);
   });
 
+  it('should NOT display timeline', async () => {
+    const renderResult = render();
+    const timelineFlyout = await renderResult.queryByTestId('flyoutOverlay');
+    expect(timelineFlyout).toBeNull();
+  });
+
   it('should show a table', async () => {
     const renderResult = render();
     const table = await renderResult.findByTestId('hostListTable');

x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/reducer.ts

@@ -78,13 +78,20 @@ export const policyDetailsReducer: ImmutableReducer<PolicyDetailsState, AppActio
     const isCurrentlyOnDetailsPage = isOnPolicyDetailsPage(newState);
     const wasPreviouslyOnDetailsPage = isOnPolicyDetailsPage(state);
 
-    // Did user just enter the Detail page? if so, then set the loading indicator and return new state
-    if (isCurrentlyOnDetailsPage && !wasPreviouslyOnDetailsPage) {
-      return {
-        ...newState,
-        isLoading: true,
-      };
+    if (isCurrentlyOnDetailsPage) {
+      // Did user just enter the Detail page? if so, then
+      // set the loading indicator and return new state
+      if (!wasPreviouslyOnDetailsPage) {
+        return {
+          ...newState,
+          isLoading: true,
+        };
+      }
+      // Else, user was already on the details page,
+      // just return the updated state with new location data
+      return newState;
     }
+
     return {
       ...initialPolicyDetailsState(),
       location: action.payload,

x-pack/plugins/security_solution/public/management/pages/policy/store/policy_list/services/ingest.test.ts

@@ -5,12 +5,14 @@
  */
 
 import {
+  INGEST_API_EPM_PACKAGES,
   sendGetDatasource,
   sendGetEndpointSecurityPackage,
   sendGetEndpointSpecificDatasources,
 } from './ingest';
 import { httpServiceMock } from '../../../../../../../../../../src/core/public/mocks';
 import { DATASOURCE_SAVED_OBJECT_TYPE } from '../../../../../../../../ingest_manager/common';
+import { apiPathMockResponseProviders } from '../test_mock_utils';
 
 describe('ingest service', () => {
   let http: ReturnType<typeof httpServiceMock.createStartContract>;
@@ -59,76 +61,7 @@ describe('ingest service', () => {
 
   describe('sendGetEndpointSecurityPackage()', () => {
     it('should query EPM with category=security', async () => {
-      http.get.mockResolvedValue({
-        response: [
-          {
-            name: 'endpoint',
-            title: 'Elastic Endpoint',
-            version: '0.5.0',
-            description: 'This is the Elastic Endpoint package.',
-            type: 'solution',
-            download: '/epr/endpoint/endpoint-0.5.0.tar.gz',
-            path: '/package/endpoint/0.5.0',
-            icons: [
-              {
-                src: '/package/endpoint/0.5.0/img/logo-endpoint-64-color.svg',
-                size: '16x16',
-                type: 'image/svg+xml',
-              },
-            ],
-            status: 'installed',
-            savedObject: {
-              type: 'epm-packages',
-              id: 'endpoint',
-              attributes: {
-                installed: [
-                  { id: '826759f0-7074-11ea-9bc8-6b38f4d29a16', type: 'dashboard' },
-                  { id: '1cfceda0-728b-11ea-9bc8-6b38f4d29a16', type: 'visualization' },
-                  { id: '1e525190-7074-11ea-9bc8-6b38f4d29a16', type: 'visualization' },
-                  { id: '55387750-729c-11ea-9bc8-6b38f4d29a16', type: 'visualization' },
-                  { id: '92b1edc0-706a-11ea-9bc8-6b38f4d29a16', type: 'visualization' },
-                  { id: 'a3a3bd10-706b-11ea-9bc8-6b38f4d29a16', type: 'map' },
-                  { id: 'logs-endpoint.alerts', type: 'index-template' },
-                  { id: 'events-endpoint', type: 'index-template' },
-                  { id: 'logs-endpoint.events.file', type: 'index-template' },
-                  { id: 'logs-endpoint.events.library', type: 'index-template' },
-                  { id: 'metrics-endpoint.metadata', type: 'index-template' },
-                  { id: 'metrics-endpoint.metadata_mirror', type: 'index-template' },
-                  { id: 'logs-endpoint.events.network', type: 'index-template' },
-                  { id: 'metrics-endpoint.policy', type: 'index-template' },
-                  { id: 'logs-endpoint.events.process', type: 'index-template' },
-                  { id: 'logs-endpoint.events.registry', type: 'index-template' },
-                  { id: 'logs-endpoint.events.security', type: 'index-template' },
-                  { id: 'metrics-endpoint.telemetry', type: 'index-template' },
-                ],
-                es_index_patterns: {
-                  alerts: 'logs-endpoint.alerts-*',
-                  events: 'events-endpoint-*',
-                  file: 'logs-endpoint.events.file-*',
-                  library: 'logs-endpoint.events.library-*',
-                  metadata: 'metrics-endpoint.metadata-*',
-                  metadata_mirror: 'metrics-endpoint.metadata_mirror-*',
-                  network: 'logs-endpoint.events.network-*',
-                  policy: 'metrics-endpoint.policy-*',
-                  process: 'logs-endpoint.events.process-*',
-                  registry: 'logs-endpoint.events.registry-*',
-                  security: 'logs-endpoint.events.security-*',
-                  telemetry: 'metrics-endpoint.telemetry-*',
-                },
-                name: 'endpoint',
-                version: '0.5.0',
-                internal: false,
-                removable: false,
-              },
-              references: [],
-              updated_at: '2020-06-24T14:41:23.098Z',
-              version: 'Wzc0LDFd',
-              score: 0,
-            },
-          },
-        ],
-        success: true,
-      });
+      http.get.mockReturnValue(apiPathMockResponseProviders[INGEST_API_EPM_PACKAGES]());
       await sendGetEndpointSecurityPackage(http);
       expect(http.get).toHaveBeenCalledWith('/api/ingest_manager/epm/packages', {
         query: { category: 'security' },