Extract Kibana Privilege Feature table into package

.github/CODEOWNERS

@@ -771,6 +771,7 @@ x-pack/packages/security-solution/side_nav @elastic/security-threat-hunting-expl
 x-pack/packages/security-solution/storybook/config @elastic/security-threat-hunting-explore
 x-pack/packages/security-solution/upselling @elastic/security-threat-hunting-explore
 x-pack/test/security_functional/plugins/test_endpoints @elastic/kibana-security
+x-pack/packages/security/ui_components @elastic/kibana-security
 packages/kbn-securitysolution-autocomplete @elastic/security-detection-engine
 x-pack/packages/security-solution/data_table @elastic/security-threat-hunting-investigations
 packages/kbn-securitysolution-ecs @elastic/security-threat-hunting-explore

package.json

@@ -787,6 +787,7 @@
     "@kbn/security-solution-storybook-config": "link:x-pack/packages/security-solution/storybook/config",
     "@kbn/security-solution-upselling": "link:x-pack/packages/security-solution/upselling",
     "@kbn/security-test-endpoints-plugin": "link:x-pack/test/security_functional/plugins/test_endpoints",
+    "@kbn/security-ui-components": "link:x-pack/packages/security/ui_components",
     "@kbn/securitysolution-autocomplete": "link:packages/kbn-securitysolution-autocomplete",
     "@kbn/securitysolution-data-table": "link:x-pack/packages/security-solution/data_table",
     "@kbn/securitysolution-ecs": "link:packages/kbn-securitysolution-ecs",

tsconfig.base.json

@@ -1536,6 +1536,8 @@
       "@kbn/security-solution-upselling/*": ["x-pack/packages/security-solution/upselling/*"],
       "@kbn/security-test-endpoints-plugin": ["x-pack/test/security_functional/plugins/test_endpoints"],
       "@kbn/security-test-endpoints-plugin/*": ["x-pack/test/security_functional/plugins/test_endpoints/*"],
+      "@kbn/security-ui-components": ["x-pack/packages/security/ui_components"],
+      "@kbn/security-ui-components/*": ["x-pack/packages/security/ui_components/*"],
       "@kbn/securitysolution-autocomplete": ["packages/kbn-securitysolution-autocomplete"],
       "@kbn/securitysolution-autocomplete/*": ["packages/kbn-securitysolution-autocomplete/*"],
       "@kbn/securitysolution-data-table": ["x-pack/packages/security-solution/data_table"],

x-pack/packages/security/ui_components/README.md

@@ -0,0 +1,3 @@
+# @kbn/security-ui-components
+
+Contains stateless components for RBAC administration within Kibana.

x-pack/packages/security/ui_components/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export {
+  FeatureTable as KibanaPrivilegeTable,
+  FeatureTableCell,
+} from './src/kibana_privilege_table';
+export { PrivilegeFormCalculator } from './src/privilege_form_calculator';
+export * as constants from './src/constants';

x-pack/packages/security/ui_components/jest.config.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+module.exports = {
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/x-pack/packages/security/ui_components',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: ['<rootDir>/x-pack/packages/security/ui_components/**/*.{ts,tsx}'],
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/security/ui_components'],
+};

x-pack/packages/security/ui_components/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+    "type": "shared-common",
+    "id": "@kbn/security-ui-components",
+    "owner": "@elastic/kibana-security"
+}

x-pack/packages/security/ui_components/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/security-ui-components",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0"
+}

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/feature_table/feature_table.test.tsx → x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx

@@ -18,7 +18,7 @@ import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
 import { getDisplayedFeaturePrivileges } from './__fixtures__';
 import { FeatureTable } from './feature_table';
-import type { Role } from '../../../../../../../common';
+import type { Role } from '@kbn/security-plugin-types-common';
 import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/feature_table/feature_table.tsx → x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.tsx

@@ -35,7 +35,7 @@ import type { KibanaPrivileges, SecuredFeature } from '@kbn/security-role-manage
 import { ChangeAllPrivilegesControl } from './change_all_privileges';
 import { FeatureTableExpandedRow } from './feature_table_expanded_row';
 import { NO_PRIVILEGE_VALUE } from '../constants';
