src/views/ssh-key-panel/ssh-key-panel-root.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 { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Button, Typography, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { SshKeyResource } from '~/models/ssh-key';
   9 import { AddIcon, MoreOptionsIcon, KeyIcon } from '~/components/icon/icon';
  10
  11 type CssRules = 'root' | 'link' | 'buttonContainer' | 'table' | 'tableRow' | 'keyIcon';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     root: {
  15        width: '100%',
  16        overflow: 'auto'
  17     },
  18     link: {
  19         color: theme.palette.primary.main,
  20         textDecoration: 'none',
  21         margin: '0px 4px'
  22     },
  23     buttonContainer: {
  24         textAlign: 'right'
  25     },
  26     table: {
  27         marginTop: theme.spacing.unit
  28     },
  29     tableRow: {
  30         '& td, th': {
  31             whiteSpace: 'nowrap'
  32         }
  33     },
  34     keyIcon: {
  35         color: theme.palette.primary.main
  36     }
  37 });
  38
  39 export interface SshKeyPanelRootActionProps {
  40     openSshKeyCreateDialog: () => void;
  41     openRowOptions: (event: React.MouseEvent<HTMLElement>, index: number, sshKey: SshKeyResource) => void;
  42     openPublicKeyDialog: (name: string, publicKey: string) => void;
  43 }
  44
  45 export interface SshKeyPanelRootDataProps {
  46     sshKeys: SshKeyResource[];
  47     hasKeys: boolean;
  48 }
  49
  50 type SshKeyPanelRootProps = SshKeyPanelRootDataProps & SshKeyPanelRootActionProps & WithStyles<CssRules>;
  51
  52 export const SshKeyPanelRoot = withStyles(styles)(
  53     ({ classes, sshKeys, openSshKeyCreateDialog, openPublicKeyDialog, hasKeys, openRowOptions }: SshKeyPanelRootProps) =>
  54         <Card className={classes.root}>
  55             <CardContent>
  56                 <Grid container direction="row">
  57                     <Grid item xs={8}>
  58                         { !hasKeys && <Typography variant='body1' paragraph={true} >
  59                             You have not yet set up an SSH public key for use with Arvados.
  60                             <a href='https://doc.arvados.org/user/getting_started/ssh-access-unix.html'
  61                                 target='blank' className={classes.link}>
  62                                 Learn more.
  63                             </a>
  64                         </Typography>}
  65                         { !hasKeys && <Typography variant='body1' paragraph={true}>
  66                             When you have an SSH key you would like to use, add it using button below.
  67                         </Typography> }
  68                     </Grid>
  69                     <Grid item xs={4} className={classes.buttonContainer}>
  70                         <Button onClick={openSshKeyCreateDialog} color="primary" variant="contained">
  71                             <AddIcon /> Add New Ssh Key
  72                         </Button>
  73                     </Grid>
  74                 </Grid>
  75                 <Grid item xs={12}>
  76                     {hasKeys && <Table className={classes.table}>
  77                         <TableHead>
  78                             <TableRow className={classes.tableRow}>
  79                                 <TableCell>Name</TableCell>
  80                                 <TableCell>UUID</TableCell>
  81                                 <TableCell>Authorized user</TableCell>
  82                                 <TableCell>Expires at</TableCell>
  83                                 <TableCell>Key type</TableCell>
  84                                 <TableCell>Public Key</TableCell>
  85                                 <TableCell />
  86                             </TableRow>
  87                         </TableHead>
  88                         <TableBody>
  89                             {sshKeys.map((sshKey, index) =>
  90                                 <TableRow key={index} className={classes.tableRow}>
  91                                     <TableCell>{sshKey.name}</TableCell>
  92                                     <TableCell>{sshKey.uuid}</TableCell>
  93                                     <TableCell>{sshKey.authorizedUserUuid}</TableCell>
  94                                     <TableCell>{sshKey.expiresAt || '(none)'}</TableCell>
  95                                     <TableCell>{sshKey.keyType}</TableCell>
  96                                     <TableCell>
  97                                         <Tooltip title="Public Key" disableFocusListener>
  98                                             <IconButton onClick={() => openPublicKeyDialog(sshKey.name, sshKey.publicKey)}>
  99                                                 <KeyIcon className={classes.keyIcon} />
 100                                             </IconButton>
 101                                         </Tooltip>
 102                                     </TableCell>
 103                                     <TableCell>
 104                                         <Tooltip title="More options" disableFocusListener>
 105                                             <IconButton onClick={event => openRowOptions(event, index, sshKey)}>
 106                                                 <MoreOptionsIcon />
 107                                             </IconButton>
 108                                         </Tooltip>
 109                                     </TableCell>
 110                                 </TableRow>)}
 111                         </TableBody>
 112                     </Table>}
 113                 </Grid>
 114             </CardContent>
 115         </Card>
 116     );