18559: Add uuid with copy and action menu to user profile panel

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/store/context-menu/context-menu-actions.ts b/src/store/context-menu/context-menu-actions.ts
index 38433eb27c6e26ce1fc9dae7ff49b5f9e28250c1..fb5da9fcc0c7d4db80f8d2c1a3f4dcf3645f2947 100644 (file)
--- a/src/store/context-menu/context-menu-actions.ts
+++ b/src/store/context-menu/context-menu-actions.ts
@@ -208,6 +208,17 @@ export const openPermissionEditContextMenu = (event: React.MouseEvent<HTMLElemen
         }
     };
 
         }
     };
 

+export const openUserContextMenu = (event: React.MouseEvent<HTMLElement>, user: UserResource) =>
+    (dispatch: Dispatch, getState: () => RootState) => {
+        dispatch<any>(openContextMenu(event, {
+            name: '',
+            uuid: user.uuid,
+            ownerUuid: user.ownerUuid,
+            kind: user.kind,
+            menuKind: ContextMenuKind.USER
+        }));
+    };
+

 export const resourceUuidToContextMenuKind = (uuid: string, readonly = false) =>
     (dispatch: Dispatch, getState: () => RootState) => {
         const { isAdmin: isAdminUser, uuid: userUuid } = getState().auth.user!;
 export const resourceUuidToContextMenuKind = (uuid: string, readonly = false) =>
     (dispatch: Dispatch, getState: () => RootState) => {
         const { isAdmin: isAdminUser, uuid: userUuid } = getState().auth.user!;

diff --git a/src/views/user-panel/user-panel.tsx b/src/views/user-panel/user-panel.tsx
index 3c8356738ab83fb9d46b717a718df85b6cb695fc..169b32abcdc22039d7d2b007e6c6c054bc5c3c40 100644 (file)
--- a/src/views/user-panel/user-panel.tsx
+++ b/src/views/user-panel/user-panel.tsx
@@ -9,7 +9,7 @@ import { connect, DispatchProp } from 'react-redux';
 import { DataColumns } from 'components/data-table/data-table';
 import { RootState } from 'store/store';
 import { SortDirection } from 'components/data-table/data-column';
 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,
 import { getResource, ResourcesState } from "store/resources/resources";
 import {
     UserResourceFullName,


@@ -20,7 +20,6 @@ import {
     ResourceUsername
 } from "views-components/data-explorer/renderers";
 import { navigateToUserProfile } from "store/navigation/navigation-action";
     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';
 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
 import { createTree } from 'models/tree';
 import { compose, Dispatch } from 'redux';


@@ -109,7 +108,7 @@ interface UserPanelDataProps {
 interface UserPanelActionProps {
     openUserCreateDialog: () => void;
     handleRowClick: (uuid: string) => void;
 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 mapStateToProps = (state: RootState) => {


@@ -121,7 +120,7 @@ const mapStateToProps = (state: RootState) => {
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     openUserCreateDialog: () => dispatch<any>(openUserCreateDialog()),
     handleRowClick: (uuid: string) => dispatch<any>(navigateToUserProfile(uuid)),
 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>;
 });
 
 type UserPanelProps = UserPanelDataProps & UserPanelActionProps & DispatchProp & WithStyles<UserPanelRules>;


@@ -161,13 +160,7 @@ export const UserPanel = compose(
                 event.stopPropagation();
                 const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
                 if (resource) {
                 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);

                 }
             }
         }
                 }
             }
         }

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 febe0ab9b96b8701f9f03a6b8c4541fb7652e675..4fab7efd404b4396b018926d0fbed3d28a4c43c1 100644 (file)
--- a/src/views/user-profile-panel/user-profile-panel-root.tsx
+++ b/src/views/user-profile-panel/user-profile-panel-root.tsx
@@ -4,6 +4,8 @@
 
 import React from 'react';
 import { Field, InjectedFormProps } from "redux-form";
 
 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";
 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";


@@ -18,20 +20,24 @@ import {
     Grid,
     InputLabel,
     Tabs, Tab,
     Grid,
     InputLabel,
     Tabs, Tab,

-    Paper
+    Paper,
+    Tooltip,
+    IconButton,

 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 } 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 { 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 { 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: {
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {


@@ -65,6 +71,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     content: {
         // reserve space for the tab bar
         height: `calc(100% - ${theme.spacing.unit * 7}px)`,
     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'
+        }

     }
 });
 
     }
 });
 


