src/views-components/advanced-tab-dialog/advanced-tab-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, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, DialogTitle, DialogContent, Tabs, Tab, DialogContentText } from '@material-ui/core';
   7 import { WithDialogProps } from '~/store/dialog/with-dialog';
   8 import { withDialog } from "~/store/dialog/with-dialog";
   9 import { compose } from 'redux';
  10 import { ADVANCED_TAB_DIALOG } from "~/store/advanced-tab/advanced-tab";
  11 import { DefaultCodeSnippet } from "~/components/default-code-snippet/default-code-snippet";
  12
  13 type CssRules = 'content' | 'codeSnippet' | 'secondContentText';
  14
  15 const styles: StyleRulesCallback<CssRules> = theme => ({
  16     content: {
  17         paddingTop: theme.spacing.unit * 3
  18     },
  19     codeSnippet: {
  20         borderRadius: theme.spacing.unit * 0.5,
  21         border: '1px solid',
  22         borderColor: theme.palette.grey["400"]
  23     },
  24     secondContentText: {
  25         paddingTop: theme.spacing.unit * 2
  26     }
  27 });
  28
  29 export const AdvancedTabDialog = compose(
  30     withDialog(ADVANCED_TAB_DIALOG),
  31     withStyles(styles),
  32 )(
  33     class extends React.Component<WithDialogProps<any> & WithStyles<CssRules>>{
  34         state = {
  35             value: 0,
  36         };
  37
  38         componentDidMount() {
  39             this.setState({ value: 0 });
  40         }
  41
  42         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  43             this.setState({ value });
  44         }
  45         render() {
  46             const { classes, open, closeDialog } = this.props;
  47             const { value } = this.state;
  48             const {
  49                 pythonHeader,
  50                 pythonExample,
  51                 CLIGetHeader,
  52                 CLIGetExample,
  53                 CLIUpdateHeader,
  54                 CLIUpdateExample,
  55                 curlHeader,
  56                 curlExample
  57             } = this.props.data;
  58             return <Dialog
  59                 open={open}
  60                 maxWidth="md"
  61                 onClose={closeDialog}
  62                 onExit={() => this.setState({ value: 0 })} >
  63                 <DialogTitle>Advanced</DialogTitle>
  64                 <Tabs value={value} onChange={this.handleChange}>
  65                     <Tab label="API RESPONSE" />
  66                     <Tab label="METADATA" />
  67                     <Tab label="PYTHON EXAMPLE" />
  68                     <Tab label="CLI EXAMPLE" />
  69                     <Tab label="CURL EXAMPLE" />
  70                 </Tabs>
  71                 <DialogContent className={classes.content}>
  72                     {value === 0 && <div>
  73                         API CONTENT
  74                     </div>}
  75                     {value === 1 && <div>
  76                         METADATA CONTENT
  77                     </div>}
  78                     {value === 2 && <div>
  79                         <DialogContentText>{pythonHeader}</DialogContentText>
  80                         <DefaultCodeSnippet
  81                             className={classes.codeSnippet}
  82                             lines={[pythonExample]} />
  83                     </div>}
  84                     {value === 3 && <div>
  85                         <DialogContentText>{CLIGetHeader}</DialogContentText>
  86                         <DefaultCodeSnippet
  87                             className={classes.codeSnippet}
  88                             lines={[CLIGetExample]} />
  89                         <DialogContentText className={classes.secondContentText}>{CLIUpdateHeader}</DialogContentText>
  90                         <DefaultCodeSnippet
  91                             className={classes.codeSnippet}
  92                             lines={[CLIUpdateExample]} />
  93                     </div>}
  94                     {value === 4 && <div>
  95                         <DialogContentText>{curlHeader}</DialogContentText>
  96                         <DefaultCodeSnippet
  97                             className={classes.codeSnippet}
  98                             lines={[curlExample]} />
  99                     </div>}
 100                 </DialogContent>
 101                 <DialogActions>
 102                     <Button variant='flat' color='primary' onClick={closeDialog}>
 103                         Close
 104                     </Button>
 105                 </DialogActions>
 106             </Dialog>;
 107         }
 108     }
 109 );