From 468cd087be489a2d0e2cb0ddf7f4a345085b47a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?=
 <albertoblaz@users.noreply.github.com>
Date: Mon, 2 Dec 2024 18:58:18 +0100
Subject: [PATCH] Replace `style` with `css` prop in CSP package (#202013)

## Summary

Part of the resolution of this issue:
- https://github.com/elastic/kibana/issues/149246

Removes the `style` prop in React components and elements to avoid using
inline styles. Instead, it uses now the `emotion.css` prop to
dynamically attach all styles to the native `class` attribute.

### Motivation

Using inline styles at scale causes a performance penalty at rendering
time. It's way more efficient to attach styles to a single or several
classnames instead.

### Screenshots

<details><summary>Default Edge</summary>
<img width="1028" alt="Screenshot 2024-12-02 at 16 27 47"
src="https://github.com/user-attachments/assets/4c913a69-ee26-4cda-829c-2b26799ead81">

</details>

<details><summary>Graph Popovers</summary>
<img width="175" alt="Screenshot 2024-12-02 at 16 27 57"
src="https://github.com/user-attachments/assets/55054b05-9cb4-4ca7-a19a-319277d7961d">

</details>

<details><summary>Graph Stacked Edge Cases</summary>
<img width="1319" alt="Screenshot 2024-12-02 at 16 28 03"
src="https://github.com/user-attachments/assets/11ec7a03-e8cf-4090-9443-56288bf78a2c">
</details>


### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

- Minor risk with low impact and severity:
- Only risk is CSP graph nodes showing with a different background and
border
---
 .../graph/src/components/edge/default_edge.tsx                  | 2 ++
 .../graph/src/components/edge/styles.tsx                        | 2 +-
 .../graph/src/components/node/edge_group_node.tsx               | 2 +-
 .../graph/src/components/node/styles.tsx                        | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

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..6826c47b270ce 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
@@ -49,6 +49,8 @@ export function DefaultEdge({
         path={edgePath}
         style={{
           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/edge_group_node.tsx b/x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx
index 97b8928c421e1..a3dd064d16ab7 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,7 +16,7 @@ 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"
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..eed8b50c9038c 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
@@ -177,7 +177,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>