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 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             } = this.props.data;
  65             return <Dialog
  66                 open={open}
  67                 maxWidth="lg"
  68                 onClose={closeDialog}
  69                 onExit={() => this.setState({ value: 0 })} >
  70                 <DialogTitle>Advanced</DialogTitle>
  71                 <Tabs value={value} onChange={this.handleChange} fullWidth>
  72                     <Tab label="API RESPONSE" />
  73                     <Tab label="METADATA" />
  74                     <Tab label="PYTHON EXAMPLE" />
  75                     <Tab label="CLI EXAMPLE" />
  76                     <Tab label="CURL EXAMPLE" />
  77                 </Tabs>
  78                 <DialogContent className={classes.content}>
  79                     {value === 0 && <div>{dialogContentExample(apiResponse, classes)}</div>}
  80                     {value === 1 && <div>
  81                         {metadata !== '' && metadata.items.length > 0 ?
  82                             <MetadataTab items={metadata.items} uuid={uuid} />
  83                             : dialogContentHeader('(No metadata links found)')}
  84                     </div>}
  85                     {value === 2 && dialogContent(pythonHeader, pythonExample, classes)}
  86                     {value === 3 && <div>
  87                         {dialogContent(cliGetHeader, cliGetExample, classes)}
  88                         {dialogContent(cliUpdateHeader, cliUpdateExample, classes)}
  89                     </div>}
  90                     {value === 4 && dialogContent(curlHeader, curlExample, classes)}
  91                 </DialogContent>
  92                 <DialogActions>
  93                     <Button data-cy="close-advanced-dialog" variant='text' color='primary' onClick={closeDialog}>
  94                         Close
  95                     </Button>
  96                 </DialogActions>
  97             </Dialog>;
  98         }
  99     }
 100 );
 101
 102 const dialogContent = (header: string, example: string, classes: any) =>
 103     <div className={classes.spacing}>
 104         {dialogContentHeader(header)}
 105         {dialogContentExample(example, classes)}
 106     </div>;
 107
 108 const dialogContentHeader = (header: string) =>
 109     <DialogContentText>
 110         {header}
 111     </DialogContentText>;
 112
 113 const dialogContentExample = (example: string, classes: any) =>
 114     <DefaultCodeSnippet
 115         apiResponse
 116         className={classes.codeSnippet}
 117         lines={[example]} />;