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, ResourceLinkTailIsHidden } 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, getCurrentGroupDetailsPanelUuid } 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 { Grid, Button, Tabs, Tab, Paper } from '@material-ui/core';
18 import { AddIcon } from 'components/icon/icon';
19 import { getUserUuid } from 'common/getuser';
20 import { GroupResource } from 'models/group';
22 export enum GroupDetailsPanelMembersColumnNames {
24 USERNAME = "Username",
26 ACTIVE = "User Active",
27 HIDDEN = "Member Hidden",
28 PERMISSION = "Permission",
33 export enum GroupDetailsPanelPermissionsColumnNames {
35 PERMISSION = "Permission",
40 export const groupDetailsMembersPanelColumns: DataColumns<string> = [
42 name: GroupDetailsPanelMembersColumnNames.FULL_NAME,
45 filters: createTree(),
46 render: uuid => <ResourceLinkTail uuid={uuid} />
49 name: GroupDetailsPanelMembersColumnNames.USERNAME,
52 filters: createTree(),
53 render: uuid => <ResourceLinkTailUsername uuid={uuid} />
56 name: GroupDetailsPanelMembersColumnNames.EMAIL,
59 filters: createTree(),
60 render: uuid => <ResourceLinkTailEmail uuid={uuid} />
63 name: GroupDetailsPanelMembersColumnNames.ACTIVE,
66 filters: createTree(),
67 render: uuid => <ResourceLinkTailIsActive uuid={uuid} />
70 name: GroupDetailsPanelMembersColumnNames.HIDDEN,
73 filters: createTree(),
74 render: uuid => <ResourceLinkTailIsHidden uuid={uuid} />
77 name: GroupDetailsPanelMembersColumnNames.PERMISSION,
80 filters: createTree(),
81 render: uuid => <ResourceLinkTailPermissionLevel uuid={uuid} />
84 name: GroupDetailsPanelMembersColumnNames.UUID,
87 filters: createTree(),
88 render: uuid => <ResourceLinkTailUuid uuid={uuid} />
91 name: GroupDetailsPanelMembersColumnNames.REMOVE,
94 filters: createTree(),
95 render: uuid => <ResourceLinkDelete uuid={uuid} />
99 export const groupDetailsPermissionsPanelColumns: DataColumns<string> = [
101 name: GroupDetailsPanelPermissionsColumnNames.NAME,
104 filters: createTree(),
105 render: uuid => <ResourceLinkHead uuid={uuid} />
108 name: GroupDetailsPanelPermissionsColumnNames.PERMISSION,
111 filters: createTree(),
112 render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
115 name: GroupDetailsPanelPermissionsColumnNames.UUID,
118 filters: createTree(),
119 render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
122 name: GroupDetailsPanelPermissionsColumnNames.REMOVE,
125 filters: createTree(),
126 render: uuid => <ResourceLinkDelete uuid={uuid} />
130 const mapStateToProps = (state: RootState) => {
131 const groupUuid = getCurrentGroupDetailsPanelUuid(state.properties);
132 const group = getResource<GroupResource>(groupUuid || '')(state.resources);
133 const userUuid = getUserUuid(state);
136 resources: state.resources,
137 groupCanManage: userUuid ? group?.writableBy?.includes(userUuid) : false,
141 const mapDispatchToProps = {
142 onContextMenu: openContextMenu,
143 onAddUser: openAddGroupMembersDialog,
146 export interface GroupDetailsPanelProps {
147 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
148 onAddUser: () => void;
149 resources: ResourcesState;
150 groupCanManage: boolean;
153 export const GroupDetailsPanel = connect(
154 mapStateToProps, mapDispatchToProps
156 class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
161 componentDidMount() {
162 this.setState({ value: 0 });
166 const { value } = this.state;
169 <Tabs value={value} onChange={this.handleChange} variant="fullWidth">
170 <Tab data-cy="group-details-members-tab" label="MEMBERS" />
171 <Tab data-cy="group-details-permissions-tab" label="PERMISSIONS" />
175 id={GROUP_DETAILS_MEMBERS_PANEL_ID}
176 data-cy="group-members-data-explorer"
178 onRowDoubleClick={noop}
180 contextMenuColumn={false}
184 this.props.groupCanManage &&
185 <Grid container justify='flex-end'>
187 data-cy="group-member-add"
190 onClick={this.props.onAddUser}>
201 id={GROUP_DETAILS_PERMISSIONS_PANEL_ID}
202 data-cy="group-permissions-data-explorer"
204 onRowDoubleClick={noop}
206 contextMenuColumn={false}
217 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
218 this.setState({ value });