src/views/groups-panel/groups-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 import { Grid, Button, Typography } from "@material-ui/core";
   8
   9 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
  10 import { DataColumns } from '~/components/data-table/data-table';
  11 import { SortDirection } from '~/components/data-table/data-column';
  12 import { ResourceOwner } from '~/views-components/data-explorer/renderers';
  13 import { AddIcon } from '~/components/icon/icon';
  14 import { ResourceName } from '~/views-components/data-explorer/renderers';
  15 import { createTree } from '~/models/tree';
  16 import { GROUPS_PANEL_ID, openCreateGroupDialog } from '~/store/groups-panel/groups-panel-actions';
  17 import { noop } from 'lodash/fp';
  18 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
  19 import { getResource, ResourcesState, filterResources } from '~/store/resources/resources';
  20 import { GroupResource } from '~/models/group';
  21 import { RootState } from '~/store/store';
  22 import { Dispatch } from 'redux';
  23 import { openContextMenu } from '~/store/context-menu/context-menu-actions';
  24 import { ResourceKind } from '~/models/resource';
  25 import { LinkClass, LinkResource } from '~/models/link';
  26
  27 export enum GroupsPanelColumnNames {
  28     GROUP = "Name",
  29     OWNER = "Owner",
  30     MEMBERS = "Members",
  31 }
  32
  33 export const groupsPanelColumns: DataColumns<string> = [
  34     {
  35         name: GroupsPanelColumnNames.GROUP,
  36         selected: true,
  37         configurable: true,
  38         sortDirection: SortDirection.ASC,
  39         filters: createTree(),
  40         render: uuid => <ResourceName uuid={uuid} />
  41     },
  42     {
  43         name: GroupsPanelColumnNames.OWNER,
  44         selected: true,
  45         configurable: true,
  46         filters: createTree(),
  47         render: uuid => <ResourceOwner uuid={uuid} />,
  48     },
  49     {
  50         name: GroupsPanelColumnNames.MEMBERS,
  51         selected: true,
  52         configurable: true,
  53         filters: createTree(),
  54         render: uuid => <GroupMembersCount uuid={uuid} />,
  55     },
  56 ];
  57
  58 const mapStateToProps = (state: RootState) => {
  59     return {
  60         resources: state.resources
  61     };
  62 };
  63
  64 const mapDispatchToProps = (dispatch: Dispatch) => ({
  65     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => dispatch<any>(openContextMenu(event, item)),
  66     onNewGroup: () => dispatch<any>(openCreateGroupDialog()),
  67 });
  68
  69 export interface GroupsPanelProps {
  70     onNewGroup: () => void;
  71     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
  72     resources: ResourcesState;
  73 }
  74
  75 export const GroupsPanel = connect(
  76     mapStateToProps, mapDispatchToProps
  77 )(
  78     class GroupsPanel extends React.Component<GroupsPanelProps> {
  79
  80         render() {
  81             return (
  82                 <DataExplorer
  83                     id={GROUPS_PANEL_ID}
  84                     onRowClick={noop}
  85                     onRowDoubleClick={noop}
  86                     onContextMenu={this.handleContextMenu}
  87                     contextMenuColumn={true}
  88                     hideColumnSelector
  89                     actions={
  90                         <Grid container justify='flex-end'>
  91                             <Button
  92                                 variant="contained"
  93                                 color="primary"
  94                                 onClick={this.props.onNewGroup}>
  95                                 <AddIcon /> New group
  96                         </Button>
  97                         </Grid>
  98                     } />
  99             );
 100         }
 101
 102         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 103             const resource = getResource<GroupResource>(resourceUuid)(this.props.resources);
 104             if (resource) {
 105                 this.props.onContextMenu(event, {
 106                     name: '',
 107                     uuid: resource.uuid,
 108                     ownerUuid: resource.ownerUuid,
 109                     kind: resource.kind,
 110                     menuKind: ContextMenuKind.GROUPS
 111                 });
 112             }
 113         }
 114     });
 115
 116
 117 const GroupMembersCount = connect(
 118     (state: RootState, props: { uuid: string }) => {
 119
 120         const permissions = filterResources((resource: LinkResource) =>
 121             resource.kind === ResourceKind.LINK &&
 122             resource.linkClass === LinkClass.PERMISSION &&
 123             resource.headUuid === props.uuid
 124         )(state.resources);
 125
 126         return {
 127             children: permissions.length,
 128         };
 129
 130     }
 131 )(Typography);