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