15088: Adds routing for link-account panel
[arvados.git] / 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>, 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  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  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, sshKey)}>
106                                                 <MoreOptionsIcon />
107                                             </IconButton>
108                                         </Tooltip>
109                                     </TableCell>
110                                 </TableRow>)}
111                         </TableBody>
112                     </Table>}
113                 </Grid>
114             </CardContent>
115         </Card>
116     );