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