[Security Solution][Analyzer] Refactor styled panels (#188872)

## Summary

This PR is a small refactor of the styled panels in analyzer. Lifted the
wrapper up to the resolver level so that the panels can be reused
without styling. No UI change to the analyzer.

x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx

@@ -14,7 +14,6 @@ import type { EuiBreadcrumb, EuiBasicTableColumn, EuiSearchBarProps } from '@ela
 import { EuiSpacer, EuiText, EuiInMemoryTable } from '@elastic/eui';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { StyledPanel } from '../styles';
 import { BoldCode, StyledTime } from './styles';
 import { GeneratedText } from '../generated_text';
 import {
@@ -73,9 +72,7 @@ export const EventDetail = memo(function EventDetail({
   );
 
   return isLoading ? (
-    <StyledPanel hasBorder>
-      <PanelLoading id={id} />
-    </StyledPanel>
+    <PanelLoading id={id} />
   ) : event ? (
     <EventDetailContents
       id={id}
@@ -85,9 +82,7 @@ export const EventDetail = memo(function EventDetail({
       eventType={eventType}
     />
   ) : (
-    <StyledPanel hasBorder>
-      <PanelContentError id={id} translatedErrorMessage={eventDetailRequestError} />
-    </StyledPanel>
+    <PanelContentError id={id} translatedErrorMessage={eventDetailRequestError} />
   );
 });
 
@@ -122,7 +117,7 @@ const EventDetailContents = memo(function ({
   const nodeName = processEvent ? eventModel.processNameSafeVersion(processEvent) : null;
 
   return (
-    <StyledPanel hasBorder data-test-subj="resolver:panel:event-detail">
+    <div data-test-subj="resolver:panel:event-detail">
       <EventDetailBreadcrumbs
         id={id}
         nodeID={nodeID}
@@ -158,7 +153,7 @@ const EventDetailContents = memo(function ({
       </StyledDescriptiveName>
       <EuiSpacer size="l" />
       <EventDetailFields event={event} id={id} />
-    </StyledPanel>
+    </div>
   );
 });
 

x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx

@@ -37,7 +37,6 @@ import { CubeForProcess } from './cube_for_process';
 import type { SafeResolverEvent } from '../../../../common/endpoint/types';
 import { useCubeAssets } from '../use_cube_assets';
 import { PanelLoading } from './panel_loading';
-import { StyledPanel } from '../styles';
 import { useLinkProps } from '../use_link_props';
 import { useFormattedDate } from './use_formatted_date';
 import { PanelContentError } from './panel_content_error';
@@ -61,17 +60,11 @@ export const NodeDetail = memo(function ({ id, nodeID }: { id: string; nodeID: s
   );
 
   return nodeStatus === 'loading' ? (
-    <StyledPanel hasBorder>
-      <PanelLoading id={id} />
-    </StyledPanel>
+    <PanelLoading id={id} />
   ) : processEvent ? (
-    <StyledPanel hasBorder data-test-subj="resolver:panel:node-detail">
-      <NodeDetailView id={id} nodeID={nodeID} processEvent={processEvent} />
-    </StyledPanel>
+    <NodeDetailView id={id} nodeID={nodeID} processEvent={processEvent} />
   ) : (
-    <StyledPanel hasBorder>
-      <PanelContentError id={id} translatedErrorMessage={nodeDetailError} />
-    </StyledPanel>
+    <PanelContentError id={id} translatedErrorMessage={nodeDetailError} />
   );
 });
 
@@ -274,7 +267,7 @@ const NodeDetailView = memo(function ({
     },
   ];
   return (
-    <>
+    <div data-test-subj="resolver:panel:node-detail">
       <Breadcrumbs breadcrumbs={crumbs} />
       <EuiSpacer size="l" />
       <EuiTitle size="xs">
@@ -309,6 +302,6 @@ const NodeDetailView = memo(function ({
         columns={columns}
         sorting
       />
-    </>
+    </div>
   );
 });

x-pack/plugins/security_solution/public/resolver/view/panels/node_events.tsx

@@ -16,7 +16,6 @@ import { Breadcrumbs } from './breadcrumbs';
 import * as event from '../../../../common/endpoint/models/event';
 import type { EventStats } from '../../../../common/endpoint/types';
 import * as selectors from '../../store/selectors';
-import { StyledPanel } from '../styles';
 import { PanelLoading } from './panel_loading';
 import { useLinkProps } from '../use_link_props';
 import * as nodeDataModel from '../../models/node_data';
@@ -29,14 +28,10 @@ export function NodeEvents({ id, nodeID }: { id: string; nodeID: string }) {
   const nodeStats = useSelector((state: State) => selectors.nodeStats(state.analyzer[id])(nodeID));
 
   if (processEvent === undefined || nodeStats === undefined) {
-    return (
-      <StyledPanel hasBorder>
-        <PanelLoading id={id} />
-      </StyledPanel>
-    );
+    return <PanelLoading id={id} />;
   } else {
     return (
-      <StyledPanel hasBorder>
+      <>
         <NodeEventsBreadcrumbs
           id={id}
           nodeName={event.processNameSafeVersion(processEvent)}
@@ -45,7 +40,7 @@ export function NodeEvents({ id, nodeID }: { id: string; nodeID: string }) {
         />
         <EuiSpacer size="l" />
         <EventCategoryLinks id={id} nodeID={nodeID} relatedStats={nodeStats} />
-      </StyledPanel>
+      </>
     );
   }
 }

x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx

@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import { useSelector, useDispatch } from 'react-redux';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { StyledPanel } from '../styles';
 import { BoldCode, StyledTime } from './styles';
 import { Breadcrumbs } from './breadcrumbs';
 import * as eventModel from '../../../../common/endpoint/models/event';
@@ -56,43 +55,37 @@ export const NodeEventsInCategory = memo(function ({
   return (
     <>
       {isLoading ? (
-        <StyledPanel hasBorder>
-          <PanelLoading id={id} />
-        </StyledPanel>
-      ) : (
-        <StyledPanel hasBorder data-test-subj="resolver:panel:events-in-category">
-          {hasError || !node ? (
-            <EuiCallOut
-              title={i18n.translate(
-                'xpack.securitySolution.endpoint.resolver.panel.nodeEventsByType.errorPrimary',
-                {
-                  defaultMessage: 'Unable to load events.',
-                }
-              )}
-              color="danger"
-              iconType="warning"
-              data-test-subj="resolver:nodeEventsInCategory:error"
-            >
-              <p>
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.resolver.panel.nodeEventsByType.errorSecondary"
-                  defaultMessage="An error occurred when fetching the events."
-                />
-              </p>
-            </EuiCallOut>
-          ) : (
-            <>
-              <NodeEventsInCategoryBreadcrumbs
-                id={id}
-                nodeName={node.name}
-                eventCategory={eventCategory}
-                nodeID={nodeID}
-              />
-              <EuiSpacer size="l" />
-              <NodeEventList id={id} eventCategory={eventCategory} nodeID={nodeID} />
-            </>
+        <PanelLoading id={id} />
+      ) : hasError || !node ? (
+        <EuiCallOut
+          title={i18n.translate(
+            'xpack.securitySolution.endpoint.resolver.panel.nodeEventsByType.errorPrimary',
+            {
+              defaultMessage: 'Unable to load events.',
+            }
           )}
-        </StyledPanel>
+          color="danger"
+          iconType="warning"
+          data-test-subj="resolver:nodeEventsInCategory:error"
+        >
+          <p>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.panel.nodeEventsByType.errorSecondary"
+              defaultMessage="An error occurred when fetching the events."
+            />
+          </p>
+        </EuiCallOut>
+      ) : (
+        <div data-test-subj="resolver:panel:events-in-category">
+          <NodeEventsInCategoryBreadcrumbs
+            id={id}
+            nodeName={node.name}
+            eventCategory={eventCategory}
+            nodeID={nodeID}
+          />
+          <EuiSpacer size="l" />
+          <NodeEventList id={id} eventCategory={eventCategory} nodeID={nodeID} />
+        </div>
       )}
     </>
   );

x-pack/plugins/security_solution/public/resolver/view/panels/node_list.tsx

@@ -13,7 +13,6 @@ import type { EuiBasicTableColumn } from '@elastic/eui';
 import { EuiBadge, EuiButtonEmpty, EuiSpacer, EuiInMemoryTable } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { SideEffectContext } from '../side_effect_context';
-import { StyledPanel } from '../styles';
 import {
   StyledLabelTitle,
   StyledAnalyzedEvent,
@@ -123,7 +122,7 @@ export const NodeList = memo(({ id }: { id: string }) => {
   const showWarning = children === true || ancestors === true || generations === true;
   const rowProps = useMemo(() => ({ 'data-test-subj': 'resolver:node-list:item' }), []);
   return (
-    <StyledPanel hasBorder>
+    <>
       <Breadcrumbs breadcrumbs={breadcrumbs} />
       {showWarning && <LimitWarning numberDisplayed={numberOfProcesses} />}
       <EuiSpacer size="l" />
@@ -134,7 +133,7 @@ export const NodeList = memo(({ id }: { id: string }) => {
         columns={columns}
         sorting
       />
-    </StyledPanel>
+    </>
   );
 });
 

x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx

@@ -17,7 +17,7 @@ import { ProcessEventDot } from './process_event_dot';
 import { useCamera } from './use_camera';
 import { SymbolDefinitions } from './symbol_definitions';
 import { useStateSyncingActions } from './use_state_syncing_actions';
-import { StyledMapContainer, GraphContainer } from './styles';
+import { StyledMapContainer, GraphContainer, StyledPanel } from './styles';
 import * as nodeModel from '../../../common/endpoint/models/node';
 import { SideEffectContext } from './side_effect_context';
 import type { ResolverProps } from '../types';
@@ -162,7 +162,9 @@ export const ResolverWithoutProviders = React.memo(
                 );
               })}
             </GraphContainer>
-            <PanelRouter id={resolverComponentInstanceID} />
+            <StyledPanel hasBorder>
+              <PanelRouter id={resolverComponentInstanceID} />
+            </StyledPanel>
           </>
         ) : (
           <ResolverNoProcessEvents />