18559: Update user profile cypress tests and fix minor issues

[arvados-workbench2.git] / src / views / user-profile-panel / user-profile-panel-root.tsx

diff --git a/src/views/user-profile-panel/user-profile-panel-root.tsx b/src/views/user-profile-panel/user-profile-panel-root.tsx
index f89ca5c5e8ebe5580aed3995bc270e9d00a730f8..1c8b1da74c65e8ef5daf087acaba3dd04e9660e6 100644 (file)
--- a/src/views/user-profile-panel/user-profile-panel-root.tsx
+++ b/src/views/user-profile-panel/user-profile-panel-root.tsx
@@ -25,17 +25,16 @@ import {
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
-import { PROFILE_EMAIL_VALIDATION } from "validators/validators";
+import { PROFILE_EMAIL_VALIDATION, PROFILE_URL_VALIDATION } from "validators/validators";
 import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
 import { noop } from 'lodash';
-import { CopyIcon, DetailsIcon, GroupsIcon, MoreOptionsIcon } from 'components/icon/icon';
+import { DetailsIcon, GroupsIcon, MoreOptionsIcon } from 'components/icon/icon';
 import { DataColumns } from 'components/data-table/data-table';
-import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible } from 'views-components/data-explorer/renderers';
+import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible, UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
 import { createTree } from 'models/tree';
 import { getResource, ResourcesState } from 'store/resources/resources';
-import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
-import CopyToClipboard from 'react-copy-to-clipboard';
 import { DefaultView } from 'components/default-view/default-view';
+import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
 
 type CssRules = 'root' | 'emptyRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon';
 
@@ -188,14 +187,6 @@ export const UserProfilePanelRoot = withStyles(styles)(
             this.setState({ value: TABS.PROFILE});
         }
 
-        onCopy = (message: string) => {
-            this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
-                message,
-                hideDuration: 2000,
-                kind: SnackbarKind.SUCCESS
-            }));
-        }
-
         render() {
             if (this.props.isInaccessible) {
                 return (
@@ -214,27 +205,26 @@ export const UserProfilePanelRoot = withStyles(styles)(
                     {this.state.value === TABS.PROFILE &&
                         <CardContent>
                             <Grid container justify="space-between">
-                                <Grid item xs={11}>
+                                <Grid item>
                                     <Typography className={this.props.classes.title}>
                                         {this.props.userUuid}
-                                        <Tooltip title="Copy to clipboard">
-                                            <span className={this.props.classes.copyIcon}>
-                                                <CopyToClipboard text={this.props.userUuid || ""} onCopy={() => this.onCopy!("Copied")}>
-                                                    <CopyIcon />
-                                                </CopyToClipboard>
-                                            </span>
-                                        </Tooltip>
+                                        <CopyToClipboardSnackbar value={this.props.userUuid} />
                                     </Typography>
                                 </Grid>
-                                <Grid item xs={1} style={{ textAlign: "right" }}>
-                                    <Tooltip title="Actions" disableFocusListener>
-                                        <IconButton
-                                            data-cy='collection-panel-options-btn'
-                                            aria-label="Actions"
-                                            onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}>
-                                            <MoreOptionsIcon />
-                                        </IconButton>
-                                    </Tooltip>
+                                <Grid item>
+                                    <Grid container alignItems="center">
+                                        <Grid item style={{marginRight: '10px'}}><UserResourceAccountStatus uuid={this.props.userUuid} /></Grid>
+                                        <Grid item>
+                                            <Tooltip title="Actions" disableFocusListener>
+                                                <IconButton
+                                                    data-cy='user-profile-panel-options-btn'
+                                                    aria-label="Actions"
+                                                    onClick={(event) => this.handleContextMenu(event, this.props.userUuid)}>
+                                                    <MoreOptionsIcon />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </Grid>
+                                    </Grid>
                                 </Grid>
                             </Grid>
                             <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
@@ -243,16 +233,16 @@ export const UserProfilePanelRoot = withStyles(styles)(
                                         <Field
                                             label="First name"
                                             name="firstName"
-                                            component={ReadOnlyField as any}
-                                            disabled
+                                            component={TextField as any}
+                                            disabled={!this.props.isAdmin && !this.props.isSelf}
                                         />
                                     </Grid>
                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="lastName">
                                         <Field
                                             label="Last name"
                                             name="lastName"
-                                            component={ReadOnlyField as any}
-                                            disabled
+                                            component={TextField as any}
+                                            disabled={!this.props.isAdmin && !this.props.isSelf}
                                         />
                                     </Grid>
                                     <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
@@ -304,7 +294,7 @@ export const UserProfilePanelRoot = withStyles(styles)(
                                             name="prefs.profile.website_url"
                                             component={TextField as any}
                                             disabled={!this.props.isAdmin && !this.props.isSelf}
-
+                                            validate={PROFILE_URL_VALIDATION}
                                         />
                                     </Grid>
                                     <Grid item sm={12}>