services/workbench2/src/views/user-panel/user-panel.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 { Paper, Typography } from '@mui/material';
   7 import { WithStyles } from '@mui/styles';
   8 import withStyles from '@mui/styles/withStyles';
   9 import { DataExplorer } from "views-components/data-explorer/data-explorer";
  10 import { connect, DispatchProp } from 'react-redux';
  11 import { DataColumns } from 'components/data-table/data-table';
  12 import { RootState } from 'store/store';
  13 import { SortDirection } from 'components/data-table/data-column';
  14 import { openUserContextMenu } from "store/context-menu/context-menu-actions";
  15 import { getResource, ResourcesState } from "store/resources/resources";
  16 import {
  17     UserResourceFullName,
  18     ResourceUuid,
  19     ResourceEmail,
  20     ResourceIsAdmin,
  21     ResourceUsername,
  22     UserResourceAccountStatus,
  23 } from "views-components/data-explorer/renderers";
  24 import { navigateToUserProfile } from "store/navigation/navigation-action";
  25 import { createTree } from 'models/tree';
  26 import { compose, Dispatch } from 'redux';
  27 import { UserResource } from 'models/user';
  28 import { ShareMeIcon } from 'components/icon/icon';
  29 import { USERS_PANEL_ID, openUserCreateDialog } from 'store/users/users-actions';
  30 import { noop } from 'lodash';
  31 import { CustomStyleRulesCallback } from 'common/custom-theme';
  32
  33 type UserPanelRules = "button" | 'root';
  34
  35 const styles: CustomStyleRulesCallback<UserPanelRules> = (theme) => ({
  36     button: {
  37         marginTop: theme.spacing(1),
  38         marginRight: theme.spacing(2),
  39         textAlign: 'right',
  40         alignSelf: 'center'
  41     },
  42     root: {
  43         width: '100%',
  44     },
  45 });
  46
  47 export enum UserPanelColumnNames {
  48     NAME = "Name",
  49     UUID = "Uuid",
  50     EMAIL = "Email",
  51     STATUS = "Account Status",
  52     ADMIN = "Admin",
  53     REDIRECT_TO_USER = "Redirect to user",
  54     USERNAME = "Username"
  55 }
  56
  57 export const userPanelColumns: DataColumns<string, UserResource> = [
  58     {
  59         name: UserPanelColumnNames.NAME,
  60         selected: true,
  61         configurable: true,
  62         sort: {direction: SortDirection.NONE, field: "firstName"},
  63         filters: createTree(),
  64         render: uuid => <UserResourceFullName uuid={uuid} link={true} />
  65     },
  66     {
  67         name: UserPanelColumnNames.UUID,
  68         selected: true,
  69         configurable: true,
  70         sort: {direction: SortDirection.NONE, field: "uuid"},
  71         filters: createTree(),
  72         render: uuid => <ResourceUuid uuid={uuid} />
  73     },
  74     {
  75         name: UserPanelColumnNames.EMAIL,
  76         selected: true,
  77         configurable: true,
  78         sort: {direction: SortDirection.NONE, field: "email"},
  79         filters: createTree(),
  80         render: uuid => <ResourceEmail uuid={uuid} />
  81     },
  82     {
  83         name: UserPanelColumnNames.STATUS,
  84         selected: true,
  85         configurable: true,
  86         filters: createTree(),
  87         render: uuid => <UserResourceAccountStatus uuid={uuid} />
  88     },
  89     {
  90         name: UserPanelColumnNames.ADMIN,
  91         selected: true,
  92         configurable: false,
  93         filters: createTree(),
  94         render: uuid => <ResourceIsAdmin uuid={uuid} />
  95     },
  96     {
  97         name: UserPanelColumnNames.USERNAME,
  98         selected: true,
  99         configurable: false,
 100         sort: {direction: SortDirection.NONE, field: "username"},
 101         filters: createTree(),
 102         render: uuid => <ResourceUsername uuid={uuid} />
 103     }
 104 ];
 105
 106 interface UserPanelDataProps {
 107     resources: ResourcesState;
 108 }
 109
 110 interface UserPanelActionProps {
 111     openUserCreateDialog: () => void;
 112     handleRowClick: (uuid: string) => void;
 113     handleContextMenu: (event, resource: UserResource) => void;
 114 }
 115
 116 const mapStateToProps = (state: RootState) => {
 117     return {
 118         resources: state.resources
 119     };
 120 };
 121
 122 const mapDispatchToProps = (dispatch: Dispatch) => ({
 123     openUserCreateDialog: () => dispatch<any>(openUserCreateDialog()),
 124     handleRowClick: (uuid: string) => dispatch<any>(navigateToUserProfile(uuid)),
 125     handleContextMenu: (event, resource: UserResource) => dispatch<any>(openUserContextMenu(event, resource)),
 126 });
 127
 128 type UserPanelProps = UserPanelDataProps & UserPanelActionProps & DispatchProp & WithStyles<UserPanelRules>;
 129
 130 export const UserPanel = compose(
 131     withStyles(styles),
 132     connect(mapStateToProps, mapDispatchToProps))(
 133         class extends React.Component<UserPanelProps> {
 134             render() {
 135                 return <Paper className={this.props.classes.root}>
 136                     <DataExplorer
 137                         id={USERS_PANEL_ID}
 138                         title={
 139                             <>
 140                                 <Typography>
 141                                     User records are created automatically on first log in.
 142                                 </Typography>
 143                                 <Typography>
 144                                     To add a new user, add them to your configured log in provider.
 145                                 </Typography>
 146                             </>}
 147                         onRowClick={noop}
 148                         onRowDoubleClick={noop}
 149                         onContextMenu={this.handleContextMenu}
 150                         contextMenuColumn={true}
 151                         hideColumnSelector
 152                         paperProps={{
 153                             elevation: 0,
 154                         }}
 155                         defaultViewIcon={ShareMeIcon}
 156                         defaultViewMessages={['Your user list is empty.']}
 157                         forceMultiSelectMode />
 158                 </Paper>;
 159             }
 160
 161             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 162                 event.stopPropagation();
 163                 const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
 164                 if (resource) {
 165                     this.props.handleContextMenu(event, resource);
 166                 }
 167             }
 168         }
 169     );