[8.x] Replace `style` with `css` prop in Cloud De…

…fend plugin (#202449) (#203809)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Replace `style` with `css` prop in Cloud Defend
plugin (#202449)](#202449)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alberto
Blázquez","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-11T14:31:30Z","message":"Replace
`style` with `css` prop in Cloud Defend plugin (#202449)\n\n##
Summary\r\n\r\nPart of the resolution of this issue: \r\n-
https://github.com/elastic/kibana/issues/149246\r\n\r\nRemoves the
`style` prop in React components and elements to avoid using\r\ninline
styles. Instead, it uses now the `emotion.css` prop to\r\ndynamically
attach all styles to the native `class` attribute.\r\n\r\n###
Motivation\r\n\r\nUsing inline styles at scale causes a performance
penalty at rendering\r\ntime. It's way more efficient to attach styles
to a single or several\r\nclassnames instead.\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [x] The PR description includes the appropriate Release
Notes section,\r\nand the correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"c1addc9ff78c4b5bb97938eee257e3ba0a200109","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","backport:version","v8.18.0"],"title":"Replace
`style` with `css` prop in Cloud Defend
plugin","number":202449,"url":"https://github.com/elastic/kibana/pull/202449","mergeCommit":{"message":"Replace
`style` with `css` prop in Cloud Defend plugin (#202449)\n\n##
Summary\r\n\r\nPart of the resolution of this issue: \r\n-
https://github.com/elastic/kibana/issues/149246\r\n\r\nRemoves the
`style` prop in React components and elements to avoid using\r\ninline
styles. Instead, it uses now the `emotion.css` prop to\r\ndynamically
attach all styles to the native `class` attribute.\r\n\r\n###
Motivation\r\n\r\nUsing inline styles at scale causes a performance
penalty at rendering\r\ntime. It's way more efficient to attach styles
to a single or several\r\nclassnames instead.\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [x] The PR description includes the appropriate Release
Notes section,\r\nand the correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"c1addc9ff78c4b5bb97938eee257e3ba0a200109"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202449","number":202449,"mergeCommit":{"message":"Replace
`style` with `css` prop in Cloud Defend plugin (#202449)\n\n##
Summary\r\n\r\nPart of the resolution of this issue: \r\n-
https://github.com/elastic/kibana/issues/149246\r\n\r\nRemoves the
`style` prop in React components and elements to avoid using\r\ninline
styles. Instead, it uses now the `emotion.css` prop to\r\ndynamically
attach all styles to the native `class` attribute.\r\n\r\n###
Motivation\r\n\r\nUsing inline styles at scale causes a performance
penalty at rendering\r\ntime. It's way more efficient to attach styles
to a single or several\r\nclassnames instead.\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [x] The PR description includes the appropriate Release
Notes section,\r\nand the correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"c1addc9ff78c4b5bb97938eee257e3ba0a200109"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alberto Blázquez <[email protected]>

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 && ', '}

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}

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>