src/views-components/links-dialog/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 { compose } from 'redux';
   7 import { withStyles, Dialog, DialogTitle, DialogContent, DialogActions, Button, StyleRulesCallback, WithStyles, Grid } from '@material-ui/core';
   8 import { WithDialogProps, withDialog } from "~/store/dialog/with-dialog";
   9 import { LINK_ATTRIBUTES_DIALOG } from '~/store/link-panel/link-panel-actions';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { LinkResource } from '~/models/link';
  12
  13 type CssRules = 'root';
  14
  15 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  16     root: {
  17         fontSize: '0.875rem',
  18         '& div:nth-child(odd)': {
  19             textAlign: 'right',
  20             color: theme.palette.grey["500"]
  21         }
  22     }
  23 });
  24
  25 interface AttributesLinkDialogDataProps {
  26     link: LinkResource;
  27 }
  28
  29 export const AttributesLinkDialog = compose(
  30     withDialog(LINK_ATTRIBUTES_DIALOG),
  31     withStyles(styles))(
  32     ({ open, closeDialog, data, classes }: WithDialogProps<AttributesLinkDialogDataProps> & WithStyles<CssRules>) =>
  33             <Dialog open={open}
  34                 onClose={closeDialog}
  35                 fullWidth
  36                 maxWidth='sm'>
  37                 <DialogTitle>Attributes</DialogTitle>
  38                 <DialogContent>
  39                     {data.link && <Grid container direction="row" spacing={16} className={classes.root}>
  40                         <Grid item xs={5}>Uuid</Grid>
  41                         <Grid item xs={7}>{data.link.uuid}</Grid>
  42                         <Grid item xs={5}>Name</Grid>
  43                         <Grid item xs={7}>{data.link.name}</Grid>
  44                         <Grid item xs={5}>Head uuid</Grid>
  45                         <Grid item xs={7}>{data.link.headUuid}</Grid>
  46                         <Grid item xs={5}>Head kind</Grid>
  47                         <Grid item xs={7}>{data.link.headKind}</Grid>
  48                         <Grid item xs={5}>Tail uuid</Grid>
  49                         <Grid item xs={7}>{data.link.tailUuid}</Grid>
  50                         <Grid item xs={5}>Link class</Grid>
  51                         <Grid item xs={7}>{data.link.linkClass}</Grid>
  52                         <Grid item xs={5}>Owner uuid</Grid>
  53                         <Grid item xs={7}>{data.link.ownerUuid}</Grid>
  54                         <Grid item xs={5}>Created at</Grid>
  55                         <Grid item xs={7}>{data.link.createdAt}</Grid>
  56                         <Grid item xs={5}>Modified at</Grid>
  57                         <Grid item xs={7}>{data.link.modifiedAt}</Grid>
  58                         <Grid item xs={5}>Modified by user uuid</Grid>
  59                         <Grid item xs={7}>{data.link.modifiedByUserUuid}</Grid>
  60                         <Grid item xs={5}>Modified by client uuid</Grid>
  61                         <Grid item xs={7}>{data.link.modifiedByClientUuid}</Grid>
  62                     </Grid>}
  63                 </DialogContent>
  64                 <DialogActions>
  65                     <Button
  66                         variant='text'
  67                         color='primary'
  68                         onClick={closeDialog}>
  69                         Close
  70                     </Button>
  71                 </DialogActions>
  72             </Dialog>
  73     );