[Security Solution] Eui visual refresh - make palettes theme aware (e…

…lastic#205873)

## Summary

This PR resolves elastic#201882 by
making sure that EUI palette functions are called during component
re-renders in Security Solution.

### Testing

Please verify if visualizations are displayed properly.

Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
`uiSettings.experimental.themeSwitcherEnabled: true`

Run Kibana with the following environment variable set:
`KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start`

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/__mocks__/mock.ts

@@ -8,6 +8,7 @@
 import type { IndexPatternMapping } from '../types';
 import type { IndexPatternSavedObject } from '../../../../../common/hooks/types';
 import { LAYER_TYPE } from '@kbn/maps-plugin/common';
+import type { EuiThemeComputed } from '@elastic/eui';
 
 export const mockIndexPatternIds: IndexPatternMapping[] = [
   { title: 'filebeat-*', id: '8c7323ac-97ad-4b53-ac0a-40f8f691a918' },
@@ -50,11 +51,11 @@ export const mockSourceLayer = {
     properties: {
       fillColor: {
         type: 'STATIC',
-        options: { color: '#6092C0' },
+        options: { color: 'euiColorVis4' },
       },
       lineColor: {
         type: 'STATIC',
-        options: { color: '#FFFFFF' },
+        options: { color: 'euiColorVisNeutral0' },
       },
       lineWidth: { type: 'STATIC', options: { size: 2 } },
       iconSize: { type: 'STATIC', options: { size: 8 } },
@@ -108,11 +109,11 @@ export const mockDestinationLayer = {
     properties: {
       fillColor: {
         type: 'STATIC',
-        options: { color: '#D36086' },
+        options: { color: 'euiColorVis2' },
       },
       lineColor: {
         type: 'STATIC',
-        options: { color: '#FFFFFF' },
+        options: { color: 'euiColorVisNeutral0' },
       },
       lineWidth: { type: 'STATIC', options: { size: 2 } },
       iconSize: { type: 'STATIC', options: { size: 8 } },
@@ -164,11 +165,11 @@ export const mockClientLayer = {
     properties: {
       fillColor: {
         type: 'STATIC',
-        options: { color: '#6092C0' },
+        options: { color: 'euiColorVis4' },
       },
       lineColor: {
         type: 'STATIC',
-        options: { color: '#FFFFFF' },
+        options: { color: 'euiColorVisNeutral0' },
       },
       lineWidth: { type: 'STATIC', options: { size: 2 } },
       iconSize: { type: 'STATIC', options: { size: 8 } },
@@ -227,11 +228,11 @@ export const mockServerLayer = {
     properties: {
       fillColor: {
         type: 'STATIC',
-        options: { color: '#D36086' },
+        options: { color: 'euiColorVis2' },
       },
       lineColor: {
         type: 'STATIC',
-        options: { color: '#FFFFFF' },
+        options: { color: 'euiColorVisNeutral0' },
       },
       lineWidth: { type: 'STATIC', options: { size: 2 } },
       iconSize: { type: 'STATIC', options: { size: 8 } },
@@ -282,7 +283,7 @@ export const mockLineLayer = {
     properties: {
       fillColor: {
         type: 'STATIC',
-        options: { color: '#1EA593' },
+        options: { color: '#6092C0' },
       },
       lineColor: {
         type: 'STATIC',
@@ -347,7 +348,7 @@ export const mockClientServerLineLayer = {
     properties: {
       fillColor: {
         type: 'STATIC',
-        options: { color: '#1EA593' },
+        options: { color: '#6092C0' },
       },
       lineColor: {
         type: 'STATIC',
@@ -530,3 +531,13 @@ export const mockCommaFilebeatExclusionGlobIndexPattern: IndexPatternSavedObject
     title: 'filebeat-*,-filebeat-7.6.0*',
   },
 };
+
+export const mockEuiTheme: EuiThemeComputed<{}> = {
+  colors: {
+    vis: {
+      euiColorVisNeutral0: 'euiColorVisNeutral0',
+      euiColorVis4: 'euiColorVis4',
+      euiColorVis2: 'euiColorVis2',
+    },
+  },
+} as unknown as EuiThemeComputed<{}>;

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.test.tsx

@@ -201,7 +201,7 @@ describe('EmbeddedMapComponent', () => {
       </TestProviders>
     );
     await waitFor(() => {
-      const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][0];
+      const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][1];
       expect(dataViewArg).toEqual([filebeatDataView]);
     });
   });
@@ -221,7 +221,7 @@ describe('EmbeddedMapComponent', () => {
       </TestProviders>
     );
     await waitFor(() => {
-      const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][0];
+      const dataViewArg = (getLayerList as jest.Mock).mock.calls[0][1];
       expect(dataViewArg).toEqual([filebeatDataView]);
     });
     rerender(
@@ -231,7 +231,7 @@ describe('EmbeddedMapComponent', () => {
     );
     await waitFor(() => {
       // data view is updated with the returned embeddable.setLayerList callback, which is passesd getLayerList(dataViews)
-      const dataViewArg = (getLayerList as jest.Mock).mock.calls[1][0];
+      const dataViewArg = (getLayerList as jest.Mock).mock.calls[1][1];
       expect(dataViewArg).toEqual([filebeatDataView, packetbeatDataView]);
     });
   });

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx

@@ -7,7 +7,7 @@
 
 // embedded map v2
 
-import { EuiAccordion, EuiLink, EuiText } from '@elastic/eui';
+import { EuiAccordion, EuiLink, EuiText, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
@@ -103,6 +103,7 @@ export const EmbeddedMapComponent = ({
   setQuery,
   startDate,
 }: EmbeddedMapProps) => {
+  const { euiTheme } = useEuiTheme();
   const { services } = useKibana();
   const { storage } = services;
 
@@ -133,7 +134,7 @@ export const EmbeddedMapComponent = ({
         // ensures only index patterns with maps fields are passed
         const goodDataViews = availableDataViews.filter((_, i) => apiResponse[i] ?? false);
         if (!canceled) {
-          setLayerList(getLayerList(goodDataViews));
+          setLayerList(getLayerList({ euiTheme }, goodDataViews));
         }
       } catch (e) {
         if (!canceled) {
@@ -149,7 +150,7 @@ export const EmbeddedMapComponent = ({
     return () => {
       canceled = true;
     };
-  }, [addError, availableDataViews, isFieldInIndexPattern]);
+  }, [addError, availableDataViews, euiTheme, isFieldInIndexPattern]);
 
   useEffect(() => {
     const dataViews = kibanaDataViews.filter((dataView) =>

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_config.test.ts

@@ -19,6 +19,7 @@ import {
   mockLineLayer,
   mockServerLayer,
   mockSourceLayer,
+  mockEuiTheme,
 } from './__mocks__/mock';
 
 jest.mock('uuid', () => {
@@ -28,27 +29,36 @@ jest.mock('uuid', () => {
   };
 });
 
+const layerProviderDependencies = { euiTheme: mockEuiTheme };
+
 describe('map_config', () => {
   describe('#getLayerList', () => {
     test('it returns the complete layerList with a source, destination, and line layer', () => {
-      const layerList = getLayerList(mockIndexPatternIds);
+      const layerList = getLayerList(layerProviderDependencies, mockIndexPatternIds);
       expect(layerList).toStrictEqual(mockLayerList);
     });
 
     test('it returns the complete layerList for multiple indices', () => {
-      const layerList = getLayerList([...mockIndexPatternIds, ...mockIndexPatternIds]);
+      const layerList = getLayerList(layerProviderDependencies, [
+        ...mockIndexPatternIds,
+        ...mockIndexPatternIds,
+      ]);
       expect(layerList).toStrictEqual(mockLayerListDouble);
     });
 
     test('it returns the complete layerList for multiple indices with custom layer mapping', () => {
-      const layerList = getLayerList([...mockIndexPatternIds, ...mockAPMIndexPatternIds]);
+      const layerList = getLayerList(layerProviderDependencies, [
+        ...mockIndexPatternIds,
+        ...mockAPMIndexPatternIds,
+      ]);
       expect(layerList).toStrictEqual(mockLayerListMixed);
     });
   });
 
   describe('#getSourceLayer', () => {
     test('it returns a source layer', () => {
       const layerList = getSourceLayer(
+        layerProviderDependencies,
         mockIndexPatternIds[0].title,
         mockIndexPatternIds[0].id,
         mockLayerGroup.id,
@@ -59,6 +69,7 @@ describe('map_config', () => {
 
     test('it returns a source layer for custom layer mapping', () => {
       const layerList = getSourceLayer(
+        layerProviderDependencies,
         mockAPMIndexPatternIds[0].title,
         mockAPMIndexPatternIds[0].id,
         mockLayerGroup.id,
@@ -71,6 +82,7 @@ describe('map_config', () => {
   describe('#getDestinationLayer', () => {
     test('it returns a destination layer', () => {
       const layerList = getDestinationLayer(
+        layerProviderDependencies,
         mockIndexPatternIds[0].title,
         mockIndexPatternIds[0].id,
         mockLayerGroup.id,
@@ -81,6 +93,7 @@ describe('map_config', () => {
 
     test('it returns a destination layer for custom layer mapping', () => {
       const layerList = getDestinationLayer(
+        layerProviderDependencies,
         mockAPMIndexPatternIds[0].title,
         mockAPMIndexPatternIds[0].id,
         mockLayerGroup.id,