From 899081a45190200b8b8718e3a8ffd91641fcba3f Mon Sep 17 00:00:00 2001 From: Constance Date: Tue, 4 Oct 2022 15:15:16 -0700 Subject: [PATCH] Use `@emotion/server` for server-side security prompts (#142662) * Update all `@emotion` dependencies to latest * Install `@emotion/server` * Use Emotion server-side rendering for security prompt pages * snapshots --- package.json | 13 +- .../__snapshots__/prompt_page.test.tsx.snap | 4 +- .../unauthenticated_page.test.tsx.snap | 2 +- .../reset_session_page.test.tsx.snap | 2 +- .../plugins/security/server/prompt_page.tsx | 57 ++-- yarn.lock | 248 ++++++++++++++---- 6 files changed, 244 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index 9825802a80292..97e1fe7c24bce 100644 --- a/package.json +++ b/package.json @@ -116,10 +116,11 @@ "@elastic/react-search-ui": "^1.14.0", "@elastic/request-crypto": "2.0.1", "@elastic/search-ui-app-search-connector": "^1.14.0", - "@emotion/cache": "^11.9.3", - "@emotion/css": "^11.9.0", - "@emotion/react": "^11.9.3", - "@emotion/serialize": "^1.0.4", + "@emotion/cache": "^11.10.3", + "@emotion/css": "^11.10.0", + "@emotion/react": "^11.10.4", + "@emotion/serialize": "^1.1.0", + "@emotion/server": "^11.10.0", "@grpc/grpc-js": "^1.6.7", "@hapi/accept": "^5.0.2", "@hapi/boom": "^9.1.4", @@ -690,8 +691,8 @@ "@elastic/github-checks-reporter": "0.0.20b3", "@elastic/makelogs": "^6.0.0", "@elastic/synthetics": "^1.0.0-beta.22", - "@emotion/babel-preset-css-prop": "^11.2.0", - "@emotion/jest": "^11.9.4", + "@emotion/babel-preset-css-prop": "^11.10.0", + "@emotion/jest": "^11.10.0", "@istanbuljs/nyc-config-typescript": "^1.0.2", "@istanbuljs/schema": "^0.1.2", "@jest/console": "^26.6.2", diff --git a/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap b/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap index 97197720ce590..da3adab8b5f0e 100644 --- a/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap +++ b/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; -exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; +exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

Some Title

Some Body
Action#1
Action#2
"`; diff --git a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap index 9157859003d53..e6adef02b2417 100644 --- a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We couldn't log you in

We hit an authentication error. Please check your credentials and try again. If you still can't log in, contact your system administrator.

Log in
"`; +exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

We couldn't log you in

We hit an authentication error. Please check your credentials and try again. If you still can't log in, contact your system administrator.

Log in
"`; diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap index 3b553c7131df4..f987be427a5c0 100644 --- a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; diff --git a/x-pack/plugins/security/server/prompt_page.tsx b/x-pack/plugins/security/server/prompt_page.tsx index 14f59df15db39..38bd77b444e83 100644 --- a/x-pack/plugins/security/server/prompt_page.tsx +++ b/x-pack/plugins/security/server/prompt_page.tsx @@ -17,8 +17,10 @@ import { icon as EuiIconAlert } from '@elastic/eui/lib/components/icon/assets/al // @ts-expect-error no definitions in component folder import { appendIconComponentCache } from '@elastic/eui/lib/components/icon/icon'; import createCache from '@emotion/cache'; +import createEmotionServer from '@emotion/server/create-instance'; import type { ReactNode } from 'react'; import React from 'react'; +import { renderToString } from 'react-dom/server'; import { Fonts } from '@kbn/core-rendering-server-internal'; import type { IBasePath } from '@kbn/core/server'; @@ -34,6 +36,8 @@ appendIconComponentCache({ alert: EuiIconAlert, }); +const emotionCache = createCache({ key: 'eui' }); + interface Props { buildNumber: number; basePath: IBasePath; @@ -51,6 +55,31 @@ export function PromptPage({ body, actions, }: Props) { + const content = ( + + + + + + {title}} + body={body} + actions={actions} + /> + + + + + + ); + + const { extractCriticalToChunks, constructStyleTagsFromChunks } = + createEmotionServer(emotionCache); + const chunks = extractCriticalToChunks(renderToString(content)); + const emotionStyles = constructStyleTagsFromChunks(chunks); + const uiPublicURL = `${basePath.serverBasePath}/ui`; const regularBundlePath = `${basePath.serverBasePath}/${buildNumber}/bundles`; const styleSheetPaths = [ @@ -60,16 +89,12 @@ export function PromptPage({ `${basePath.serverBasePath}/ui/legacy_light_theme.css`, ]; - // Emotion SSR styles will be prepended to the and emit a console log warning about :first-child selectors - const emotionCache = createCache({ - key: 'css', - prepend: true, - }); - return ( Elastic + {/* eslint-disable-next-line react/no-danger */} +