src/views/group-details-panel/group-details-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 { connect } from 'react-redux';
   7
   8 import { DataExplorer } from "views-components/data-explorer/data-explorer";
   9 import { DataColumns } from 'components/data-table/data-table';
  10 import { ResourceLinkHeadUuid, ResourceLinkTailUuid, ResourceLinkTailEmail, ResourceLinkTailUsername, ResourceLinkHeadPermissionLevel, ResourceLinkTailPermissionLevel, ResourceLinkHead, ResourceLinkTail, ResourceLinkDelete } from 'views-components/data-explorer/renderers';
  11 import { createTree } from 'models/tree';
  12 import { noop } from 'lodash/fp';
  13 import { RootState } from 'store/store';
  14 import { GROUP_DETAILS_MEMBERS_PANEL_ID, GROUP_DETAILS_PERMISSIONS_PANEL_ID, openAddGroupMembersDialog } from 'store/group-details-panel/group-details-panel-actions';
  15 import { openContextMenu } from 'store/context-menu/context-menu-actions';
  16 import { ResourcesState, getResource } from 'store/resources/resources';
  17 import { ContextMenuKind } from 'views-components/context-menu/context-menu';
  18 import { PermissionResource } from 'models/permission';
  19 import { Grid, Button, Tabs, Tab, Paper } from '@material-ui/core';
  20 import { AddIcon } from 'components/icon/icon';
  21
  22 export enum GroupDetailsPanelMembersColumnNames {
  23     FULL_NAME = "Name",
  24     UUID = "UUID",
  25     EMAIL = "Email",
  26     USERNAME = "Username",
  27     PERMISSION = "Permission",
  28     REMOVE = "Remove",
  29 }
  30
  31 export enum GroupDetailsPanelPermissionsColumnNames {
  32     NAME = "Name",
  33     PERMISSION = "Permission",
  34     UUID = "UUID",
  35     REMOVE = "Remove",
  36 }
  37
  38 export const groupDetailsMembersPanelColumns: DataColumns<string> = [
  39     {
  40         name: GroupDetailsPanelMembersColumnNames.FULL_NAME,
  41         selected: true,
  42         configurable: true,
  43         filters: createTree(),
  44         render: uuid => <ResourceLinkTail uuid={uuid} />
  45     },
  46     {
  47         name: GroupDetailsPanelMembersColumnNames.USERNAME,
  48         selected: true,
  49         configurable: true,
  50         filters: createTree(),
  51         render: uuid => <ResourceLinkTailUsername uuid={uuid} />
  52     },
  53     {
  54         name: GroupDetailsPanelMembersColumnNames.EMAIL,
  55         selected: true,
  56         configurable: true,
  57         filters: createTree(),
  58         render: uuid => <ResourceLinkTailEmail uuid={uuid} />
  59     },
  60     {
  61         name: GroupDetailsPanelMembersColumnNames.PERMISSION,
  62         selected: true,
  63         configurable: true,
  64         filters: createTree(),
  65         render: uuid => <ResourceLinkTailPermissionLevel uuid={uuid} />
  66     },
  67     {
  68         name: GroupDetailsPanelMembersColumnNames.UUID,
  69         selected: true,
  70         configurable: true,
  71         filters: createTree(),
  72         render: uuid => <ResourceLinkTailUuid uuid={uuid} />
  73     },
  74     {
  75         name: GroupDetailsPanelMembersColumnNames.REMOVE,
  76         selected: true,
  77         configurable: true,
  78         filters: createTree(),
  79         render: uuid => <ResourceLinkDelete uuid={uuid} />
  80     },
  81 ];
  82
  83 export const groupDetailsPermissionsPanelColumns: DataColumns<string> = [
  84     {
  85         name: GroupDetailsPanelPermissionsColumnNames.NAME,
  86         selected: true,
  87         configurable: true,
  88         filters: createTree(),
  89         render: uuid => <ResourceLinkHead uuid={uuid} />
  90     },
  91     {
  92         name: GroupDetailsPanelPermissionsColumnNames.PERMISSION,
  93         selected: true,
  94         configurable: true,
  95         filters: createTree(),
  96         render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
  97     },
  98     {
  99         name: GroupDetailsPanelPermissionsColumnNames.UUID,
 100         selected: true,
 101         configurable: true,
 102         filters: createTree(),
 103         render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
 104     },
 105     {
 106         name: GroupDetailsPanelPermissionsColumnNames.REMOVE,
 107         selected: true,
 108         configurable: true,
 109         filters: createTree(),
 110         render: uuid => <ResourceLinkDelete uuid={uuid} />
 111     },
 112 ];
 113
 114 const mapStateToProps = (state: RootState) => {
 115     return {
 116         resources: state.resources
 117     };
 118 };
 119
 120 const mapDispatchToProps = {
 121     onContextMenu: openContextMenu,
 122     onAddUser: openAddGroupMembersDialog,
 123 };
 124
 125 export interface GroupDetailsPanelProps {
 126     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
 127     onAddUser: () => void;
 128     resources: ResourcesState;
 129 }
 130
 131 export const GroupDetailsPanel = connect(
 132     mapStateToProps, mapDispatchToProps
 133 )(
 134     class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
 135         state = {
 136           value: 0,
 137         };
 138
 139         componentDidMount() {
 140             this.setState({ value: 0 });
 141         }
 142
 143         render() {
 144             const { value } = this.state;
 145             return (
 146                 <Paper>
 147                   <Tabs value={value} onChange={this.handleChange} variant="fullWidth">
 148                       <Tab label="MEMBERS" />
 149                       <Tab label="PERMISSIONS" />
 150                   </Tabs>
 151                   {value === 0 &&
 152                       <DataExplorer
 153                           id={GROUP_DETAILS_MEMBERS_PANEL_ID}
 154                           onRowClick={noop}
 155                           onRowDoubleClick={noop}
 156                           onContextMenu={this.handleContextMenu}
 157                           contextMenuColumn={true}
 158                           hideColumnSelector
 159                           hideSearchInput
 160                           actions={
 161                               <Grid container justify='flex-end'>
 162                                   <Button
 163                                       variant="contained"
 164                                       color="primary"
 165                                       onClick={this.props.onAddUser}>
 166                                       <AddIcon /> Add user
 167                               </Button>
 168                               </Grid>
 169                           }
 170                           paperProps={{
 171                               elevation: 0,
 172                           }} />
 173                   }
 174                   {value === 1 &&
 175                       <DataExplorer
 176                           id={GROUP_DETAILS_PERMISSIONS_PANEL_ID}
 177                           onRowClick={noop}
 178                           onRowDoubleClick={noop}
 179                           onContextMenu={this.handleContextMenu}
 180                           contextMenuColumn={true}
 181                           hideColumnSelector
 182                           hideSearchInput
 183                           paperProps={{
 184                               elevation: 0,
 185                           }} />
 186                   }
 187                 </Paper>
 188             );
 189         }
 190
 191         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 192             const resource = getResource<PermissionResource>(resourceUuid)(this.props.resources);
 193             if (resource) {
 194                 this.props.onContextMenu(event, {
 195                     name: '',
 196                     uuid: resource.uuid,
 197                     ownerUuid: resource.ownerUuid,
 198                     kind: resource.kind,
 199                     menuKind: ContextMenuKind.GROUP_MEMBER
 200                 });
 201             }
 202         }
 203
 204         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
 205             this.setState({ value });
 206         }
 207     });