+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Button, Typography } from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { SshKey } from '~/models/ssh-key';
+
+
+type CssRules = 'root' | 'link';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ width: '100%'
+ },
+ link: {
+ color: theme.palette.primary.main,
+ textDecoration: 'none',
+ margin: '0px 4px'
+ }
+});
+
+export interface SshKeyPanelRootActionProps {
+ onClick: () => void;
+}
+
+export interface SshKeyPanelRootDataProps {
+ sshKeys?: SshKey[];
+}
+
+type SshKeyPanelRootProps = SshKeyPanelRootDataProps & SshKeyPanelRootActionProps & WithStyles<CssRules>;
+
+export const SshKeyPanelRoot = withStyles(styles)(
+ ({ classes, sshKeys, onClick }: SshKeyPanelRootProps) =>
+ <Card className={classes.root}>
+ <CardContent>
+ <Typography variant='body1' paragraph={true}>
+ You have not yet set up an SSH public key for use with Arvados.
+ <a href='https://doc.arvados.org/user/getting_started/ssh-access-unix.html' target='blank' className={classes.link}>
+ Learn more.
+ </a>
+ </Typography>
+ <Typography variant='body1' paragraph={true}>
+ When you have an SSH key you would like to use, add it using button below.
+ </Typography>
+ <Button
+ onClick={onClick}
+ color="primary"
+ variant="contained">
+ Add New Ssh Key
+ </Button>
+ </CardContent>
+ </Card>
+ );
\ No newline at end of file