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