Merge branch 'master' into 13969-advanced-tab
[arvados-workbench2.git] / 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 );