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