From 241318dc92edf67fd4248204079ed9a005dad9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?= <alberto.blazquez@elastic.co>
Date: Wed, 27 Nov 2024 15:34:51 +0100
Subject: [PATCH] Replace `style` with `css` prop in CSP package

---
 .../graph/src/components/edge/deafult_edge.stories.tsx |  4 ++--
 .../graph/src/components/edge/default_edge.tsx         |  4 +++-
 .../graph/src/components/edge/styles.tsx               |  2 +-
 .../graph/src/components/node/diamond_node.tsx         |  4 ++--
 .../graph/src/components/node/edge_group_node.tsx      | 10 +++++-----
 .../graph/src/components/node/ellipse_node.tsx         |  4 ++--
 .../graph/src/components/node/hexagon_node.tsx         |  4 ++--
 .../graph/src/components/node/label_node.tsx           |  4 ++--
 .../graph/src/components/node/pentagon_node.tsx        |  4 ++--
 .../graph/src/components/node/rectangle_node.tsx       |  4 ++--
 .../graph/src/components/node/styles.tsx               |  5 +++--
 11 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx
index 4d6c689dd643b..be270d5b2b0c3 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/deafult_edge.stories.tsx
@@ -48,8 +48,8 @@ const nodeTypes = {
     };
     return (
       <div>
-        <Handle type="source" position={Position.Right} style={handleStyle} />
-        <Handle type="target" position={Position.Left} style={handleStyle} />
+        <Handle type="source" position={Position.Right} css={handleStyle} />
+        <Handle type="target" position={Position.Left} css={handleStyle} />
         {props.data.label}
       </div>
     );
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
index 898e12b5b4c01..5668124a8c452 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
@@ -47,8 +47,10 @@ export function DefaultEdge({
     <>
       <BaseEdge
         path={edgePath}
-        style={{
+        css={{
           stroke: euiTheme.colors[color],
+        }}
+        css={{
           strokeDasharray: '2,2',
         }}
         markerEnd={
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
index 58ecea3bc3bea..5a3e2f8b72b21 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx
@@ -128,7 +128,7 @@ export const SvgDefsMarker = () => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <svg css={{ position: 'absolute', width: 0, height: 0 }}>
       <defs>
         <Marker id="primary" color={euiTheme.colors.primary} />
         <Marker id="danger" color={euiTheme.colors.danger} />
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/diamond_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/diamond_node.tsx
index 75ad989b625e8..ac9d974cb01a3 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/diamond_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/diamond_node.tsx
@@ -70,14 +70,14 @@ export const DiamondNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
index 97b8928c421e1..ee3975625381b 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
@@ -16,21 +16,21 @@ export const EdgeGroupNode: React.FC<NodeProps> = memo((props: NodeProps) => {
     <>
       <NodeResizeControl
         position="right"
-        style={{ borderColor: 'transparent', background: 'transparent' }}
+        css={{ borderColor: 'transparent', background: 'transparent' }}
       >
         <Handle
           type="target"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="outside"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeResizeControl>
       <Handle
@@ -38,14 +38,14 @@ export const EdgeGroupNode: React.FC<NodeProps> = memo((props: NodeProps) => {
         isConnectable={false}
         position={Position.Left}
         id="inside"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
       <Handle
         type="target"
         isConnectable={false}
         position={Position.Left}
         id="in"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
     </>
   );
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/ellipse_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/ellipse_node.tsx
index c9bd363130dca..92c358d7cb24f 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/ellipse_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/ellipse_node.tsx
@@ -70,14 +70,14 @@ export const EllipseNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/hexagon_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/hexagon_node.tsx
index 9d155999e76ca..e6c4738fbf66e 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/hexagon_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/hexagon_node.tsx
@@ -70,14 +70,14 @@ export const HexagonNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/label_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/label_node.tsx
index 2f23e5ab07513..dac24d38b0bdf 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/label_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/label_node.tsx
@@ -24,14 +24,14 @@ export const LabelNode: React.FC<NodeProps> = memo((props: NodeProps) => {
         isConnectable={false}
         position={Position.Left}
         id="in"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
       <Handle
         type="source"
         isConnectable={false}
         position={Position.Right}
         id="out"
-        style={HandleStyleOverride}
+        css={HandleStyleOverride}
       />
     </LabelNodeContainer>
   );
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/pentagon_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/pentagon_node.tsx
index f2745cef7ec80..da2a60d1b6da2 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/pentagon_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/pentagon_node.tsx
@@ -75,14 +75,14 @@ export const PentagonNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/rectangle_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/rectangle_node.tsx
index f85b102c7e445..702f024c1fec8 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/rectangle_node.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/rectangle_node.tsx
@@ -70,14 +70,14 @@ export const RectangleNode: React.FC<NodeProps> = memo((props: NodeProps) => {
           isConnectable={false}
           position={Position.Left}
           id="in"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
         <Handle
           type="source"
           isConnectable={false}
           position={Position.Right}
           id="out"
-          style={HandleStyleOverride}
+          css={HandleStyleOverride}
         />
       </NodeShapeContainer>
       <NodeLabel>{Boolean(label) ? label : id}</NodeLabel>
diff --git a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
index 74b3f3ebe0156..2f590120ce493 100644
--- a/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
+++ b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
+import { Interpolation, Theme } from '@emotion/react';
 import {
   type EuiIconProps,
   type _EuiBackgroundColor,
@@ -177,7 +178,7 @@ export const NodeIcon = ({ icon, color, x, y }: NodeIconProps) => {
   return (
     <foreignObject x={x} y={y} width="50" height="50">
       <div
-        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
+        css={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
       >
         <EuiIcon type={getSpanIcon(icon) ?? icon} size="l" color={color ?? 'primary'} />
       </div>
@@ -217,7 +218,7 @@ export const RoundEuiButtonIcon = styled(EuiButtonIcon)`
   }
 `;
 
-export const HandleStyleOverride: React.CSSProperties = {
+export const HandleStyleOverride: Interpolation<Theme> = {
   background: 'none',
   border: 'none',
 };