src/views-components/process-command-dialog/process-command-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, DialogTitle, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   7 import { withDialog } from "~/store/dialog/with-dialog";
   8 import { PROCESS_COMMAND_DIALOG_NAME } from '~/store/processes/process-command-actions';
   9 import { WithDialogProps } from '~/store/dialog/with-dialog';
  10 import { ProcessCommandDialogData } from '~/store/processes/process-command-actions';
  11 import { DefaultCodeSnippet } from "~/components/default-code-snippet/default-code-snippet";
  12 import { compose } from 'redux';
  13
  14 type CssRules = 'codeSnippet';
  15
  16 const styles: StyleRulesCallback<CssRules> = theme => ({
  17     codeSnippet: {
  18         marginLeft: theme.spacing.unit * 3,
  19         marginRight: theme.spacing.unit * 3,
  20     }
  21 });
  22
  23 export const ProcessCommandDialog = compose(
  24     withDialog(PROCESS_COMMAND_DIALOG_NAME),
  25     withStyles(styles),
  26 )(
  27     (props: WithDialogProps<ProcessCommandDialogData> & WithStyles<CssRules>) =>
  28         <Dialog
  29             open={props.open}
  30             maxWidth="md"
  31             onClose={props.closeDialog}
  32             style={{ alignSelf: 'stretch' }}>
  33             <DialogTitle>{`Command - ${props.data.processName}`}</DialogTitle>
  34             <DefaultCodeSnippet
  35                 className={props.classes.codeSnippet}
  36                 lines={[props.data.command]} />
  37             <DialogActions>
  38                 <Button
  39                     variant='flat'
  40                     color='primary'
  41                     onClick={props.closeDialog}>
  42                     Close
  43                 </Button>
  44             </DialogActions>
  45         </Dialog>
  46 );