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