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