1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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";
13 type CssRules = 'content' | 'codeSnippet' | 'spacing';
15 const styles: StyleRulesCallback<CssRules> = theme => ({
17 paddingTop: theme.spacing.unit * 3,
22 borderRadius: theme.spacing.unit * 0.5,
24 borderColor: theme.palette.grey["400"],
28 paddingBottom: theme.spacing.unit * 2
32 export const AdvancedTabDialog = compose(
33 withDialog(ADVANCED_TAB_DIALOG),
36 class extends React.Component<WithDialogProps<any> & WithStyles<CssRules>>{
42 this.setState({ value: 0 });
45 handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
46 this.setState({ value });
49 const { classes, open, closeDialog } = this.props;
50 const { value } = this.state;
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" />
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)}
80 {dialogContent(cliGetHeader, cliGetExample, classes)}
81 {dialogContent(cliUpdateHeader, cliUpdateExample, classes)}
83 {value === 4 && dialogContent(curlHeader, curlExample, classes)}
86 <Button variant='flat' color='primary' onClick={closeDialog}>
95 const dialogContent = (header: string, example: string, classes: any) =>
96 <div className={classes.spacing}>
97 {dialogContentHeader(header)}
98 {dialogContentExample(example, classes)}
101 const dialogContentHeader = (header: string) =>
104 </DialogContentText>;
106 const dialogContentExample = (example: string, classes: any) =>
108 className={classes.codeSnippet}
109 lines={[example]} />;