import { DataColumns } from 'components/data-table/data-table';
import { RootState } from 'store/store';
import { SortDirection } from 'components/data-table/data-column';
-import { openContextMenu } from "store/context-menu/context-menu-actions";
+import { openUserContextMenu } from "store/context-menu/context-menu-actions";
import { getResource, ResourcesState } from "store/resources/resources";
import {
UserResourceFullName,
ResourceUsername
} from "views-components/data-explorer/renderers";
import { navigateToUserProfile } from "store/navigation/navigation-action";
-import { ContextMenuKind } from "views-components/context-menu/context-menu";
import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
import { createTree } from 'models/tree';
import { compose, Dispatch } from 'redux';
interface UserPanelActionProps {
openUserCreateDialog: () => void;
handleRowClick: (uuid: string) => void;
- onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
+ handleContextMenu: (event, resource: UserResource) => void;
}
const mapStateToProps = (state: RootState) => {
const mapDispatchToProps = (dispatch: Dispatch) => ({
openUserCreateDialog: () => dispatch<any>(openUserCreateDialog()),
handleRowClick: (uuid: string) => dispatch<any>(navigateToUserProfile(uuid)),
- onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => dispatch<any>(openContextMenu(event, item))
+ handleContextMenu: (event, resource: UserResource) => dispatch<any>(openUserContextMenu(event, resource)),
});
type UserPanelProps = UserPanelDataProps & UserPanelActionProps & DispatchProp & WithStyles<UserPanelRules>;
event.stopPropagation();
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
- });
+ this.props.handleContextMenu(event, resource);
}
}
}
import React from 'react';
import { Field, InjectedFormProps } from "redux-form";
+import { DispatchProp } from 'react-redux';
+import { UserResource } from 'models/user';
import { TextField } from "components/text-field/text-field";
import { DataExplorer } from "views-components/data-explorer/data-explorer";
import { NativeSelectField } from "components/select-field/select-field";
Grid,
InputLabel,
Tabs, Tab,
- Paper
+ Paper,
+ Tooltip,
+ IconButton,
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { User } from "models/user";
import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
import { PROFILE_EMAIL_VALIDATION } from "validators/validators";
import { USER_PROFILE_PANEL_ID } from 'store/user-profile/user-profile-actions';
import { noop } from 'lodash';
-import { GroupsIcon } from 'components/icon/icon';
+import { CopyIcon, 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 { 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';
-type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content';
+type CssRules = 'root' | 'adminRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
content: {
// reserve space for the tab bar
height: `calc(100% - ${theme.spacing.unit * 7}px)`,
+ },
+ copyIcon: {
+ marginLeft: theme.spacing.unit,
+ color: theme.palette.grey["500"],
+ cursor: 'pointer',
+ display: 'inline',
+ '& svg': {
+ fontSize: '1rem'
+ }
}
});
openSetupDialog: (uuid: string) => void;
loginAs: (uuid: string) => void;
openDeactivateDialog: (uuid: string) => void;
+ handleContextMenu: (event, resource: UserResource) => void;
}
export interface UserProfilePanelRootDataProps {
isSelf: boolean;
isPristine: boolean;
isValid: boolean;
- initialValues?: User;
+ userUuid: string;
+ resources: ResourcesState
localCluster: string;
}
{ key: 'Other', value: 'Other' }
];
-type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & WithStyles<CssRules>;
+type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & DispatchProp & WithStyles<CssRules>;
export enum UserProfileGroupsColumnNames {
NAME = "Name",
this.setState({ value: TABS.PROFILE});
}
+ onCopy = (message: string) => {
+ this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
+ message,
+ hideDuration: 2000,
+ kind: SnackbarKind.SUCCESS
+ }));
+ }
+
render() {
return <Paper className={this.props.classes.root}>
<Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>
</Tabs>
{this.state.value === TABS.PROFILE &&
<CardContent>
+ <Grid container justify="space-between">
+ <Grid item xs={11}>
+ <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>
+ </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>
+ </Grid>
<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">
<Grid item sm={'auto'} xs={12}>
<Button variant="contained"
color="primary"
- onClick={() => {this.props.openSetupDialog(this.props.initialValues.uuid)}}
+ onClick={() => {this.props.openSetupDialog(this.props.userUuid)}}
disabled={false}>
Setup Account
</Button>
<Grid item sm={'auto'} xs={12}>
<Button variant="contained"
color="primary"
- onClick={() => {this.props.openDeactivateDialog(this.props.initialValues.uuid)}}
+ onClick={() => {this.props.openDeactivateDialog(this.props.userUuid)}}
disabled={false}>
Deactivate
</Button>
<Grid item sm={'auto'} xs={12}>
<Button variant="contained"
color="primary"
- onClick={() => {this.props.loginAs(this.props.initialValues.uuid)}}
+ onClick={() => {this.props.loginAs(this.props.userUuid)}}
disabled={false}>
Log In
</Button>
this.setState({ value });
}
+ handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
+ event.stopPropagation();
+ const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
+ if (resource) {
+ this.props.handleContextMenu(event, resource);
+ }
+ }
+
}
);
import { compose, Dispatch } from 'redux';
import { reduxForm, isPristine, isValid } from 'redux-form';
import { connect } from 'react-redux';
+import { UserResource } from 'models/user';
import { saveEditedUser } from 'store/user-profile/user-profile-actions';
import { UserProfilePanelRoot, UserProfilePanelRootDataProps } from 'views/user-profile-panel/user-profile-panel-root';
import { openSetupDialog, openDeactivateDialog, USER_PROFILE_FORM } from "store/user-profile/user-profile-actions";
import { matchUserProfileRoute } from 'routes/routes';
-import { UserResource } from 'models/user';
-import { getResource } from 'store/resources/resources';
import { loginAs } from 'store/users/users-actions';
+import { openUserContextMenu } from 'store/context-menu/context-menu-actions';
const mapStateToProps = (state: RootState): UserProfilePanelRootDataProps => {
const pathname = state.router.location ? state.router.location.pathname : '';
const match = matchUserProfileRoute(pathname);
const uuid = match ? match.params.id : state.auth.user?.uuid || '';
- // get user resource
- const user = getResource<UserResource>(uuid)(state.resources);
- // const subprocesses = getSubprocesses(uuid)(resources);
return {
isAdmin: state.auth.user!.isAdmin,
isSelf: state.auth.user!.uuid === uuid,
isPristine: isPristine(USER_PROFILE_FORM)(state),
isValid: isValid(USER_PROFILE_FORM)(state),
- initialValues: user,
- localCluster: state.auth.localCluster
+ localCluster: state.auth.localCluster,
+ userUuid: uuid,
+ resources: state.resources,
}};
const mapDispatchToProps = (dispatch: Dispatch) => ({
openSetupDialog: (uuid: string) => dispatch<any>(openSetupDialog(uuid)),
loginAs: (uuid: string) => dispatch<any>(loginAs(uuid)),
openDeactivateDialog: (uuid: string) => dispatch<any>(openDeactivateDialog(uuid)),
+ handleContextMenu: (event, resource: UserResource) => dispatch<any>(openUserContextMenu(event, resource)),
});
export const UserProfilePanel = compose(