services/workbench2/src/views-components/user-dialog/attributes-dialog.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 { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Grid } from "@mui/material";
   7 import { WithDialogProps } from "store/dialog/with-dialog";
   8 import { withDialog } from 'store/dialog/with-dialog';
   9 import { WithStyles } from '@mui/styles';
  10 import { CustomStyleRulesCallback } from 'common/custom-theme';
  11 import withStyles from '@mui/styles/withStyles';
  12 import { ArvadosTheme } from 'common/custom-theme';
  13 import { compose } from "redux";
  14 import { USER_ATTRIBUTES_DIALOG } from "store/users/users-actions";
  15 import { UserResource } from "models/user";
  16
  17 type CssRules = 'rightContainer' | 'leftContainer' | 'spacing';
  18
  19 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     rightContainer: {
  21         textAlign: 'right',
  22         paddingRight: theme.spacing(2),
  23         color: theme.palette.grey["500"]
  24     },
  25     leftContainer: {
  26         textAlign: 'left',
  27         paddingLeft: theme.spacing(2)
  28     },
  29     spacing: {
  30         paddingTop: theme.spacing(2)
  31     },
  32 });
  33
  34 interface UserAttributesDataProps {
  35     data: UserResource;
  36 }
  37
  38 type UserAttributesProps = UserAttributesDataProps & WithStyles<CssRules>;
  39
  40 export const UserAttributesDialog = compose(
  41     withDialog(USER_ATTRIBUTES_DIALOG),
  42     withStyles(styles))(
  43         (props: WithDialogProps<UserAttributesProps> & UserAttributesProps) =>
  44             <Dialog open={props.open}
  45                 onClose={props.closeDialog}
  46                 fullWidth
  47                 maxWidth="sm">
  48                 <DialogTitle>Attributes</DialogTitle>
  49                 <DialogContent>
  50                     <Typography variant='body1' className={props.classes.spacing}>
  51                         {props.data && attributes(props.data, props.classes)}
  52                     </Typography>
  53                 </DialogContent>
  54                 <DialogActions>
  55                     <Button
  56                         variant='text'
  57                         color='primary'
  58                         onClick={props.closeDialog}>
  59                         Close
  60                 </Button>
  61                 </DialogActions>
  62             </Dialog>
  63     );
  64
  65 const attributes = (user: UserResource, classes: any) => {
  66     const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid,
  67         firstName, lastName, username, email, isActive, isAdmin } = user;
  68     return (
  69         <span>
  70             <Grid container direction="row">
  71                 <Grid item xs={5} className={classes.rightContainer}>
  72                     {uuid && <Grid item>Uuid</Grid>}
  73                     {firstName && <Grid item>First name</Grid>}
  74                     {lastName && <Grid item>Last name</Grid>}
  75                     {email && <Grid item>Email</Grid>}
  76                     {username && <Grid item>Username</Grid>}
  77                     {isActive && <Grid item>Is active</Grid>}
  78                     {isAdmin && <Grid item>Is admin</Grid>}
  79                     {createdAt && <Grid item>Created at</Grid>}
  80                     {modifiedAt && <Grid item>Modified at</Grid>}
  81                     {ownerUuid && <Grid item>Owner uuid</Grid>}
  82                     {modifiedByUserUuid && <Grid item>Modified by user uuid</Grid>}
  83                     {modifiedByClientUuid && <Grid item>Modified by client uuid</Grid>}
  84                 </Grid>
  85                 <Grid item xs={7} className={classes.leftContainer}>
  86                     <Grid item>{uuid}</Grid>
  87                     <Grid item>{firstName}</Grid>
  88                     <Grid item>{lastName}</Grid>
  89                     <Grid item>{email}</Grid>
  90                     <Grid item>{username}</Grid>
  91                     <Grid item>{isActive}</Grid>
  92                     <Grid item>{isAdmin}</Grid>
  93                     <Grid item>{createdAt}</Grid>
  94                     <Grid item>{modifiedAt}</Grid>
  95                     <Grid item>{ownerUuid}</Grid>
  96                     <Grid item>{modifiedByUserUuid}</Grid>
  97                     <Grid item>{modifiedByClientUuid}</Grid>
  98                 </Grid>
  99             </Grid>
 100         </span>
 101     );
 102 };