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