From 5bc1f76faad1bb133057cb794f59797350346e0a Mon Sep 17 00:00:00 2001
From: Angela Chuang <yi-chun.chuang@elastic.co>
Date: Tue, 12 Apr 2022 23:53:12 +0800
Subject: [PATCH 1/2] clean up casecontext

---
 .../security_solution/public/app/app.tsx      |  30 +++--
 .../common/components/events_viewer/index.tsx | 106 +++++++++---------
 .../matrix_histogram/index.test.tsx           |   1 -
 .../components/matrix_histogram/index.tsx     |  29 ++---
 .../components/alerts_table/index.tsx         |  44 ++++----
 .../rules/rule_preview/preview_histogram.tsx  | 100 ++++++++---------
 .../components/kpi_hosts/common/index.tsx     |  15 +--
 .../side_panel/event_details/index.tsx        |  17 +--
 .../components/timeline/body/index.tsx        | 105 ++++++++---------
 9 files changed, 206 insertions(+), 241 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/app/app.tsx b/x-pack/plugins/security_solution/public/app/app.tsx
index 184ea12903b19..25ac8ee7f1317 100644
--- a/x-pack/plugins/security_solution/public/app/app.tsx
+++ b/x-pack/plugins/security_solution/public/app/app.tsx
@@ -15,11 +15,16 @@ import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/pub
 import { AppLeaveHandler, AppMountParameters } from '../../../../../src/core/public';
 
 import { ManageUserInfo } from '../detections/components/user_info';
-import { DEFAULT_DARK_MODE, APP_NAME } from '../../common/constants';
+import { DEFAULT_DARK_MODE, APP_NAME, APP_ID } from '../../common/constants';
 import { ErrorToastDispatcher } from '../common/components/error_toast_dispatcher';
 import { MlCapabilitiesProvider } from '../common/components/ml/permissions/ml_capabilities_provider';
 import { GlobalToaster, ManageGlobalToaster } from '../common/components/toasters';
-import { KibanaContextProvider, useKibana, useUiSetting$ } from '../common/lib/kibana';
+import {
+  KibanaContextProvider,
+  useGetUserCasesPermissions,
+  useKibana,
+  useUiSetting$,
+} from '../common/lib/kibana';
 import { State } from '../common/store';
 
 import { StartServices } from '../types';
