Example: Error state

elastic · Jun 3, 2021 · 56cf855 · 56cf855
1 parent bbb74b7
commit 56cf855
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx
@@ -34,6 +34,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import type { PublicMethodsOf } from '@kbn/utility-types';
 import type { NotificationsStart } from 'src/core/public';
 
+import { APP_WRAPPER_CLASS } from '../../../../../../../src/core/public';
 import { SectionLoading } from '../../../../../../../src/plugins/es_ui_shared/public';
 import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
 import type { ApiKey, ApiKeyToInvalidate } from '../../../../common/model';
@@ -88,7 +89,7 @@ export class APIKeysGridPage extends Component<Props, State> {
 
   public render() {
     return (
-      <div>
+      <div className={APP_WRAPPER_CLASS}>
         <Route path="/create">
           <Breadcrumb
             text={i18n.translate('xpack.security.management.apiKeys.createBreadcrumb', {
@@ -157,7 +158,7 @@ export class APIKeysGridPage extends Component<Props, State> {
 
       if (!areApiKeysEnabled) {
         return (
-          <EuiPageContent>
+          <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
             <NotEnabled />
           </EuiPageContent>
         );

diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/not_enabled/not_enabled.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/not_enabled/not_enabled.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import React from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -15,30 +15,35 @@ import { useKibana } from '../../../../../../../../src/plugins/kibana_react/publ
 export const NotEnabled: React.FunctionComponent = () => {
   const docLinks = useKibana().services.docLinks!;
   return (
-    <EuiCallOut
+    <EuiEmptyPrompt
       title={
-        <FormattedMessage
-          id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorTitle"
-          defaultMessage="API keys not enabled in Elasticsearch"
-        />
+        <h2>
+          <FormattedMessage
+            id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorTitle"
+            defaultMessage="API keys not enabled in Elasticsearch"
+          />
+        </h2>
       }
       color="danger"
       iconType="alert"
-    >
-      <FormattedMessage
-        id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorDescription"
-        defaultMessage="Contact your system administrator and refer to the {link} to enable API keys."
-        values={{
-          link: (
-            <EuiLink href={`${docLinks.links.security.apiKeyServiceSettings}`} target="_blank">
-              <FormattedMessage
-                id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorLinkText"
-                defaultMessage="docs"
-              />
-            </EuiLink>
-          ),
-        }}
-      />
-    </EuiCallOut>
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorDescription"
+            defaultMessage="Contact your system administrator and refer to the {link} to enable API keys."
+            values={{
+              link: (
+                <EuiLink href={`${docLinks.links.security.apiKeyServiceSettings}`} target="_blank">
+                  <FormattedMessage
+                    id="xpack.security.management.apiKeys.table.apiKeysDisabledErrorLinkText"
+                    defaultMessage="docs"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      }
+    />
   );
 };