diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index e025cda0..efe0b27d 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -59,6 +59,7 @@ import { generateResourceName } from '../../utils/resource-utils';
import { NameRow } from '../../utils/name-row';
import { DataSourceContext } from '../../app-router';
import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { HeaderDescription, HeaderTitle } from '../../header/header-components';
interface RoleEditDeps extends BreadcrumbsPageDependencies {
action: 'create' | 'edit' | 'duplicate';
@@ -233,6 +234,23 @@ export function RoleEdit(props: RoleEditDeps) {
const tenantOptions = tenantNames.map(stringToComboBoxOption);
+ const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
+ const descriptionData = [
+ {
+ renderComponent: (
+
+ Roles are the core way of controlling access to your cluster. Roles contain any
+ combination of cluster-wide permission, index-
+
+ specific permissions, document- and field-level security, and tenants. Then you map users
+ to these roles so that users
+ gain those permissions.
+
+ ),
+ },
+ ];
+
return (
<>
- {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-
-
-
- {TITLE_TEXT_DICT[props.action]}
-
- Roles are the core way of controlling access to your cluster. Roles contain any
- combination of cluster-wide permission, index-specific permissions, document- and
- field-level security, and tenants. Once you've created the role, you can map users to
- the roles so that users gain those permissions.{' '}
-
-
-
+ {updatedUX ? (
+ <>
+
+
+
+ ) : (
+ <>
+ {' '}
+ {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
+
+
+
+ {TITLE_TEXT_DICT[props.action]}
+
+ Roles are the core way of controlling access to your cluster. Roles contain any
+ combination of cluster-wide permission, index-specific permissions, document- and
+ field-level security, and tenants. Once you've created the role, you can map
+ users to the roles so that users gain those permissions.{' '}
+
+
+
+
+ )}
> = [
{
@@ -198,6 +199,9 @@ export function RoleList(props: AppDependencies) {
const [searchOptions, setSearchOptions] = useState({});
const [query, setQuery] = useState(null);
+
+ const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
useEffect(() => {
setSearchOptions({
onChange: (arg) => {
@@ -260,6 +264,37 @@ export function RoleList(props: AppDependencies) {
});
}, [roleData]);
+ const buttonData = [
+ {
+ label: 'Create role',
+ isLoading: false,
+ href: buildHashUrl(ResourceType.roles, Action.create),
+ fill: true,
+ iconType: 'plus',
+ iconSide: 'left',
+ type: 'button',
+ testId: 'create-role',
+ // target: "_blank"
+ },
+ ];
+ const descriptionData = [
+ {
+ isLoading: loading,
+ renderComponent: (
+
+ Roles are the core way of controlling access to your cluster. Roles contain any
+ combination of cluster-wide permission, index-
+
+ specific permissions, document- and field-level security, and tenants. Then you map users
+ to these roles so that users
+ gain those permissions.
+
+ ),
+ },
+ ];
+
+ const roleLen = Query.execute(query || '', roleData).length;
+
return (
<>
-
-
- Roles
-
-
+ {updatedUX ? (
+ <>
+
+
+
+
+ ) : (
+
+
+ Roles
+
+
+ )}
{loading ? (
) : accessErrorFlag ? (
) : (
-
-
-
-
- Roles
-
- {' '}
- ({Query.execute(query || '', roleData).length})
-
-
-
-
- Roles are the core way of controlling access to your cluster. Roles contain any
- combination of cluster-wide permission, index-specific permissions, document- and
- field-level security, and tenants. Then you map users to these roles so that users
- gain those permissions.
-
-
-
-
- {actionsMenu}
-
-
- Create role
-
-
-
-
-
+ {updatedUX ? null : (
+
+
+
+
+ Roles
+
+ {' '}
+ ({Query.execute(query || '', roleData).length})
+
+
+
+
+ Roles are the core way of controlling access to your cluster. Roles contain any
+ combination of cluster-wide permission, index-specific permissions, document- and
+ field-level security, and tenants. Then you map users to these roles so that users
+ gain those permissions.
+
+
+
+
+ {actionsMenu}
+
+
+ Create role
+
+
+
+
+
+ )}
{actionsMenu}] : undefined,
+ }}
error={errorFlag ? 'Load data failed, please check console log for more detail.' : ''}
message={showTableStatusMessage(loading, roleData)}
/>
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 7e41f27c..14564dbb 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -72,6 +72,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
import { DataSourceContext } from '../../app-router';
import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { HeaderTitle, HeaderButtonOrLink } from '../../header/header-components';
interface RoleViewProps extends BreadcrumbsPageDependencies {
roleName: string;
@@ -378,6 +379,7 @@ export function RoleView(props: RoleViewProps) {
,
];
const [actionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
+ const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
if (isReserved) {
pageActions = Duplicate role;
@@ -394,6 +396,58 @@ export function RoleView(props: RoleViewProps) {
);
}
+ const reservedRoleButtons = [
+ {
+ label: 'Duplicate role',
+ isLoading: false,
+ href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
+ type: 'button',
+ fill: true,
+ // target: "_blank"
+ },
+ ];
+ const roleButtons = [
+ {
+ isLoading: false,
+ run: async () => {
+ try {
+ await requestDeleteRoles(props.coreStart.http, [props.roleName], dataSource.id);
+ setCrossPageToast(buildUrl(ResourceType.roles), {
+ id: 'deleteRole',
+ color: 'success',
+ title: `${props.roleName} deleted ${getClusterInfo(dataSourceEnabled, dataSource)}`,
+ });
+ window.location.href = buildHashUrl(ResourceType.roles);
+ } catch (e) {
+ addToast(createUnknownErrorToast('deleteRole', 'delete role'));
+ }
+ },
+ iconType: 'trash',
+ color: 'danger',
+ type: 'button', // this should be icon, but icons current do not support a border currently
+ testId: 'delete',
+ ariaLabel: 'delete',
+ // target: "_blank"
+ },
+ {
+ label: 'Duplicate',
+ isLoading: false,
+ href: duplicateRoleLink,
+ type: 'button',
+ // target: "_blank"
+ },
+ {
+ label: 'Edit role',
+ isLoading: false,
+ href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
+ fill: true,
+ type: 'button',
+ // target: "_blank"
+ },
+ ];
+
+ const roleView = isReserved ? reservedRoleButtons : roleButtons;
+
return (
<>
- {props.buildBreadcrumbs(props.roleName)}
-
-
-
-
- {props.roleName}
-
-
+ {updatedUX ? (
+ <>
+
+
+
+ ) : (
+ <>
+ {props.buildBreadcrumbs(props.roleName)}
- {pageActions}
-
+
+
+
+ {props.roleName}
+
+
+ {pageActions}
+
+
+ )}
{
- setContextMenuOpen(true);
+ setContextMenuOpen(!isContextMenuOpen);
}}
{...buttonProps}
>