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

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

@@ -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/resolve_all_conflicts.test.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.tsx

@@ -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/selectable_spaces_control.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/space_result.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}>

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

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './space_result_details.scss';
-
 import type { EuiSwitchEvent } from '@elastic/eui';
 import {
   EuiFlexGroup,
@@ -16,7 +14,9 @@ import {
   EuiSwitch,
   EuiText,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import moment from 'moment';
 import React, { Fragment } from 'react';
 
@@ -59,9 +59,15 @@ const isAmbiguousConflictError = (
 export const SpaceCopyResultDetails = (props: Props) => {
   const { destinationMap, onDestinationMapChange, summarizedCopyResult } = props;
   const { objects } = summarizedCopyResult;
+  const { euiTheme } = useEuiTheme();
 
   return (
-    <div className="spcCopyToSpaceResultDetails">
+    <div
+      css={css`
+        margin-top: ${euiTheme.size.s};
+        padding-left: ${euiTheme.size.l};
+      `}
+    >
       {objects.map((object, index) => {
         const { type, id, name, icon, conflict } = object;
         const pendingObjectRetry = props.retries.find((r) => r.type === type && r.id === id);
@@ -124,10 +130,17 @@ export const SpaceCopyResultDetails = (props: Props) => {
             props.onRetriesChange([...filtered, retry]);
           },
         };
-        const selectContainerClass =
-          selectProps.options.length > 0 && isOverwritePending
-            ? ' spcCopyToSpaceResultDetails__selectControl-isOpen'
-            : '';
+
+        const childWrapperStyles = (isOpen: boolean) => css`
+          overflow: hidden;
+          transform: translateZ(0);
+          transition: height ${euiTheme.animation.normal} ${euiTheme.animation.resistance},
+            ${euiTheme.animation.normal} ${euiTheme.animation.resistance};
+
+          visibility: ${isOpen ? 'visible' : 'hidden'};
+          opacity: ${isOpen ? 1 : 0};
+          height: ${isOpen ? 'auto' : 0};
+        `;
 
         return (
           <Fragment key={index}>
@@ -136,14 +149,21 @@ export const SpaceCopyResultDetails = (props: Props) => {
               key={index}
               alignItems="center"
               gutterSize="s"
-              className="spcCopyToSpaceResultDetails__row"
+              css={css`
+                margin-bottom: ${euiTheme.size.xs};
+              `}
             >
               <EuiFlexItem grow={false}>
                 <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
                   <EuiIcon aria-label={getSavedObjectLabel(type)} type={icon} size="s" />
                 </EuiToolTip>
               </EuiFlexItem>
-              <EuiFlexItem grow={5} className="spcCopyToSpaceResultDetails__savedObjectName">
+              <EuiFlexItem
+                grow={5}
+                css={css`
+                  min-width: 0;
+                `}
+              >
                 <EuiText size="s">
                   <p className="eui-textTruncate" title={name}>
                     {name}
@@ -161,7 +181,7 @@ export const SpaceCopyResultDetails = (props: Props) => {
                   />
                 </EuiFlexItem>
               )}
-              <EuiFlexItem className="spcCopyToSpaceResultDetails__statusIndicator" grow={false}>
+              <EuiFlexItem grow={false}>
                 <div className="eui-textRight">
                   <CopyStatusIndicator
                     summarizedCopyResult={props.summarizedCopyResult}
@@ -174,8 +194,12 @@ export const SpaceCopyResultDetails = (props: Props) => {
                 </div>
               </EuiFlexItem>
             </EuiFlexGroup>
-            <div className={'spcCopyToSpaceResultDetails__selectControl' + selectContainerClass}>
-              <div className="spcCopyToSpaceResultDetails__selectControl__childWrapper">
+            <div
+              css={css`
+                margin-left: ${euiTheme.size.l};
+              `}
+            >
+              <div css={childWrapperStyles(selectProps.options.length > 0 && isOverwritePending)}>
                 <EuiSuperSelect
                   options={selectProps.options}
                   valueOfSelected={destinationMap.get(`${type}:${id}`)}