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 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_DIALOG } 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_DIALOG),
  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='body1' 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" rel="noopener noreferrer">SSH access</a></div>
  58                         <div><a href="https://doc.arvados.org/user/tutorials/tutorial-firstscript.html" className={props.classes.link} target="_blank" rel="noopener noreferrer">Writing a Crunch Script</a></div>
  59                     </Typography>
  60                 </DialogContent>
  61                 <DialogActions>
  62                     <Button
  63                         variant='text'
  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 `;