X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/addb01b6d7636a8963ddb1eff4799ebc96f44739..46b878b9773789f7a953f58f3de2cc4bf370e153:/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 c0c80e3c..82c20728 100644
--- a/src/views/user-profile-panel/user-profile-panel-root.tsx
+++ b/src/views/user-profile-panel/user-profile-panel-root.tsx
@@ -31,7 +31,7 @@ import { DataColumns } from 'components/data-table/data-table';
 import { ResourceLinkHeadUuid, ResourceLinkHeadPermissionLevel, ResourceLinkHead, ResourceLinkDelete, ResourceLinkTailIsVisible } from 'views-components/data-explorer/renderers';
 import { createTree } from 'models/tree';
 
-type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'title' | 'description' | 'actions' | 'content';
+type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -46,7 +46,11 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         marginBottom: 20
     },
     label: {
-        fontSize: '0.675rem'
+        fontSize: '0.675rem',
+        color: theme.palette.grey['600']
+    },
+    readOnlyValue: {
+        fontSize: '0.875rem',
     },
     title: {
         fontSize: '1.1rem',
@@ -71,6 +75,8 @@ export interface UserProfilePanelRootActionProps {
 }
 
 export interface UserProfilePanelRootDataProps {
+    isAdmin: boolean;
+    isSelf: boolean;
     isPristine: boolean;
     isValid: boolean;
     initialValues?: User;
@@ -78,6 +84,7 @@ export interface UserProfilePanelRootDataProps {
 }
 
 const RoleTypes = [
+    { key: '', value: '' },
     { key: 'Bio-informatician', value: 'Bio-informatician' },
     { key: 'Data Scientist', value: 'Data Scientist' },
     { key: 'Analyst', value: 'Analyst' },
@@ -89,11 +96,6 @@ const RoleTypes = [
 
 type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & WithStyles<CssRules>;
 
-// type LocalClusterProp = { localCluster: string };
-// const renderField: React.ComponentType<WrappedFieldProps & LocalClusterProp> = ({ input, localCluster }) => (
-//     <span>{localCluster === input.value.substring(0, 5) ? "" : "federated"} user {input.value}</span>
-// );
-
 export enum UserProfileGroupsColumnNames {
     NAME = "Name",
     PERMISSION = "Permission",
@@ -102,6 +104,13 @@ export enum UserProfileGroupsColumnNames {
     REMOVE = "Remove",
 }
 
+enum TABS {
+    PROFILE = "PROFILE",
+    GROUPS = "GROUPS",
+    ADMIN = "ADMIN",
+
+}
+
 export const userProfileGroupsColumns: DataColumns<string> = [
     {
         name: UserProfileGroupsColumnNames.NAME,
@@ -140,121 +149,130 @@ export const userProfileGroupsColumns: DataColumns<string> = [
     },
 ];
 
+const ReadOnlyField = withStyles(styles)(
+    (props: ({ label: string, input: {value: string} }) & WithStyles<CssRules> ) => (
+        <Grid item xs={12} data-cy="field">
+            <Typography className={props.classes.label}>
+                {props.label}
+            </Typography>
+            <Typography className={props.classes.readOnlyValue} data-cy="value">
+                {props.input.value}
+            </Typography>
+        </Grid>
+    )
+);
+
 export const UserProfilePanelRoot = withStyles(styles)(
     class extends React.Component<UserProfilePanelRootProps> {
         state = {
-            value: 0,
+            value: TABS.PROFILE,
         };
 
         componentDidMount() {
-            this.setState({ value: 0 });
+            this.setState({ value: TABS.PROFILE});
         }
 
         render() {
             return <Paper className={this.props.classes.root}>
-                {/* <Typography variant="title" className={this.props.classes.title}>
-                    Logged in as <Field name="uuid" component={renderField} localCluster={this.props.localCluster} />
-                </Typography> */}
-                <Tabs value={this.state.value} onChange={this.handleChange} fullWidth>
-                    <Tab label="PROFILE" />
-                    <Tab label="GROUPS" />
-                    <Tab label="ADMIN" />
+                <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
+                    <Tab label={TABS.PROFILE} value={TABS.PROFILE} />
+                    <Tab label={TABS.GROUPS} value={TABS.GROUPS} />
+                    {this.props.isAdmin && <Tab label={TABS.ADMIN} value={TABS.ADMIN} />}
                 </Tabs>
-                {this.state.value === 0 &&
-                    // <Card className={this.props.classes.root}>
-                        <CardContent>
-                            <form onSubmit={this.props.handleSubmit}>
-                                <Grid container spacing={24}>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="First name"
-                                            name="firstName"
-                                            component={TextField as any}
-                                            disabled
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="Last name"
-                                            name="lastName"
-                                            component={TextField as any}
-                                            disabled
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="E-mail"
-                                            name="email"
-                                            component={TextField as any}
-                                            disabled
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="Username"
-                                            name="username"
-                                            component={TextField as any}
-                                            disabled
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="Organization"
-                                            name="prefs.profile.organization"
-                                            component={TextField as any}
-                                            validate={MY_ACCOUNT_VALIDATION}
-                                            required
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="E-mail at Organization"
-                                            name="prefs.profile.organization_email"
-                                            component={TextField as any}
-                                            validate={MY_ACCOUNT_VALIDATION}
-                                            required
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
-                                        <Field
-                                            id="prefs.profile.role"
-                                            name="prefs.profile.role"
-                                            component={NativeSelectField as any}
-                                            items={RoleTypes}
-                                        />
-                                    </Grid>
-                                    <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
-                                        <Field
-                                            label="Website"
-                                            name="prefs.profile.website_url"
-                                            component={TextField as any}
-                                        />
-                                    </Grid>
-                                    <Grid item sm={12}>
-                                        <Grid container direction="row" justify="flex-end">
-                                            <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
-                                            <Button
-                                                color="primary"
-                                                variant="contained"
-                                                type="submit"
-                                                disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
-                                                Save changes
-                                            </Button>
-                                        </Grid>
+                {this.state.value === TABS.PROFILE &&
+                    <CardContent>
+                        <form onSubmit={this.props.handleSubmit} data-cy="profile-form">
+                            <Grid container spacing={24}>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="firstName">
+                                    <Field
+                                        label="First name"
+                                        name="firstName"
+                                        component={ReadOnlyField as any}
+                                        disabled
+                                    />
+                                </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
+                                    />
+                                </Grid>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="email">
+                                    <Field
+                                        label="E-mail"
+                                        name="email"
+                                        component={ReadOnlyField as any}
+                                        disabled
+                                    />
+                                </Grid>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12} data-cy="username">
+                                    <Field
+                                        label="Username"
+                                        name="username"
+                                        component={ReadOnlyField as any}
+                                        disabled
+                                    />
+                                </Grid>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                    <Field
+                                        label="Organization"
+                                        name="prefs.profile.organization"
+                                        component={TextField as any}
+                                        disabled={!this.props.isAdmin && !this.props.isSelf}
+                                    />
+                                </Grid>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                    <Field
+                                        label="E-mail at Organization"
+                                        name="prefs.profile.organization_email"
+                                        component={TextField as any}
+                                        disabled={!this.props.isAdmin && !this.props.isSelf}
+                                    />
+                                </Grid>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                    <InputLabel className={this.props.classes.label} htmlFor="prefs.profile.role">Role</InputLabel>
+                                    <Field
+                                        id="prefs.profile.role"
+                                        name="prefs.profile.role"
+                                        component={NativeSelectField as any}
+                                        items={RoleTypes}
+                                        disabled={!this.props.isAdmin && !this.props.isSelf}
+                                    />
+                                </Grid>
+                                <Grid item className={this.props.classes.gridItem} sm={6} xs={12}>
+                                    <Field
+                                        label="Website"
+                                        name="prefs.profile.website_url"
+                                        component={TextField as any}
+                                        disabled={!this.props.isAdmin && !this.props.isSelf}
+                                    />
+                                </Grid>
+                                <Grid item sm={12}>
+                                    <Grid container direction="row" justify="flex-end">
+                                        <Button color="primary" onClick={this.props.reset} disabled={this.props.isPristine}>Discard changes</Button>
+                                        <Button
+                                            color="primary"
+                                            variant="contained"
+                                            type="submit"
+                                            disabled={this.props.isPristine || this.props.invalid || this.props.submitting}>
+                                            Save changes
+                                        </Button>
                                     </Grid>
                                 </Grid>
-                            </form >
-                        </CardContent>
-                    // </Card>
+                            </Grid>
+                        </form >
+                    </CardContent>
                 }
-                {this.state.value === 1 &&
+                {this.state.value === TABS.GROUPS &&
                     <div className={this.props.classes.content}>
                         <DataExplorer
                                 id={USER_PROFILE_PANEL_ID}
+                                data-cy="user-profile-groups-data-explorer"
                                 onRowClick={noop}
                                 onRowDoubleClick={noop}
-                                // onContextMenu={this.handleContextMenu}
+                                onContextMenu={noop}
                                 contextMenuColumn={false}
                                 hideColumnSelector
                                 hideSearchInput
@@ -267,7 +285,7 @@ export const UserProfilePanelRoot = withStyles(styles)(
                                         messages={['Group list is empty.']} />
                                 } />
                     </div>}
-                {this.state.value === 2 &&
+                {this.props.isAdmin && this.state.value === TABS.ADMIN &&
                     <Paper elevation={0} className={this.props.classes.adminRoot}>
                         <Card elevation={0}>
                             <CardContent>
@@ -352,17 +370,5 @@ export const UserProfilePanelRoot = withStyles(styles)(
             this.setState({ value });
         }
 
-        handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
-            // const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
-            // if (resource) {
-            //     this.props.onContextMenu(event, {
-            //         name: '',
-            //         uuid: resource.uuid,
-            //         ownerUuid: resource.ownerUuid,
-            //         kind: resource.kind,
-            //         menuKind: ContextMenuKind.USER
-            //     });
-            // }
-        }
     }
 );