[Security Solution][Resolver]Add backdrop to pills (#78625)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: bkimmel

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

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { htmlIdGenerator, EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { NodeSubMenu } from './submenu';
+import { NodeSubMenu } from './styles';
 import { applyMatrix3 } from '../models/vector2';
 import { Vector2, Matrix3, ResolverState } from '../types';
 import { SafeResolverEvent } from '../../../common/endpoint/types';

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

@@ -5,8 +5,62 @@
  */
 
 import { EuiPanel, EuiCallOut } from '@elastic/eui';
-
 import styled from 'styled-components';
+import { NodeSubMenuComponents } from './submenu';
+
+/**
+ * See `NodeSubMenuComponents`
+ */
+export const NodeSubMenu = styled(NodeSubMenuComponents)`
+  margin: 2px 0 0 0;
+  padding: 0;
+  border: none;
+  display: flex;
+  flex-flow: column;
+
+  &.options {
+    font-size: 0.8rem;
+    display: flex;
+    flex-flow: row wrap;
+    background: transparent;
+    position: absolute;
+    top: 4.5em;
+    contain: content;
+    width: 12em;
+    z-index: 2;
+    backdrop-filter: blur(5px);
+  }
+
+  &.options .item {
+    margin: 0.25ch 0.35ch 0.35ch 0;
+    padding: 0.35em 0.5em;
+    height: fit-content;
+    width: fit-content;
+    border-radius: 2px;
+    line-height: 0.8;
+  }
+
+  &.options .item button {
+    appearance: none;
+    height: fit-content;
+    width: fit-content;
+    line-height: 0.8;
+    outline-style: none;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  &.options .item button:focus {
+    outline-style: none;
+    border-color: transparent;
+    box-shadow: none;
+    text-decoration: underline;
+  }
+
+  &.options .item button:active {
+    transform: scale(0.95);
+  }
+`;
 
 /**
  * The top level DOM element for Resolver

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

@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { EuiI18nNumber } from '@elastic/eui';
-import styled from 'styled-components';
 import { ResolverNodeStats } from '../../../common/endpoint/types';
 import { useRelatedEventByCategoryNavigation } from './use_related_event_by_category_navigation';
 import { useColors } from './use_colors';
@@ -43,11 +42,10 @@ interface ResolverSubmenuOption {
 export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string;
 
 /**
- * A Submenu to be displayed in one of two forms:
- *   1) Provided a collection of `optionsWithActions`: it will call `menuAction` then - if and when menuData becomes available - display each item with an optional prefix and call the supplied action for the options when that option is clicked.
- *   2) Provided `optionsWithActions` is undefined, it will call the supplied `menuAction` when its host button is clicked.
+ * A Submenu that displays a collection of "pills" for each related event
+ * category it has events for.
  */
-const NodeSubMenuComponents = React.memo(
+export const NodeSubMenuComponents = React.memo(
   ({
     className,
     nodeID,
@@ -117,53 +115,3 @@ const NodeSubMenuComponents = React.memo(
     );
   }
 );
-
-export const NodeSubMenu = styled(NodeSubMenuComponents)`
-  margin: 2px 0 0 0;
-  padding: 0;
-  border: none;
-  display: flex;
-  flex-flow: column;
-
-  &.options {
-    font-size: 0.8rem;
-    display: flex;
-    flex-flow: row wrap;
-    background: transparent;
-    position: absolute;
-    top: 4.5em;
-    contain: content;
-    width: 12em;
-    z-index: 2;
-  }
-
-  &.options .item {
-    margin: 0.25ch 0.35ch 0.35ch 0;
-    padding: 0.35em 0.5em;
-    height: fit-content;
-    width: fit-content;
-    border-radius: 2px;
-    line-height: 0.8;
-  }
-
-  &.options .item button {
-    appearance: none;
-    height: fit-content;
-    width: fit-content;
-    line-height: 0.8;
-    outline-style: none;
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  &.options .item button:focus {
-    outline-style: none;
-    border-color: transparent;
-    box-shadow: none;
-    text-decoration: underline;
-  }
-
-  &.options .item button:active {
-    transform: scale(0.95);
-  }
-`;