advanced-tab-and-sample-git-start-for-repositories
[arvados-workbench2.git] / src / views-components / repositories-sample-git-dialog / repositories-sample-git-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 { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography } from "@material-ui/core";
7 import { WithDialogProps } from "~/store/dialog/with-dialog";
8 import { withDialog } from '~/store/dialog/with-dialog';
9 import { REPOSITORIES_SAMPLE_GIT_NAME } from "~/store/repositories/repositories-actions";
10 import { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
11 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
12 import { ArvadosTheme } from '~/common/custom-theme';
13 import { compose } from "redux";
14
15 type CssRules = 'codeSnippet' | 'link' | 'spacing';
16
17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
18     codeSnippet: {
19         borderRadius: theme.spacing.unit * 0.5,
20         border: '1px solid',
21         borderColor: theme.palette.grey["400"],
22     },
23     link: {
24         textDecoration: 'none',
25         color: theme.palette.primary.main,
26         "&:hover": {
27             color: theme.palette.primary.dark,
28             transition: 'all 0.5s ease'
29         }
30     },
31     spacing: {
32         paddingTop: theme.spacing.unit * 2
33     }
34 });
35
36 interface RepositoriesSampleGitDataProps {
37     uuidPrefix: string;
38 }
39
40 type RepositoriesSampleGitProps = RepositoriesSampleGitDataProps & WithStyles<CssRules>;
41
42 export const RepositoriesSampleGitDialog = compose(
43     withDialog(REPOSITORIES_SAMPLE_GIT_NAME),
44     withStyles(styles))(
45         (props: WithDialogProps<RepositoriesSampleGitProps> & RepositoriesSampleGitProps) =>
46             <Dialog open={props.open}
47                 onClose={props.closeDialog}
48                 fullWidth
49                 maxWidth='sm'>
50                 <DialogTitle>Sample git quick start:</DialogTitle>
51                 <DialogContent>
52                     <DefaultCodeSnippet
53                         className={props.classes.codeSnippet}
54                         lines={[snippetText(props.data.uuidPrefix)]} />
55                     <Typography variant="body2" className={props.classes.spacing}>
56                         See also:
57                         <div><a href="https://doc.arvados.org/user/getting_started/ssh-access-unix.html" className={props.classes.link} target="_blank">SSH access</a></div>
58                         <div><a href="https://doc.arvados.org/user/tutorials/tutorial-firstscript.html" className={props.classes.link} target="_blank">Writing a Crunch Script</a></div>
59                     </Typography>
60                 </DialogContent>
61                 <DialogActions>
62                     <Button
63                         variant='flat'
64                         color='primary'
65                         onClick={props.closeDialog}>
66                         Close
67                 </Button>
68                 </DialogActions>
69             </Dialog>
70     );
71
72 const snippetText = (uuidPrefix: string) => `git clone git@git.${uuidPrefix}.arvadosapi.com:arvados.git
73 cd arvados
74 # edit files
75 git add the/files/you/changed
76 git commit
77 git push
78 `;