From 2d17d753ef242ba1c50b6c250e2f7e922b329056 Mon Sep 17 00:00:00 2001
From: ruhshan <ruhshan.ahmed@gmail.com>
Date: Mon, 31 Jul 2023 22:02:20 +0600
Subject: [PATCH] Update role mappings empty UI for consistency (#162357)

## Summary

Fixes #161137

Update style of empty role mappings prompt to meet consistency.


![image](https://github.com/elastic/kibana/assets/5312918/f419de0e-177a-4fac-aa36-1c6ec5f0d6c6)


Update icon of create api key button of empty api key  prompt.


![image](https://github.com/elastic/kibana/assets/5312918/9b69e91a-9267-42d7-85f0-aca1507879af)


### Checklist

Delete any items that are not applicable to this PR.
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Jeramy Soucy <jeramy.soucy@elastic.co>
---
 .../api_keys_grid/api_keys_empty_prompt.tsx   |  2 +-
 .../api_keys_grid/api_keys_grid_page.tsx      |  2 +-
 .../create_role_mapping_button.tsx            |  1 +
 .../empty_prompt/empty_prompt.tsx             | 20 +++++++++----------
 .../role_mappings_grid_page.tsx               |  6 +-----
 5 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_empty_prompt.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_empty_prompt.tsx
index c76b385cfccc5..b6300832551e8 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_empty_prompt.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_empty_prompt.tsx
@@ -147,7 +147,7 @@ export const ApiKeysEmptyPrompt: FunctionComponent<ApiKeysEmptyPromptProps> = ({
 
   return (
     <KibanaPageTemplate.EmptyPrompt
-      iconType="gear"
+      iconType="managementApp"
       title={
         <h1>
           <FormattedMessage
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
index 1ce95fc80897e..ee3aa35411782 100644
--- 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
@@ -198,7 +198,7 @@ export class APIKeysGridPage extends Component<Props, State> {
             <EuiButton
               {...reactRouterNavigate(this.props.history, '/create')}
               fill
-              iconType="plusInCircleFilled"
+              iconType="plusInCircle"
               data-test-subj="apiKeysCreatePromptButton"
               href={'/'}
             >
diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx
index 4aa55840cc7f8..ab9ce044f7b4c 100644
--- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx
@@ -21,6 +21,7 @@ interface CreateRoleMappingButtonProps {
 export const CreateRoleMappingButton = ({ history }: CreateRoleMappingButtonProps) => {
   return (
     <EuiButton
+      iconType="plusInCircle"
       data-test-subj="createRoleMappingButton"
       {...reactRouterNavigate(history, EDIT_ROLE_MAPPING_PATH)}
       fill
diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/empty_prompt/empty_prompt.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/empty_prompt/empty_prompt.tsx
index 69ca72208d5a5..44d620ecdcfd2 100644
--- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/empty_prompt/empty_prompt.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/empty_prompt/empty_prompt.tsx
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt } from '@elastic/eui';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import type { ScopedHistory } from '@kbn/core/public';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 
 import { CreateRoleMappingButton } from '../create_role_mapping_button';
 
@@ -22,7 +22,7 @@ export const EmptyPrompt: React.FunctionComponent<EmptyPromptProps> = ({
   history,
   readOnly = false,
 }) => (
-  <EuiEmptyPrompt
+  <KibanaPageTemplate.EmptyPrompt
     iconType="managementApp"
     title={
       <h1>
@@ -40,14 +40,12 @@ export const EmptyPrompt: React.FunctionComponent<EmptyPromptProps> = ({
       </h1>
     }
     body={
-      <Fragment>
-        <p>
-          <FormattedMessage
-            id="xpack.security.management.roleMappings.emptyPromptDescription"
-            defaultMessage="Role mappings control which roles are assigned to your users."
-          />
-        </p>
-      </Fragment>
+      <p>
+        <FormattedMessage
+          id="xpack.security.management.roleMappings.emptyPromptDescription"
+          defaultMessage="Role mappings control which roles are assigned to your users."
+        />
+      </p>
     }
     actions={readOnly ? null : <CreateRoleMappingButton history={history} />}
     data-test-subj="roleMappingsEmptyPrompt"
diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
index e6feadd199b02..ad8f204fa75cd 100644
--- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx
@@ -136,11 +136,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
     }
 
     if (loadState === 'finished' && roleMappings && roleMappings.length === 0) {
-      return (
-        <EuiPageSection alignment="center" color="subdued">
-          <EmptyPrompt history={this.props.history} readOnly={this.props.readOnly} />
-        </EuiPageSection>
-      );
+      return <EmptyPrompt history={this.props.history} readOnly={this.props.readOnly} />;
     }
 
     return (