1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { connect } from 'react-redux';
7 import { Grid, Button, 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 { GroupMembersCount, 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/menu-item-sort';
18 import { getResource, ResourcesState } 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 { ArvadosTheme } from 'common/custom-theme';
24 type CssRules = "root";
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
32 export enum GroupsPanelColumnNames {
38 export const groupsPanelColumns: DataColumns<string, GroupResource> = [
40 name: GroupsPanelColumnNames.GROUP,
43 sort: {direction: SortDirection.ASC, field: "name"},
44 filters: createTree(),
45 render: uuid => <ResourceName uuid={uuid} />
48 name: GroupsPanelColumnNames.UUID,
51 filters: createTree(),
52 render: uuid => <ResourceUuid uuid={uuid} />,
55 name: GroupsPanelColumnNames.MEMBERS,
58 filters: createTree(),
59 render: uuid => <GroupMembersCount uuid={uuid} />,
63 const mapStateToProps = (state: RootState) => {
65 resources: state.resources
69 const mapDispatchToProps = {
70 onContextMenu: openContextMenu,
71 onNewGroup: openCreateGroupDialog,
74 export interface GroupsPanelProps {
75 onNewGroup: () => void;
76 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
77 resources: ResourcesState;
80 export const GroupsPanel = withStyles(styles)(connect(
81 mapStateToProps, mapDispatchToProps
83 class GroupsPanel extends React.Component<GroupsPanelProps & WithStyles<CssRules>> {
87 <div className={this.props.classes.root}><DataExplorer
89 data-cy="groups-panel-data-explorer"
91 onRowDoubleClick={noop}
92 onContextMenu={this.handleContextMenu}
93 contextMenuColumn={true}
96 <Grid container justify='flex-end'>
98 data-cy="groups-panel-new-group"
101 onClick={this.props.onNewGroup}>
102 <AddIcon /> New group
109 handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
110 const resource = getResource<GroupResource>(resourceUuid)(this.props.resources);
112 this.props.onContextMenu(event, {
115 description: resource.description,
116 ownerUuid: resource.ownerUuid,
118 menuKind: ContextMenuKind.GROUPS