src/views/user-profile-panel/user-profile-panel-root.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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";
  12 import {
  13     StyleRulesCallback,
  14     WithStyles,
  15     withStyles,
  16     CardContent,
  17     Button,
  18     Typography,
  19     Grid,
  20     InputLabel,
  21     Tabs, Tab,
  22     Paper,
  23     Tooltip,
  24     IconButton,
  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';
  38
  39 type CssRules = 'root' | 'emptyRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon' | 'userProfileFormMessage';
  40
  41 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  42     root: {
  43         width: '100%',
  44         overflow: 'auto'
  45     },
  46     emptyRoot: {
  47         width: '100%',
  48         overflow: 'auto',
  49         padding: theme.spacing.unit * 4,
  50     },
  51     gridItem: {
  52         height: 45,
  53         marginBottom: 20
  54     },
  55     label: {
  56         fontSize: '0.675rem',
  57         color: theme.palette.grey['600']
  58     },
  59     readOnlyValue: {
  60         fontSize: '0.875rem',
  61     },
  62     title: {
  63         fontSize: '1.1rem',
  64     },
  65     description: {
  66         color: theme.palette.grey["600"]
  67     },
  68     actions: {
  69         display: 'flex',
  70         justifyContent: 'flex-end'
  71     },
  72     content: {
  73         // reserve space for the tab bar
  74         height: `calc(100% - ${theme.spacing.unit * 7}px)`,
  75     },
  76     copyIcon: {
  77         marginLeft: theme.spacing.unit,
  78         color: theme.palette.grey["500"],
  79         cursor: 'pointer',
  80         display: 'inline',
  81         '& svg': {
  82             fontSize: '1rem'
  83         }
  84     },
  85     userProfileFormMessage: {
  86         fontSize: '1.1rem',
  87     }
  88 });
  89
  90 export interface UserProfilePanelRootActionProps {
  91     handleContextMenu: (event, resource: UserResource) => void;
  92 }
  93
  94 export interface UserProfilePanelRootDataProps {
  95     isAdmin: boolean;
  96     isSelf: boolean;
  97     isPristine: boolean;
  98     isValid: boolean;
  99     isInaccessible: boolean;
 100     userUuid: string;
 101     resources: ResourcesState;
 102     localCluster: string;
 103     userProfileFormMessage: string;
 104 }
 105
 106 const RoleTypes = [
 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' }
 115 ];
 116
 117 type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & DispatchProp & WithStyles<CssRules>;
 118
 119 export enum UserProfileGroupsColumnNames {
 120     NAME = "Name",
 121     PERMISSION = "Permission",
 122     VISIBLE = "Visible to other members",
 123     UUID = "UUID",
 124     REMOVE = "Remove",
 125 }
 126
 127 enum TABS {
 128     PROFILE = "PROFILE",
 129     GROUPS = "GROUPS",
 130
 131 }
 132
 133 export const userProfileGroupsColumns: DataColumns<string, PermissionResource> = [
 134     {
 135         name: UserProfileGroupsColumnNames.NAME,
 136         selected: true,
 137         configurable: true,
 138         filters: createTree(),
 139         render: uuid => <ResourceLinkHead uuid={uuid} />
 140     },
 141     {
 142         name: UserProfileGroupsColumnNames.PERMISSION,
 143         selected: true,
 144         configurable: true,
 145         filters: createTree(),
 146         render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
 147     },
 148     {
 149         name: UserProfileGroupsColumnNames.VISIBLE,
 150         selected: true,
 151         configurable: true,
 152         filters: createTree(),
 153         render: uuid => <ResourceLinkTailIsVisible uuid={uuid} />
 154     },
 155     {
 156         name: UserProfileGroupsColumnNames.UUID,
 157         selected: true,
 158         configurable: true,
 159         filters: createTree(),
 160         render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
 161     },
 162     {
 163         name: UserProfileGroupsColumnNames.REMOVE,
 164         selected: true,
 165         configurable: true,
 166         filters: createTree(),
 167         render: uuid => <ResourceLinkDelete uuid={uuid} />
 168     },
 169 ];
 170
 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}>
 175                 {props.label}
 176             </Typography>
 177             <Typography className={props.classes.readOnlyValue} data-cy="value">
 178                 {props.input.value}
 179             </Typography>
 180         </Grid>
 181     )
 182 );
 183
 184 export const UserProfilePanelRoot = withStyles(styles)(
 185     class extends React.Component<UserProfilePanelRootProps> {
 186         state = {
 187             value: TABS.PROFILE,
 188         };
 189
 190         componentDidMount() {
 191             this.setState({ value: TABS.PROFILE });
 192         }
 193
 194         render() {
 195             if (this.props.isInaccessible) {
 196                 return (
 197                     <Paper className={this.props.classes.emptyRoot}>
 198                         <CardContent>
 199                             <DefaultView icon={DetailsIcon} messages={['This user does not exist or your account does not have permission to view it']} />
 200                         </CardContent>
 201                     </Paper>
 202                 );
 203             } else {
 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} />
 208                     </Tabs>
 209                     {this.state.value === TABS.PROFILE &&
 210                         <CardContent>
 211                             <Grid container justify="space-between">
 212                                 <Grid item>
 213                                     <Typography className={this.props.classes.title}>
 214                                         {this.props.userUuid}
 215                                         <CopyToClipboardSnackbar value={this.props.userUuid} />
 216                                     </Typography>
 217                                 </Grid>
 218                                 <Grid item>
 219                                     <Grid container alignItems="center">
 220                                         <Grid item style={{ marginRight: '10px' }}><UserResourceAccountStatus uuid={this.props.userUuid} /></Grid>
 221                                         <Grid item>
 222                                             <Tooltip title="Actions" disableFocusListener>
 223                                                 <IconButton
 224                                                     data-cy='user-profile-panel-options-btn'
 225                                                     aria-label="Actions"
 226                                                     onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}>
 227                                                     <MoreVerticalIcon />
 228                                                 </IconButton>
 229                                             </Tooltip>
 230                                         </Grid>
 231                                     </Grid>
 232                                 </Grid>
 233                             </Grid>
 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">
 237                                         <Field
 238                                             label="First name"
 239                                             name="firstName"
 240                                             component={TextField as any}
 241                                             disabled={!this.props.isAdmin && !this.props.isSelf}
 242                                         />
 243                                     </Grid>
 244                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="lastName">
 245                                         <Field
 246                                             label="Last name"
 247                                             name="lastName"
 248                                             component={TextField as any}
 249                                             disabled={!this.props.isAdmin && !this.props.isSelf}
 250                                         />
 251                                     </Grid>
 252                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
 253                                         <Field
 254                                             label="E-mail"
 255                                             name="email"
 256                                             component={ReadOnlyField as any}
 257                                             disabled
 258                                         />
 259                                     </Grid>
 260                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
 261                                         <Field
 262                                             label="Username"
 263                                             name="username"
 264                                             component={ReadOnlyField as any}
 265                                             disabled
 266                                         />
 267                                     </Grid>
 268                                     <Grid item className={this.props.classes.gridItem} xs={12}>
 269                                         <span className={this.props.classes.userProfileFormMessage}>{this.props.userProfileFormMessage}</span>
 270                                     </Grid>
 271                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
 272                                         <Field
 273                                             label="Organization"
 274                                             name="prefs.profile.organization"
 275                                             component={TextField as any}
 276                                             disabled={!this.props.isAdmin && !this.props.isSelf}
 277                                         />
 278                                     </Grid>
 279                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
 280                                         <Field
 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}
 286                                         />
 287                                     </Grid>
 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>
 290                                         <Field
 291                                             id="prefs.profile.role"
 292                                             name="prefs.profile.role"
 293                                             component={NativeSelectField as any}
 294                                             items={RoleTypes}
 295                                             disabled={!this.props.isAdmin && !this.props.isSelf}
 296                                         />
 297                                     </Grid>
 298                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
 299                                         <Field
 300                                             label="Website"
 301                                             name="prefs.profile.website_url"
 302                                             component={TextField as any}
 303                                             disabled={!this.props.isAdmin && !this.props.isSelf}
 304                                             validate={PROFILE_URL_VALIDATION}
 305                                         />
 306                                     </Grid>
 307                                     <Grid item sm={12}>
 308                                         <Grid container direction="row" justify="flex-end">
 309                                             <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
 310                                             <Button
 311                                                 color="primary"
 312                                                 variant="contained"
 313                                                 type="submit"
 314                                                 disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
 315                                                 Save changes
 316                                             </Button>
 317                                         </Grid>
 318                                     </Grid>
 319                                 </Grid>
 320                             </form >
 321                         </CardContent>
 322                     }
 323                     {this.state.value === TABS.GROUPS &&
 324                         <div className={this.props.classes.content}>
 325                             <DataExplorer
 326                                 id={USER_PROFILE_PANEL_ID}
 327                                 data-cy="user-profile-groups-data-explorer"
 328                                 onRowClick={noop}
 329                                 onRowDoubleClick={noop}
 330                                 onContextMenu={noop}
 331                                 contextMenuColumn={false}
 332                                 hideColumnSelector
 333                                 hideSearchInput
 334                                 paperProps={{
 335                                     elevation: 0,
 336                                 }}
 337                                 defaultViewIcon={GroupsIcon}
 338                                 defaultViewMessages={['Group list is empty.']} />
 339                         </div>}
 340                 </Paper >;
 341             }
 342         }
 343
 344         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
 345             this.setState({ value });
 346         }
 347
 348         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 349             event.stopPropagation();
 350             const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
 351             if (resource) {
 352                 this.props.handleContextMenu(event, resource);
 353             }
 354         }
 355
 356     }
 357 );