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 * as React from 'react';
   6 import { WithStyles, withStyles, Typography } from '@material-ui/core';
   7 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   8 import { connect, DispatchProp } from 'react-redux';
   9 import { DataColumns } from '~/components/data-table/data-table';
  10 import { RootState } from '~/store/store';
  11 import { SortDirection } from '~/components/data-table/data-column';
  12 import { openContextMenu } from "~/store/context-menu/context-menu-actions";
  13 import { getResource, ResourcesState } from "~/store/resources/resources";
  14 import {
  15     ResourceFirstName,
  16     ResourceLastName,
  17     ResourceUuid,
  18     ResourceEmail,
  19     ResourceIsActive,
  20     ResourceIsAdmin,
  21     ResourceUsername
  22 } from "~/views-components/data-explorer/renderers";
  23 import { navigateTo } from "~/store/navigation/navigation-action";
  24 import { loadDetailsPanel } from "~/store/details-panel/details-panel-action";
  25 import { ContextMenuKind } from "~/views-components/context-menu/context-menu";
  26 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
  27 import { createTree } from '~/models/tree';
  28 import { compose } from 'redux';
  29 import { UserResource } from '~/models/user';
  30 import { ShareMeIcon } from '~/components/icon/icon';
  31 import { USERS_PANEL_ID } from '~/store/users/users-actions';
  32
  33 type UserPanelRules = "toolbar" | "button";
  34
  35 const styles = withStyles<UserPanelRules>(theme => ({
  36     toolbar: {
  37         paddingBottom: theme.spacing.unit * 3,
  38         textAlign: "right"
  39     },
  40     button: {
  41         marginLeft: theme.spacing.unit
  42     },
  43 }));
  44
  45 export enum UserPanelColumnNames {
  46     FIRST_NAME = "First Name",
  47     LAST_NAME = "Last Name",
  48     UUID = "Uuid",
  49     EMAIL = "Email",
  50     ACTIVE = "Active",
  51     ADMIN = "Admin",
  52     REDIRECT_TO_USER = "Redirect to user",
  53     USERNAME = "Username"
  54 }
  55
  56 export const userPanelColumns: DataColumns<string> = [
  57     {
  58         name: UserPanelColumnNames.FIRST_NAME,
  59         selected: true,
  60         configurable: true,
  61         sortDirection: SortDirection.NONE,
  62         filters: createTree(),
  63         render: uuid => <ResourceFirstName uuid={uuid} />
  64     },
  65     {
  66         name: UserPanelColumnNames.LAST_NAME,
  67         selected: true,
  68         configurable: true,
  69         sortDirection: SortDirection.NONE,
  70         filters: createTree(),
  71         render: uuid => <ResourceLastName uuid={uuid} />
  72     },
  73     {
  74         name: UserPanelColumnNames.UUID,
  75         selected: true,
  76         configurable: true,
  77         sortDirection: SortDirection.NONE,
  78         filters: createTree(),
  79         render: uuid => <ResourceUuid uuid={uuid} />
  80     },
  81     {
  82         name: UserPanelColumnNames.EMAIL,
  83         selected: true,
  84         configurable: true,
  85         sortDirection: SortDirection.NONE,
  86         filters: createTree(),
  87         render: uuid => <ResourceEmail uuid={uuid} />
  88     },
  89     {
  90         name: UserPanelColumnNames.ACTIVE,
  91         selected: true,
  92         configurable: true,
  93         sortDirection: SortDirection.NONE,
  94         filters: createTree(),
  95         render: uuid => <ResourceIsActive uuid={uuid} />
  96     },
  97     {
  98         name: UserPanelColumnNames.ADMIN,
  99         selected: true,
 100         configurable: false,
 101         sortDirection: SortDirection.NONE,
 102         filters: createTree(),
 103         render: uuid => <ResourceIsAdmin uuid={uuid} />
 104     },
 105     {
 106         name: UserPanelColumnNames.REDIRECT_TO_USER,
 107         selected: true,
 108         configurable: false,
 109         sortDirection: SortDirection.NONE,
 110         filters: createTree(),
 111         render: () => <Typography noWrap>(none)</Typography>
 112     },
 113     {
 114         name: UserPanelColumnNames.USERNAME,
 115         selected: true,
 116         configurable: false,
 117         sortDirection: SortDirection.NONE,
 118         filters: createTree(),
 119         render: uuid => <ResourceUsername uuid={uuid} />
 120     }
 121 ];
 122
 123 interface UserPanelDataProps {
 124     resources: ResourcesState;
 125 }
 126
 127 type UserPanelProps = UserPanelDataProps & DispatchProp & WithStyles<UserPanelRules>;
 128
 129 export const UserPanel = compose(
 130     styles,
 131     connect((state: RootState) => ({
 132         resources: state.resources
 133     })))(
 134         class extends React.Component<UserPanelProps> {
 135             render() {
 136                 console.log(this.props.resources);
 137                 return <DataExplorer
 138                     id={USERS_PANEL_ID}
 139                     onRowClick={this.handleRowClick}
 140                     onRowDoubleClick={this.handleRowDoubleClick}
 141                     onContextMenu={this.handleContextMenu}
 142                     contextMenuColumn={true}
 143                     isColumnSelectorHidden={true}
 144                     dataTableDefaultView={
 145                         <DataTableDefaultView
 146                             icon={ShareMeIcon}
 147                             messages={['Your user list is empty.']} />
 148                     } />;
 149             }
 150
 151             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 152                 const resource = getResource<UserResource>(resourceUuid)(this.props.resources);
 153                 if (resource) {
 154                     this.props.dispatch<any>(openContextMenu(event, {
 155                         name: '',
 156                         uuid: resource.uuid,
 157                         ownerUuid: resource.ownerUuid,
 158                         kind: resource.kind,
 159                         menuKind: ContextMenuKind.TRASH
 160                     }));
 161                 }
 162             }
 163
 164             handleRowDoubleClick = (uuid: string) => {
 165                 this.props.dispatch<any>(navigateTo(uuid));
 166             }
 167
 168             handleRowClick = (uuid: string) => {
 169                 this.props.dispatch(loadDetailsPanel(uuid));
 170             }
 171         }
 172     );