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