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' | 'spacing';
  14
  15 const styles: StyleRulesCallback<CssRules> = theme => ({
  16     content: {
  17         paddingTop: theme.spacing.unit * 3,
  18         minHeight: '400px',
  19         minWidth: '1232px'
  20     },
  21     codeSnippet: {
  22         borderRadius: theme.spacing.unit * 0.5,
  23         border: '1px solid',
  24         borderColor: theme.palette.grey["400"],
  25         maxHeight: '400px'
  26     },
  27     spacing: {
  28         paddingBottom: theme.spacing.unit * 2
  29     },
  30 });
  31
  32 export const AdvancedTabDialog = compose(
  33     withDialog(ADVANCED_TAB_DIALOG),
  34     withStyles(styles),
  35 )(
  36     class extends React.Component<WithDialogProps<any> & WithStyles<CssRules>>{
  37         state = {
  38             value: 0,
  39         };
  40
  41         componentDidMount() {
  42             this.setState({ value: 0 });
  43         }
  44
  45         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
  46             this.setState({ value });
  47         }
  48         render() {
  49             const { classes, open, closeDialog } = this.props;
  50             const { value } = this.state;
  51             const {
  52                 apiResponse,
  53                 pythonHeader,
  54                 pythonExample,
  55                 cliGetHeader,
  56                 cliGetExample,
  57                 cliUpdateHeader,
  58                 cliUpdateExample,
  59                 curlHeader,
  60                 curlExample
  61             } = this.props.data;
  62             return <Dialog
  63                 open={open}
  64                 maxWidth="lg"
  65                 onClose={closeDialog}
  66                 onExit={() => this.setState({ value: 0 })} >
  67                 <DialogTitle>Advanced</DialogTitle>
  68                 <Tabs value={value} onChange={this.handleChange} fullWidth>
  69                     <Tab label="API RESPONSE" />
  70                     <Tab label="METADATA" />
  71                     <Tab label="PYTHON EXAMPLE" />
  72                     <Tab label="CLI EXAMPLE" />
  73                     <Tab label="CURL EXAMPLE" />
  74                 </Tabs>
  75                 <DialogContent className={classes.content}>
  76                     {value === 0 && <div>{dialogContentExample(apiResponse, classes)}</div>}
  77                     {value === 1 && <div>{dialogContentHeader('(No metadata links found)')}</div>}
  78                     {value === 2 && dialogContent(pythonHeader, pythonExample, classes)}
  79                     {value === 3 && <div>
  80                         {dialogContent(cliGetHeader, cliGetExample, classes)}
  81                         {dialogContent(cliUpdateHeader, cliUpdateExample, classes)}
  82                     </div>}
  83                     {value === 4 && dialogContent(curlHeader, curlExample, classes)}
  84                 </DialogContent>
  85                 <DialogActions>
  86                     <Button variant='flat' color='primary' onClick={closeDialog}>
  87                         Close
  88                     </Button>
  89                 </DialogActions>
  90             </Dialog>;
  91         }
  92     }
  93 );
  94
  95 const dialogContent = (header: string, example: string, classes: any) =>
  96     <div className={classes.spacing}>
  97         {dialogContentHeader(header)}
  98         {dialogContentExample(example, classes)}
  99     </div>;
 100
 101 const dialogContentHeader = (header: string) =>
 102     <DialogContentText>
 103         {header}
 104     </DialogContentText>;
 105
 106 const dialogContentExample = (example: string, classes: any) =>
 107     <DefaultCodeSnippet
 108         className={classes.codeSnippet}
 109         lines={[example]} />;