From c1addc9ff78c4b5bb97938eee257e3ba0a200109 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?=
 <albertoblaz@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:31:30 +0100
Subject: [PATCH] Replace `style` with `css` prop in Cloud Defend plugin
 (#202449)

## 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.

### 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)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../public/components/control_general_view_response/index.tsx | 2 +-
 x-pack/plugins/cloud_defend/public/pages/policies/index.tsx   | 4 ++--
 x-pack/plugins/cloud_defend/public/plugin.tsx                 | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/cloud_defend/public/components/control_general_view_response/index.tsx b/x-pack/plugins/cloud_defend/public/components/control_general_view_response/index.tsx
index 1c782973dd0ed..9511d11aa4f70 100644
--- a/x-pack/plugins/cloud_defend/public/components/control_general_view_response/index.tsx
+++ b/x-pack/plugins/cloud_defend/public/components/control_general_view_response/index.tsx
@@ -286,7 +286,7 @@ export const ControlGeneralViewResponse = ({
               <b>{i18n.actions}: </b>
               {response.actions?.map((action, i) => (
                 <span key={action}>
-                  <b style={{ color: action === 'block' ? colors.danger : colors.ink }}>
+                  <b css={{ color: action === 'block' ? colors.danger : colors.ink }}>
                     {action[0].toUpperCase() + action.slice(1)}
                   </b>
                   {i !== (response.actions?.length || 0) - 1 && ', '}
diff --git a/x-pack/plugins/cloud_defend/public/pages/policies/index.tsx b/x-pack/plugins/cloud_defend/public/pages/policies/index.tsx
index c732be5421a17..d9890830ffcda 100644
--- a/x-pack/plugins/cloud_defend/public/pages/policies/index.tsx
+++ b/x-pack/plugins/cloud_defend/public/pages/policies/index.tsx
@@ -87,7 +87,7 @@ const TotalIntegrationsCount = ({
   pageCount,
   totalCount,
 }: Record<'pageCount' | 'totalCount', number>) => (
-  <EuiText size="xs" style={{ marginLeft: 8 }}>
+  <EuiText size="xs" css={{ marginLeft: 8 }}>
     <EuiTextColor color="subdued">
       <FormattedMessage
         id="xpack.cloudDefend.policies.totalIntegrationsCountMessage"
@@ -108,7 +108,7 @@ const SearchField = ({
 
   return (
     <EuiFlexGroup>
-      <EuiFlexItem grow={true} style={{ alignItems: 'flex-end' }}>
+      <EuiFlexItem grow={true} css={{ alignItems: 'flex-end' }}>
         <EuiFieldSearch
           fullWidth
           onSearch={setLocalValue}
diff --git a/x-pack/plugins/cloud_defend/public/plugin.tsx b/x-pack/plugins/cloud_defend/public/plugin.tsx
index 106ad3e47de78..43224794cddd6 100755
--- a/x-pack/plugins/cloud_defend/public/plugin.tsx
+++ b/x-pack/plugins/cloud_defend/public/plugin.tsx
@@ -71,7 +71,7 @@ export class CloudDefendPlugin
     const CloudDefendRouter = (props: CloudDefendRouterProps) => (
       <KibanaContextProvider services={{ ...core, ...plugins }}>
         <RedirectAppLinks coreStart={core}>
-          <div style={{ width: '100%', height: '100%' }}>
+          <div css={{ width: '100%', height: '100%' }}>
             <SetupContext.Provider value={{ isCloudEnabled: this.isCloudEnabled }}>
               <Router {...props} />
             </SetupContext.Provider>