import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible } from 'views-components/data-explorer/renderers';
import { createTree } from 'models/tree';
-type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'title' | 'description' | 'actions' | 'content';
+type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
marginBottom: 20
},
label: {
- fontSize: '0.675rem'
+ fontSize: '0.675rem',
+ color: theme.palette.grey['600']
+ },
+ readOnlyValue: {
+ fontSize: '0.875rem',
},
title: {
fontSize: '1.1rem',
}
const RoleTypes = [
+ { key: '', value: '' },
{ key: 'Bio-informatician', value: 'Bio-informatician' },
{ key: 'Data Scientist', value: 'Data Scientist' },
{ key: 'Analyst', value: 'Analyst' },
REMOVE = "Remove",
}
+enum TABS {
+ PROFILE = "PROFILE",
+ GROUPS = "GROUPS",
+ ADMIN = "ADMIN",
+
+}
+
export const userProfileGroupsColumns: DataColumns<string> = [
{
name: UserProfileGroupsColumnNames.NAME,
},
];
+const ReadOnlyField = withStyles(styles)(
+ (props: ({ label: string, input: {value: string} }) & WithStyles<CssRules> ) => (
+ <Grid item xs={12} data-cy="field">
+ <Typography className={props.classes.label}>
+ {props.label}
+ </Typography>
+ <Typography className={props.classes.readOnlyValue} data-cy="value">
+ {props.input.value}
+ </Typography>
+ </Grid>
+ )
+);
+
export const UserProfilePanelRoot = withStyles(styles)(
class extends React.Component<UserProfilePanelRootProps> {
state = {
- value: 0,
+ value: TABS.PROFILE,
};
componentDidMount() {
- this.setState({ value: 0 });
+ this.setState({ value: TABS.PROFILE});
}
render() {
return <Paper className={this.props.classes.root}>
<Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
- <Tab label="PROFILE" />
- <Tab label="GROUPS" />
- <Tab label="ADMIN" disabled={!this.props.isAdmin} />
+ <Tab label={TABS.PROFILE} value={TABS.PROFILE} />
+ <Tab label={TABS.GROUPS} value={TABS.GROUPS} />
+ {this.props.isAdmin && <Tab label={TABS.ADMIN} value={TABS.ADMIN} />}
</Tabs>
- {this.state.value === 0 &&
+ {this.state.value === TABS.PROFILE &&
<CardContent>
- <form onSubmit={this.props.handleSubmit}>
+ <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
<Grid container spacing={24}>
- <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+ <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="firstName">
<Field
label="First name"
name="firstName"
- component={TextField as any}
+ component={ReadOnlyField as any}
disabled
/>
</Grid>
- <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+ <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="lastName">
<Field
label="Last name"
name="lastName"
- component={TextField as any}
+ component={ReadOnlyField as any}
disabled
/>
</Grid>
- <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+ <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
<Field
label="E-mail"
name="email"
- component={TextField as any}
+ component={ReadOnlyField as any}
disabled
/>
</Grid>
- <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+ <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
<Field
label="Username"
name="username"
- component={TextField as any}
+ component={ReadOnlyField as any}
disabled
/>
</Grid>
label="Organization"
name="prefs.profile.organization"
component={TextField as any}
- validate={MY_ACCOUNT_VALIDATION}
- required
disabled={!this.props.isAdmin && !this.props.isSelf}
/>
</Grid>
label="E-mail at Organization"
name="prefs.profile.organization_email"
component={TextField as any}
- validate={MY_ACCOUNT_VALIDATION}
- required
disabled={!this.props.isAdmin && !this.props.isSelf}
/>
</Grid>
</form >
</CardContent>
}
- {this.state.value === 1 &&
+ {this.state.value === TABS.GROUPS &&
<div className={this.props.classes.content}>
<DataExplorer
id={USER_PROFILE_PANEL_ID}
+ data-cy="user-profile-groups-data-explorer"
onRowClick={noop}
onRowDoubleClick={noop}
+ onContextMenu={noop}
contextMenuColumn={false}
hideColumnSelector
hideSearchInput
messages={['Group list is empty.']} />
} />
</div>}
- {this.state.value === 2 &&
+ {this.props.isAdmin && this.state.value === TABS.ADMIN &&
<Paper elevation={0} className={this.props.classes.adminRoot}>
<Card elevation={0}>
<CardContent>