services/workbench2/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 "@mui/material";
   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 { CustomStyleRulesCallback } from 'common/custom-theme';
  12 import { WithStyles } from '@mui/styles';
  13 import withStyles from '@mui/styles/withStyles';
  14 import { ArvadosTheme } from 'common/custom-theme';
  15 import { compose } from "redux";
  16
  17 type CssRules = 'codeSnippet' | 'link' | 'spacing';
  18
  19 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  20     codeSnippet: {
  21         borderRadius: theme.spacing(0.5),
  22         border: '1px solid',
  23         borderColor: theme.palette.grey["400"],
  24     },
  25     link: {
  26         textDecoration: 'none',
  27         color: theme.palette.primary.main,
  28         "&:hover": {
  29             color: theme.palette.primary.dark,
  30             transition: 'all 0.5s ease'
  31         }
  32     },
  33     spacing: {
  34         paddingTop: theme.spacing(2)
  35     }
  36 });
  37
  38 interface RepositoriesSampleGitDataProps {
  39     uuidPrefix: string;
  40 }
  41
  42 type RepositoriesSampleGitProps = RepositoriesSampleGitDataProps & WithStyles<CssRules>;
  43
  44 export const RepositoriesSampleGitDialog = compose(
  45     withDialog(REPOSITORIES_SAMPLE_GIT_DIALOG),
  46     withStyles(styles))(
  47         (props: WithDialogProps<RepositoriesSampleGitProps> & RepositoriesSampleGitProps) =>
  48             <Dialog open={props.open}
  49                 onClose={props.closeDialog}
  50                 fullWidth
  51                 maxWidth='sm'>
  52                 <DialogTitle>Sample git quick start:</DialogTitle>
  53                 <DialogContent>
  54                     <DefaultCodeSnippet
  55                         className={props.classes.codeSnippet}
  56                         lines={[snippetText(props.data.uuidPrefix)]} />
  57                     <Typography variant='body1' className={props.classes.spacing}>
  58                         See also:
  59                         <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>
  60                         <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>
  61                     </Typography>
  62                 </DialogContent>
  63                 <DialogActions>
  64                     <Button
  65                         variant='text'
  66                         color='primary'
  67                         onClick={props.closeDialog}>
  68                         Close
  69                     </Button>
  70                 </DialogActions>
  71             </Dialog>
  72     );
  73
  74 const snippetText = (uuidPrefix: string) => `git clone git@git.${uuidPrefix}.arvadosapi.com:arvados.git
  75 cd arvados
  76 # edit files
  77 git add the/files/you/changed
  78 git commit
  79 git push
  80 `;