[8.19] [Platform security] Replace SCSS with CSS in JS (part 2) (#233508)

src/platform/plugins/private/interactive_setup/public/app.tsx

@@ -7,9 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './app.scss';
-
-import { EuiIcon, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiIcon, EuiPanel, EuiSpacer, EuiTitle, useEuiShadow, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { FunctionComponent } from 'react';
 import React, { useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
@@ -38,6 +37,11 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
     [http]
   );
 
+  const kbnFullScreenBgCss = useKbnFullScreenBgCss();
+  const theme = useEuiTheme();
+  const { euiTheme } = theme;
+  const euiShadowM = useEuiShadow('m');
+
   if (state.loading) {
     return null;
   }
@@ -54,10 +58,23 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
   }
 
   return (
-    <div className="interactiveSetup">
-      <header className="interactiveSetup__header eui-textCenter">
+    <div css={kbnFullScreenBgCss}>
+      <header
+        css={css`
+          position: relative;
+          z-index: 10;
+          padding: ${euiTheme.size.xl};
+          text-align: center;
+        `}
+      >
         <EuiSpacer size="xxl" />
-        <span className="interactiveSetup__logo">
+        <span
+          css={css`
+            margin-bottom: ${euiTheme.size.xl};
+            display: inline-block;
+            ${euiShadowM};
+          `}
+        >
           <EuiIcon type="logoElastic" size="xxl" />
         </span>
         <EuiTitle size="m">
@@ -70,7 +87,17 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
         </EuiTitle>
         <EuiSpacer size="xl" />
       </header>
-      <div className="interactiveSetup__content">
+      <div
+        css={css`
+          position: relative;
+          z-index: 10;
+          margin: auto;
+          margin-bottom: ${euiTheme.size.xl};
+          max-width: calc(${euiTheme.breakpoint.s}px - ${euiTheme.size.xl});
+          padding-left: ${euiTheme.size.xl};
+          padding-right: ${euiTheme.size.xl};
+        `}
+      >
         <EuiPanel paddingSize="l">
           <div hidden={page !== 'token'}>
             <EnrollmentTokenForm

x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './change_all_privileges.scss';
-
 import {
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -15,6 +13,7 @@ import {
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { Component } from 'react';
 
 import { i18n } from '@kbn/i18n';
@@ -79,7 +78,9 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
     const button = (
       <EuiLink
         onClick={this.onButtonClick}
-        className={'secPrivilegeFeatureChangeAllLink'}
+        css={({ euiTheme }) => css`
+          margin-left: ${euiTheme.size.s};
+        `}
         data-test-subj="changeAllPrivilegesButton"
       >
         <EuiText size="xs">
@@ -118,7 +119,6 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
           this.onSelectPrivilege(NO_PRIVILEGE_VALUE);
         }}
         disabled={this.props.disabled}
-        // @ts-expect-error leaving this here so that when https://github.com/elastic/eui/issues/8123 is fixed we remove this comment
         css={({ euiTheme }) => ({ color: euiTheme.colors.danger })}
       >
         {this.getPrivilegeCopy(NO_PRIVILEGE_VALUE).label}

x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.tsx

@@ -5,19 +5,19 @@
  * 2.0.
  */
 
-import './feature_table_cell.scss';
-
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React from 'react';
 
 import type { SecuredFeature } from '@kbn/security-role-management-model';
 
 interface Props {
   feature: SecuredFeature;
-  className?: string;
+  hasSubFeaturePrivileges?: boolean;
 }
 
-export const FeatureTableCell = ({ feature, className }: Props) => {
+export const FeatureTableCell = ({ feature, hasSubFeaturePrivileges }: Props) => {
+  const { euiTheme } = useEuiTheme();
   let tooltipElement = null;
   if (feature.getPrivilegesTooltip()) {
     const tooltipContent = (
@@ -38,10 +38,28 @@ export const FeatureTableCell = ({ feature, className }: Props) => {
   }
 
   return (
-    <EuiFlexGroup className={className} direction="column" gutterSize="none" component="span">
+    <EuiFlexGroup
+      css={
+        !hasSubFeaturePrivileges &&
+        css`
+          margin-left: calc(${euiTheme.size.l} + ${euiTheme.size.xs});
+        `
+      }
+      direction="column"
+      gutterSize="none"
+      component="span"
+    >
       <EuiFlexItem data-test-subj={`featureTableCell`} component="span">
         <EuiFlexGroup gutterSize="xs">
-          <EuiFlexItem className="featurePrivilegeName" grow={false}>
+          <EuiFlexItem
+            css={css`
+              &:hover,
+              &:focus {
+                text-decoration: underline;
+              }
+            `}
+            grow={false}
+          >
             {feature.name}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>{tooltipElement}</EuiFlexItem>

x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.scss

@@ -1,11 +1,3 @@
 .euiAccordionWithDescription:hover, .euiAccordionWithDescription:focus {
   text-decoration: none;
 }
-
-.subFeaturePanel {
-  margin-left: $euiSizeL + $euiSizeXS;
-}
-
-.noSubFeaturePrivileges {
-  margin-left: $euiSizeL + $euiSizeXS;
-}

x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx

@@ -22,7 +22,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import classNames from 'classnames';
+import { css } from '@emotion/react';
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
 
@@ -240,7 +240,13 @@ export class FeatureTable extends Component<Props, State> {
               }}
             >
               <EuiSpacer size="s" />
-              <EuiPanel color="subdued" paddingSize="s" className="subFeaturePanel">
+              <EuiPanel
+                color="subdued"
+                paddingSize="s"
+                css={({ euiTheme }) => css`
+                  margin-left: calc(${euiTheme.size.l} + ${euiTheme.size.xs});
+                `}
+              >
                 <FeatureTableExpandedRow
                   feature={feature}
                   privilegeIndex={this.props.privilegeIndex}
@@ -265,9 +271,7 @@ export class FeatureTable extends Component<Props, State> {
     const primaryFeaturePrivileges = feature.getPrimaryFeaturePrivileges();
 
     if (feature.reserved && primaryFeaturePrivileges.length === 0) {
-      const buttonContent = (
-        <FeatureTableCell className="noSubFeaturePrivileges" feature={feature} />
-      );
+      const buttonContent = <FeatureTableCell feature={feature} />;
 
       const extraAction = (
         <EuiText css={{ maxWidth: 200 }} size={'xs'} data-test-subj="reservedFeatureDescription">
@@ -333,10 +337,7 @@ export class FeatureTable extends Component<Props, State> {
 
     const hasSubFeaturePrivileges = feature.getSubFeaturePrivileges().length > 0;
     const buttonContent = (
-      <FeatureTableCell
-        className={classNames({ noSubFeaturePrivileges: !hasSubFeaturePrivileges })}
-        feature={feature}
-      />
+      <FeatureTableCell hasSubFeaturePrivileges={hasSubFeaturePrivileges} feature={feature} />
     );
 
     const extraAction = (

x-pack/platform/packages/private/security/ui_components/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "target/types",
     "types": ["jest", "node", "react"]
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "../../../../../../typings/**/*"],
   "exclude": ["target/**/*"],
   "kbn_references": [
     "@kbn/core",
@@ -13,6 +13,6 @@
     "@kbn/security-plugin-types-common",
     "@kbn/test-jest-helpers",
     "@kbn/security-role-management-model",
-    "@kbn/features-plugin",
+    "@kbn/features-plugin"
   ]
 }

x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiSkeletonText } from '@elastic/eui';
+import { EuiProvider, EuiSkeletonText } from '@elastic/eui';
 import { act } from '@testing-library/react';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -28,11 +28,13 @@ describe('AccessAgreementPage', () => {
     coreStartMock.http.get.mockResolvedValue({ accessAgreement: 'This is [link](../link)' });
 
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     expect(wrapper.exists(EuiSkeletonText)).toBe(true);
@@ -59,11 +61,13 @@ describe('AccessAgreementPage', () => {
     coreStartMock.http.get.mockRejectedValue(error);
 
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     await act(async () => {
@@ -88,11 +92,13 @@ describe('AccessAgreementPage', () => {
       '/some-base-path/app/kibana#/home?_g=()'
     )}`;
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     await act(async () => {
@@ -127,11 +133,13 @@ describe('AccessAgreementPage', () => {
 
     window.location.href = currentURL;
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     await act(async () => {