Fix styles for "You do not have permission" screen (#129715)

* Fix styles for "You do not have permission" screen * . Co-authored-by: Kibana Machine <[email protected]>
elastic · Apr 11, 2022 · b5dae38 · b5dae38
1 parent b822275
commit b5dae38
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/x-pack/plugins/security/server/authorization/authorization_service.tsx b/x-pack/plugins/security/server/authorization/authorization_service.tsx
@@ -7,7 +7,7 @@
 
 import querystring from 'querystring';
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
+import { renderToString } from 'react-dom/server';
 import type { Observable, Subscription } from 'rxjs';
 
 import type {
@@ -178,7 +178,7 @@ export class AuthorizationService {
     http.registerOnPreResponse((request, preResponse, toolkit) => {
       if (preResponse.statusCode === 403 && canRedirectRequest(request)) {
         const next = `${http.basePath.get(request)}${request.url.pathname}${request.url.search}`;
-        const body = renderToStaticMarkup(
+        const body = renderToString(
           <ResetSessionPage
             buildNumber={buildNumber}
             basePath={http.basePath}

diff --git a/x-pack/plugins/security/server/prompt_page.tsx b/x-pack/plugins/security/server/prompt_page.tsx
@@ -5,14 +5,11 @@
  * 2.0.
  */
 
-// @ts-expect-error no definitions in component folder
-import { EuiEmptyPrompt } from '@elastic/eui/lib/components/empty_prompt';
+import { EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent, EuiProvider } from '@elastic/eui';
 // @ts-expect-error no definitions in component folder
 import { icon as EuiIconAlert } from '@elastic/eui/lib/components/icon/assets/alert';
 // @ts-expect-error no definitions in component folder
 import { appendIconComponentCache } from '@elastic/eui/lib/components/icon/icon';
-// @ts-expect-error no definitions in component folder
-import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui/lib/components/page';
 import type { ReactNode } from 'react';
 import React from 'react';
 
@@ -77,19 +74,21 @@ export function PromptPage({
       </head>
       <body>
         <I18nProvider>
-          <EuiPage paddingSize="none" style={{ minHeight: '100vh' }} data-test-subj="promptPage">
-            <EuiPageBody>
-              <EuiPageContent verticalPosition="center" horizontalPosition="center">
-                <EuiEmptyPrompt
-                  iconType="alert"
-                  iconColor="danger"
-                  title={<h2>{title}</h2>}
-                  body={body}
-                  actions={actions}
-                />
-              </EuiPageContent>
-            </EuiPageBody>
-          </EuiPage>
+          <EuiProvider colorMode="light">
+            <EuiPage paddingSize="none" style={{ minHeight: '100vh' }} data-test-subj="promptPage">
+              <EuiPageBody>
+                <EuiPageContent verticalPosition="center" horizontalPosition="center">
+                  <EuiEmptyPrompt
+                    iconType="alert"
+                    iconColor="danger"
+                    title={<h2>{title}</h2>}
+                    body={body}
+                    actions={actions}
+                  />
+                </EuiPageContent>
+              </EuiPageBody>
+            </EuiPage>
+          </EuiProvider>
         </I18nProvider>
       </body>
     </html>