15088: Adds routing for link-account panel
[arvados.git] / src / views / group-details-panel / group-details-panel.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import { connect } from 'react-redux';
7
8 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
9 import { DataColumns } from '~/components/data-table/data-table';
10 import { ResourceUuid, ResourceFirstName, ResourceLastName, ResourceEmail, ResourceUsername } 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_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 } from '@material-ui/core';
20 import { AddIcon } from '~/components/icon/icon';
21
22 export enum GroupDetailsPanelColumnNames {
23     FIRST_NAME = "First name",
24     LAST_NAME = "Last name",
25     UUID = "UUID",
26     EMAIL = "Email",
27     USERNAME = "Username",
28 }
29
30 export const groupDetailsPanelColumns: DataColumns<string> = [
31     {
32         name: GroupDetailsPanelColumnNames.FIRST_NAME,
33         selected: true,
34         configurable: true,
35         filters: createTree(),
36         render: uuid => <ResourceFirstName uuid={uuid} />
37     },
38     {
39         name: GroupDetailsPanelColumnNames.LAST_NAME,
40         selected: true,
41         configurable: true,
42         filters: createTree(),
43         render: uuid => <ResourceLastName uuid={uuid} />
44     },
45     {
46         name: GroupDetailsPanelColumnNames.UUID,
47         selected: true,
48         configurable: true,
49         filters: createTree(),
50         render: uuid => <ResourceUuid uuid={uuid} />
51     },
52     {
53         name: GroupDetailsPanelColumnNames.EMAIL,
54         selected: true,
55         configurable: true,
56         filters: createTree(),
57         render: uuid => <ResourceEmail uuid={uuid} />
58     },
59     {
60         name: GroupDetailsPanelColumnNames.USERNAME,
61         selected: true,
62         configurable: true,
63         filters: createTree(),
64         render: uuid => <ResourceUsername uuid={uuid} />
65     },
66 ];
67
68 const mapStateToProps = (state: RootState) => {
69     return {
70         resources: state.resources
71     };
72 };
73
74 const mapDispatchToProps = {
75     onContextMenu: openContextMenu,
76     onAddUser: openAddGroupMembersDialog,
77 };
78
79 export interface GroupDetailsPanelProps {
80     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
81     onAddUser: () => void;
82     resources: ResourcesState;
83 }
84
85 export const GroupDetailsPanel = connect(
86     mapStateToProps, mapDispatchToProps
87 )(
88     class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
89
90         render() {
91             return (
92                 <DataExplorer
93                     id={GROUP_DETAILS_PANEL_ID}
94                     onRowClick={noop}
95                     onRowDoubleClick={noop}
96                     onContextMenu={this.handleContextMenu}
97                     contextMenuColumn={true}
98                     hideColumnSelector
99                     hideSearchInput
100                     actions={
101                         <Grid container justify='flex-end'>
102                             <Button
103                                 variant="contained"
104                                 color="primary"
105                                 onClick={this.props.onAddUser}>
106                                 <AddIcon /> Add user
107                         </Button>
108                         </Grid>
109                     } />
110             );
111         }
112
113         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
114             const resource = getResource<PermissionResource>(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.GROUP_MEMBER
122                 });
123             }
124         }
125     });
126