src/views-components/groups-dialog/member-attributes-dialog.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 { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Grid } from "@material-ui/core";
   7 import { WithDialogProps } from "~/store/dialog/with-dialog";
   8 import { withDialog } from '~/store/dialog/with-dialog';
   9 import { WithStyles, withStyles } from '@material-ui/core/styles';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { compose } from "redux";
  12 import { PermissionResource } from "~/models/permission";
  13 import { MEMBER_ATTRIBUTES_DIALOG } from "~/store/groups-panel/groups-panel-actions";
  14 import { UserResource } from "~/models/user";
  15
  16 type CssRules = 'rightContainer' | 'leftContainer' | 'spacing';
  17
  18 const styles = withStyles<CssRules>((theme: ArvadosTheme) => ({
  19     rightContainer: {
  20         textAlign: 'right',
  21         paddingRight: theme.spacing.unit * 2,
  22         color: theme.palette.grey["500"]
  23     },
  24     leftContainer: {
  25         textAlign: 'left',
  26         paddingLeft: theme.spacing.unit * 2
  27     },
  28     spacing: {
  29         paddingTop: theme.spacing.unit * 2
  30     },
  31 }));
  32
  33 interface GroupAttributesDataProps {
  34     data: PermissionResource;
  35 }
  36
  37 type GroupAttributesProps = GroupAttributesDataProps & WithStyles<CssRules>;
  38
  39 export const GroupMemberAttributesDialog = compose(
  40     withDialog(MEMBER_ATTRIBUTES_DIALOG),
  41     styles)(
  42         (props: WithDialogProps<GroupAttributesProps> & GroupAttributesProps) =>
  43             <Dialog open={props.open}
  44                 onClose={props.closeDialog}
  45                 fullWidth
  46                 maxWidth="sm">
  47                 <DialogTitle>Attributes</DialogTitle>
  48                 <DialogContent>
  49                     <Typography variant="body2" className={props.classes.spacing}>
  50                         {props.data && attributes(props.data, props.classes)}
  51                     </Typography>
  52                 </DialogContent>
  53                 <DialogActions>
  54                     <Button
  55                         variant='flat'
  56                         color='primary'
  57                         onClick={props.closeDialog}>
  58                         Close
  59                 </Button>
  60                 </DialogActions>
  61             </Dialog>
  62     );
  63
  64 const attributes = (memberGroup: PermissionResource, classes: any) => {
  65     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, etag, href, linkClass } = memberGroup;
  66     return (
  67         <span>
  68             <Grid container direction="row">
  69                 <Grid item xs={5} className={classes.rightContainer}>
  70                     {name && <Grid item>Name</Grid>}
  71                     {ownerUuid && <Grid item>Owner uuid</Grid>}
  72                     {createdAt && <Grid item>Created at</Grid>}
  73                     {modifiedAt && <Grid item>Modified at</Grid>}
  74                     {modifiedByUserUuid && <Grid item>Modified by user uuid</Grid>}
  75                     {modifiedByClientUuid && <Grid item>Modified by client uuid</Grid>}
  76                     {uuid && <Grid item>uuid</Grid>}
  77                     {linkClass && <Grid item>Link Class</Grid>}
  78                     {etag && <Grid item>Etag</Grid>}
  79                     {href && <Grid item>Href</Grid>}
  80                 </Grid>
  81                 <Grid item xs={7} className={classes.leftContainer}>
  82                     <Grid item>{name}</Grid>
  83                     <Grid item>{ownerUuid}</Grid>
  84                     <Grid item>{createdAt}</Grid>
  85                     <Grid item>{modifiedAt}</Grid>
  86                     <Grid item>{modifiedByUserUuid}</Grid>
  87                     <Grid item>{modifiedByClientUuid}</Grid>
  88                     <Grid item>{uuid}</Grid>
  89                     <Grid item>{linkClass}</Grid>
  90                     <Grid item>{etag}</Grid>
  91                     <Grid item>{href}</Grid>
  92                 </Grid>
  93             </Grid>
  94         </span>
  95     );
  96 };