src/views/groups-panel/groups-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 import { Grid, Button, Typography } from "@material-ui/core";
   8 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   9 import { DataColumns } from '~/components/data-table/data-table';
  10 import { SortDirection } from '~/components/data-table/data-column';
  11 import { ResourceOwner } from '~/views-components/data-explorer/renderers';
  12 import { AddIcon } from '~/components/icon/icon';
  13 import { ResourceName } from '~/views-components/data-explorer/renderers';
  14 import { createTree } from '~/models/tree';
  15 import { GROUPS_PANEL_ID, openCreateGroupDialog } from '~/store/groups-panel/groups-panel-actions';
  16 import { noop } from 'lodash/fp';
  17 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
  18 import { getResource, ResourcesState, filterResources } from '~/store/resources/resources';
  19 import { GroupResource } from '~/models/group';
  20 import { RootState } from '~/store/store';
  21 import { openContextMenu } from '~/store/context-menu/context-menu-actions';
  22 import { ResourceKind } from '~/models/resource';
  23 import { LinkClass, LinkResource } from '~/models/link';
  24 import { navigateToGroupDetails } from '~/store/navigation/navigation-action';
  25
  26 export enum GroupsPanelColumnNames {
  27     GROUP = "Name",
  28     OWNER = "Owner",
  29     MEMBERS = "Members",
  30 }
  31
  32 export const groupsPanelColumns: DataColumns<string> = [
  33     {
  34         name: GroupsPanelColumnNames.GROUP,
  35         selected: true,
  36         configurable: true,
  37         sortDirection: SortDirection.ASC,
  38         filters: createTree(),
  39         render: uuid => <ResourceName uuid={uuid} />
  40     },
  41     {
  42         name: GroupsPanelColumnNames.OWNER,
  43         selected: true,
  44         configurable: true,
  45         filters: createTree(),
  46         render: uuid => <ResourceOwner uuid={uuid} />,
  47     },
  48     {
  49         name: GroupsPanelColumnNames.MEMBERS,
  50         selected: true,
  51         configurable: true,
  52         filters: createTree(),
  53         render: uuid => <GroupMembersCount uuid={uuid} />,
  54     },
  55 ];
  56
  57 const mapStateToProps = (state: RootState) => {
  58     return {
  59         resources: state.resources
  60     };
  61 };
  62
  63 const mapDispatchToProps = {
  64     onContextMenu: openContextMenu,
  65     onRowDoubleClick: (uuid: string) =>
  66         navigateToGroupDetails(uuid),
  67     onNewGroup: openCreateGroupDialog,
  68 };
  69
  70 export interface GroupsPanelProps {
  71     onNewGroup: () => void;
  72     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
  73     onRowDoubleClick: (item: string) => void;
  74     resources: ResourcesState;
  75 }
  76
  77 export const GroupsPanel = connect(
  78     mapStateToProps, mapDispatchToProps
  79 )(
  80     class GroupsPanel extends React.Component<GroupsPanelProps> {
  81
  82         render() {
  83             return (
  84                 <DataExplorer
  85                     id={GROUPS_PANEL_ID}
  86                     onRowClick={noop}
  87                     onRowDoubleClick={this.props.onRowDoubleClick}
  88                     onContextMenu={this.handleContextMenu}
  89                     contextMenuColumn={true}
  90                     hideColumnSelector
  91                     actions={
  92                         <Grid container justify='flex-end'>
  93                             <Button
  94                                 variant="contained"
  95                                 color="primary"
  96                                 onClick={this.props.onNewGroup}>
  97                                 <AddIcon /> New group
  98                         </Button>
  99                         </Grid>
 100                     } />
 101             );
 102         }
 103
 104         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 105             const resource = getResource<GroupResource>(resourceUuid)(this.props.resources);
 106             if (resource) {
 107                 this.props.onContextMenu(event, {
 108                     name: '',
 109                     uuid: resource.uuid,
 110                     ownerUuid: resource.ownerUuid,
 111                     kind: resource.kind,
 112                     menuKind: ContextMenuKind.GROUPS
 113                 });
 114             }
 115         }
 116     });
 117
 118
 119 const GroupMembersCount = connect(
 120     (state: RootState, props: { uuid: string }) => {
 121
 122         const permissions = filterResources((resource: LinkResource) =>
 123             resource.kind === ResourceKind.LINK &&
 124             resource.linkClass === LinkClass.PERMISSION &&
 125             resource.tailUuid === props.uuid
 126         )(state.resources);
 127
 128         return {
 129             children: permissions.length,
 130         };
 131
 132     }
 133 )(Typography);