[Spaces] update privilege selection text and icon (elastic#199498)

## Summary Closes elastic/kibana-team#1257 This PR modifies the spaces bulk edit context menu items to match the new design icons and text #### Visuals ##### After <img width="223" alt="Screenshot 2024-11-08 at 16 06 20" src="https://github.com/user-attachments/assets/4c09145a-c614-4d9f-a680-7fe28ef3087f"> ##### Before <img width="262" alt="Screenshot 2024-11-08 at 15 59 02" src="https://github.com/user-attachments/assets/14669115-8d98-46f9-b8c3-afb243e861d2"> ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)  - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))  - [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)
lcawl · Nov 8, 2024 · cb7e5f6 · cb7e5f6
1 parent ae15c54
commit cb7e5f6
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 184 deletions.
diff --git a/x-pack/packages/security/ui_components/src/constants.ts b/x-pack/packages/security/ui_components/src/constants.ts
@@ -5,5 +5,5 @@
  * 2.0.
  */
 
-export const NO_PRIVILEGE_VALUE: string = 'none';
+export const NO_PRIVILEGE_VALUE = 'none' as const;
 export const CUSTOM_PRIVILEGE_VALUE: string = 'custom';
diff --git a/x-pack/packages/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx b/x-pack/packages/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx
@@ -15,9 +15,9 @@ import {
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
-import _ from 'lodash';
 import React, { Component } from 'react';
 
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { KibanaPrivilege } from '@kbn/security-role-management-model';
 
@@ -38,6 +38,43 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
     isPopoverOpen: false,
   };
 
+  private getPrivilegeCopy = (privilege: string): { label?: string; icon?: string } => {
+    switch (privilege) {
+      case 'all':
+        return {
+          icon: 'documentEdit',
+          label: i18n.translate(
+            'xpack.security.management.editRole.changeAllPrivileges.allSelectionLabel',
+            {
+              defaultMessage: 'Grant full access for all',
+            }
+          ),
+        };
+      case 'read':
+        return {
+          icon: 'glasses',
+          label: i18n.translate(
+            'xpack.security.management.editRole.changeAllPrivileges.readSelectionLabel',
+            {
+              defaultMessage: 'Grant read access for all',
+            }
+          ),
+        };
+      case 'none':
+        return {
+          icon: 'trash',
+          label: i18n.translate(
+            'xpack.security.management.editRole.changeAllPrivileges.noneSelectionLabel',
+            {
+              defaultMessage: 'Revoke access to all',
+            }
+          ),
+        };
+      default:
+        return {};
+    }
+  };
+
   public render() {
     const button = (
       <EuiLink
@@ -56,30 +93,35 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
     );
 
     const items = this.props.privileges.map((privilege) => {
+      const { icon, label } = this.getPrivilegeCopy(privilege.id);
       return (
         <EuiContextMenuItem
+          icon={icon}
           key={privilege.id}
           data-test-subj={`changeAllPrivileges-${privilege.id}`}
           onClick={() => {
             this.onSelectPrivilege(privilege.id);
           }}
           disabled={this.props.disabled}
         >
-          {_.upperFirst(privilege.id)}
+          {label}
         </EuiContextMenuItem>
       );
     });
 
     items.push(
       <EuiContextMenuItem
+        icon={this.getPrivilegeCopy(NO_PRIVILEGE_VALUE).icon}
         key={NO_PRIVILEGE_VALUE}
         data-test-subj={`changeAllPrivileges-${NO_PRIVILEGE_VALUE}`}
         onClick={() => {
           this.onSelectPrivilege(NO_PRIVILEGE_VALUE);
         }}
         disabled={this.props.disabled}
+        // @ts-expect-error leaving this here so that when https://github.com/elastic/eui/issues/8123 is fixed we remove this comment
+        css={({ euiTheme }) => ({ color: euiTheme.colors.danger })}
       >
-        {_.upperFirst(NO_PRIVILEGE_VALUE)}
+        {this.getPrivilegeCopy(NO_PRIVILEGE_VALUE).label}
       </EuiContextMenuItem>
     );
 

diff --git a/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx b/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiAccordion, EuiIconTip } from '@elastic/eui';
+import { EuiAccordion, EuiIconTip, EuiThemeProvider } from '@elastic/eui';
 import React from 'react';
 
 import type { KibanaFeature, SubFeatureConfig } from '@kbn/features-plugin/public';
@@ -47,16 +47,18 @@ const setup = (config: TestConfig) => {
   const onChange = jest.fn();
   const onChangeAll = jest.fn();
   const wrapper = mountWithIntl(
-    <FeatureTable
-      role={config.role}
-      privilegeCalculator={calculator}
-      kibanaPrivileges={kibanaPrivileges}
-      onChange={onChange}
-      onChangeAll={onChangeAll}
-      canCustomizeSubFeaturePrivileges={config.canCustomizeSubFeaturePrivileges}
-      privilegeIndex={config.privilegeIndex}
-      allSpacesSelected={true}
-    />
+    <EuiThemeProvider>
+      <FeatureTable
+        role={config.role}
+        privilegeCalculator={calculator}
+        kibanaPrivileges={kibanaPrivileges}
+        onChange={onChange}
+        onChangeAll={onChangeAll}
+        canCustomizeSubFeaturePrivileges={config.canCustomizeSubFeaturePrivileges}
+        privilegeIndex={config.privilegeIndex}
+        allSpacesSelected={true}
+      />
+    </EuiThemeProvider>
   );
 
   const displayedPrivileges = config.calculateDisplayedPrivileges