@@ -48,9 +53,11 @@ const StartAppComponent: FC<StartAppComponent> = ({
   const {
     i18n,
     application: { capabilities },
+    cases,
   } = useKibana().services;
   const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
-
+  const casesPermissions = useGetUserCasesPermissions();
+  const CasesContext = cases.ui.getCasesContext();
   return (
     <EuiErrorBoundary>
       <i18n.Context>
@@ -62,13 +69,18 @@ const StartAppComponent: FC<StartAppComponent> = ({
                   <UserPrivilegesProvider kibanaCapabilities={capabilities}>
                     <ManageUserInfo>
                       <ReactQueryClientProvider>
-                        <PageRouter
-                          history={history}
-                          onAppLeave={onAppLeave}
-                          setHeaderActionMenu={setHeaderActionMenu}
+                        <CasesContext
+                          owner={[APP_ID]}
+                          userCanCrud={casesPermissions?.crud ?? false}
                         >
-                          {children}
-                        </PageRouter>
+                          <PageRouter
+                            history={history}
+                            onAppLeave={onAppLeave}
+                            setHeaderActionMenu={setHeaderActionMenu}
+                          >
+                            {children}
+                          </PageRouter>
+                        </CasesContext>
                       </ReactQueryClientProvider>
                     </ManageUserInfo>
                   </UserPrivilegesProvider>
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
index 7dfa75d6daaa2..88d24e3707453 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -12,7 +12,7 @@ import type { Filter } from '@kbn/es-query';
 import { inputsModel, State } from '../../store';
 import { inputsActions } from '../../store/actions';
 import { ControlColumnProps, RowRenderer, TimelineId } from '../../../../common/types/timeline';
-import { APP_ID, APP_UI_ID } from '../../../../common/constants';
+import { APP_UI_ID } from '../../../../common/constants';
 import { timelineActions } from '../../../timelines/store/timeline';
 import type { SubsetTimelineModel } from '../../../timelines/store/timeline/model';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
@@ -26,7 +26,7 @@ import type { EntityType } from '../../../../../timelines/common';
 import { TGridCellAction } from '../../../../../timelines/common/types';
 import { CellValueElementProps } from '../../../timelines/components/timeline/cell_rendering';
 import { FIELDS_WITHOUT_CELL_ACTIONS } from '../../lib/cell_actions/constants';
-import { useGetUserCasesPermissions, useKibana } from '../../lib/kibana';
+import { useKibana } from '../../lib/kibana';
 import { GraphOverlay } from '../../../timelines/components/graph_overlay';
 import {
   useFieldBrowserOptions,
@@ -114,7 +114,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
     } = defaultModel,
   } = useSelector((state: State) => eventsViewerSelector(state, id));
 
-  const { timelines: timelinesUi, cases } = useKibana().services;
+  const { timelines: timelinesUi } = useKibana().services;
   const {
     browserFields,
     dataViewId,
@@ -201,62 +201,58 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
     editorActionsRef,
   });
 
-  const casesPermissions = useGetUserCasesPermissions();
-  const CasesContext = cases.ui.getCasesContext();
   const isLive = input.policy.kind === 'interval';
 
   return (
     <>
-      <CasesContext owner={[APP_ID]} userCanCrud={casesPermissions?.crud ?? false}>
-        <FullScreenContainer $isFullScreen={globalFullScreen}>
-          <InspectButtonContainer>
-            {timelinesUi.getTGrid<'embedded'>({
-              additionalFilters,
-              appId: APP_UI_ID,
-              browserFields,
-              bulkActions,
-              columns,
-              dataProviders,
-              dataViewId,
-              defaultCellActions,
-              deletedEventIds,
-              disabledCellActions: FIELDS_WITHOUT_CELL_ACTIONS,
-              docValueFields,
-              end,
-              entityType,
-              fieldBrowserOptions,
-              filters: globalFilters,
-              filterStatus: currentFilter,
-              globalFullScreen,
-              graphEventId,
-              graphOverlay,
-              hasAlertsCrud,
-              id,
-              indexNames: selectedPatterns,
-              indexPattern,
-              isLive,
-              isLoadingIndexPattern,
-              itemsPerPage,
-              itemsPerPageOptions,
-              kqlMode,
-              leadingControlColumns,
-              onRuleChange,
-              query,
-              renderCellValue,
-              rowRenderers,
-              runtimeMappings,
-              setQuery,
-              sort,
-              start,
-              tGridEventRenderedViewEnabled,
-              trailingControlColumns,
-              type: 'embedded',
-              unit,
-            })}
-          </InspectButtonContainer>
-        </FullScreenContainer>
-        {DetailsPanel}
-      </CasesContext>
+      <FullScreenContainer $isFullScreen={globalFullScreen}>
+        <InspectButtonContainer>
+          {timelinesUi.getTGrid<'embedded'>({
+            additionalFilters,
+            appId: APP_UI_ID,
+            browserFields,
+            bulkActions,
+            columns,
+            dataProviders,
+            dataViewId,
+            defaultCellActions,
+            deletedEventIds,
+            disabledCellActions: FIELDS_WITHOUT_CELL_ACTIONS,
+            docValueFields,
+            end,
+            entityType,
+            fieldBrowserOptions,
+            filters: globalFilters,
+            filterStatus: currentFilter,
+            globalFullScreen,
+            graphEventId,
+            graphOverlay,
+            hasAlertsCrud,
+            id,
+            indexNames: selectedPatterns,
+            indexPattern,
+            isLive,
+            isLoadingIndexPattern,
+            itemsPerPage,
+            itemsPerPageOptions,
+            kqlMode,
+            leadingControlColumns,
+            onRuleChange,
+            query,
+            renderCellValue,
+            rowRenderers,
+            runtimeMappings,
+            setQuery,
+            sort,
+            start,
+            tGridEventRenderedViewEnabled,
+            trailingControlColumns,
+            type: 'embedded',
+            unit,
+          })}
+        </InspectButtonContainer>
+      </FullScreenContainer>
+      {DetailsPanel}
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx
index 1de9e08b4c65c..c4a667ac719a2 100644
--- a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx
@@ -18,7 +18,6 @@ import { useRouteSpy } from '../../utils/route/use_route_spy';
 import { useQueryToggle } from '../../containers/query_toggle';
 
 jest.mock('../../containers/query_toggle');
-jest.mock('../../lib/kibana');
 
 jest.mock('./matrix_loader', () => ({
   MatrixLoader: () => <div className="matrixLoader" />,
diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
index 7626abd6af08d..4746b61a4183a 100644
--- a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
@@ -31,8 +31,7 @@ import { InputsModelId } from '../../store/inputs/constants';
 import { HoverVisibilityContainer } from '../hover_visibility_container';
 import { HISTOGRAM_ACTIONS_BUTTON_CLASS, VisualizationActions } from '../visualization_actions';
 import { GetLensAttributes, LensAttributes } from '../visualization_actions/types';
-import { useKibana, useGetUserCasesPermissions } from '../../lib/kibana';
-import { APP_ID, SecurityPageName } from '../../../../common/constants';
+import { SecurityPageName } from '../../../../common/constants';
 import { useRouteSpy } from '../../utils/route/use_route_spy';
 import { useQueryToggle } from '../../containers/query_toggle';
 
@@ -104,10 +103,6 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   skip,
 }) => {
   const dispatch = useDispatch();
-  const { cases } = useKibana().services;
-  const CasesContext = cases.ui.getCasesContext();
-  const userPermissions = useGetUserCasesPermissions();
-  const userCanCrud = userPermissions?.crud ?? false;
 
   const handleBrushEnd = useCallback(
     ({ x }) => {
@@ -267,18 +262,16 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
             <EuiFlexGroup alignItems="center" gutterSize="none">
               {onHostOrNetworkOrUserPage && (getLensAttributes || lensAttributes) && timerange && (
                 <EuiFlexItem grow={false}>
-                  <CasesContext owner={[APP_ID]} userCanCrud={userCanCrud ?? false}>
-                    <VisualizationActions
-                      className="histogram-viz-actions"
-                      getLensAttributes={getLensAttributes}
-                      isInspectButtonDisabled={filterQuery === undefined}
-                      lensAttributes={lensAttributes}
-                      queryId={id}
-                      stackByField={selectedStackByOption.value}
-                      timerange={timerange}
-                      title={title}
-                    />
-                  </CasesContext>
+                  <VisualizationActions
+                    className="histogram-viz-actions"
+                    getLensAttributes={getLensAttributes}
+                    isInspectButtonDisabled={filterQuery === undefined}
+                    lensAttributes={lensAttributes}
+                    queryId={id}
+                    stackByField={selectedStackByOption.value}
+                    timerange={timerange}
+                    title={title}
+                  />
                 </EuiFlexItem>
               )}
               <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
index b4f81e3e5f0e4..d04984a21ae15 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -10,7 +10,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, ConnectedProps, useDispatch } from 'react-redux';
 import { Dispatch } from 'redux';
 import type { Filter } from '@kbn/es-query';
-import { APP_ID } from '../../../../common/constants';
 import { getEsQueryConfig } from '../../../../../../../src/plugins/data/common';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
 import { RowRendererId, TimelineIdLiteral } from '../../../../common/types/timeline';
@@ -25,7 +24,7 @@ import { useAppToasts } from '../../../common/hooks/use_app_toasts';
 import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 import { useInvalidFilterQuery } from '../../../common/hooks/use_invalid_filter_query';
 import { defaultCellActions } from '../../../common/lib/cell_actions/default_cell_actions';
-import { useGetUserCasesPermissions, useKibana } from '../../../common/lib/kibana';
+import { useKibana } from '../../../common/lib/kibana';
 import { inputsModel, inputsSelectors, State } from '../../../common/store';
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import * as i18nCommon from '../../../common/translations';
@@ -365,34 +364,29 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
 
   const leadingControlColumns = useMemo(() => getDefaultControlColumn(ACTION_BUTTON_COUNT), []);
 
-  const casesPermissions = useGetUserCasesPermissions();
-  const CasesContext = kibana.services.cases.ui.getCasesContext();
-
   if (loading || isEmpty(selectedPatterns)) {
     return null;
   }
 
   return (
-    <CasesContext owner={[APP_ID]} userCanCrud={casesPermissions?.crud ?? false}>
-      <StatefulEventsViewer
-        additionalFilters={additionalFiltersComponent}
-        currentFilter={filterGroup}
-        defaultCellActions={defaultCellActions}
-        defaultModel={alertsDefaultModel}
-        end={to}
-        entityType="events"
-        hasAlertsCrud={hasIndexWrite && hasIndexMaintenance}
-        id={timelineId}
-        leadingControlColumns={leadingControlColumns}
-        onRuleChange={onRuleChange}
-        pageFilters={defaultFiltersMemo}
-        renderCellValue={RenderCellValue}
-        rowRenderers={defaultRowRenderers}
-        scopeId={SourcererScopeName.detections}
-        start={from}
-        utilityBar={utilityBarCallback}
-      />
-    </CasesContext>
+    <StatefulEventsViewer
+      additionalFilters={additionalFiltersComponent}
+      currentFilter={filterGroup}
+      defaultCellActions={defaultCellActions}
+      defaultModel={alertsDefaultModel}
+      end={to}
+      entityType="events"
+      hasAlertsCrud={hasIndexWrite && hasIndexMaintenance}
+      id={timelineId}
+      leadingControlColumns={leadingControlColumns}
+      onRuleChange={onRuleChange}
+      pageFilters={defaultFiltersMemo}
+      renderCellValue={RenderCellValue}
+      rowRenderers={defaultRowRenderers}
+      scopeId={SourcererScopeName.detections}
+      start={from}
+      utilityBar={utilityBarCallback}
+    />
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
index 2119ab75ee67b..c311736107194 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
@@ -28,7 +28,7 @@ import { alertsPreviewDefaultModel } from '../../alerts_table/default_config';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
 import { defaultRowRenderers } from '../../../../timelines/components/timeline/body/renderers';
 import { TimelineId } from '../../../../../common/types';
-import { APP_ID, APP_UI_ID, DEFAULT_PREVIEW_INDEX } from '../../../../../common/constants';
+import { APP_UI_ID, DEFAULT_PREVIEW_INDEX } from '../../../../../common/constants';
 import { FIELDS_WITHOUT_CELL_ACTIONS } from '../../../../common/lib/cell_actions/constants';
 import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { DetailsPanel } from '../../../../timelines/components/side_panel';
@@ -74,7 +74,7 @@ export const PreviewHistogram = ({
 }: PreviewHistogramProps) => {
   const dispatch = useDispatch();
   const { setQuery, isInitializing } = useGlobalTime();
-  const { timelines: timelinesUi, cases } = useKibana().services;
+  const { timelines: timelinesUi } = useKibana().services;
   const from = useMemo(() => `now-1${timeFrame}`, [timeFrame]);
   const to = useMemo(() => 'now', []);
   const startDate = useMemo(() => formatDate(from), [from]);
@@ -155,8 +155,6 @@ export const PreviewHistogram = ({
 
   const chartData = useMemo((): ChartSeriesData[] => [{ key: 'hits', value: data }], [data]);
 
-  const CasesContext = cases.ui.getCasesContext();
-
   return (
     <>
       <Panel height={DEFAULT_HISTOGRAM_HEIGHT} data-test-subj={'preview-histogram-panel'}>
@@ -194,54 +192,52 @@ export const PreviewHistogram = ({
         </EuiFlexGroup>
       </Panel>
       <EuiSpacer />
-      <CasesContext owner={[APP_ID]} userCanCrud={false}>
-        <FullScreenContainer $isFullScreen={globalFullScreen}>
-          <InspectButtonContainer>
-            {timelinesUi.getTGrid<'embedded'>({
-              additionalFilters: <></>,
-              appId: APP_UI_ID,
-              browserFields,
-              columns,
-              dataProviders,
-              deletedEventIds,
-              disabledCellActions: FIELDS_WITHOUT_CELL_ACTIONS,
-              docValueFields,
-              end: endDate,
-              entityType: 'events',
-              filters: [],
-              globalFullScreen,
-              hasAlertsCrud: false,
-              id: TimelineId.rulePreview,
-              indexNames: [`${DEFAULT_PREVIEW_INDEX}-${spaceId}`],
-              indexPattern,
-              isLive: false,
-              isLoadingIndexPattern,
-              itemsPerPage,
-              itemsPerPageOptions,
-              kqlMode,
-              query: { query: `kibana.alert.rule.uuid:${previewId}`, language: 'kuery' },
-              renderCellValue: PreviewRenderCellValue,
-              rowRenderers: defaultRowRenderers,
-              runtimeMappings,
-              setQuery: () => {},
-              sort,
-              start: startDate,
-              tGridEventRenderedViewEnabled,
-              type: 'embedded',
-              leadingControlColumns: getPreviewTableControlColumn(1.5),
-            })}
-          </InspectButtonContainer>
-        </FullScreenContainer>
-        <DetailsPanel
-          browserFields={browserFields}
-          entityType={'events'}
-          docValueFields={docValueFields}
-          isFlyoutView
-          runtimeMappings={runtimeMappings}
-          timelineId={TimelineId.rulePreview}
-          isReadOnly
-        />
-      </CasesContext>
+      <FullScreenContainer $isFullScreen={globalFullScreen}>
+        <InspectButtonContainer>
+          {timelinesUi.getTGrid<'embedded'>({
+            additionalFilters: <></>,
+            appId: APP_UI_ID,
+            browserFields,
+            columns,
+            dataProviders,
+            deletedEventIds,
+            disabledCellActions: FIELDS_WITHOUT_CELL_ACTIONS,
+            docValueFields,
+            end: endDate,
+            entityType: 'events',
+            filters: [],
+            globalFullScreen,
+            hasAlertsCrud: false,
+            id: TimelineId.rulePreview,
+            indexNames: [`${DEFAULT_PREVIEW_INDEX}-${spaceId}`],
+            indexPattern,
+            isLive: false,
+            isLoadingIndexPattern,
+            itemsPerPage,
+            itemsPerPageOptions,
+            kqlMode,
+            query: { query: `kibana.alert.rule.uuid:${previewId}`, language: 'kuery' },
+            renderCellValue: PreviewRenderCellValue,
+            rowRenderers: defaultRowRenderers,
+            runtimeMappings,
+            setQuery: () => {},
+            sort,
+            start: startDate,
+            tGridEventRenderedViewEnabled,
+            type: 'embedded',
+            leadingControlColumns: getPreviewTableControlColumn(1.5),
+          })}
+        </InspectButtonContainer>
+      </FullScreenContainer>
+      <DetailsPanel
+        browserFields={browserFields}
+        entityType={'events'}
+        docValueFields={docValueFields}
+        isFlyoutView
+        runtimeMappings={runtimeMappings}
+        timelineId={TimelineId.rulePreview}
+        isReadOnly
+      />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/hosts/components/kpi_hosts/common/index.tsx b/x-pack/plugins/security_solution/public/hosts/components/kpi_hosts/common/index.tsx
index 4296ae4984b95..77098daa4747f 100644
--- a/x-pack/plugins/security_solution/public/hosts/components/kpi_hosts/common/index.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/components/kpi_hosts/common/index.tsx
@@ -22,8 +22,6 @@ import {
   StatItems,
 } from '../../../../common/components/stat_items';
 import { UpdateDateRange } from '../../../../common/components/charts/common';
-import { useKibana, useGetUserCasesPermissions } from '../../../../common/lib/kibana';
-import { APP_ID } from '../../../../../common/constants';
 import { UserskKpiStrategyResponse } from '../../../../../common/search_strategy/security_solution/users';
 
 const kpiWidgetHeight = 247;
@@ -47,11 +45,6 @@ interface KpiBaseComponentProps {
 
 export const KpiBaseComponent = React.memo<KpiBaseComponentProps>(
   ({ fieldsMapping, data, id, loading = false, from, to, narrowDateRange, setQuerySkip }) => {
-    const { cases } = useKibana().services;
-    const CasesContext = cases.ui.getCasesContext();
-    const userPermissions = useGetUserCasesPermissions();
-    const userCanCrud = userPermissions?.crud ?? false;
-
     const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
       fieldsMapping,
       data,
@@ -65,11 +58,9 @@ export const KpiBaseComponent = React.memo<KpiBaseComponentProps>(
 
     return (
       <EuiFlexGroup wrap>
-        <CasesContext owner={[APP_ID]} userCanCrud={userCanCrud ?? false}>
-          {statItemsProps.map((mappedStatItemProps) => (
-            <StatItemsComponent {...mappedStatItemProps} showInspectButton={false} />
-          ))}
-        </CasesContext>
+        {statItemsProps.map((mappedStatItemProps) => (
+          <StatItemsComponent {...mappedStatItemProps} showInspectButton={false} />
+        ))}
       </EuiFlexGroup>
     );
   },
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx
index 22d8b9bd2f4aa..2dfd219ea7da5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx
@@ -19,8 +19,6 @@ import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 import { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { BrowserFields, DocValueFields } from '../../../../common/containers/source';
-import { useKibana, useGetUserCasesPermissions } from '../../../../common/lib/kibana';
-import { APP_ID } from '../../../../../common/constants';
 import { ExpandableEvent, ExpandableEventTitle } from './expandable_event';
 import { useTimelineEventsDetails } from '../../../containers/details';
 import { TimelineTabs } from '../../../../../common/types/timeline';
@@ -100,13 +98,6 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
     'isolateHost'
   );
 
-  const {
-    services: { cases },
-  } = useKibana();
-
-  const CasesContext = cases.ui.getCasesContext();
-  const casesPermissions = useGetUserCasesPermissions();
-
   const [isIsolateActionSuccessBannerVisible, setIsIsolateActionSuccessBannerVisible] =
     useState(false);
 
@@ -195,7 +186,7 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
   }
 
   return isFlyoutView ? (
-    <CasesContext owner={[APP_ID]} userCanCrud={casesPermissions?.crud ?? false}>
+    <>
       <EuiFlyoutHeader hasBorder={isHostIsolationPanelOpen}>
         {isHostIsolationPanelOpen ? (
           backToAlertDetailsLink
@@ -254,9 +245,9 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
           timelineId={timelineId}
         />
       )}
-    </CasesContext>
+    </>
   ) : (
-    <CasesContext owner={[APP_ID]} userCanCrud={casesPermissions?.crud ?? false}>
+    <>
       <ExpandableEventTitle
         isAlert={isAlert}
         loading={loading}
@@ -290,7 +281,7 @@ const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
           timelineId={timelineId}
         />
       )}
-    </CasesContext>
+    </>
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
index 53a9e3605d9ac..8501a4327d15b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx
@@ -9,8 +9,6 @@ import { noop, isEmpty } from 'lodash/fp';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { APP_ID } from '../../../../../common/constants';
-import { useGetUserCasesPermissions, useKibana } from '../../../../common/lib/kibana';
 import {
   FIRST_ARIA_INDEX,
   ARIA_COLINDEX_ATTRIBUTE,
@@ -229,65 +227,60 @@ export const StatefulBody = React.memo<Props>(
       },
       [columnHeaders.length, containerRef, data.length]
     );
-    const kibana = useKibana();
-    const casesPermissions = useGetUserCasesPermissions();
-    const CasesContext = kibana.services.cases.ui.getCasesContext();
 
     return (
       <>
         <TimelineBody data-test-subj="timeline-body" ref={containerRef}>
-          <CasesContext owner={[APP_ID]} userCanCrud={casesPermissions?.crud ?? false}>
-            <EventsTable
-              $activePage={activePage}
-              $columnCount={columnCount}
-              data-test-subj={`${tabType}-events-table`}
-              columnWidths={totalWidth}
-              onKeyDown={onKeyDown}
-              $rowCount={data.length}
-              $totalPages={totalPages}
-            >
-              <ColumnHeaders
-                actionsColumnWidth={actionsColumnWidth}
-                browserFields={browserFields}
-                columnHeaders={columnHeaders}
-                isEventViewer={isEventViewer}
-                isSelectAllChecked={isSelectAllChecked}
-                onSelectAll={onSelectAll}
-                show={show}
-                showEventsSelect={false}
-                showSelectAllCheckbox={showCheckboxes}
-                sort={sort}
-                tabType={tabType}
-                timelineId={id}
-                leadingControlColumns={leadingControlColumns}
-                trailingControlColumns={trailingControlColumns}
-              />
+          <EventsTable
+            $activePage={activePage}
+            $columnCount={columnCount}
+            data-test-subj={`${tabType}-events-table`}
+            columnWidths={totalWidth}
+            onKeyDown={onKeyDown}
+            $rowCount={data.length}
+            $totalPages={totalPages}
+          >
+            <ColumnHeaders
+              actionsColumnWidth={actionsColumnWidth}
+              browserFields={browserFields}
+              columnHeaders={columnHeaders}
+              isEventViewer={isEventViewer}
+              isSelectAllChecked={isSelectAllChecked}
+              onSelectAll={onSelectAll}
+              show={show}
+              showEventsSelect={false}
+              showSelectAllCheckbox={showCheckboxes}
+              sort={sort}
+              tabType={tabType}
+              timelineId={id}
+              leadingControlColumns={leadingControlColumns}
+              trailingControlColumns={trailingControlColumns}
+            />
 
-              <Events
-                containerRef={containerRef}
-                actionsColumnWidth={actionsColumnWidth}
-                browserFields={browserFields}
-                columnHeaders={columnHeaders}
-                data={data}
-                eventIdToNoteIds={eventIdToNoteIds}
-                id={id}
-                isEventViewer={isEventViewer}
-                lastFocusedAriaColindex={lastFocusedAriaColindex}
-                loadingEventIds={loadingEventIds}
-                onRowSelected={onRowSelected}
-                pinnedEventIds={pinnedEventIds}
-                refetch={refetch}
-                renderCellValue={renderCellValue}
-                rowRenderers={enabledRowRenderers}
-                onRuleChange={onRuleChange}
-                selectedEventIds={selectedEventIds}
-                showCheckboxes={showCheckboxes}
-                leadingControlColumns={leadingControlColumns}
-                trailingControlColumns={trailingControlColumns}
-                tabType={tabType}
-              />
-            </EventsTable>
-          </CasesContext>
+            <Events
+              containerRef={containerRef}
+              actionsColumnWidth={actionsColumnWidth}
+              browserFields={browserFields}
+              columnHeaders={columnHeaders}
+              data={data}
+              eventIdToNoteIds={eventIdToNoteIds}
+              id={id}
+              isEventViewer={isEventViewer}
+              lastFocusedAriaColindex={lastFocusedAriaColindex}
+              loadingEventIds={loadingEventIds}
+              onRowSelected={onRowSelected}
+              pinnedEventIds={pinnedEventIds}
+              refetch={refetch}
+              renderCellValue={renderCellValue}
+              rowRenderers={enabledRowRenderers}
+              onRuleChange={onRuleChange}
+              selectedEventIds={selectedEventIds}
+              showCheckboxes={showCheckboxes}
+              leadingControlColumns={leadingControlColumns}
+              trailingControlColumns={trailingControlColumns}
+              tabType={tabType}
+            />
+          </EventsTable>
         </TimelineBody>
         <TimelineBodyGlobalStyle />
       </>

From f3ced97e93f37424528f3a6c2d5db187af9af27e Mon Sep 17 00:00:00 2001
From: Angela Chuang <yi-chun.chuang@elastic.co>
Date: Wed, 13 Apr 2022 01:51:52 +0800
Subject: [PATCH 2/2] update snapshot

---
 .../__snapshots__/index.test.tsx.snap         | 997 +++++++++---------
 1 file changed, 485 insertions(+), 512 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
index ebb807a590124..925b8d5b3027c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
@@ -58,265 +58,256 @@ exports[`Details Panel Component DetailsPanel:EventDetails: rendering it should
   tabType="query"
   timelineId="test"
 >
-  <CasesContextMock
-    owner={
-      Array [
-        "securitySolution",
-      ]
-    }
-    userCanCrud={false}
+  <ExpandableEventTitle
+    handleOnEventClosed={[Function]}
+    isAlert={false}
+    loading={true}
+    ruleName=""
   >
-    <ExpandableEventTitle
-      handleOnEventClosed={[Function]}
-      isAlert={false}
-      loading={true}
-      ruleName=""
+    <Styled(EuiFlexGroup)
+      gutterSize="none"
+      justifyContent="spaceBetween"
+      wrap={true}
     >
-      <Styled(EuiFlexGroup)
+      <EuiFlexGroup
+        className="c0"
         gutterSize="none"
         justifyContent="spaceBetween"
         wrap={true}
       >
-        <EuiFlexGroup
-          className="c0"
-          gutterSize="none"
-          justifyContent="spaceBetween"
-          wrap={true}
+        <div
+          className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
         >
-          <div
-            className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
+          <EuiFlexItem
+            grow={false}
           >
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
+              <EuiButtonIcon
+                aria-label="close"
+                iconType="cross"
+                onClick={[Function]}
               >
-                <EuiButtonIcon
+                <button
                   aria-label="close"
-                  iconType="cross"
+                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                   onClick={[Function]}
+                  type="button"
                 >
-                  <button
-                    aria-label="close"
-                    className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                    onClick={[Function]}
-                    type="button"
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="cross"
                   >
-                    <EuiIcon
+                    <span
                       aria-hidden="true"
                       className="euiButtonIcon__icon"
                       color="inherit"
+                      data-euiicon-type="cross"
                       size="m"
-                      type="cross"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </button>
-                </EuiButtonIcon>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </Styled(EuiFlexGroup)>
-    </ExpandableEventTitle>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
-    <ExpandableEvent
-      browserFields={Object {}}
-      detailsData={null}
-      event={
-        Object {
-          "eventId": "my-id",
-          "indexName": "my-index",
-        }
+                    />
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </Styled(EuiFlexGroup)>
+  </ExpandableEventTitle>
+  <EuiSpacer
+    size="m"
+  >
+    <div
+      className="euiSpacer euiSpacer--m"
+    />
+  </EuiSpacer>
+  <ExpandableEvent
+    browserFields={Object {}}
+    detailsData={null}
+    event={
+      Object {
+        "eventId": "my-id",
+        "indexName": "my-index",
       }
-      handleOnEventClosed={[Function]}
-      hostRisk={null}
-      isAlert={false}
-      isDraggable={false}
-      loading={true}
-      timelineId="test"
-      timelineTabType="query"
+    }
+    handleOnEventClosed={[Function]}
+    hostRisk={null}
+    isAlert={false}
+    isDraggable={false}
+    loading={true}
+    timelineId="test"
+    timelineTabType="query"
+  >
+    <EuiLoadingContent
+      lines={10}
     >
-      <EuiLoadingContent
-        lines={10}
+      <span
+        className="euiLoadingContent"
       >
         <span
-          className="euiLoadingContent"
+          className="euiLoadingContent__singleLine"
+          key="0"
         >
           <span
-            className="euiLoadingContent__singleLine"
-            key="0"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="1"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="1"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="2"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="2"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="3"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="3"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="4"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="4"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="5"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="5"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="6"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="6"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="7"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="7"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="8"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="8"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
+        </span>
+        <span
+          className="euiLoadingContent__singleLine"
+          key="9"
+        >
           <span
-            className="euiLoadingContent__singleLine"
-            key="9"
-          >
-            <span
-              className="euiLoadingContent__singleLineBackground"
-            />
-          </span>
+            className="euiLoadingContent__singleLineBackground"
+          />
         </span>
-      </EuiLoadingContent>
-    </ExpandableEvent>
-    <Connect(Component)
+      </span>
+    </EuiLoadingContent>
+  </ExpandableEvent>
+  <Connect(Component)
+    detailsData={null}
+    detailsEcsData={null}
+    expandedEvent={
+      Object {
+        "eventId": "my-id",
+        "indexName": "my-index",
+      }
+    }
+    handleOnEventClosed={[Function]}
+    isHostIsolationPanelOpen={false}
+    loadingEventDetails={true}
+    onAddIsolationStatusClick={[Function]}
+    refetchFlyoutData={[Function]}
+    timelineId="test"
+  >
+    <Memo()
       detailsData={null}
       detailsEcsData={null}
+      dispatch={[Function]}
       expandedEvent={
         Object {
           "eventId": "my-id",
           "indexName": "my-index",
         }
       }
+      globalQuery={Array []}
       handleOnEventClosed={[Function]}
       isHostIsolationPanelOpen={false}
       loadingEventDetails={true}
       onAddIsolationStatusClick={[Function]}
       refetchFlyoutData={[Function]}
       timelineId="test"
-    >
-      <Memo()
-        detailsData={null}
-        detailsEcsData={null}
-        dispatch={[Function]}
-        expandedEvent={
-          Object {
-            "eventId": "my-id",
-            "indexName": "my-index",
-          }
-        }
-        globalQuery={Array []}
-        handleOnEventClosed={[Function]}
-        isHostIsolationPanelOpen={false}
-        loadingEventDetails={true}
-        onAddIsolationStatusClick={[Function]}
-        refetchFlyoutData={[Function]}
-        timelineId="test"
-        timelineQuery={
-          Object {
-            "id": "",
-            "inspect": null,
-            "isInspected": false,
-            "loading": false,
-            "refetch": null,
-            "selectedInspectIndex": 0,
-          }
+      timelineQuery={
+        Object {
+          "id": "",
+          "inspect": null,
+          "isInspected": false,
+          "loading": false,
+          "refetch": null,
+          "selectedInspectIndex": 0,
         }
+      }
+    >
+      <EuiFlyoutFooter
+        data-test-subj="side-panel-flyout-footer"
       >
-        <EuiFlyoutFooter
+        <div
+          className="euiFlyoutFooter"
           data-test-subj="side-panel-flyout-footer"
         >
-          <div
-            className="euiFlyoutFooter"
-            data-test-subj="side-panel-flyout-footer"
+          <EuiFlexGroup
+            justifyContent="flexEnd"
           >
-            <EuiFlexGroup
-              justifyContent="flexEnd"
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+              <EuiFlexItem
+                grow={false}
               >
-                <EuiFlexItem
-                  grow={false}
-                >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  />
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiFlyoutFooter>
-      </Memo()>
-    </Connect(Component)>
-  </CasesContextMock>
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                />
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+        </div>
+      </EuiFlyoutFooter>
+    </Memo()>
+  </Connect(Component)>
 </EventDetailsPanelComponent>
 `;
 
@@ -380,313 +371,6 @@ Array [
         runtimeMappings={Object {}}
         tabType="query"
         timelineId="test"
-      >
-        <CasesContextMock
-          owner={
-            Array [
-              "securitySolution",
-            ]
-          }
-          userCanCrud={false}
-        >
-          <EuiFlyoutHeader
-            hasBorder={false}
-          >
-            <div
-              className="euiFlyoutHeader"
-            >
-              <ExpandableEventTitle
-                isAlert={false}
-                loading={true}
-                ruleName=""
-                timestamp=""
-              >
-                <Styled(EuiFlexGroup)
-                  gutterSize="none"
-                  justifyContent="spaceBetween"
-                  wrap={true}
-                >
-                  <EuiFlexGroup
-                    className="c0"
-                    gutterSize="none"
-                    justifyContent="spaceBetween"
-                    wrap={true}
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
-                    >
-                      <EuiFlexItem
-                        grow={false}
-                      >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                        />
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </Styled(EuiFlexGroup)>
-              </ExpandableEventTitle>
-            </div>
-          </EuiFlyoutHeader>
-          <Styled(EuiFlyoutBody)>
-            <EuiFlyoutBody
-              className="c1"
-            >
-              <div
-                className="euiFlyoutBody c1"
-              >
-                <div
-                  className="euiFlyoutBody__overflow"
-                  tabIndex={0}
-                >
-                  <div
-                    className="euiFlyoutBody__overflowContent"
-                  >
-                    <ExpandableEvent
-                      browserFields={Object {}}
-                      detailsData={null}
-                      event={
-                        Object {
-                          "eventId": "my-id",
-                          "indexName": "my-index",
-                        }
-                      }
-                      handleOnEventClosed={[Function]}
-                      hostRisk={null}
-                      isAlert={false}
-                      isDraggable={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)>
-          <Connect(Component)
-            detailsData={null}
-            detailsEcsData={null}
-            expandedEvent={
-              Object {
-                "eventId": "my-id",
-                "indexName": "my-index",
-              }
-            }
-            handleOnEventClosed={[Function]}
-            isHostIsolationPanelOpen={false}
-            loadingEventDetails={true}
-            onAddIsolationStatusClick={[Function]}
-            refetchFlyoutData={[Function]}
-            timelineId="test"
-          >
-            <Memo()
-              detailsData={null}
-              detailsEcsData={null}
-              dispatch={[Function]}
-              expandedEvent={
-                Object {
-                  "eventId": "my-id",
-                  "indexName": "my-index",
-                }
-              }
-              globalQuery={Array []}
-              handleOnEventClosed={[Function]}
-              isHostIsolationPanelOpen={false}
-              loadingEventDetails={true}
-              onAddIsolationStatusClick={[Function]}
-              refetchFlyoutData={[Function]}
-              timelineId="test"
-              timelineQuery={
-                Object {
-                  "id": "",
-                  "inspect": null,
-                  "isInspected": false,
-                  "loading": false,
-                  "refetch": null,
-                  "selectedInspectIndex": 0,
-                }
-              }
-            >
-              <EuiFlyoutFooter
-                data-test-subj="side-panel-flyout-footer"
-              >
-                <div
-                  className="euiFlyoutFooter"
-                  data-test-subj="side-panel-flyout-footer"
-                >
-                  <EuiFlexGroup
-                    justifyContent="flexEnd"
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-                    >
-                      <EuiFlexItem
-                        grow={false}
-                      >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                        />
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </div>
-              </EuiFlyoutFooter>
-            </Memo()>
-          </Connect(Component)>
-        </CasesContextMock>
-      </EventDetailsPanelComponent>
-    </div>
-  </EuiFlyout>,
-  .c0 {
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  margin-top: 8px;
-}
-
-.c1 .euiFlyoutBody__overflow {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-}
-
-.c1 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-  padding: 0 16px 16px;
-}
-
-<div
-    data-eui="EuiFlyout"
-    data-test-subj="timeline:details-panel:flyout"
-    role="dialog"
-  >
-    <button
-      aria-label="Close this dialog"
-      data-test-subj="euiFlyoutCloseButton"
-      onClick={[Function]}
-      type="button"
-    />
-    <EventDetailsPanelComponent
-      browserFields={Object {}}
-      docValueFields={Array []}
-      expandedEvent={
-        Object {
-          "eventId": "my-id",
-          "indexName": "my-index",
-        }
-      }
-      handleOnEventClosed={[Function]}
-      isDraggable={false}
-      isFlyoutView={true}
-      runtimeMappings={Object {}}
-      tabType="query"
-      timelineId="test"
-    >
-      <CasesContextMock
-        owner={
-          Array [
-            "securitySolution",
-          ]
-        }
-        userCanCrud={false}
       >
         <EuiFlyoutHeader
           hasBorder={false}
@@ -922,7 +606,296 @@ Array [
             </EuiFlyoutFooter>
           </Memo()>
         </Connect(Component)>
-      </CasesContextMock>
+      </EventDetailsPanelComponent>
+    </div>
+  </EuiFlyout>,
+  .c0 {
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  margin-top: 8px;
+}
+
+.c1 .euiFlyoutBody__overflow {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+}
+
+.c1 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  padding: 0 16px 16px;
+}
+
+<div
+    data-eui="EuiFlyout"
+    data-test-subj="timeline:details-panel:flyout"
+    role="dialog"
+  >
+    <button
+      aria-label="Close this dialog"
+      data-test-subj="euiFlyoutCloseButton"
+      onClick={[Function]}
+      type="button"
+    />
+    <EventDetailsPanelComponent
+      browserFields={Object {}}
+      docValueFields={Array []}
+      expandedEvent={
+        Object {
+          "eventId": "my-id",
+          "indexName": "my-index",
+        }
+      }
+      handleOnEventClosed={[Function]}
+      isDraggable={false}
+      isFlyoutView={true}
+      runtimeMappings={Object {}}
+      tabType="query"
+      timelineId="test"
+    >
+      <EuiFlyoutHeader
+        hasBorder={false}
+      >
+        <div
+          className="euiFlyoutHeader"
+        >
+          <ExpandableEventTitle
+            isAlert={false}
+            loading={true}
+            ruleName=""
+            timestamp=""
+          >
+            <Styled(EuiFlexGroup)
+              gutterSize="none"
+              justifyContent="spaceBetween"
+              wrap={true}
+            >
+              <EuiFlexGroup
+                className="c0"
+                gutterSize="none"
+                justifyContent="spaceBetween"
+                wrap={true}
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
+                >
+                  <EuiFlexItem
+                    grow={false}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                    />
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </Styled(EuiFlexGroup)>
+          </ExpandableEventTitle>
+        </div>
+      </EuiFlyoutHeader>
+      <Styled(EuiFlyoutBody)>
+        <EuiFlyoutBody
+          className="c1"
+        >
+          <div
+            className="euiFlyoutBody c1"
+          >
+            <div
+              className="euiFlyoutBody__overflow"
+              tabIndex={0}
+            >
+              <div
+                className="euiFlyoutBody__overflowContent"
+              >
+                <ExpandableEvent
+                  browserFields={Object {}}
+                  detailsData={null}
+                  event={
+                    Object {
+                      "eventId": "my-id",
+                      "indexName": "my-index",
+                    }
+                  }
+                  handleOnEventClosed={[Function]}
+                  hostRisk={null}
+                  isAlert={false}
+                  isDraggable={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)>
+      <Connect(Component)
+        detailsData={null}
+        detailsEcsData={null}
+        expandedEvent={
+          Object {
+            "eventId": "my-id",
+            "indexName": "my-index",
+          }
+        }
+        handleOnEventClosed={[Function]}
+        isHostIsolationPanelOpen={false}
+        loadingEventDetails={true}
+        onAddIsolationStatusClick={[Function]}
+        refetchFlyoutData={[Function]}
+        timelineId="test"
+      >
+        <Memo()
+          detailsData={null}
+          detailsEcsData={null}
+          dispatch={[Function]}
+          expandedEvent={
+            Object {
+              "eventId": "my-id",
+              "indexName": "my-index",
+            }
+          }
+          globalQuery={Array []}
+          handleOnEventClosed={[Function]}
+          isHostIsolationPanelOpen={false}
+          loadingEventDetails={true}
+          onAddIsolationStatusClick={[Function]}
+          refetchFlyoutData={[Function]}
+          timelineId="test"
+          timelineQuery={
+            Object {
+              "id": "",
+              "inspect": null,
+              "isInspected": false,
+              "loading": false,
+              "refetch": null,
+              "selectedInspectIndex": 0,
+            }
+          }
+        >
+          <EuiFlyoutFooter
+            data-test-subj="side-panel-flyout-footer"
+          >
+            <div
+              className="euiFlyoutFooter"
+              data-test-subj="side-panel-flyout-footer"
+            >
+              <EuiFlexGroup
+                justifyContent="flexEnd"
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
+                  <EuiFlexItem
+                    grow={false}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                    />
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </div>
+          </EuiFlyoutFooter>
+        </Memo()>
+      </Connect(Component)>
     </EventDetailsPanelComponent>
   </div>,
 ]