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' | 'title' | 'description' | 'actions' | 'content';
36 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
42 // ...theme.mixins.gutters()
55 color: theme.palette.grey["600"]
59 justifyContent: 'flex-end'
62 // reserve space for the tab bar
63 height: `calc(100% - ${theme.spacing.unit * 7}px)`,
67 export interface UserProfilePanelRootActionProps {
68 openSetupShellAccount: (uuid: string) => void;
69 loginAs: (uuid: string) => void;
70 openDeactivateDialog: (uuid: string) => void;
73 export interface UserProfilePanelRootDataProps {
81 { key: 'Bio-informatician', value: 'Bio-informatician' },
82 { key: 'Data Scientist', value: 'Data Scientist' },
83 { key: 'Analyst', value: 'Analyst' },
84 { key: 'Researcher', value: 'Researcher' },
85 { key: 'Software Developer', value: 'Software Developer' },
86 { key: 'System Administrator', value: 'System Administrator' },
87 { key: 'Other', value: 'Other' }
90 type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & WithStyles<CssRules>;
92 export enum UserProfileGroupsColumnNames {
94 PERMISSION = "Permission",
95 VISIBLE = "Visible to other members",
100 export const userProfileGroupsColumns: DataColumns<string> = [
102 name: UserProfileGroupsColumnNames.NAME,
105 filters: createTree(),
106 render: uuid => <ResourceLinkHead uuid={uuid} />
109 name: UserProfileGroupsColumnNames.PERMISSION,
112 filters: createTree(),
113 render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
116 name: UserProfileGroupsColumnNames.VISIBLE,
119 filters: createTree(),
120 render: uuid => <ResourceLinkTailIsVisible uuid={uuid} />
123 name: UserProfileGroupsColumnNames.UUID,
126 filters: createTree(),
127 render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
130 name: UserProfileGroupsColumnNames.REMOVE,
133 filters: createTree(),
134 render: uuid => <ResourceLinkDelete uuid={uuid} />
138 export const UserProfilePanelRoot = withStyles(styles)(
139 class extends React.Component<UserProfilePanelRootProps> {
144 componentDidMount() {
145 this.setState({ value: 0 });
149 return <Paper className={this.props.classes.root}>
150 <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
151 <Tab label="PROFILE" />
152 <Tab label="GROUPS" />
153 <Tab label="ADMIN" />
155 {this.state.value === 0 &&
156 // <Card className={this.props.classes.root}>
158 <form onSubmit={this.props.handleSubmit}>
159 <Grid container spacing={24}>
160 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
164 component={TextField as any}
168 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
172 component={TextField as any}
176 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
180 component={TextField as any}
184 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
188 component={TextField as any}
192 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
195 name="prefs.profile.organization"
196 component={TextField as any}
197 validate={MY_ACCOUNT_VALIDATION}
201 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
203 label="E-mail at Organization"
204 name="prefs.profile.organization_email"
205 component={TextField as any}
206 validate={MY_ACCOUNT_VALIDATION}
210 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
211 <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
213 id="prefs.profile.role"
214 name="prefs.profile.role"
215 component={NativeSelectField as any}
219 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
222 name="prefs.profile.website_url"
223 component={TextField as any}
227 <Grid container direction="row" justify="flex-end">
228 <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
233 disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
243 {this.state.value === 1 &&
244 <div className={this.props.classes.content}>
246 id={USER_PROFILE_PANEL_ID}
248 onRowDoubleClick={noop}
249 contextMenuColumn={false}
255 dataTableDefaultView={
256 <DataTableDefaultView
258 messages={['Group list is empty.']} />
261 {this.state.value === 2 &&
262 <Paper elevation={0} className={this.props.classes.adminRoot}>
268 alignItems={'center'}>
270 <Typography variant="h6" className={this.props.classes.title}>
273 <Typography variant="body1" className={this.props.classes.description}>
274 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.
277 <Grid item sm={'auto'} xs={12}>
278 <Button variant="contained"
280 onClick={() => {this.props.openSetupShellAccount(this.props.initialValues.uuid)}}
293 alignItems={'center'}>
295 <Typography variant="h6" className={this.props.classes.title}>
298 <Typography variant="body1" className={this.props.classes.description}>
299 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.
302 <Grid item sm={'auto'} xs={12}>
303 <Button variant="contained"
305 onClick={() => {this.props.openDeactivateDialog(this.props.initialValues.uuid)}}
318 alignItems={'center'}>
320 <Typography variant="h6" className={this.props.classes.title}>
323 <Typography variant="body1" className={this.props.classes.description}>
324 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.
327 <Grid item sm={'auto'} xs={12}>
328 <Button variant="contained"
330 onClick={() => {this.props.loginAs(this.props.initialValues.uuid)}}
342 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
343 this.setState({ value });