@@ -72,6 +87,7 @@ export interface UserProfilePanelRootActionProps {
     openSetupDialog: (uuid: string) => void;
     loginAs: (uuid: string) => void;
     openDeactivateDialog: (uuid: string) => void;
     openSetupDialog: (uuid: string) => void;
     loginAs: (uuid: string) => void;
     openDeactivateDialog: (uuid: string) => void;

+    handleContextMenu: (event, resource: UserResource) => void;

 }
 
 export interface UserProfilePanelRootDataProps {
 }
 
 export interface UserProfilePanelRootDataProps {


@@ -79,7 +95,8 @@ export interface UserProfilePanelRootDataProps {
     isSelf: boolean;
     isPristine: boolean;
     isValid: boolean;
     isSelf: boolean;
     isPristine: boolean;
     isValid: boolean;

-    initialValues?: User;
+    userUuid: string;
+    resources: ResourcesState

     localCluster: string;
 }
 
     localCluster: string;
 }
 


@@ -94,7 +111,7 @@ const RoleTypes = [
     { key: 'Other', value: 'Other' }
 ];
 
     { key: 'Other', value: 'Other' }
 ];
 

-type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & WithStyles<CssRules>;
+type UserProfilePanelRootProps = InjectedFormProps<{}> & UserProfilePanelRootActionProps & UserProfilePanelRootDataProps & DispatchProp & WithStyles<CssRules>;

 
 export enum UserProfileGroupsColumnNames {
     NAME = "Name",
 
 export enum UserProfileGroupsColumnNames {
     NAME = "Name",


@@ -172,6 +189,14 @@ export const UserProfilePanelRoot = withStyles(styles)(
             this.setState({ value: TABS.PROFILE});
         }
 
             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"}>
         render() {
             return <Paper className={this.props.classes.root}>
                 <Tabs value={this.state.value} onChange={this.handleChange} variant={"fullWidth"}>


@@ -181,6 +206,30 @@ export const UserProfilePanelRoot = withStyles(styles)(
                 </Tabs>
                 {this.state.value === TABS.PROFILE &&
                     <CardContent>
                 </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">
                         <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">


@@ -305,7 +354,7 @@ export const UserProfilePanelRoot = withStyles(styles)(
                                     <Grid item sm={'auto'} xs={12}>
                                         <Button variant="contained"
                                             color="primary"
                                     <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>
                                             disabled={false}>
                                             Setup Account
                                         </Button>


@@ -330,7 +379,7 @@ export const UserProfilePanelRoot = withStyles(styles)(
                                     <Grid item sm={'auto'} xs={12}>
                                         <Button variant="contained"
                                             color="primary"
                                     <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>
                                             disabled={false}>
                                             Deactivate
                                         </Button>


@@ -355,7 +404,7 @@ export const UserProfilePanelRoot = withStyles(styles)(
                                     <Grid item sm={'auto'} xs={12}>
                                         <Button variant="contained"
                                             color="primary"
                                     <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>
                                             disabled={false}>
                                             Log In
                                         </Button>


@@ -371,5 +420,13 @@ export const UserProfilePanelRoot = withStyles(styles)(
             this.setState({ value });
         }
 
             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);
+            }
+        }
+

     }
 );
     }
 );

diff --git a/src/views/user-profile-panel/user-profile-panel.tsx b/src/views/user-profile-panel/user-profile-panel.tsx
index e23b8bcea5af56bee2e7d8b7c271d0608cf30d4b..7a55faf3300c2f5e6f218c010f429b34d7e95d0e 100644 (file)
--- a/src/views/user-profile-panel/user-profile-panel.tsx
+++ b/src/views/user-profile-panel/user-profile-panel.tsx
@@ -6,35 +6,34 @@ import { RootState } from 'store/store';
 import { compose, Dispatch } from 'redux';
 import { reduxForm, isPristine, isValid } from 'redux-form';
 import { connect } from 'react-redux';
 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 { 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 { 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 || '';
 
 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),
 
   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)),
 }};
 
 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(
 });
 
 export const UserProfilePanel = compose(