Skip to content

Commit

Permalink
visual tweak for role creation page
Browse files Browse the repository at this point in the history
  • Loading branch information
@eokoneyo
eokoneyo committed Jun 13, 2024
1 parent dd25dd2 commit eb6497b
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 77 deletions.
190 changes: 115 additions & 75 deletions x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
EuiFlexItem,
EuiForm,
EuiFormRow,
EuiIconTip,
EuiPanel,
EuiSpacer,
EuiText,
Expand Down Expand Up @@ -555,52 +556,46 @@ export const EditRolePage: FunctionComponent<Props> = ({

const getElasticsearchPrivileges = () => {
return (
<div>
<EuiSpacer />
<ElasticsearchPrivileges
role={role}
editable={!isRoleReadOnly}
indicesAPIClient={indicesAPIClient}
onChange={onRoleChange}
runAsUsers={runAsUsers}
validator={validator}
indexPatterns={indexPatternsTitles}
remoteClusters={remoteClustersState.value}
builtinESPrivileges={builtInESPrivileges}
license={license}
docLinks={docLinks}
canUseRemoteIndices={
buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteIndices
}
canUseRemoteClusters={
buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteClusters
}
isDarkMode={isDarkMode}
buildFlavor={buildFlavor}
/>
</div>
<ElasticsearchPrivileges
role={role}
editable={!isRoleReadOnly}
indicesAPIClient={indicesAPIClient}
onChange={onRoleChange}
runAsUsers={runAsUsers}
validator={validator}
indexPatterns={indexPatternsTitles}
remoteClusters={remoteClustersState.value}
builtinESPrivileges={builtInESPrivileges}
license={license}
docLinks={docLinks}
canUseRemoteIndices={
buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteIndices
}
canUseRemoteClusters={
buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteClusters
}
isDarkMode={isDarkMode}
buildFlavor={buildFlavor}
/>
);
};

const onRoleChange = (newRole: Role) => setRole(newRole);

const getKibanaPrivileges = () => {
return (
<div>
<EuiSpacer />
<KibanaPrivilegesRegion
kibanaPrivileges={new KibanaPrivileges(kibanaPrivileges, features)}
spaces={spaces.list}
spacesEnabled={spaces.enabled}
uiCapabilities={uiCapabilities}
canCustomizeSubFeaturePrivileges={license.getFeatures().allowSubFeaturePrivileges}
editable={!isRoleReadOnly}
role={role}
onChange={onRoleChange}
validator={validator}
spacesApiUi={spacesApiUi}
/>
</div>
<KibanaPrivilegesRegion
kibanaPrivileges={new KibanaPrivileges(kibanaPrivileges, features)}
spaces={spaces.list}
spacesEnabled={spaces.enabled}
uiCapabilities={uiCapabilities}
canCustomizeSubFeaturePrivileges={license.getFeatures().allowSubFeaturePrivileges}
editable={!isRoleReadOnly}
role={role}
onChange={onRoleChange}
validator={validator}
spacesApiUi={spacesApiUi}
/>
);
};

Expand Down Expand Up @@ -797,44 +792,89 @@ export const EditRolePage: FunctionComponent<Props> = ({

return (
<div className="editRolePage">
<EuiForm {...formError}>
{getFormTitle()}
<EuiSpacer />
<EuiText size="s">
<FormattedMessage
id="xpack.security.management.editRole.setPrivilegesToKibanaSpacesDescription"
defaultMessage="Set privileges on your Elasticsearch data and control access to your Project spaces."
/>
</EuiText>
{isRoleReserved && (
<Fragment>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
<p id="reservedRoleDescription" tabIndex={0}>
<EuiForm {...formError} fullWidth>
<EuiFlexGroup direction="column">
<EuiFlexItem>
{getFormTitle()}
<EuiSpacer />
<EuiText size="s">
<FormattedMessage
id="xpack.security.management.editRole.setPrivilegesToKibanaSpacesDescription"
defaultMessage="Set privileges on your Elasticsearch data and control access to your Project spaces."
/>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
{isRoleReserved && (
<Fragment>
<EuiText size="s" color="subdued">
<p id="reservedRoleDescription" tabIndex={0}>
<FormattedMessage
id="xpack.security.management.editRole.modifyingReversedRolesDescription"
defaultMessage="Reserved roles are built-in and cannot be removed or modified."
/>
</p>
</EuiText>
</Fragment>
)}
</EuiFlexItem>
<EuiFlexItem>
{isDeprecatedRole && (
<Fragment>
<EuiSpacer size="s" />
<EuiCallOut
title={getExtendedRoleDeprecationNotice(role)}
color="warning"
iconType="warning"
/>
</Fragment>
)}
</EuiFlexItem>
<EuiFlexItem>{getRoleNameAndDescription()}</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={
<FormattedMessage
id="xpack.security.management.editRole.modifyingReversedRolesDescription"
defaultMessage="Reserved roles are built-in and cannot be removed or modified."
id="xpack.security.management.editRole.dataLayerLabel"
defaultMessage="Data Layer"
/>
</p>
</EuiText>
</Fragment>
)}
{isDeprecatedRole && (
<Fragment>
<EuiSpacer size="s" />
<EuiCallOut
title={getExtendedRoleDeprecationNotice(role)}
color="warning"
iconType="warning"
/>
</Fragment>
)}
<EuiSpacer />
{getRoleNameAndDescription()}
{getElasticsearchPrivileges()}
{getKibanaPrivileges()}
<EuiSpacer />
{getFormButtons()}
}
>
{getElasticsearchPrivileges()}
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<FormattedMessage
id="xpack.security.management.editRole.appLayerLabel"
defaultMessage="Application layer"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip
type="iInCircle"
color="subdued"
content={
<FormattedMessage
id="xpack.security.management.editRole.appLayerTooltipText"
defaultMessage="Feature access is granted on a per space basis for all features. Feature visibility is set on the space. Both must be enabled for this role to use a feature"
/>
}
/>
</EuiFlexItem>
</EuiFlexGroup>
}
>
{getKibanaPrivileges()}
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow fullWidth={false}>{getFormButtons()}</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</div>
);
Expand Down
10 changes: 9 additions & 1 deletion .../roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,18 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
<h2>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.modalTitle"
defaultMessage="Kibana privileges"
defaultMessage="Assign role to space"
/>
</h2>
</EuiTitle>
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.modalHeadline"
defaultMessage="This role will be granted access to the following spaces"
/>
</p>
</EuiText>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiErrorBoundary>{this.getForm()}</EuiErrorBoundary>
Expand Down
2 changes: 1 addition & 1 deletion ...it_role/privileges/kibana/space_aware_privilege_section/space_aware_privilege_section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export class SpaceAwarePrivilegeSection extends Component<Props, State> {
>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeSection.addSpacePrivilegeButton"
defaultMessage="Add Kibana privilege"
defaultMessage="Assign to space"
/>
</EuiButton>
);
Expand Down

0 comments on commit eb6497b

Please sign in to comment.