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 * as 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 { ResourceUuid, ResourceFirstName, ResourceLastName, ResourceEmail, ResourceUsername } 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_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 } from '@material-ui/core';
  20 import { AddIcon } from '~/components/icon/icon';
  21
  22 export enum GroupDetailsPanelColumnNames {
  23     FIRST_NAME = "First name",
  24     LAST_NAME = "Last name",
  25     UUID = "UUID",
  26     EMAIL = "Email",
  27     USERNAME = "Username",
  28 }
  29
  30 export const groupDetailsPanelColumns: DataColumns<string> = [
  31     {
  32         name: GroupDetailsPanelColumnNames.FIRST_NAME,
  33         selected: true,
  34         configurable: true,
  35         filters: createTree(),
  36         render: uuid => <ResourceFirstName uuid={uuid} />
  37     },
  38     {
  39         name: GroupDetailsPanelColumnNames.LAST_NAME,
  40         selected: true,
  41         configurable: true,
  42         filters: createTree(),
  43         render: uuid => <ResourceLastName uuid={uuid} />
  44     },
  45     {
  46         name: GroupDetailsPanelColumnNames.UUID,
  47         selected: true,
  48         configurable: true,
  49         filters: createTree(),
  50         render: uuid => <ResourceUuid uuid={uuid} />
  51     },
  52     {
  53         name: GroupDetailsPanelColumnNames.EMAIL,
  54         selected: true,
  55         configurable: true,
  56         filters: createTree(),
  57         render: uuid => <ResourceEmail uuid={uuid} />
  58     },
  59     {
  60         name: GroupDetailsPanelColumnNames.USERNAME,
  61         selected: true,
  62         configurable: true,
  63         filters: createTree(),
  64         render: uuid => <ResourceUsername uuid={uuid} />
  65     },
  66 ];
  67
  68 const mapStateToProps = (state: RootState) => {
  69     return {
  70         resources: state.resources
  71     };
  72 };
  73
  74 const mapDispatchToProps = {
  75     onContextMenu: openContextMenu,
  76     onAddUser: openAddGroupMembersDialog,
  77 };
  78
  79 export interface GroupDetailsPanelProps {
  80     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
  81     onAddUser: () => void;
  82     resources: ResourcesState;
  83 }
  84
  85 export const GroupDetailsPanel = connect(
  86     mapStateToProps, mapDispatchToProps
  87 )(
  88     class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
  89
  90         render() {
  91             return (
  92                 <DataExplorer
  93                     id={GROUP_DETAILS_PANEL_ID}
  94                     onRowClick={noop}
  95                     onRowDoubleClick={noop}
  96                     onContextMenu={this.handleContextMenu}
  97                     contextMenuColumn={true}
  98                     hideColumnSelector
  99                     actions={
 100                         <Grid container justify='flex-end'>
 101                             <Button
 102                                 variant="contained"
 103                                 color="primary"
 104                                 onClick={this.props.onAddUser}>
 105                                 <AddIcon /> Add user
 106                         </Button>
 107                         </Grid>
 108                     } />
 109             );
 110         }
 111
 112         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 113             const resource = getResource<PermissionResource>(resourceUuid)(this.props.resources);
 114             if (resource) {
 115                 this.props.onContextMenu(event, {
 116                     name: '',
 117                     uuid: resource.uuid,
 118                     ownerUuid: resource.ownerUuid,
 119                     kind: resource.kind,
 120                     menuKind: ContextMenuKind.GROUP_MEMBER
 121                 });
 122             }
 123         }
 124     });
 125