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
  19 export enum GroupsPanelColumnNames {
  20     GROUP = "Name",
  21     OWNER = "Owner",
  22     MEMBERS = "Members",
  23 }
  24
  25 export const groupsPanelColumns: DataColumns<string> = [
  26     {
  27         name: GroupsPanelColumnNames.GROUP,
  28         selected: true,
  29         configurable: true,
  30         sortDirection: SortDirection.ASC,
  31         filters: createTree(),
  32         render: uuid => <ResourceName uuid={uuid} />
  33     },
  34     {
  35         name: GroupsPanelColumnNames.OWNER,
  36         selected: true,
  37         configurable: true,
  38         filters: createTree(),
  39         render: uuid => <ResourceOwner uuid={uuid} />,
  40     },
  41     {
  42         name: GroupsPanelColumnNames.MEMBERS,
  43         selected: true,
  44         configurable: true,
  45         filters: createTree(),
  46         render: uuid => <span>0</span>,
  47     },
  48 ];
  49
  50 export interface GroupsPanelProps {
  51     onNewGroup: () => void;
  52 }
  53
  54 export const GroupsPanel = connect(
  55     null,
  56     {
  57         onNewGroup: openCreateGroupDialog
  58     }
  59 )(
  60     class GroupsPanel extends React.Component<GroupsPanelProps> {
  61
  62         render() {
  63             return (
  64                 <DataExplorer
  65                     id={GROUPS_PANEL_ID}
  66                     onRowClick={noop}
  67                     onRowDoubleClick={noop}
  68                     onContextMenu={noop}
  69                     contextMenuColumn={true}
  70                     hideColumnSelector
  71                     actions={
  72                         <Grid container justify='flex-end'>
  73                             <Button
  74                                 variant="contained"
  75                                 color="primary"
  76                                 onClick={this.props.onNewGroup}>
  77                                 <AddIcon /> New group
  78                         </Button>
  79                         </Grid>
  80                     } />
  81             );
  82         }
  83     });