[Platform security] Replace SCSS with CSS in JS (Part 1 - Spaces plugin) (#214798)

## Summary

Part of #211652

Removed most SASS files from the Spaces plugin. (Full checklist on
parent issue)

Remaining file: 

`x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.scss`
This file requires a custom mixin that we'll need to migrate once this
PR: https://github.com/elastic/kibana/pull/214729/files lands. It
introduces a `cssUtils` file to ensure consistency in Kibana specific
mixins.

### How to test
Testing visual regression isn't super straightforward here. For my local
testing, i started two instances of Kibana (main and this branch)

On main:

- Start es:
```
yarn es snapshot --license=trial -E http.port=9400
```

- Start kibana with the following config (CLI or kibana.dev.yml)
``` 
server.port: 5602
elasticsearch.hosts: ["http://localhost:9400"]
```
Once started, in a private browsing window, you should have access to
Kibana on main on `localhost:5602`

On this PR:
Start ES and Kibana normally (Kibana should be available on
localhost:5601)

This PR contains changes to the following parts of the Spaces plugin:
- Copy Saved Objects to Space flyout
- Share Saved Objects to Space flyout
- Space selector screen
- Space editing screen
- Space selector drop down menu in Nav Bar

Ideally, you should see no visual regression between the two versions. 


## Screenshots

| Component | Main | PR |
|--------|--------|--------|
| Space Edit | <img width="300" alt="space_edit_main"
src="https://github.com/user-attachments/assets/786feeb7-5047-443c-bb63-41e90e31a82b"
/> | <img width="300" alt="space_edit_pr"
src="https://github.com/user-attachments/assets/975cc096-25d7-4bd5-804d-f82f65a908bf"
/> |
| Space selector nav bar | <img width="300"
alt="space_selector_nav_bar_main"
src="https://github.com/user-attachments/assets/c6c05d28-3dfa-43c2-9586-b66a24f990d6"
/> | <img width="317" alt="Screenshot 2025-03-20 at 09 11 50"
src="https://github.com/user-attachments/assets/277d3094-640b-4604-adc7-5c8465aeb21c"
/> |
| Share to space | <img width="300" alt="share_to_space_main"
src="https://github.com/user-attachments/assets/5782a314-66f7-4780-bcfb-b0a85cece035"
/> | <img width="300" alt="share_to_space_pr"
src="https://github.com/user-attachments/assets/73a48305-7fa7-4637-9856-60461cbad770"
/> |
| Copy to Space flyout | <img width="300" alt="copy_to_space_pr"
src="https://github.com/user-attachments/assets/54342ca2-b2e1-4844-a66f-fae512ff8910"
/> | <img width="300" alt="copy_to_space_main"
src="https://github.com/user-attachments/assets/a629f12a-75c4-4ba6-a7cf-cdeca1310ef3"
/> |
| Copy to Space confirmation | <img width="300"
alt="copy_to_space_confirmed_main"
src="https://github.com/user-attachments/assets/78f93d73-e789-487f-94c1-eebcef7ce183"
/> | <img width="300" alt="copy_to_space_confirmed_pr"
src="https://github.com/user-attachments/assets/2020e71a-88b4-4107-9b05-ae90bf7d39f1"
/> |
| Space selector | <img width="300" alt="Space_selector_before"
src="https://github.com/user-attachments/assets/b8ed7269-e6f6-4bc0-bb24-1c53ac451083"
/> | <img width="300" alt="Space_selector_after"
src="https://github.com/user-attachments/assets/770d2141-8642-483f-b72c-bce6d5ebd282"
/> |

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

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [x] The risk of inexact conversion: verifying this PR requires manual
checks to ensure that the conversion has not created any regressions in
the style.

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 3 people

x-pack/platform/plugins/shared/spaces/public/copy_saved_objects_to_space/components/copy_status_summary_indicator.scss

@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import './copy_status_summary_indicator.scss';
-
-import { EuiBadge, EuiIconTip, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiBadge, EuiIconTip, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -26,7 +25,8 @@ interface Props {
   onDestinationMapChange: (value?: Map<string, string>) => void;
 }
 
-const renderIcon = (props: Props) => {
+const CopyStatusIcon = (props: Props) => {
+  const { euiTheme } = useEuiTheme();
   const {
     space,
     summarizedCopyResult,
@@ -83,7 +83,11 @@ const renderIcon = (props: Props) => {
   }
 
   const missingReferences = hasMissingReferences ? (
-    <span className="spcCopyToSpace__missingReferencesIcon">
+    <span
+      css={css`
+        margin-left: ${euiTheme.size.xs};
+      `}
+    >
       <EuiIconTip
         type={'link'}
         color={'warning'}
@@ -134,11 +138,15 @@ const renderIcon = (props: Props) => {
 
 export const CopyStatusSummaryIndicator = (props: Props) => {
   const { summarizedCopyResult } = props;
-
+  const { euiTheme } = useEuiTheme();
   return (
     <Fragment>
-      {renderIcon(props)}
-      <EuiBadge className="spcCopyToSpace__summaryCountBadge">
+      <CopyStatusIcon {...props} />
+      <EuiBadge
+        css={css`
+          margin-left: ${euiTheme.size.xs};
+        `}
+      >
         {summarizedCopyResult.objects.length}
       </EuiBadge>
     </Fragment>

x-pack/platform/plugins/shared/spaces/public/copy_saved_objects_to_space/components/copy_status_summary_indicator.tsx

@@ -89,15 +89,9 @@ describe('ResolveAllConflicts', () => {
       <EuiPopover
         anchorPosition="downLeft"
         button={
-          <EuiLink
-            className="spcCopyToSpace__resolveAllConflictsLink"
-            onClick={[Function]}
-          >
-            <Memo(MemoizedFormattedMessage)
-              defaultMessage="(resolve all)"
-              id="xpack.spaces.management.copyToSpace.resolveAllConflictsLink"
-            />
-          </EuiLink>
+          <ResolveAllButton
+            onButtonClick={[Function]}
+          />
         }
         closePopover={[Function]}
         display="inline-block"

x-pack/platform/plugins/shared/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.scss

@@ -5,9 +5,14 @@
  * 2.0.
  */
 
-import './resolve_all_conflicts.scss';
-
-import { EuiContextMenuItem, EuiContextMenuPanel, EuiLink, EuiPopover } from '@elastic/eui';
+import {
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiLink,
+  EuiPopover,
+  useEuiFontSize,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { Component } from 'react';
 
 import { i18n } from '@kbn/i18n';
@@ -47,20 +52,34 @@ const options: ResolveOption[] = [
   },
 ];
 
+interface ResolveAllButtonProps {
+  onButtonClick: () => void;
+}
+
+const ResolveAllButton = ({ onButtonClick }: ResolveAllButtonProps) => {
+  const { fontSize } = useEuiFontSize('s');
+  return (
+    <EuiLink
+      onClick={onButtonClick}
+      css={css`
+        font-size: ${fontSize};
+      `}
+    >
+      <FormattedMessage
+        id="xpack.spaces.management.copyToSpace.resolveAllConflictsLink"
+        defaultMessage="(resolve all)"
+      />
+    </EuiLink>
+  );
+};
+
 export class ResolveAllConflicts extends Component<ResolveAllConflictsProps, State> {
   public state = {
     isPopoverOpen: false,
   };
 
   public render() {
-    const button = (
-      <EuiLink onClick={this.onButtonClick} className={'spcCopyToSpace__resolveAllConflictsLink'}>
-        <FormattedMessage
-          id="xpack.spaces.management.copyToSpace.resolveAllConflictsLink"
-          defaultMessage="(resolve all)"
-        />
-      </EuiLink>
-    );
+    const button = <ResolveAllButton onButtonClick={this.onButtonClick} />;
 
     const items = options.map((item) => {
       return (

x-pack/platform/plugins/shared/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx

@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import './selectable_spaces_control.scss';
-
 import type { EuiSelectableOption } from '@elastic/eui';
-import { EuiIconTip, EuiLoadingSpinner, EuiSelectable } from '@elastic/eui';
+import { EuiIconTip, EuiLoadingSpinner, EuiSelectable, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { lazy, Suspense } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -33,6 +32,7 @@ interface Props {
 type SpaceOption = EuiSelectableOption & { ['data-space-id']: string };
 
 export const SelectableSpacesControl = (props: Props) => {
+  const { euiTheme } = useEuiTheme();
   if (props.spaces.length === 0) {
     return <EuiLoadingSpinner />;
   }
@@ -81,7 +81,9 @@ export const SelectableSpacesControl = (props: Props) => {
         listProps={{
           bordered: true,
           rowHeight: 40,
-          className: 'spcCopyToSpace__spacesList',
+          css: css`
+            margin-top: ${euiTheme.size.xs};
+          `,
           'data-test-subj': 'cts-form-space-selector',
         }}
         searchable={options.length > SPACE_SEARCH_COUNT_THRESHOLD}

x-pack/platform/plugins/shared/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.tsx

@@ -5,16 +5,16 @@
  * 2.0.
  */
 
-import './space_result.scss';
-
 import {
   EuiAccordion,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiText,
+  useEuiTheme,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { lazy, Suspense, useState } from 'react';
 
 import { CopyStatusSummaryIndicator } from './copy_status_summary_indicator';
@@ -47,12 +47,15 @@ const getInitialDestinationMap = (objects: SummarizedCopyToSpaceResult['objects'
 
 export const SpaceResultProcessing = (props: Pick<Props, 'space'>) => {
   const { space } = props;
-
+  const { euiTheme } = useEuiTheme();
   return (
     <EuiAccordion
       id={`copyToSpace-${space.id}`}
       data-test-subj={`cts-space-result-${space.id}`}
-      className="spcCopyToSpaceResult"
+      css={css`
+        padding-bottom: ${euiTheme.size.s};
+        border-bottom: ${euiTheme.border.thin};
+      `}
       buttonContent={
         <EuiFlexGroup responsive={false}>
           <EuiFlexItem grow={false}>
@@ -82,12 +85,16 @@ export const SpaceResult = (props: Props) => {
   const onDestinationMapChange = (value?: Map<string, string>) => {
     setDestinationMap(value || getInitialDestinationMap(objects));
   };
+  const { euiTheme } = useEuiTheme();
 
   return (
     <EuiAccordion
       id={`copyToSpace-${space.id}`}
       data-test-subj={`cts-space-result-${space.id}`}
-      className="spcCopyToSpaceResult"
+      css={css`
+        padding-bottom: ${euiTheme.size.s};
+        border-bottom: ${euiTheme.border.thin};
+      `}
       buttonContent={
         <EuiFlexGroup responsive={false}>
           <EuiFlexItem grow={false}>