1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { Field, InjectedFormProps } from "redux-form";
7 import { TextField } from "components/text-field/text-field";
8 import { DataExplorer } from "views-components/data-explorer/data-explorer";
9 import { NativeSelectField } from "components/select-field/select-field";
22 } from '@material-ui/core';
23 import { ArvadosTheme } from 'common/custom-theme';
24 import { User } from "models/user";
25 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
26 import { MY_ACCOUNT_VALIDATION } from "validators/validators";
27 import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
28 import { noop } from 'lodash';
29 import { GroupsIcon } from 'components/icon/icon';
30 import { DataColumns } from 'components/data-table/data-table';
31 import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible } from 'views-components/data-explorer/renderers';
32 import { createTree } from 'models/tree';
34 type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content';
36 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
42 // ...theme.mixins.gutters()
50 color: theme.palette.grey['600']
59 color: theme.palette.grey["600"]
63 justifyContent: 'flex-end'
66 // reserve space for the tab bar
67 height: `calc(100% - ${theme.spacing.unit * 7}px)`,
71 export interface UserProfilePanelRootActionProps {
72 openSetupShellAccount: (uuid: string) => void;
73 loginAs: (uuid: string) => void;
74 openDeactivateDialog: (uuid: string) => void;
77 export interface UserProfilePanelRootDataProps {
87 { key: 'Bio-informatician', value: 'Bio-informatician' },
88 { key: 'Data Scientist', value: 'Data Scientist' },
89 { key: 'Analyst', value: 'Analyst' },
90 { key: 'Researcher', value: 'Researcher' },
91 { key: 'Software Developer', value: 'Software Developer' },
92 { key: 'System Administrator', value: 'System Administrator' },
93 { key: 'Other', value: 'Other' }
96 type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & WithStyles<CssRules>;
98 export enum UserProfileGroupsColumnNames {
100 PERMISSION = "Permission",
101 VISIBLE = "Visible to other members",
106 export const userProfileGroupsColumns: DataColumns<string> = [
108 name: UserProfileGroupsColumnNames.NAME,
111 filters: createTree(),
112 render: uuid => <ResourceLinkHead uuid={uuid} />
115 name: UserProfileGroupsColumnNames.PERMISSION,
118 filters: createTree(),
119 render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
122 name: UserProfileGroupsColumnNames.VISIBLE,
125 filters: createTree(),
126 render: uuid => <ResourceLinkTailIsVisible uuid={uuid} />
129 name: UserProfileGroupsColumnNames.UUID,
132 filters: createTree(),
133 render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
136 name: UserProfileGroupsColumnNames.REMOVE,
139 filters: createTree(),
140 render: uuid => <ResourceLinkDelete uuid={uuid} />
144 const ReadOnlyField = withStyles(styles)(
145 (props: ({ label: string, input: {value: string} }) & WithStyles<CssRules> ) => (
147 <Typography className={props.classes.label}>
150 <Typography className={props.classes.readOnlyValue}>
157 export const UserProfilePanelRoot = withStyles(styles)(
158 class extends React.Component<UserProfilePanelRootProps> {
163 componentDidMount() {
164 this.setState({ value: 0 });
168 return <Paper className={this.props.classes.root}>
169 <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
170 <Tab label="PROFILE" />
171 <Tab label="GROUPS" />
172 <Tab label="ADMIN" disabled={!this.props.isAdmin} />
174 {this.state.value === 0 &&
176 <form onSubmit={this.props.handleSubmit}>
177 <Grid container spacing={24}>
178 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
182 component={ReadOnlyField as any}
186 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
190 component={ReadOnlyField as any}
194 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
198 component={ReadOnlyField as any}
202 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
206 component={ReadOnlyField as any}
210 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
213 name="prefs.profile.organization"
214 component={TextField as any}
215 validate={MY_ACCOUNT_VALIDATION}
216 disabled={!this.props.isAdmin && !this.props.isSelf}
219 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
221 label="E-mail at Organization"
222 name="prefs.profile.organization_email"
223 component={TextField as any}
224 validate={MY_ACCOUNT_VALIDATION}
225 disabled={!this.props.isAdmin && !this.props.isSelf}
228 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
229 <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
231 id="prefs.profile.role"
232 name="prefs.profile.role"
233 component={NativeSelectField as any}
235 disabled={!this.props.isAdmin && !this.props.isSelf}
238 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
241 name="prefs.profile.website_url"
242 component={TextField as any}
243 disabled={!this.props.isAdmin && !this.props.isSelf}
247 <Grid container direction="row" justify="flex-end">
248 <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
253 disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
262 {this.state.value === 1 &&
263 <div className={this.props.classes.content}>
265 id={USER_PROFILE_PANEL_ID}
267 onRowDoubleClick={noop}
268 contextMenuColumn={false}
274 dataTableDefaultView={
275 <DataTableDefaultView
277 messages={['Group list is empty.']} />
280 {this.state.value === 2 &&
281 <Paper elevation={0} className={this.props.classes.adminRoot}>
287 alignItems={'center'}>
289 <Typography variant="h6" className={this.props.classes.title}>
292 <Typography variant="body1" className={this.props.classes.description}>
293 This button sets up a user. After setup, they will be able use Arvados. This dialog box also allows you to optionally set up a shell account for this user. The login name is automatically generated from the user's e-mail address.
296 <Grid item sm={'auto'} xs={12}>
297 <Button variant="contained"
299 onClick={() => {this.props.openSetupShellAccount(this.props.initialValues.uuid)}}
312 alignItems={'center'}>
314 <Typography variant="h6" className={this.props.classes.title}>
317 <Typography variant="body1" className={this.props.classes.description}>
318 As an admin, you can deactivate and reset this user. This will remove all repository/VM permissions for the user. If you "setup" the user again, the user will have to sign the user agreement again. You may also want to reassign data ownership.
321 <Grid item sm={'auto'} xs={12}>
322 <Button variant="contained"
324 onClick={() => {this.props.openDeactivateDialog(this.props.initialValues.uuid)}}
337 alignItems={'center'}>
339 <Typography variant="h6" className={this.props.classes.title}>
342 <Typography variant="body1" className={this.props.classes.description}>
343 As an admin, you can log in as this user. When you’ve finished, you will need to log out and log in again with your own account.
346 <Grid item sm={'auto'} xs={12}>
347 <Button variant="contained"
349 onClick={() => {this.props.loginAs(this.props.initialValues.uuid)}}
361 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
362 this.setState({ value });