src/views/repositories-panel/repositories-panel.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 { connect } from 'react-redux';
   7 import { Grid, Typography, Button, Card, CardContent, TableBody, TableCell, TableHead, TableRow, Table, Tooltip, IconButton } from '@material-ui/core';
   8 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   9 import { ArvadosTheme } from '~/common/custom-theme';
  10 import { Link } from 'react-router-dom';
  11 import { Dispatch, compose } from 'redux';
  12 import { RootState } from '~/store/store';
  13 import { HelpIcon, AddIcon, MoreOptionsIcon } from '~/components/icon/icon';
  14 import { loadRepositoriesData } from '~/store/repositories/repositories-actions';
  15 import { RepositoriesResource } from '~/models/repositories';
  16 import { openRepositoryContextMenu } from '~/store/context-menu/context-menu-actions';
  17
  18
  19 type CssRules = 'link' | 'button' | 'icon' | 'iconRow' | 'moreOptionsButton' | 'moreOptions' | 'cloneUrls';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     link: {
  23         textDecoration: 'none',
  24         color: theme.palette.primary.main,
  25         "&:hover": {
  26             color: theme.palette.primary.dark,
  27             transition: 'all 0.5s ease'
  28         }
  29     },
  30     button: {
  31         textAlign: 'right',
  32         alignSelf: 'center'
  33     },
  34     icon: {
  35         cursor: 'pointer',
  36         color: theme.palette.grey["500"],
  37         "&:hover": {
  38             color: theme.palette.common.black,
  39             transition: 'all 0.5s ease'
  40         }
  41     },
  42     iconRow: {
  43         paddingTop: theme.spacing.unit * 2,
  44         textAlign: 'right'
  45     },
  46     moreOptionsButton: {
  47         padding: 0
  48     },
  49     moreOptions: {
  50         textAlign: 'right',
  51         '&:last-child': {
  52             paddingRight: 0
  53         }
  54     },
  55     cloneUrls: {
  56         whiteSpace: 'pre-wrap'
  57     }
  58 });
  59
  60 const mapStateToProps = (state: RootState) => {
  61     return {
  62         repositories: state.repositories.items
  63     };
  64 };
  65
  66 const mapDispatchToProps = (dispatch: Dispatch): Pick<RepositoriesActionProps, 'onOptionsMenuOpen' | 'loadRepositories'> => ({
  67     loadRepositories: () => dispatch<any>(loadRepositoriesData()),
  68     onOptionsMenuOpen: (event) => {
  69         dispatch<any>(openRepositoryContextMenu(event));
  70     },
  71 });
  72
  73 interface RepositoriesActionProps {
  74     loadRepositories: () => void;
  75     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
  76 }
  77
  78 interface RepositoriesDataProps {
  79     repositories: RepositoriesResource[];
  80 }
  81
  82
  83 type RepositoriesProps = RepositoriesDataProps & RepositoriesActionProps & WithStyles<CssRules>;
  84
  85 export const RepositoriesPanel = compose(
  86     withStyles(styles),
  87     connect(mapStateToProps, mapDispatchToProps))(
  88         class extends React.Component<RepositoriesProps> {
  89             componentDidMount() {
  90                 this.props.loadRepositories();
  91             }
  92             render() {
  93                 const { classes, repositories, onOptionsMenuOpen } = this.props;
  94                 console.log(repositories);
  95                 return (
  96                     <Card>
  97                         <CardContent>
  98                             <Grid container direction="row">
  99                                 <Grid item xs={8}>
 100                                     <Typography variant="body2">
 101                                         When you are using an Arvados virtual machine, you should clone the https:// URLs. This will authenticate automatically using your API token. <br />
 102                                         In order to clone git repositories using SSH, <Link to='' className={classes.link}>add an SSH key to your account</Link> and clone the git@ URLs.
 103                                     </Typography>
 104                                 </Grid>
 105                                 <Grid item xs={4} className={classes.button}>
 106                                     <Button variant="contained" color="primary">
 107                                         <AddIcon /> NEW REPOSITORY
 108                                     </Button>
 109                                 </Grid>
 110                             </Grid>
 111                             <Grid item xs={12}>
 112                                 <div className={classes.iconRow}>
 113                                     <Tooltip title="Sample git quick start">
 114                                         <IconButton className={classes.moreOptionsButton}>
 115                                             <HelpIcon className={classes.icon} />
 116                                         </IconButton>
 117                                     </Tooltip>
 118                                 </div>
 119                             </Grid>
 120                             <Grid item xs={12}>
 121                                 {repositories && <Table>
 122                                     <TableHead>
 123                                         <TableRow>
 124                                             <TableCell>Name</TableCell>
 125                                             <TableCell>URL</TableCell>
 126                                             <TableCell />
 127                                         </TableRow>
 128                                     </TableHead>
 129                                     <TableBody>
 130                                         {repositories.map((repository, index) =>
 131                                             <TableRow key={index}>
 132                                                 <TableCell>{repository.name}</TableCell>
 133                                                 <TableCell className={classes.cloneUrls}>{repository.cloneUrls.join("\n")}</TableCell>
 134                                                 <TableCell className={classes.moreOptions}>
 135                                                     <Tooltip title="More options" disableFocusListener>
 136                                                         <IconButton onClick={onOptionsMenuOpen} className={classes.moreOptionsButton}>
 137                                                             <MoreOptionsIcon />
 138                                                         </IconButton>
 139                                                     </Tooltip>
 140                                                 </TableCell>
 141                                             </TableRow>)}
 142                                     </TableBody>
 143                                 </Table>}
 144                             </Grid>
 145                         </CardContent>
 146                     </Card>
 147                 );
 148             }
 149         }
 150     );