Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat/update project access (#571)

Browse Source 
* feat: add user guidance in project access tab

* feat: add role description to the menu list

* feat: add tooltip to delete button

* feat: add role description to add user menu

* feat: auto select user when there is only one option

* fix: refactor role select

* fix: remove minwidth from form control

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>
This commit is contained in:
Youssef Khedher 2022-01-17 11:41:44 +01:00 committed by GitHub
parent 21ba2d8b7c
commit 3a41de2246
5 changed files with 246 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts Normal file
View File

@ -0,0 +1,33 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
pageContent: {
minHeight: '200px',
},
divider: {
height: '1px',
width: '106.65%',
marginLeft: '-2rem',
backgroundColor: '#efefef',
marginTop: '2rem',
},
actionList: {
display: 'flex',
alignItems: 'center',
},
inputLabel: { backgroundColor: '#fff' },
roleName: {
fontWeight: 'bold',
padding: '5px 0px',
},
iconButton: {
marginLeft: '0.5rem',
},
menuItem: {
width: '340px',
whiteSpace: 'normal',
},
projectRoleSelect: {
minWidth: '150px',
},
}));

140
frontend/src/component/project/access-component.js → frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
View File

@ -1,6 +1,5 @@
/* eslint-disable react/jsx-no-target-blank */
import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
Avatar,
Button,
@ -9,28 +8,30 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
InputLabel,
IconButton,
List,
ListItem,
ListItemAvatar,
ListItemSecondaryAction,
ListItemText,
MenuItem,
Select,
FormControl,
} from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import { Alert } from '@material-ui/lab';
import AddUserComponent from './access-add-user';
import AddUserComponent from '../access-add-user';
import projectApi from '../../store/project/api';
import PageContent from '../common/PageContent';
import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
import projectApi from '../../../store/project/api';
import PageContent from '../../common/PageContent';
import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
import { useStyles } from './ProjectAccess.styles';
import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
import { useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../interfaces/params';
import ProjectRoleSelect from './ProjectRoleSelect/ProjectRoleSelect';
function AccessComponent({ projectId, project }) {
const ProjectAccess = () => {
const { id } = useParams<IFeatureViewParams>();
const styles = useStyles();
const [roles, setRoles] = useState([]);
const [users, setUsers] = useState([]);
const [error, setError] = useState();
@ -39,13 +40,11 @@ function AccessComponent({ projectId, project }) {
useEffect(() => {
fetchAccess();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
}, [id]);
const fetchAccess = async () => {
try {
const access = await projectApi.fetchAccess(projectId);
const access = await projectApi.fetchAccess(id);
setRoles(access.roles);
setUsers(
access.users.map(u => ({ ...u, name: u.name || '(No name)' }))
@ -57,19 +56,24 @@ function AccessComponent({ projectId, project }) {
if (isOss()) {
return (
<PageContent>
<Alert severity="error">
Controlling access to projects requires a paid version of Unleash.
Check out <a href="https://www.getunleash.io" target="_blank">getunleash.io</a> to find out more.
</Alert>
</PageContent>);
<PageContent>
<Alert severity="error">
Controlling access to projects requires a paid version of
Unleash. Check out{' '}
<a href="https://www.getunleash.io" target="_blank">
getunleash.io
</a>{' '}
to find out more.
</Alert>
</PageContent>
);
}
const handleRoleChange = (userId, currRoleId) => async evt => {
const roleId = evt.target.value;
try {
await projectApi.removeUserFromRole(projectId, currRoleId, userId);
await projectApi.addUserToRole(projectId, roleId, userId);
await projectApi.removeUserFromRole(id, currRoleId, userId);
await projectApi.addUserToRole(id, roleId, userId);
const newUsers = users.map(u => {
if (u.id === userId) {
return { ...u, roleId };
@ -83,7 +87,7 @@ function AccessComponent({ projectId, project }) {
const addUser = async (userId, roleId) => {
try {
await projectApi.addUserToRole(projectId, roleId, userId);
await projectApi.addUserToRole(id, roleId, userId);
await fetchAccess();
} catch (err) {
setError(err.message || 'Server problems when adding users.');
@ -92,7 +96,7 @@ function AccessComponent({ projectId, project }) {
const removeAccess = (userId, roleId) => async () => {
try {
await projectApi.removeUserFromRole(projectId, roleId, userId);
await projectApi.removeUserFromRole(id, roleId, userId);
const newUsers = users.filter(u => u.id !== userId);
setUsers(newUsers);
} catch (err) {
@ -105,9 +109,7 @@ function AccessComponent({ projectId, project }) {
};
return (
<PageContent
style={{ minHeight: '400px' }}
>
<PageContent className={styles.pageContent}>
<AddUserComponent roles={roles} addUserToRole={addUser} />
<Dialog
open={!!error}
@ -131,15 +133,7 @@ function AccessComponent({ projectId, project }) {
</Button>
</DialogActions>
</Dialog>
<div
style={{
height: '1px',
width: '106.65%',
marginLeft: '-2rem',
backgroundColor: '#efefef',
marginTop: '2rem',
}}
></div>
<div className={styles.divider}></div>
<List>
{users.map(user => {
const labelId = `checkbox-list-secondary-label-${user.id}`;
@ -154,51 +148,40 @@ function AccessComponent({ projectId, project }) {
secondary={user.email || user.username}
/>
<ListItemSecondaryAction
style={{
display: 'flex',
alignItems: 'center',
}}
className={styles.actionList}
>
<FormControl variant="outlined" size="small">
<InputLabel
style={{ backgroundColor: '#fff' }}
for="add-user-select-role-label"
>
Role
</InputLabel>
<Select
labelId={`role-${user.id}-select-label`}
id={`role-${user.id}-select`}
key={user.id}
placeholder="Choose role"
value={user.roleId || ''}
onChange={handleRoleChange(
user.id,
user.roleId
)}
>
<MenuItem value="" disabled>
Choose role
</MenuItem>
{roles.map(role => (
<MenuItem
key={`${user.id}:${role.id}`}
value={role.id}
>
{role.name}
</MenuItem>
))}
</Select>
</FormControl>
<IconButton
style={{ marginLeft: '0.5rem' }}
<ProjectRoleSelect
labelId={`role-${user.id}-select-label`}
id={`role-${user.id}-select`}
key={user.id}
placeholder="Choose role"
onChange={handleRoleChange(
user.id,
user.roleId
)}
roles={roles}
value={user.roleId || ''}
>
<MenuItem value="" disabled>
Choose role
</MenuItem>
</ProjectRoleSelect>
<PermissionIconButton
className={styles.iconButton}
edge="end"
aria-label="delete"
title="Remove access"
onClick={removeAccess(user.id, user.roleId)}
disabled={users.length === 1}
tooltip={
users.length === 1
? 'A project must have at least one owner'
: 'Remove acccess'
}
>
<Delete />
</IconButton>
</PermissionIconButton>
</ListItemSecondaryAction>
</ListItem>
);
@ -206,11 +189,6 @@ function AccessComponent({ projectId, project }) {
</List>
</PageContent>
);
}
AccessComponent.propTypes = {
projectId: PropTypes.string.isRequired,
project: PropTypes.object,
};
export default AccessComponent;
export default ProjectAccess;

70
frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx Normal file
View File

@ -0,0 +1,70 @@
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
import React from 'react';
import IRole from '../../../../interfaces/role';
import { useStyles } from '../ProjectAccess.styles';
interface IProjectRoleSelect {
roles: IRole[];
labelId: string;
id: string;
placeholder?: string;
onChange: () => void;
value: any;
}
const ProjectRoleSelect: React.FC<IProjectRoleSelect> = ({
roles,
onChange,
labelId,
id,
value,
placeholder,
children,
}) => {
const styles = useStyles();
return (
<FormControl variant="outlined" size="small">
<InputLabel
style={{ backgroundColor: '#fff' }}
id="add-user-select-role-label"
>
Role
</InputLabel>
<Select
labelId={labelId}
id={id}
classes={{ root: styles.projectRoleSelect }}
placeholder={placeholder}
value={value || ''}
onChange={onChange}
renderValue={roleId => {
return roles?.find(role => {
return role.id === roleId;
}).name;
}}
>
{children}
{roles?.map(role => (
<MenuItem
key={role.id}
value={role.id}
classes={{
root: styles.menuItem,
}}
>
<div>
<span className={styles.roleName}>{role.name}</span>
<p>
{role.description ||
'No role description available.'}
</p>
</div>
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default ProjectRoleSelect;

168
frontend/src/component/project/access-add-user.js
View File

@ -2,24 +2,23 @@ import React, { useEffect, useState } from 'react';
import projectApi from '../../store/project/api';
import PropTypes from 'prop-types';
import {
Select,
MenuItem,
TextField,
CircularProgress,
InputLabel,
FormControl,
Grid,
Button,
InputAdornment,
} from '@material-ui/core';
import { Search } from '@material-ui/icons';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { Alert } from '@material-ui/lab';
import ProjectRoleSelect from './ProjectAccess/ProjectRoleSelect/ProjectRoleSelect';
function AddUserComponent({ roles, addUserToRole }) {
const [user, setUser] = useState();
const [role, setRole] = useState({});
const [options, setOptions] = useState([]);
const [loading, setLoading] = useState(false);
const [select, setSelect] = useState(false);
useEffect(() => {
if (roles.length > 0) {
@ -39,13 +38,17 @@ function AddUserComponent({ roles, addUserToRole }) {
} else {
setOptions([]);
}
setLoading(false);
};
const handleQueryUpdate = evt => {
const q = evt.target.value;
search(q);
if (options.length === 1) {
setSelect(true);
return;
}
setSelect(false);
};
const handleSelectUser = (evt, value) => {
@ -67,96 +70,85 @@ function AddUserComponent({ roles, addUserToRole }) {
};
return (
<Grid container spacing={3} alignItems="flex-end">
<Grid item>
<Autocomplete
id="add-user-component"
style={{ width: 300 }}
noOptionsText="No users found."
onChange={handleSelectUser}
autoSelect={false}
value={user || ''}
freeSolo
getOptionSelected={() => true}
filterOptions={o => o}
getOptionLabel={option => {
if (option) {
return `${option.name || '(Empty name)'} <${
option.email || option.username
}>`;
} else return '';
}}
options={options}
loading={loading}
renderInput={params => (
<TextField
{...params}
label="User"
variant="outlined"
size="small"
name="search"
onChange={handleQueryUpdate}
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress
color="inherit"
size={20}
/>
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
</Grid>
<Grid item>
<FormControl
variant="outlined"
size="small"
style={{ minWidth: '125px' }}
>
<InputLabel
style={{ backgroundColor: '#fff' }}
id="add-user-select-role-label"
>
Role
</InputLabel>
<Select
<>
<Alert severity="info" style={{ marginBottom: '20px' }}>
The user must have an Unleash root role before added to the
project.
</Alert>
<Grid container spacing={3} alignItems="flex-end">
<Grid item>
<Autocomplete
id="add-user-component"
style={{ width: 300 }}
noOptionsText="No users found."
onChange={handleSelectUser}
autoSelect={select}
value={user || ''}
freeSolo
getOptionSelected={() => true}
filterOptions={o => o}
getOptionLabel={option => {
if (option) {
return `${option.name || '(Empty name)'} <${
option.email || option.username
}>`;
} else return '';
}}
options={options}
loading={loading}
renderInput={params => (
<TextField
{...params}
label="User"
variant="outlined"
size="small"
name="search"
onChange={handleQueryUpdate}
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress
color="inherit"
size={20}
/>
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
</Grid>
<Grid item>
<ProjectRoleSelect
labelId="add-user-select-role-label"
id="add-user-select-role"
placeholder="Project role"
value={role.id || ''}
onChange={handleRoleChange}
roles={roles}
/>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
disabled={!user}
onClick={handleSubmit}
>
{roles.map(role => (
<MenuItem key={role.id} value={role.id}>
{role.name}
</MenuItem>
))}
</Select>
</FormControl>
Add user
</Button>
</Grid>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
disabled={!user}
onClick={handleSubmit}
>
Add user
</Button>
</Grid>
</Grid>
</>
);
}

6
frontend/src/component/project/access-container.js
View File

@ -1,9 +1,11 @@
import { connect } from 'react-redux';
import Component from './access-component';
import Component from './ProjectAccess/ProjectAccess';
const mapStateToProps = (state, props) => {
const projectBase = { id: '', name: '', description: '' };
const realProject = state.projects.toJS().find(n => n.id === props.projectId);
const realProject = state.projects
.toJS()
.find(n => n.id === props.projectId);
const project = Object.assign(projectBase, realProject);
return {