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 { DispatchProp } from 'react-redux';
8 import { UserResource } from 'models/user';
9 import { TextField } from "components/text-field/text-field";
10 import { DataExplorer } from "views-components/data-explorer/data-explorer";
11 import { NativeSelectField } from "components/select-field/select-field";
25 } from '@material-ui/core';
26 import { ArvadosTheme } from 'common/custom-theme';
27 import { PROFILE_EMAIL_VALIDATION, PROFILE_URL_VALIDATION } from "validators/validators";
28 import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
29 import { noop } from 'lodash';
30 import { DetailsIcon, GroupsIcon, MoreVerticalIcon } from 'components/icon/icon';
31 import { DataColumns } from 'components/data-table/data-table';
32 import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible, UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
33 import { createTree } from 'models/tree';
34 import { getResource, ResourcesState } from 'store/resources/resources';
35 import { DefaultView } from 'components/default-view/default-view';
36 import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
37 import { PermissionResource } from 'models/permission';
39 type CssRules = 'root' | 'emptyRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon' | 'userProfileFormMessage';
41 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
49 padding: theme.spacing.unit * 4,
57 color: theme.palette.grey['600']
66 color: theme.palette.grey["600"]
70 justifyContent: 'flex-end'
73 // reserve space for the tab bar
74 height: `calc(100% - ${theme.spacing.unit * 7}px)`,
77 marginLeft: theme.spacing.unit,
78 color: theme.palette.grey["500"],
85 userProfileFormMessage: {
90 export interface UserProfilePanelRootActionProps {
91 handleContextMenu: (event, resource: UserResource) => void;
94 export interface UserProfilePanelRootDataProps {
99 isInaccessible: boolean;
101 resources: ResourcesState;
102 localCluster: string;
103 userProfileFormMessage: string;
107 { key: '', value: '' },
108 { key: 'Bio-informatician', value: 'Bio-informatician' },
109 { key: 'Data Scientist', value: 'Data Scientist' },
110 { key: 'Analyst', value: 'Analyst' },
111 { key: 'Researcher', value: 'Researcher' },
112 { key: 'Software Developer', value: 'Software Developer' },
113 { key: 'System Administrator', value: 'System Administrator' },
114 { key: 'Other', value: 'Other' }
117 type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & DispatchProp & WithStyles<CssRules>;
119 export enum UserProfileGroupsColumnNames {
121 PERMISSION = "Permission",
122 VISIBLE = "Visible to other members",
133 export const userProfileGroupsColumns: DataColumns<string, PermissionResource> = [
135 name: UserProfileGroupsColumnNames.NAME,
138 filters: createTree(),
139 render: uuid => <ResourceLinkHead uuid={uuid} />
142 name: UserProfileGroupsColumnNames.PERMISSION,
145 filters: createTree(),
146 render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
149 name: UserProfileGroupsColumnNames.VISIBLE,
152 filters: createTree(),
153 render: uuid => <ResourceLinkTailIsVisible uuid={uuid} />
156 name: UserProfileGroupsColumnNames.UUID,
159 filters: createTree(),
160 render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
163 name: UserProfileGroupsColumnNames.REMOVE,
166 filters: createTree(),
167 render: uuid => <ResourceLinkDelete uuid={uuid} />
171 const ReadOnlyField = withStyles(styles)(
172 (props: ({ label: string, input: { value: string } }) & WithStyles<CssRules>) => (
173 <Grid item xs={12} data-cy="field">
174 <Typography className={props.classes.label}>
177 <Typography className={props.classes.readOnlyValue} data-cy="value">
184 export const UserProfilePanelRoot = withStyles(styles)(
185 class extends React.Component<UserProfilePanelRootProps> {
190 componentDidMount() {
191 this.setState({ value: TABS.PROFILE });
195 if (this.props.isInaccessible) {
197 <Paper className={this.props.classes.emptyRoot}>
199 <DefaultView icon={DetailsIcon} messages={['This user does not exist or your account does not have permission to view it']} />
204 return <Paper className={this.props.classes.root}>
205 <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
206 <Tab label={TABS.PROFILE} value={TABS.PROFILE} />
207 <Tab label={TABS.GROUPS} value={TABS.GROUPS} />
209 {this.state.value === TABS.PROFILE &&
211 <Grid container justify="space-between">
213 <Typography className={this.props.classes.title}>
214 {this.props.userUuid}
215 <CopyToClipboardSnackbar value={this.props.userUuid} />
219 <Grid container alignItems="center">
220 <Grid item style={{ marginRight: '10px' }}><UserResourceAccountStatus uuid={this.props.userUuid} /></Grid>
222 <Tooltip title="Actions" disableFocusListener>
224 data-cy='user-profile-panel-options-btn'
226 onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}>
234 <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
235 <Grid container spacing={24}>
236 <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="firstName">
240 component={TextField as any}
241 disabled={!this.props.isAdmin && !this.props.isSelf}
244 <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="lastName">
248 component={TextField as any}
249 disabled={!this.props.isAdmin && !this.props.isSelf}
252 <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
256 component={ReadOnlyField as any}
260 <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
264 component={ReadOnlyField as any}
268 <Grid item className={this.props.classes.gridItem} xs={12}>
269 <span className={this.props.classes.userProfileFormMessage}>{this.props.userProfileFormMessage}</span>
271 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
274 name="prefs.profile.organization"
275 component={TextField as any}
276 disabled={!this.props.isAdmin && !this.props.isSelf}
279 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
281 label="E-mail at Organization"
282 name="prefs.profile.organization_email"
283 component={TextField as any}
284 disabled={!this.props.isAdmin && !this.props.isSelf}
285 validate={PROFILE_EMAIL_VALIDATION}
288 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
289 <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
291 id="prefs.profile.role"
292 name="prefs.profile.role"
293 component={NativeSelectField as any}
295 disabled={!this.props.isAdmin && !this.props.isSelf}
298 <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
301 name="prefs.profile.website_url"
302 component={TextField as any}
303 disabled={!this.props.isAdmin && !this.props.isSelf}
304 validate={PROFILE_URL_VALIDATION}
308 <Grid container direction="row" justify="flex-end">
309 <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
314 disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
323 {this.state.value === TABS.GROUPS &&
324 <div className={this.props.classes.content}>
326 id={USER_PROFILE_PANEL_ID}
327 data-cy="user-profile-groups-data-explorer"
329 onRowDoubleClick={noop}
331 contextMenuColumn={false}
337 defaultViewIcon={GroupsIcon}
338 defaultViewMessages={['Group list is empty.']} />
344 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
345 this.setState({ value });
348 handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
349 event.stopPropagation();
350 const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
352 this.props.handleContextMenu(event, resource);