[Security Solution] External alerts and Modal bug fix (#103933)

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -59,7 +59,7 @@ export const mockGlobalState: State = {
         events: { activePage: 0, limit: 10 },
         uncommonProcesses: { activePage: 0, limit: 10 },
         anomalies: null,
-        alerts: { activePage: 0, limit: 10 },
+        externalAlerts: { activePage: 0, limit: 10 },
       },
     },
     details: {
@@ -74,7 +74,7 @@ export const mockGlobalState: State = {
         events: { activePage: 0, limit: 10 },
         uncommonProcesses: { activePage: 0, limit: 10 },
         anomalies: null,
-        alerts: { activePage: 0, limit: 10 },
+        externalAlerts: { activePage: 0, limit: 10 },
       },
     },
   },

x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx

@@ -18,6 +18,7 @@ import { hostDetailsPagePath } from '../types';
 import { type } from './utils';
 import { useMountAppended } from '../../../common/utils/use_mount_appended';
 import { getHostDetailsPageFilters } from './helpers';
+import { HostsTableType } from '../../store/model';
 
 jest.mock('../../../common/lib/kibana');
 
@@ -51,12 +52,12 @@ mockUseResizeObserver.mockImplementation(() => ({}));
 
 describe('body', () => {
   const scenariosMap = {
-    authentications: 'AuthenticationsQueryTabBody',
-    allHosts: 'HostsQueryTabBody',
-    uncommonProcesses: 'UncommonProcessQueryTabBody',
-    anomalies: 'AnomaliesQueryTabBody',
-    events: 'EventsQueryTabBody',
-    alerts: 'HostAlertsQueryTabBody',
+    [HostsTableType.authentications]: 'AuthenticationsQueryTabBody',
+    [HostsTableType.hosts]: 'HostsQueryTabBody',
+    [HostsTableType.uncommonProcesses]: 'UncommonProcessQueryTabBody',
+    [HostsTableType.anomalies]: 'AnomaliesQueryTabBody',
+    [HostsTableType.events]: 'EventsQueryTabBody',
+    [HostsTableType.alerts]: 'HostAlertsQueryTabBody',
   };
 
   const mockHostDetailsPageFilters = getHostDetailsPageFilters('host-1');

x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts

@@ -71,26 +71,26 @@ describe('Hosts redux store', () => {
   describe('#setHostsQueriesActivePageToZero', () => {
     test('set activePage to zero for all queries in hosts page  ', () => {
       expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.page)).toEqual({
-        allHosts: {
+        [HostsTableType.hosts]: {
           activePage: 0,
           direction: 'desc',
           limit: 10,
           sortField: 'lastSeen',
         },
-        anomalies: null,
-        authentications: {
+        [HostsTableType.anomalies]: null,
+        [HostsTableType.authentications]: {
           activePage: 0,
           limit: 10,
         },
-        events: {
+        [HostsTableType.events]: {
           activePage: 0,
           limit: 10,
         },
-        uncommonProcesses: {
+        [HostsTableType.uncommonProcesses]: {
           activePage: 0,
           limit: 10,
         },
-        alerts: {
+        [HostsTableType.alerts]: {
           activePage: 0,
           limit: 10,
         },
@@ -99,26 +99,26 @@ describe('Hosts redux store', () => {
 
     test('set activePage to zero for all queries in host details  ', () => {
       expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.details)).toEqual({
-        allHosts: {
+        [HostsTableType.hosts]: {
           activePage: 0,
           direction: 'desc',
           limit: 10,
           sortField: 'lastSeen',
         },
-        anomalies: null,
-        authentications: {
+        [HostsTableType.anomalies]: null,
+        [HostsTableType.authentications]: {
           activePage: 0,
           limit: 10,
         },
-        events: {
+        [HostsTableType.events]: {
           activePage: 0,
           limit: 10,
         },
-        uncommonProcesses: {
+        [HostsTableType.uncommonProcesses]: {
           activePage: 0,
           limit: 10,
         },
-        alerts: {
+        [HostsTableType.alerts]: {
           activePage: 0,
           limit: 10,
         },

x-pack/plugins/security_solution/public/hosts/store/model.ts

@@ -19,7 +19,7 @@ export enum HostsTableType {
   events = 'events',
   uncommonProcesses = 'uncommonProcesses',
   anomalies = 'anomalies',
-  alerts = 'alerts',
+  alerts = 'externalAlerts',
 }
 
 export interface BasicQueryPaginated {

x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap

@@ -241,14 +241,14 @@ exports[`Details Panel Component DetailsPanel:EventDetails: rendering it should
 
 exports[`Details Panel Component DetailsPanel:EventDetails: rendering it should render the Event Details view of the Details Panel in the flyout when the panelView is eventDetail and the eventId is set 1`] = `
 Array [
-  .c1 {
+  .c0 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   margin-top: 8px;
 }
 
-.c2 .euiFlyoutBody__overflow {
+.c1 .euiFlyoutBody__overflow {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -259,7 +259,7 @@ Array [
   overflow: hidden;
 }
 
-.c2 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
+.c1 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -267,246 +267,7 @@ Array [
   padding: 4px 16px 50px;
 }
 
-.c0 {
-  z-index: 7000;
-}
-
-<Styled(EuiFlyout)
-    data-test-subj="timeline:details-panel:flyout"
-    onClose={[Function]}
-    ownFocus={false}
-    size="m"
-  >
-    <EuiFlyout
-      className="c0"
-      data-test-subj="timeline:details-panel:flyout"
-      onClose={[Function]}
-      ownFocus={false}
-      size="m"
-    >
-      <div
-        data-eui="EuiFlyout"
-        data-test-subj="timeline:details-panel:flyout"
-        role="dialog"
-      >
-        <button
-          data-test-subj="euiFlyoutCloseButton"
-          onClick={[Function]}
-          type="button"
-        />
-        <EventDetailsPanelComponent
-          browserFields={Object {}}
-          docValueFields={Array []}
-          expandedEvent={
-            Object {
-              "eventId": "my-id",
-              "indexName": "my-index",
-            }
-          }
-          handleOnEventClosed={[Function]}
-          isFlyoutView={true}
-          tabType="query"
-          timelineId="test"
-        >
-          <EuiFlyoutHeader
-            hasBorder={true}
-          >
-            <div
-              className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-            >
-              <ExpandableEventTitle
-                isAlert={false}
-                loading={true}
-              >
-                <Styled(EuiFlexGroup)
-                  gutterSize="none"
-                  justifyContent="spaceBetween"
-                  wrap={true}
-                >
-                  <EuiFlexGroup
-                    className="c1"
-                    gutterSize="none"
-                    justifyContent="spaceBetween"
-                    wrap={true}
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
-                    >
-                      <EuiFlexItem
-                        grow={false}
-                      >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                        >
-                          <EuiTitle
-                            size="s"
-                          />
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </Styled(EuiFlexGroup)>
-              </ExpandableEventTitle>
-            </div>
-          </EuiFlyoutHeader>
-          <Styled(EuiFlyoutBody)>
-            <EuiFlyoutBody
-              className="c2"
-            >
-              <div
-                className="euiFlyoutBody c2"
-              >
-                <div
-                  className="euiFlyoutBody__overflow"
-                  tabIndex={0}
-                >
-                  <div
-                    className="euiFlyoutBody__overflowContent"
-                  >
-                    <ExpandableEvent
-                      browserFields={Object {}}
-                      detailsData={null}
-                      event={
-                        Object {
-                          "eventId": "my-id",
-                          "indexName": "my-index",
-                        }
-                      }
-                      isAlert={false}
-                      loading={true}
-                      timelineId="test"
-                      timelineTabType="flyout"
-                    >
-                      <EuiLoadingContent
-                        lines={10}
-                      >
-                        <span
-                          className="euiLoadingContent"
-                        >
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="0"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="1"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="2"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="3"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="4"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="5"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="6"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="7"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="8"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="9"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                        </span>
-                      </EuiLoadingContent>
-                    </ExpandableEvent>
-                  </div>
-                </div>
-              </div>
-            </EuiFlyoutBody>
-          </Styled(EuiFlyoutBody)>
-        </EventDetailsPanelComponent>
-      </div>
-    </EuiFlyout>
-  </Styled(EuiFlyout)>,
-  .c1 {
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  margin-top: 8px;
-}
-
-.c2 .euiFlyoutBody__overflow {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-}
-
-.c2 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-  padding: 4px 16px 50px;
-}
-
-.c0 {
-  z-index: 7000;
-}
-
 <EuiFlyout
-    className="c0"
     data-test-subj="timeline:details-panel:flyout"
     onClose={[Function]}
     ownFocus={false}
@@ -552,13 +313,13 @@ Array [
                 wrap={true}
               >
                 <EuiFlexGroup
-                  className="c1"
+                  className="c0"
                   gutterSize="none"
                   justifyContent="spaceBetween"
                   wrap={true}
                 >
                   <div
-                    className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
+                    className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
                   >
                     <EuiFlexItem
                       grow={false}
@@ -579,10 +340,10 @@ Array [
         </EuiFlyoutHeader>
         <Styled(EuiFlyoutBody)>
           <EuiFlyoutBody
-            className="c2"
+            className="c1"
           >
             <div
-              className="euiFlyoutBody c2"
+              className="euiFlyoutBody c1"
             >
               <div
                 className="euiFlyoutBody__overflow"

x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx

@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo, ReactNode } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { EuiFlyout, EuiFlyoutProps } from '@elastic/eui';
-import styled, { StyledComponent } from 'styled-components';
 import { timelineActions, timelineSelectors } from '../../store/timeline';
 import { timelineDefaults } from '../../store/timeline/defaults';
 import { BrowserFields, DocValueFields } from '../../../common/containers/source';
@@ -18,14 +17,6 @@ import { EventDetailsPanel } from './event_details';
 import { HostDetailsPanel } from './host_details';
 import { NetworkDetailsPanel } from './network_details';
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-const StyledEuiFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
-  EuiFlyout
-)`
-  z-index: ${({ theme }) => theme.eui.euiZLevel7};
-`;
-
 interface DetailsPanelProps {
   browserFields: BrowserFields;
   docValueFields: DocValueFields[];
@@ -113,14 +104,14 @@ export const DetailsPanel = React.memo(
     }
 
     return isFlyoutView ? (
-      <StyledEuiFlyout
+      <EuiFlyout
         data-test-subj="timeline:details-panel:flyout"
         size={panelSize}
         onClose={closePanel}
         ownFocus={false}
       >
         {visiblePanel}
-      </StyledEuiFlyout>
+      </EuiFlyout>
     ) : (
       visiblePanel
     );