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, ResourceLinkTailUsername, ResourceLinkHeadPermissionLevel, ResourceLinkTailPermissionLevel, ResourceLinkHead, ResourceLinkTail, ResourceLinkDelete, ResourceLinkTailAccountStatus, ResourceLinkTailIsVisible } 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, WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core';
18 import { AddIcon, UserPanelIcon, KeyIcon } from 'components/icon/icon';
19 import { getUserUuid } from 'common/getuser';
20 import { GroupResource, isBuiltinGroup } from 'models/group';
21 import { ArvadosTheme } from 'common/custom-theme';
23 type CssRules = "root";
25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
31 export enum GroupDetailsPanelMembersColumnNames {
33 USERNAME = "Username",
34 STATUS = "Account Status",
35 VISIBLE = "Visible to other members",
36 PERMISSION = "Permission",
40 export enum GroupDetailsPanelPermissionsColumnNames {
42 PERMISSION = "Permission",
47 const MEMBERS_DEFAULT_MESSAGE = 'Members list is empty.';
48 const PERMISSIONS_DEFAULT_MESSAGE = 'Permissions list is empty.';
50 export const groupDetailsMembersPanelColumns: DataColumns<string> = [
52 name: GroupDetailsPanelMembersColumnNames.FULL_NAME,
55 filters: createTree(),
56 render: uuid => <ResourceLinkTail uuid={uuid} />
59 name: GroupDetailsPanelMembersColumnNames.USERNAME,
62 filters: createTree(),
63 render: uuid => <ResourceLinkTailUsername uuid={uuid} />
66 name: GroupDetailsPanelMembersColumnNames.STATUS,
69 filters: createTree(),
70 render: uuid => <ResourceLinkTailAccountStatus uuid={uuid} />
73 name: GroupDetailsPanelMembersColumnNames.VISIBLE,
76 filters: createTree(),
77 render: uuid => <ResourceLinkTailIsVisible uuid={uuid} />
80 name: GroupDetailsPanelMembersColumnNames.PERMISSION,
83 filters: createTree(),
84 render: uuid => <ResourceLinkTailPermissionLevel uuid={uuid} />
87 name: GroupDetailsPanelMembersColumnNames.REMOVE,
90 filters: createTree(),
91 render: uuid => <ResourceLinkDelete uuid={uuid} />
95 export const groupDetailsPermissionsPanelColumns: DataColumns<string> = [
97 name: GroupDetailsPanelPermissionsColumnNames.NAME,
100 filters: createTree(),
101 render: uuid => <ResourceLinkHead uuid={uuid} />
104 name: GroupDetailsPanelPermissionsColumnNames.PERMISSION,
107 filters: createTree(),
108 render: uuid => <ResourceLinkHeadPermissionLevel uuid={uuid} />
111 name: GroupDetailsPanelPermissionsColumnNames.UUID,
114 filters: createTree(),
115 render: uuid => <ResourceLinkHeadUuid uuid={uuid} />
118 name: GroupDetailsPanelPermissionsColumnNames.REMOVE,
121 filters: createTree(),
122 render: uuid => <ResourceLinkDelete uuid={uuid} />
126 const mapStateToProps = (state: RootState) => {
127 const groupUuid = getCurrentGroupDetailsPanelUuid(state.properties);
128 const group = getResource<GroupResource>(groupUuid || '')(state.resources);
129 const userUuid = getUserUuid(state);
132 resources: state.resources,
133 groupCanManage: userUuid && !isBuiltinGroup(group?.uuid || '')
134 ? group?.writableBy?.includes(userUuid)
139 const mapDispatchToProps = {
140 onContextMenu: openContextMenu,
141 onAddUser: openAddGroupMembersDialog,
144 export interface GroupDetailsPanelProps {
145 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
146 onAddUser: () => void;
147 resources: ResourcesState;
148 groupCanManage: boolean;
151 export const GroupDetailsPanel = withStyles(styles)(connect(
152 mapStateToProps, mapDispatchToProps
154 class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps & WithStyles<CssRules>> {
159 componentDidMount() {
160 this.setState({ value: 0 });
164 const { value } = this.state;
166 <Paper className={this.props.classes.root}>
167 <Tabs value={value} onChange={this.handleChange} variant="fullWidth">
168 <Tab data-cy="group-details-members-tab" label="MEMBERS" />
169 <Tab data-cy="group-details-permissions-tab" label="PERMISSIONS" />
173 id={GROUP_DETAILS_MEMBERS_PANEL_ID}
174 data-cy="group-members-data-explorer"
176 onRowDoubleClick={noop}
178 contextMenuColumn={false}
179 defaultViewIcon={UserPanelIcon}
180 defaultViewMessages={[MEMBERS_DEFAULT_MESSAGE]}
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}
207 defaultViewIcon={KeyIcon}
208 defaultViewMessages={[PERMISSIONS_DEFAULT_MESSAGE]}
219 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
220 this.setState({ value });