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