From 1899c2b3bdccfed64c15bb0a00dcc70b0af35317 Mon Sep 17 00:00:00 2001
From: Elena Shostak <elena.shostak@elastic.co>
Date: Wed, 15 May 2024 11:13:38 +0200
Subject: [PATCH] [Roles] Roles Edit page description enhancements

---
 .../roles/edit_role/edit_role_page.test.tsx   | 36 +++++++++++++++++--
 .../roles/edit_role/edit_role_page.tsx        | 18 ++++++++--
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.test.tsx b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.test.tsx
index 9a4e0fd19db26..93d8fec9e15a0 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.test.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.test.tsx
@@ -567,11 +567,43 @@ describe('<EditRolePage />', () => {
       );
       expect(
         wrapper.find('input[data-test-subj="roleFormDescriptionInput"]').prop('disabled')
-      ).toBe(false);
-
+      ).toBe(undefined);
       expectSaveFormButtons(wrapper);
     });
 
+    it('can render a reserved role with description', async () => {
+      const wrapper = mountWithIntl(
+        <KibanaContextProvider services={coreStart}>
+          <EditRolePage
+            {...getProps({
+              action: 'edit',
+              spacesEnabled: false,
+              role: {
+                description: 'my reserved role description',
+                name: 'my custom role',
+                metadata: {
+                  _reserved: true,
+                },
+                elasticsearch: { cluster: ['all'], indices: [], run_as: ['*'] },
+                kibana: [],
+              },
+            })}
+          />
+        </KibanaContextProvider>
+      );
+
+      await waitForRender(wrapper);
+
+      expect(wrapper.find('[data-test-subj="roleFormDescriptionTooltip"]')).toHaveLength(1);
+
+      expect(wrapper.find('input[data-test-subj="roleFormDescriptionInput"]').prop('value')).toBe(
+        'my reserved role description'
+      );
+      expect(
+        wrapper.find('input[data-test-subj="roleFormDescriptionInput"]').prop('disabled')
+      ).toBe(true);
+    });
+
     it('can render when creating a new role', async () => {
       const wrapper = mountWithIntl(
         <KibanaContextProvider services={coreStart}>
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
index 32f928c6afb06..49c3bf7316882 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
@@ -506,15 +506,27 @@ export const EditRolePage: FunctionComponent<Props> = ({
                 />
               }
             >
-              <EuiToolTip content={role.description} display="block">
+              {isRoleReserved || isRoleReadOnly ? (
+                <EuiToolTip
+                  content={role.description}
+                  display="block"
+                  data-test-subj="roleFormDescriptionTooltip"
+                >
+                  <EuiFieldText
+                    name="description"
+                    value={role.description ?? ''}
+                    data-test-subj="roleFormDescriptionInput"
+                    disabled
+                  />
+                </EuiToolTip>
+              ) : (
                 <EuiFieldText
                   name="description"
                   value={role.description ?? ''}
                   onChange={onDescriptionChange}
                   data-test-subj="roleFormDescriptionInput"
-                  disabled={isRoleReserved || isRoleReadOnly}
                 />
-              </EuiToolTip>
+              )}
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>