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';
8 import { DataExplorer } from "views-components/data-explorer/data-explorer";
9 import { DataColumns } from 'components/data-table/data-table';
10 import { ResourceLinkHeadUuid, ResourceLinkTailUuid, ResourceLinkTailEmail, ResourceLinkTailUsername, ResourceLinkHeadPermissionLevel, ResourceLinkTailPermissionLevel, ResourceLinkHead, ResourceLinkTail, ResourceLinkDelete, ResourceLinkTailIsActive } 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_MEMBERS_PANEL_ID, GROUP_DETAILS_PERMISSIONS_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, Tabs, Tab, Paper } from '@material-ui/core';
20 import { AddIcon } from 'components/icon/icon';
22 export enum GroupDetailsPanelMembersColumnNames {
24 USERNAME = "Username",
26 ACTIVE = "User Active",
27 PERMISSION = "Permission",
32 export enum GroupDetailsPanelPermissionsColumnNames {
34 PERMISSION = "Permission",
39 export const groupDetailsMembersPanelColumns: DataColumns<string> = [
41 name: GroupDetailsPanelMembersColumnNames.FULL_NAME,
44 filters: createTree(),
45 render: uuid => <ResourceLinkTail uuid={uuid} />
48 name: GroupDetailsPanelMembersColumnNames.USERNAME,
51 filters: createTree(),
52 render: uuid => <ResourceLinkTailUsername uuid={uuid} />
55 name: GroupDetailsPanelMembersColumnNames.EMAIL,
58 filters: createTree(),
59 render: uuid => <ResourceLinkTailEmail uuid={uuid} />
62 name: GroupDetailsPanelMembersColumnNames.ACTIVE,
65 filters: createTree(),
66 render: uuid => <ResourceLinkTailIsActive uuid={uuid} />
69 name: GroupDetailsPanelMembersColumnNames.PERMISSION,
72 filters: createTree(),
73 render: uuid => <ResourceLinkTailPermissionLevel uuid={uuid} />
76 name: GroupDetailsPanelMembersColumnNames.UUID,
79 filters: createTree(),
80 render: uuid => <ResourceLinkTailUuid uuid={uuid} />
83 name: GroupDetailsPanelMembersColumnNames.REMOVE,
86 filters: createTree(),
87 render: uuid => <ResourceLinkDelete uuid={uuid} />
91 export const groupDetailsPermissionsPanelColumns: DataColumns<string> = [
93 name: GroupDetailsPanelPermissionsColumnNames.NAME,
96 filters: createTree(),
97 render: uuid => <ResourceLinkHead uuid={uuid} />
100 name: GroupDetailsPanelPermissionsColumnNames.PERMISSION,
103 filters: createTree(),
104 render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
107 name: GroupDetailsPanelPermissionsColumnNames.UUID,
110 filters: createTree(),
111 render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
114 name: GroupDetailsPanelPermissionsColumnNames.REMOVE,
117 filters: createTree(),
118 render: uuid => <ResourceLinkDelete uuid={uuid} />
122 const mapStateToProps = (state: RootState) => {
124 resources: state.resources
128 const mapDispatchToProps = {
129 onContextMenu: openContextMenu,
130 onAddUser: openAddGroupMembersDialog,
133 export interface GroupDetailsPanelProps {
134 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
135 onAddUser: () => void;
136 resources: ResourcesState;
139 export const GroupDetailsPanel = connect(
140 mapStateToProps, mapDispatchToProps
142 class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
147 componentDidMount() {
148 this.setState({ value: 0 });
152 const { value } = this.state;
155 <Tabs value={value} onChange={this.handleChange} variant="fullWidth">
156 <Tab label="MEMBERS" />
157 <Tab label="PERMISSIONS" />
161 id={GROUP_DETAILS_MEMBERS_PANEL_ID}
163 onRowDoubleClick={noop}
165 contextMenuColumn={false}
169 <Grid container justify='flex-end'>
173 onClick={this.props.onAddUser}>
184 id={GROUP_DETAILS_PERMISSIONS_PANEL_ID}
186 onRowDoubleClick={noop}
188 contextMenuColumn={false}
199 handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
200 const resource = getResource<PermissionResource>(resourceUuid)(this.props.resources);
202 this.props.onContextMenu(event, {
205 ownerUuid: resource.ownerUuid,
207 menuKind: ContextMenuKind.GROUP_MEMBER
212 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
213 this.setState({ value });