services/workbench2/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 React from 'react';
   6 import { connect } from 'react-redux';
   7 import { CustomStyleRulesCallback } from 'common/custom-theme';
   8 import { Grid, Button } from "@mui/material";
   9 import { WithStyles } from '@mui/styles';
  10 import withStyles from '@mui/styles/withStyles';
  11 import { DataExplorer } from "views-components/data-explorer/data-explorer";
  12 import { DataColumns, SortDirection } from 'components/data-table/data-column';
  13 import { GroupMembersCount, ResourceUuid } from 'views-components/data-explorer/renderers';
  14 import { AddIcon } from 'components/icon/icon';
  15 import { ResourceName } from 'views-components/data-explorer/renderers';
  16 import { createTree } from 'models/tree';
  17 import { GROUPS_PANEL_ID, openCreateGroupDialog } from 'store/groups-panel/groups-panel-actions';
  18 import { noop } from 'lodash/fp';
  19 import { ContextMenuKind } from 'views-components/context-menu/menu-item-sort';
  20 import { getResource, ResourcesState } from 'store/resources/resources';
  21 import { GroupResource } from 'models/group';
  22 import { RootState } from 'store/store';
  23 import { openContextMenuAndSelect } from 'store/context-menu/context-menu-actions';
  24 import { ArvadosTheme } from 'common/custom-theme';
  25 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
  26 import { toggleOne, deselectAllOthers } from 'store/multiselect/multiselect-actions';
  27
  28 type CssRules = "root";
  29
  30 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  31     root: {
  32         width: '100%',
  33         boxShadow: "0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%)",
  34     }
  35 });
  36
  37 export enum GroupsPanelColumnNames {
  38     GROUP = "Name",
  39     UUID = "UUID",
  40     MEMBERS = "Members",
  41 }
  42
  43 export const groupsPanelColumns: DataColumns<string, GroupResource> = [
  44     {
  45         name: GroupsPanelColumnNames.GROUP,
  46         selected: true,
  47         configurable: true,
  48         sort: {direction: SortDirection.ASC, field: "name"},
  49         filters: createTree(),
  50         render: uuid => <ResourceName uuid={uuid} />
  51     },
  52     {
  53         name: GroupsPanelColumnNames.UUID,
  54         selected: true,
  55         configurable: true,
  56         filters: createTree(),
  57         render: uuid => <ResourceUuid uuid={uuid} />,
  58     },
  59     {
  60         name: GroupsPanelColumnNames.MEMBERS,
  61         selected: true,
  62         configurable: true,
  63         filters: createTree(),
  64         render: uuid => <GroupMembersCount uuid={uuid} />,
  65     },
  66 ];
  67
  68 const mapStateToProps = (state: RootState) => {
  69     return {
  70         resources: state.resources
  71     };
  72 };
  73
  74 const mapDispatchToProps = (dispatch: any) => {
  75     return {
  76         onContextMenu: (ev, resource) => dispatch(openContextMenuAndSelect(ev, resource)),
  77         onNewGroup: () => dispatch(openCreateGroupDialog()),
  78         handleRowClick: (uuid: string) => {
  79             dispatch(toggleOne(uuid))
  80             dispatch(deselectAllOthers(uuid))
  81             dispatch(loadDetailsPanel(uuid));
  82         }
  83     };
  84 };
  85
  86 export interface GroupsPanelProps {
  87     onNewGroup: () => void;
  88     handleRowClick: (uuid: string) => void;
  89     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
  90     resources: ResourcesState;
  91 }
  92
  93 export const GroupsPanel = withStyles(styles)(connect(
  94     mapStateToProps, mapDispatchToProps
  95 )(
  96     class GroupsPanel extends React.Component<GroupsPanelProps & WithStyles<CssRules>> {
  97
  98         render() {
  99             return (
 100                 <div className={this.props.classes.root}>
 101                     <DataExplorer
 102                         id={GROUPS_PANEL_ID}
 103                         data-cy="groups-panel-data-explorer"
 104                         onRowClick={this.props.handleRowClick}
 105                         onRowDoubleClick={noop}
 106                         onContextMenu={this.handleContextMenu}
 107                         contextMenuColumn={false}
 108                         hideColumnSelector
 109                         actions={
 110                             <Grid container justifyContent='flex-end'>
 111                                 <Button
 112                                     data-cy="groups-panel-new-group"
 113                                     variant="contained"
 114                                     color="primary"
 115                                     onClick={this.props.onNewGroup}>
 116                                     <AddIcon /> New group
 117                                 </Button>
 118                             </Grid>
 119                         } />
 120                     </div>
 121             );
 122         }
 123
 124         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 125             const resource = getResource<GroupResource>(resourceUuid)(this.props.resources);
 126             if (resource) {
 127                 this.props.onContextMenu(event, {
 128                     name: resource.name,
 129                     uuid: resource.uuid,
 130                     description: resource.description,
 131                     ownerUuid: resource.ownerUuid,
 132                     kind: resource.kind,
 133                     menuKind: ContextMenuKind.GROUPS
 134                 });
 135             }
 136         }
 137     }));