services/workbench2/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 { CustomStyleRulesCallback } from 'common/custom-theme';
  13 import {
  14     CardContent,
  15     Button,
  16     Typography,
  17     Grid,
  18     InputLabel,
  19     Tabs,
  20     Tab,
  21     Paper,
  22     Tooltip,
  23     IconButton,
  24 } from '@mui/material';
  25 import { WithStyles } from '@mui/styles';
  26 import withStyles from '@mui/styles/withStyles';
  27 import { ArvadosTheme } from 'common/custom-theme';
  28 import { PROFILE_EMAIL_VALIDATION, PROFILE_URL_VALIDATION } from "validators/validators";
  29 import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
  30 import { noop } from 'lodash';
  31 import { DetailsIcon, GroupsIcon, MoreVerticalIcon } from 'components/icon/icon';
  32 import { DataColumns } from 'components/data-table/data-table';
  33 import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible, UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
  34 import { createTree } from 'models/tree';
  35 import { getResource, ResourcesState } from 'store/resources/resources';
  36 import { DefaultView } from 'components/default-view/default-view';
  37 import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
  38 import { PermissionResource } from 'models/permission';
  39
  40 type CssRules = 'root' | 'emptyRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon' | 'userProfileFormMessage';
  41
  42 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  43     root: {
  44         width: '100%',
  45         overflow: 'auto'
  46     },
  47     emptyRoot: {
  48         width: '100%',
  49         overflow: 'auto',
  50         padding: theme.spacing(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(7)})`,
  76     },
  77     copyIcon: {
  78         marginLeft: theme.spacing(1),
  79         color: theme.palette.grey["500"],
  80         cursor: 'pointer',
  81         display: 'inline',
  82         '& svg': {
  83             fontSize: '1rem'
  84         }
  85     },
  86     userProfileFormMessage: {
  87         fontSize: '1.1rem',
  88     }
  89 });
  90
  91 export interface UserProfilePanelRootActionProps {
  92     handleContextMenu: (event, resource: UserResource) => void;
  93 }
  94
  95 export interface UserProfilePanelRootDataProps {
  96     isAdmin: boolean;
  97     isSelf: boolean;
  98     isPristine: boolean;
  99     isValid: boolean;
 100     isInaccessible: boolean;
 101     userUuid: string;
 102     resources: ResourcesState;
 103     localCluster: string;
 104     userProfileFormMessage: string;
 105 }
 106
 107 const RoleTypes = [
 108     { key: '', value: '' },
 109     { key: 'Bio-informatician', value: 'Bio-informatician' },
 110     { key: 'Data Scientist', value: 'Data Scientist' },
 111     { key: 'Analyst', value: 'Analyst' },
 112     { key: 'Researcher', value: 'Researcher' },
 113     { key: 'Software Developer', value: 'Software Developer' },
 114     { key: 'System Administrator', value: 'System Administrator' },
 115     { key: 'Other', value: 'Other' }
 116 ];
 117
 118 type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & DispatchProp & WithStyles<CssRules>;
 119
 120 export enum UserProfileGroupsColumnNames {
 121     NAME = "Name",
 122     PERMISSION = "Permission",
 123     VISIBLE = "Visible to other members",
 124     UUID = "UUID",
 125     REMOVE = "Remove",
 126 }
 127
 128 enum TABS {
 129     PROFILE = "PROFILE",
 130     GROUPS = "GROUPS",
 131
 132 }
 133
 134 export const userProfileGroupsColumns: DataColumns<string, PermissionResource> = [
 135     {
 136         name: UserProfileGroupsColumnNames.NAME,
 137         selected: true,
 138         configurable: true,
 139         filters: createTree(),
 140         render: uuid => <ResourceLinkHead uuid={uuid} />
 141     },
 142     {
 143         name: UserProfileGroupsColumnNames.PERMISSION,
 144         selected: true,
 145         configurable: true,
 146         filters: createTree(),
 147         render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
 148     },
 149     {
 150         name: UserProfileGroupsColumnNames.VISIBLE,
 151         selected: true,
 152         configurable: true,
 153         filters: createTree(),
 154         render: uuid => <ResourceLinkTailIsVisible uuid={uuid} />
 155     },
 156     {
 157         name: UserProfileGroupsColumnNames.UUID,
 158         selected: true,
 159         configurable: true,
 160         filters: createTree(),
 161         render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
 162     },
 163     {
 164         name: UserProfileGroupsColumnNames.REMOVE,
 165         selected: true,
 166         configurable: true,
 167         filters: createTree(),
 168         render: uuid => <ResourceLinkDelete uuid={uuid} />
 169     },
 170 ];
 171
 172 const ReadOnlyField = withStyles(styles)(
 173     (props: ({ label: string, input: { value: string } }) & WithStyles<CssRules>) => (
 174         <Grid item xs={12} data-cy="field">
 175             <Typography className={props.classes.label}>
 176                 {props.label}
 177             </Typography>
 178             <Typography className={props.classes.readOnlyValue} data-cy="value">
 179                 {props.input.value}
 180             </Typography>
 181         </Grid>
 182     )
 183 );
 184
 185 export const UserProfilePanelRoot = withStyles(styles)(
 186     class extends React.Component<UserProfilePanelRootProps> {
 187         state = {
 188             value: TABS.PROFILE,
 189         };
 190
 191         componentDidMount() {
 192             this.setState({ value: TABS.PROFILE });
 193         }
 194
 195         render() {
 196             if (this.props.isInaccessible) {
 197                 return (
 198                     <Paper className={this.props.classes.emptyRoot}>
 199                         <CardContent>
 200                             <DefaultView icon={DetailsIcon} messages={['This user does not exist or your account does not have permission to view it']} />
 201                         </CardContent>
 202                     </Paper>
 203                 );
 204             } else {
 205                 return (
 206                     <Paper className={this.props.classes.root}>
 207                         <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
 208                             <Tab label={TABS.PROFILE} value={TABS.PROFILE} />
 209                             <Tab label={TABS.GROUPS} value={TABS.GROUPS} />
 210                         </Tabs>
 211                         {this.state.value === TABS.PROFILE &&
 212                             <CardContent>
 213                                 <Grid container justifyContent="space-between">
 214                                     <Grid item>
 215                                         <Typography className={this.props.classes.title}>
 216                                             {this.props.userUuid}
 217                                             <CopyToClipboardSnackbar value={this.props.userUuid} />
 218                                         </Typography>
 219                                     </Grid>
 220                                     <Grid item>
 221                                         <Grid container alignItems="center">
 222                                             <Grid item style={{ marginRight: '10px' }}><UserResourceAccountStatus uuid={this.props.userUuid} /></Grid>
 223                                             <Grid item>
 224                                                 <Tooltip title="Actions" disableFocusListener>
 225                                                     <IconButton
 226                                                         data-cy='user-profile-panel-options-btn'
 227                                                         aria-label="Actions"
 228                                                         onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}
 229                                                         size="large">
 230                                                         <MoreVerticalIcon />
 231                                                     </IconButton>
 232                                                 </Tooltip>
 233                                             </Grid>
 234                                         </Grid>
 235                                     </Grid>
 236                                 </Grid>
 237                                 <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
 238                                     <Grid container spacing={3}>
 239                                         <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="firstName">
 240                                             <Field
 241                                                 label="First name"
 242                                                 name="firstName"
 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="lastName">
 248                                             <Field
 249                                                 label="Last name"
 250                                                 name="lastName"
 251                                                 component={TextField as any}
 252                                                 disabled={!this.props.isAdmin && !this.props.isSelf}
 253                                             />
 254                                         </Grid>
 255                                         <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
 256                                             <Field
 257                                                 label="E-mail"
 258                                                 name="email"
 259                                                 component={ReadOnlyField as any}
 260                                                 disabled
 261                                             />
 262                                         </Grid>
 263                                         <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
 264                                             <Field
 265                                                 label="Username"
 266                                                 name="username"
 267                                                 component={ReadOnlyField as any}
 268                                                 disabled
 269                                             />
 270                                         </Grid>
 271                                         <Grid item className={this.props.classes.gridItem} xs={12}>
 272                                             <span className={this.props.classes.userProfileFormMessage}>{this.props.userProfileFormMessage}</span>
 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                                                 validate={PROFILE_URL_VALIDATION}
 308                                             />
 309                                         </Grid>
 310                                         <Grid item sm={12}>
 311                                             <Grid container direction="row" justifyContent="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                                     defaultViewIcon={GroupsIcon}
 341                                     defaultViewMessages={['Group list is empty.']} />
 342                             </div>}
 343                     </Paper >
 344                 );
 345             }
 346         }
 347
 348         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
 349             this.setState({ value });
 350         }
 351
 352         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 353             event.stopPropagation();
 354             const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
 355             if (resource) {
 356                 this.props.handleContextMenu(event, resource);
 357             }
 358         }
 359
 360     }
 361 );