-import { FeatureTableCell } from '../feature_table_cell';
+import { FeatureTableCell } from './components/feature_table_cell';
 import type { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 interface Props {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/feature_table/feature_table_expanded_row.test.tsx → x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table_expanded_row.test.tsx

@@ -15,7 +15,7 @@ import {
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
 import { FeatureTableExpandedRow } from './feature_table_expanded_row';
-import type { Role } from '../../../../../../../common';
+import type { Role } from '@kbn/security-plugin-types-common';
 import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/feature_table/index.ts → x-pack/packages/security/ui_components/src/kibana_privilege_table/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { FeatureTable } from './feature_table';
+export { FeatureTableCell } from './components';

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/privilege_form_calculator/privilege_form_calculator.test.ts → x-pack/packages/security/ui_components/src/privilege_form_calculator/privilege_form_calculator.test.ts

@@ -11,7 +11,7 @@ import {
 } from '@kbn/security-role-management-model/src/__fixtures__';
 
 import { PrivilegeFormCalculator } from './privilege_form_calculator';
-import type { Role } from '../../../../../../../common';
+import type { Role } from '@kbn/security-plugin-types-common';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {
   return {

x-pack/packages/security/ui_components/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": ["jest", "node", "react"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["target/**/*"],
+  "kbn_references": [
+    "@kbn/core",
+    "@kbn/i18n",
+    "@kbn/i18n-react",
+    "@kbn/security-plugin-types-common",
+    "@kbn/test-jest-helpers",
+    "@kbn/security-role-management-model",
+    "@kbn/features-plugin",
+  ]
+}

x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx

@@ -775,7 +775,9 @@ export const EditRolePage: FunctionComponent<Props> = ({
             <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
               <EuiFlexItem grow={false}>
                 <EuiButton size="s" href={cloudOrgUrl}>
-                  Manage Members
+                  {i18n.translate('xpack.security.management.roles.manageRoleUsers', {
+                    defaultMessage: 'Manage Members',
+                  })}
                 </EuiButton>
               </EuiFlexItem>
             </EuiFlexGroup>

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/privilege_summary/__fixtures__/index.ts

@@ -8,10 +8,10 @@
 import { EuiTableRow } from '@elastic/eui';
 import type { ReactWrapper } from 'enzyme';
 
+import { FeatureTableCell } from '@kbn/security-ui-components';
 import { findTestSubject } from '@kbn/test-jest-helpers';
 
 import type { Role, RoleKibanaPrivilege } from '../../../../../../../../common';
-import { FeatureTableCell } from '../../feature_table_cell';
 import { PrivilegeSummaryExpandedRow } from '../privilege_summary_expanded_row';
 
 interface DisplayedFeaturePrivileges {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/privilege_summary/privilege_summary_table.tsx

@@ -27,14 +27,14 @@ import {
   type PrimaryFeaturePrivilege,
   type SecuredFeature,
 } from '@kbn/security-role-management-model';
+import { FeatureTableCell } from '@kbn/security-ui-components';
 import type { Space, SpacesApiUi } from '@kbn/spaces-plugin/public';
 
 import type { EffectiveFeaturePrivileges } from './privilege_summary_calculator';
 import { PrivilegeSummaryCalculator } from './privilege_summary_calculator';
 import { PrivilegeSummaryExpandedRow } from './privilege_summary_expanded_row';
 import { SpaceColumnHeader } from './space_column_header';
 import { ALL_SPACES_ID } from '../../../../../../../common/constants';
-import { FeatureTableCell } from '../feature_table_cell';
 
 export interface PrivilegeSummaryTableProps {
   role: Role;

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/privilege_selector.tsx

@@ -9,7 +9,7 @@ import { EuiSelect } from '@elastic/eui';
 import type { ChangeEvent } from 'react';
 import React, { Component } from 'react';
 
-import { NO_PRIVILEGE_VALUE } from '../constants';
+import { constants } from '@kbn/security-ui-components';
 
 interface Props {
   ['data-test-subj']: string;
@@ -27,10 +27,10 @@ export class PrivilegeSelector extends Component<Props, {}> {
   public render() {
     const { availablePrivileges, value, disabled, allowNone, compressed } = this.props;
 
-    const options = [];
+    const options: Array<{ value: string; text: string }> = [];
 
     if (allowNone) {
-      options.push({ value: NO_PRIVILEGE_VALUE, text: 'none' });
+      options.push({ value: constants.NO_PRIVILEGE_VALUE, text: 'none' });
     }
 
     options.push(

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/simple_privilege_section.tsx

@@ -16,17 +16,19 @@ import {
 import React, { Component, Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
+import type { Role, RoleKibanaPrivilege } from '@kbn/security-plugin-types-common';
 import {
   isGlobalPrivilegeDefinition,
   type KibanaPrivileges,
 } from '@kbn/security-role-management-model';
+import {
+  constants,
+  KibanaPrivilegeTable,
+  PrivilegeFormCalculator,
+} from '@kbn/security-ui-components';
 
 import { UnsupportedSpacePrivilegesWarning } from './unsupported_space_privileges_warning';
-import type { Role, RoleKibanaPrivilege } from '../../../../../../../common';
 import { copyRole } from '../../../../../../../common/model';
-import { CUSTOM_PRIVILEGE_VALUE, NO_PRIVILEGE_VALUE } from '../constants';
-import { FeatureTable } from '../feature_table';
-import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 interface Props {
   role: Role;
@@ -98,7 +100,7 @@ export class SimplePrivilegeSection extends Component<Props, State> {
                   onChange={this.onKibanaPrivilegeChange}
                   options={[
                     {
-                      value: NO_PRIVILEGE_VALUE,
+                      value: constants.NO_PRIVILEGE_VALUE,
                       inputDisplay: (
                         <FormattedMessage
                           id="xpack.security.management.editRole.simplePrivilegeForm.noPrivilegeInput"
@@ -179,7 +181,7 @@ export class SimplePrivilegeSection extends Component<Props, State> {
                       ),
                     },
                     {
-                      value: CUSTOM_PRIVILEGE_VALUE,
+                      value: constants.CUSTOM_PRIVILEGE_VALUE,
                       inputDisplay: (
                         <FormattedMessage
                           id="xpack.security.management.editRole.simplePrivilegeForm.customPrivilegeInput"
@@ -213,7 +215,7 @@ export class SimplePrivilegeSection extends Component<Props, State> {
             </EuiFormRow>
             {this.state.isCustomizingGlobalPrivilege && (
               <EuiFormRow fullWidth>
-                <FeatureTable
+                <KibanaPrivilegeTable
                   role={this.props.role}
                   kibanaPrivileges={this.props.kibanaPrivileges}
                   privilegeCalculator={
@@ -239,25 +241,25 @@ export class SimplePrivilegeSection extends Component<Props, State> {
 
   public getDisplayedBasePrivilege = () => {
     if (this.state.isCustomizingGlobalPrivilege) {
-      return CUSTOM_PRIVILEGE_VALUE;
+      return constants.CUSTOM_PRIVILEGE_VALUE;
     }
 
     const { role } = this.props;
 
     const form = this.locateGlobalPrivilege(role);
 
-    return form && form.base.length > 0 ? form.base[0] : NO_PRIVILEGE_VALUE;
+    return form && form.base.length > 0 ? form.base[0] : constants.NO_PRIVILEGE_VALUE;
   };
 
   public onKibanaPrivilegeChange = (privilege: string) => {
     const role = copyRole(this.props.role);
 
     const form = this.locateGlobalPrivilege(role) || this.createGlobalPrivilegeEntry(role);
 
-    if (privilege === NO_PRIVILEGE_VALUE) {
+    if (privilege === constants.NO_PRIVILEGE_VALUE) {
       // Remove global entry if no privilege value
       role.kibana = role.kibana.filter((entry) => !isGlobalPrivilegeDefinition(entry));
-    } else if (privilege === CUSTOM_PRIVILEGE_VALUE) {
+    } else if (privilege === constants.CUSTOM_PRIVILEGE_VALUE) {
       // Remove base privilege if customizing feature privileges
       form.base = [];
     } else {
@@ -267,7 +269,7 @@ export class SimplePrivilegeSection extends Component<Props, State> {
 
     this.props.onChange(role);
     this.setState({
-      isCustomizingGlobalPrivilege: privilege === CUSTOM_PRIVILEGE_VALUE,
+      isCustomizingGlobalPrivilege: privilege === constants.CUSTOM_PRIVILEGE_VALUE,
       globalPrivsIndex: role.kibana.indexOf(form),
     });
   };

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_display.tsx

@@ -11,7 +11,7 @@ import _ from 'lodash';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
-import { NO_PRIVILEGE_VALUE } from '../constants';
+import { constants } from '@kbn/security-ui-components';
 
 interface Props extends PropsOf<typeof EuiText> {
   privilege: string | string[] | undefined;
@@ -40,7 +40,8 @@ function getDisplayValue(privilege: string | string[] | undefined) {
   let displayValue: string | ReactNode;
 
   const isPrivilegeMissing =
-    privileges.length === 0 || (privileges.length === 1 && privileges.includes(NO_PRIVILEGE_VALUE));
+    privileges.length === 0 ||
+    (privileges.length === 1 && privileges.includes(constants.NO_PRIVILEGE_VALUE));
 
   if (isPrivilegeMissing) {
     displayValue = <EuiIcon color="subdued" type={'minusInCircle'} />;

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.test.tsx

@@ -13,14 +13,14 @@ import {
   createKibanaPrivileges,
   kibanaFeatures,
 } from '@kbn/security-role-management-model/src/__fixtures__';
+import { KibanaPrivilegeTable as FeatureTable } from '@kbn/security-ui-components';
+import { getDisplayedFeaturePrivileges } from '@kbn/security-ui-components/src/kibana_privilege_table/__fixtures__';
 import type { Space } from '@kbn/spaces-plugin/public';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
 import { PrivilegeSpaceForm } from './privilege_space_form';
 import { SpaceSelector } from './space_selector';
 import type { Role } from '../../../../../../../common';
-import { FeatureTable } from '../feature_table';
-import { getDisplayedFeaturePrivileges } from '../feature_table/__fixtures__';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {
   return {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx

@@ -30,15 +30,17 @@ import React, { Component, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { KibanaPrivileges } from '@kbn/security-role-management-model';
+import {
+  KibanaPrivilegeTable,
+  PrivilegeFormCalculator,
+  constants as UI_CONSTANTS,
+} from '@kbn/security-ui-components';
 import type { Space } from '@kbn/spaces-plugin/public';
 
 import { SpaceSelector } from './space_selector';
 import type { FeaturesPrivileges, Role } from '../../../../../../../common';
 import { ALL_SPACES_ID } from '../../../../../../../common/constants';
 import { copyRole } from '../../../../../../../common/model';
-import { CUSTOM_PRIVILEGE_VALUE } from '../constants';
-import { FeatureTable } from '../feature_table';
-import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 interface Props {
   role: Role;
@@ -254,7 +256,7 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
 
         <EuiSpacer size="l" />
 
-        <FeatureTable
+        <KibanaPrivilegeTable
           role={this.state.role}
           privilegeCalculator={this.state.privilegeCalculator}
           onChange={this.onFeaturePrivilegesChange}
@@ -447,7 +449,7 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
 
     let isCustomizingFeaturePrivileges = false;
 
-    if (privilegeName === CUSTOM_PRIVILEGE_VALUE) {
+    if (privilegeName === UI_CONSTANTS.CUSTOM_PRIVILEGE_VALUE) {
       form.base = [];
       isCustomizingFeaturePrivileges = true;
     } else {
@@ -456,7 +458,8 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
     }
 
     this.setState({
-      selectedBasePrivilege: privilegeName === CUSTOM_PRIVILEGE_VALUE ? [] : [privilegeName],
+      selectedBasePrivilege:
+        privilegeName === UI_CONSTANTS.CUSTOM_PRIVILEGE_VALUE ? [] : [privilegeName],
       role,
       isCustomizingFeaturePrivileges,
       privilegeCalculator: new PrivilegeFormCalculator(this.props.kibanaPrivileges, role),
@@ -507,7 +510,7 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
       return `basePrivilege_${basePrivilege.id}`;
     }
 
-    return `basePrivilege_${CUSTOM_PRIVILEGE_VALUE}`;
+    return `basePrivilege_${UI_CONSTANTS.CUSTOM_PRIVILEGE_VALUE}`;
   };
 
   private onFeaturePrivilegesChange = (featureId: string, privileges: string[]) => {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_table.test.tsx

@@ -12,11 +12,11 @@ import React from 'react';
 import { KibanaFeature } from '@kbn/features-plugin/public';
 import type { Role, RoleKibanaPrivilege } from '@kbn/security-plugin-types-common';
 import { createKibanaPrivileges } from '@kbn/security-role-management-model/src/__fixtures__';
+import { PrivilegeFormCalculator } from '@kbn/security-ui-components';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
 import { PrivilegeDisplay } from './privilege_display';
 import { PrivilegeSpaceTable } from './privilege_space_table';
-import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 interface TableRow {
   spaces: string[];