X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/18a947dc933f658375a0d03a8822cd85ecfdfce2..29c0944feb7932889a5b6fcaf208eef9f5864a29:/src/views/group-details-panel/group-details-panel.tsx

diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx
index fb4825de93..f81c2404e7 100644
--- a/src/views/group-details-panel/group-details-panel.tsx
+++ b/src/views/group-details-panel/group-details-panel.tsx
@@ -11,7 +11,13 @@ import { ResourceUuid, ResourceFirstName, ResourceLastName, ResourceEmail, Resou
 import { createTree } from '~/models/tree';
 import { noop } from 'lodash/fp';
 import { RootState } from '~/store/store';
-import { GROUP_DETAILS_PANEL_ID } from '~/store/group-details-panel/group-details-panel-actions';
+import { GROUP_DETAILS_PANEL_ID, openAddGroupMembersDialog } from '~/store/group-details-panel/group-details-panel-actions';
+import { openContextMenu } from '~/store/context-menu/context-menu-actions';
+import { ResourcesState, getResource } from '~/store/resources/resources';
+import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
+import { PermissionResource } from '~/models/permission';
+import { Grid, Button } from '@material-ui/core';
+import { AddIcon } from '~/components/icon/icon';
 
 export enum GroupDetailsPanelColumnNames {
     FIRST_NAME = "First name",
@@ -65,9 +71,16 @@ const mapStateToProps = (state: RootState) => {
     };
 };
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+    onContextMenu: openContextMenu,
+    onAddUser: openAddGroupMembersDialog,
+};
 
-export interface GroupDetailsPanelProps { }
+export interface GroupDetailsPanelProps {
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
+    onAddUser: () => void;
+    resources: ResourcesState;
+}
 
 export const GroupDetailsPanel = connect(
     mapStateToProps, mapDispatchToProps
@@ -80,10 +93,34 @@ export const GroupDetailsPanel = connect(
                     id={GROUP_DETAILS_PANEL_ID}
                     onRowClick={noop}
                     onRowDoubleClick={noop}
-                    onContextMenu={noop}
+                    onContextMenu={this.handleContextMenu}
                     contextMenuColumn={true}
-                    hideColumnSelector />
+                    hideColumnSelector
+                    hideSearchInput
+                    actions={
+                        <Grid container justify='flex-end'>
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                onClick={this.props.onAddUser}>
+                                <AddIcon /> Add user
+                        </Button>
+                        </Grid>
+                    } />
             );
         }
+
+        handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
+            const resource = getResource<PermissionResource>(resourceUuid)(this.props.resources);
+            if (resource) {
+                this.props.onContextMenu(event, {
+                    name: '',
+                    uuid: resource.uuid,
+                    ownerUuid: resource.ownerUuid,
+                    kind: resource.kind,
+                    menuKind: ContextMenuKind.GROUP_MEMBER
+                });
+            }
+        }
     });