Skip to content

Commit

Permalink
start work on assign to role flyout
Browse files Browse the repository at this point in the history
  • Loading branch information
@eokoneyo
eokoneyo committed Jun 13, 2024
1 parent eb6497b commit 31635b7
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 20 deletions.
142 changes: 123 additions & 19 deletions x-pack/plugins/spaces/public/management/view_space/view_space_roles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,60 @@
* 2.0.
*/

import type { EuiBasicTableColumn, EuiTableFieldDataColumnType } from '@elastic/eui';
import {
EuiBasicTable,
EuiButton,
EuiButtonEmpty,
EuiComboBox,
EuiFilterButton,
EuiFilterGroup,
EuiFlexGroup,
EuiFlexItem,
EuiFlyout,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiForm,
EuiFormRow,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import type {
EuiBasicTableColumn,
EuiComboBoxOptionOption,
EuiTableFieldDataColumnType,
} from '@elastic/eui';
import type { FC } from 'react';
import React, { useState } from 'react';

import type { KibanaFeature } from '@kbn/features-plugin/common';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import type { Role } from '@kbn/security-plugin-types-common';

import type { Space } from '../../../common';
import { FeatureTable } from '../edit_space/enabled_features/feature_table';

interface Props {
space: Space;
roles: Role[];
features: KibanaFeature[];
}

export const ViewSpaceAssignedRoles: FC<Props> = ({ space, roles }) => {
const filterRolesAssignedToSpace = (roles: Role[], space: Space) => {
return roles.filter((role) =>
role.kibana.reduce((acc, cur) => {
return (
(cur.spaces.includes(space.name) || cur.spaces.includes('*')) &&
Boolean(cur.base.length) &&
acc
);
}, true)
);
};

export const ViewSpaceAssignedRoles: FC<Props> = ({ space, roles, features }) => {
const [showRolesPrivilegeEditor, setShowRolesPrivilegeEditor] = useState(false);
const getRowProps = (item: Role) => {
const { name } = item;
Expand Down Expand Up @@ -89,12 +114,7 @@ export const ViewSpaceAssignedRoles: FC<Props> = ({ space, roles }) => {
},
];

const rolesInUse = roles.filter((role) => {
const privilegesSum = role.kibana.reduce((sum, privilege) => {
return sum + privilege.base.length;
}, 0);
return privilegesSum > 0;
});
const rolesInUse = filterRolesAssignedToSpace(roles, space);

if (!rolesInUse) {
return null;
Expand All @@ -104,6 +124,7 @@ export const ViewSpaceAssignedRoles: FC<Props> = ({ space, roles }) => {
<>
{showRolesPrivilegeEditor && (
<PrivilegesRolesForm
features={features}
space={space}
roles={roles}
closeFlyout={() => {
Expand Down Expand Up @@ -143,7 +164,6 @@ export const ViewSpaceAssignedRoles: FC<Props> = ({ space, roles }) => {
</EuiFlexItem>
<EuiFlexItem>
<EuiBasicTable
tableCaption="Demo of EuiBasicTable"
rowHeader="firstName"
columns={columns}
items={rolesInUse}
Expand All @@ -156,18 +176,103 @@ export const ViewSpaceAssignedRoles: FC<Props> = ({ space, roles }) => {
);
};

interface PrivilegesRolesFormProps {
space: Space;
roles: Role[];
interface PrivilegesRolesFormProps extends Props {
closeFlyout: () => void;
onSaveClick: () => void;
}

export const PrivilegesRolesForm: FC<PrivilegesRolesFormProps> = (props) => {
const { space, roles, onSaveClick, closeFlyout } = props;
const { space, roles, onSaveClick, closeFlyout, features } = props;

const [selectedRoles, setSelectedRoles] = useState<Array<EuiComboBoxOptionOption<string>>>([]);
const [spacePrivilege, setSpacePrivilege] = useState<'all' | 'read' | 'custom'>('all');

const getForm = () => {
return <textarea>{JSON.stringify(roles)}</textarea>;
return (
<EuiForm component="form" fullWidth>
<EuiFormRow label="Select a role(s)">
<EuiComboBox
aria-label={i18n.translate('xpack.spaces.management.spaceDetails.roles.selectRoles', {
defaultMessage: 'Select role to assign to the {spaceName} space',
values: { spaceName: space.name },
})}
placeholder="Select roles"
options={roles.map((role) => ({
label: role.name,
}))}
selectedOptions={selectedRoles}
onChange={(value) => {
setSelectedRoles(value);
}}
isClearable={true}
data-test-subj="roleSelectionComboBox"
autoFocus
fullWidth
/>
</EuiFormRow>
<EuiFormRow
helpText={i18n.translate(
'xpack.spaces.management.spaceDetails.roles.assign.privilegesHelpText',
{
defaultMessage:
'Assign the privilege you wish to grant to all present and future features across this space',
}
)}
>
<EuiFilterGroup fullWidth>
<EuiFilterButton
hasActiveFilters={spacePrivilege === 'all'}
onClick={() => setSpacePrivilege('all')}
>
<FormattedMessage
id="xpack.spaces.management.spaceDetails.roles.assign.privileges.all"
defaultMessage="All"
/>
</EuiFilterButton>
<EuiFilterButton
hasActiveFilters={spacePrivilege === 'read'}
onClick={() => setSpacePrivilege('read')}
>
<FormattedMessage
id="xpack.spaces.management.spaceDetails.roles.assign.privileges.read"
defaultMessage="Read"
/>
</EuiFilterButton>
<EuiFilterButton
hasActiveFilters={spacePrivilege === 'custom'}
onClick={() => setSpacePrivilege('custom')}
>
<FormattedMessage
id="xpack.spaces.management.spaceDetails.roles.assign.privileges.customize"
defaultMessage="Customize"
/>
</EuiFilterButton>
</EuiFilterGroup>
</EuiFormRow>
{spacePrivilege === 'custom' && (
<EuiFormRow
label={i18n.translate(
'xpack.spaces.management.spaceDetails.roles.assign.privileges.customizeLabelText',
{ defaultMessage: 'Customize by feature' }
)}
>
<>
<EuiText size="xs">
<p>
<FormattedMessage
id="xpack.spaces.management.spaceDetails.roles.assign.privileges.customizeDescriptionText"
defaultMessage="Increase privilege levels per feature basis. Some features might be hidden by the
space or affected by a global space privilege"
/>
</p>
</EuiText>
<EuiSpacer />
<FeatureTable space={space} features={features} />
</>
</EuiFormRow>
)}
</EuiForm>
);
};

const getSaveButton = () => {
Expand All @@ -186,18 +291,17 @@ export const PrivilegesRolesForm: FC<PrivilegesRolesFormProps> = (props) => {
<EuiTitle size="m">
<h2>Assign role to {space.name}</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<EuiSpacer size="s" />
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.spaces.management.spaceDetails.privilegeForm.heading"
defaultMessage="Roles will be granted access to the current space according to their default privileges. Use the &lsquo;Customize&rsquo; option to override default privileges."
/>
</p>
</EuiText>
{getForm()}
</EuiFlyoutBody>
</EuiFlyoutHeader>
<EuiFlyoutBody>{getForm()}</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/spaces/public/management/view_space/view_space_tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const getTabs = (space: Space, features: KibanaFeature[], roles: Role[]):
{roles.length}
</EuiNotificationBadge>
),
content: <ViewSpaceAssignedRoles space={space} roles={roles} />,
content: <ViewSpaceAssignedRoles space={space} roles={roles} features={features} />,
},
];
};

0 comments on commit 31635b7

Please sign in to comment.