[Security Solution][Detection Engine] EUI Tech Debt - Removes references to static EuiTheme variables

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx

@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import type { ExpressionColor } from '@elastic/eui/src/components/expression/expression';
 import type { EuiFacetGroupLayout } from '@elastic/eui/src/components/facet/facet_group';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { ListTypeText, ViewerStatus } from '../types';
 import * as i18n from '../translations';
 import illustration from '../assets/images/illustration_product_no_results_magnifying_glass.svg';
@@ -33,10 +32,6 @@ interface EmptyViewerStateProps {
   onEmptyButtonStateClick?: () => void | null;
 }
 
-const panelCss = css`
-  margin: ${euiThemeVars.euiSizeL} 0;
-  padding: ${euiThemeVars.euiSizeL} 0;
-`;
 const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
   title,
   body,
@@ -47,6 +42,10 @@ const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
   onEmptyButtonStateClick,
 }) => {
   const { euiTheme } = useEuiTheme();
+  const panelCss = css`
+    margin: ${euiTheme.size.l} 0;
+    padding: ${euiTheme.size.l} 0;
+  `;
 
   const euiEmptyPromptProps = useMemo(() => {
     switch (viewerStatus) {

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/index.tsx

@@ -6,13 +6,9 @@
  */
 
 import React, { ElementType, FC, memo } from 'react';
-import { EuiExpression, EuiToken, EuiFlexGroup } from '@elastic/eui';
+import { EuiExpression, EuiToken, EuiFlexGroup, useEuiTheme, EuiFlexItem } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
-import {
-  nestedGroupSpaceCss,
-  valueContainerCss,
-  expressionContainerCss,
-} from '../conditions.styles';
 import type { Entry } from '../types';
 import * as i18n from '../../translations';
 import { getValue, getValueExpression } from './entry_content.helper';
@@ -31,49 +27,49 @@ export const EntryContent: FC<EntryContentProps> = memo(
     const value = getValue(entry);
     const operator = 'operator' in entry ? entry.operator : '';
 
+    const { euiTheme } = useEuiTheme();
+    const nestedGroupSpaceStyles = css`
+      margin-left: ${euiTheme.size.l};
+      margin-bottom: ${euiTheme.size.xs};
+      padding-top: ${euiTheme.size.xs};
+    `;
+    const valueContainerStyles = css`
+      flex-direction: row;
+    `;
+
     const entryKey = `${field}${type}${value}${index}`;
     return (
       <div data-test-subj={`${dataTestSubj || ''}${entryKey}EntryContent`} key={entryKey}>
-        <div css={expressionContainerCss}>
-          {isNestedEntry ? (
-            <EuiFlexGroup
-              responsive
-              css={nestedGroupSpaceCss}
-              direction="row"
-              alignItems="center"
-              gutterSize="m"
-              data-test-subj={`${dataTestSubj || ''}NestedEntry`}
-            >
-              <EuiToken data-test-subj="nstedEntryIcon" iconType="tokenNested" size="s" />
-
-              <div css={valueContainerCss}>
-                <EuiExpression description="" value={field} color="subdued" />
-                {getValueExpression(
-                  type as ListOperatorTypeEnum,
-                  operator,
-                  value,
-                  showValueListModal
-                )}
-              </div>
-            </EuiFlexGroup>
-          ) : (
-            <>
-              <EuiExpression
-                description={index === 0 ? '' : i18n.CONDITION_AND}
-                value={field}
-                color={index === 0 ? 'primary' : 'subdued'}
-                data-test-subj={`${dataTestSubj || ''}SingleEntry`}
-              />
-
+        {isNestedEntry ? (
+          <EuiFlexGroup
+            css={nestedGroupSpaceStyles}
+            responsive={false}
+            alignItems="center"
+            gutterSize="l"
+            data-test-subj={`${dataTestSubj || ''}NestedEntry`}
+          >
+            <EuiToken data-test-subj="nstedEntryIcon" iconType="tokenNested" size="s" />
+            <EuiFlexItem css={valueContainerStyles}>
+              <EuiExpression description="" value={field} color="subdued" />
               {getValueExpression(
                 type as ListOperatorTypeEnum,
                 operator,
                 value,
                 showValueListModal
               )}
-            </>
-          )}
-        </div>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          <>
+            <EuiExpression
+              description={index === 0 ? '' : i18n.CONDITION_AND}
+              value={field}
+              color={index === 0 ? 'primary' : 'subdued'}
+              data-test-subj={`${dataTestSubj || ''}SingleEntry`}
+            />
+            {getValueExpression(type as ListOperatorTypeEnum, operator, value, showValueListModal)}
+          </>
+        )}
       </div>
     );
   }

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/details_info/index.tsx

@@ -6,9 +6,8 @@
  */
 
 import React, { memo } from 'react';
-import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import * as i18n from '../../translations';
 
 interface MetaInfoDetailsProps {
@@ -18,11 +17,13 @@ interface MetaInfoDetailsProps {
   dataTestSubj?: string;
 }
 
-const euiBadgeFontFamily = css`
-  font-family: ${euiThemeVars.euiFontFamily};
-`;
 export const MetaInfoDetails = memo<MetaInfoDetailsProps>(
   ({ label, lastUpdate, lastUpdateValue, dataTestSubj }) => {
+    const { euiTheme } = useEuiTheme();
+    const euiBadgeFontFamily = css`
+      font-family: ${euiTheme.font.family};
+    `;
+
     return (
       <EuiFlexGroup
         data-test-subj={`${dataTestSubj || ''}metaInfoDetails`}

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_items/exception_items.test.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 
+import { EuiThemeProvider, Pagination } from '@elastic/eui';
 import { getExceptionListItemSchemaMock } from '../mocks/exception_list_item_schema.mock';
 import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
 
@@ -15,7 +16,6 @@ import { ExceptionItems } from '.';
 import { ViewerStatus } from '../types';
 import { fireEvent, render } from '@testing-library/react';
 import { ruleReferences } from '../mocks/rule_references.mock';
-import { Pagination } from '@elastic/eui';
 import { mockGetFormattedComments } from '../mocks/comments.mock';
 import { securityLinkAnchorComponentMock } from '../mocks/security_link_component.mock';
 import { MockedShowValueListModal } from '../mocks/value_list_modal.mock';
@@ -156,7 +156,8 @@ describe('ExceptionsViewerItems', () => {
           exceptionsUtilityComponent={() => null}
           getFormattedComments={() => []}
           showValueListModal={MockedShowValueListModal}
-        />
+        />,
+        { wrapper: EuiThemeProvider }
       );
       expect(wrapper.getByTestId('exceptionsContainer')).toBeInTheDocument();
       fireEvent.click(wrapper.getByTestId('exceptionItemCardMetaInfoEmptyButton'));

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { ElementType } from 'react';
-import { css } from '@emotion/react';
 import type { FC } from 'react';
 import { EuiCommentProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
@@ -16,7 +15,6 @@ import type {
   ExceptionListTypeEnum,
 } from '@kbn/securitysolution-io-ts-list-types';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { EmptyViewerState, ExceptionItemCard, Pagination, PaginationProps } from '../..';
 
 import type {
@@ -26,13 +24,6 @@ import type {
   GetExceptionItemProps,
 } from '../types';
 
-const exceptionItemCss = css`
-  margin: ${euiThemeVars.euiSize} 0;
-  &div:first-child {
-    margin: ${euiThemeVars.euiSizeXS} 0 ${euiThemeVars.euiSize};
-  }
-`;
-
 interface ExceptionItemsProps {
   lastUpdated: string | number | null;
   viewerStatus: ViewerStatus;
@@ -98,13 +89,12 @@ const ExceptionItemsComponent: FC<ExceptionItemsProps> = ({
   return (
     <>
       <ExceptionsUtility pagination={pagination} lastUpdated={lastUpdated} />
-      <EuiFlexGroup direction="column" gutterSize="none" className="eui-yScrollWithShadows">
+      <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem grow={false}>
           <EuiFlexGroup
-            css={exceptionItemCss}
             data-test-subj={`${dataTestSubj || ''}exceptionsContainer`}
             direction="column"
-            gutterSize="s"
+            gutterSize="m"
           >
             {exceptions.map((exception) => (
               <EuiFlexItem

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/generate_linked_rules_menu_item.test.tsx

@@ -6,6 +6,7 @@
  */
 
 import { render } from '@testing-library/react';
+import { EuiThemeProvider } from '@elastic/eui';
 import { ReactElement, ElementType } from 'react';
 import { generateLinkedRulesMenuItems } from '.';
 import { rules } from '../mocks/rule_references.mock';
@@ -43,7 +44,9 @@ describe('generateLinedRulesMenuItems', () => {
     }) as ReactElement[];
 
     result.forEach((link) => {
-      const wrapper = render(link);
+      const wrapper = render(link, {
+        wrapper: EuiThemeProvider,
+      });
       expect(wrapper.container).toMatchSnapshot();
       expect(wrapper.getByTestId('generateLinedRulesMenuItemsTestActionItem1a2b3c'));
       expect(wrapper.getByTestId('generateLinedRulesMenuItemsTestLeftIcon'));
@@ -52,7 +55,7 @@ describe('generateLinedRulesMenuItems', () => {
   it('should render the second linked rule and apply the css when the length is > 1', () => {
     const result: ReactElement[] = getSecurityLinkAction(dataTestSubj);
 
-    const wrapper = render(result[1]);
+    const wrapper = render(result[1], { wrapper: EuiThemeProvider });
     expect(wrapper.container).toMatchSnapshot();
     expect(wrapper.getByTestId('generateLinedRulesMenuItemsTestActionItem2a2b3c'));
   });