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, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, Tooltip, IconButton, CardHeader } 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 import * as CopyToClipboard from "react-copy-to-clipboard";
  14 import { CopyIcon } from '~/components/icon/icon';
  15
  16 type CssRules = 'codeSnippet' | 'copyToClipboard';
  17
  18 const styles: StyleRulesCallback<CssRules> = theme => ({
  19     codeSnippet: {
  20         marginLeft: theme.spacing.unit * 3,
  21         marginRight: theme.spacing.unit * 3,
  22     },
  23     copyToClipboard: {
  24         marginRight: theme.spacing.unit,
  25     }
  26 });
  27
  28 export const ProcessCommandDialog = compose(
  29     withDialog(PROCESS_COMMAND_DIALOG_NAME),
  30     withStyles(styles),
  31 )(
  32     (props: WithDialogProps<ProcessCommandDialogData> & WithStyles<CssRules>) =>
  33         <Dialog
  34             open={props.open}
  35             maxWidth="md"
  36             onClose={props.closeDialog}
  37             style={{ alignSelf: 'stretch' }}>
  38             <CardHeader
  39                 title={`Command - ${props.data.processName}`}
  40                 action={
  41                     <Tooltip title="Copy to clipboard">
  42                         <CopyToClipboard text={props.data.command}>
  43                             <IconButton className={props.classes.copyToClipboard}>
  44                                 <CopyIcon />
  45                             </IconButton>
  46                         </CopyToClipboard>
  47                     </Tooltip>
  48                 } />
  49             <DefaultCodeSnippet
  50                 className={props.classes.codeSnippet}
  51                 lines={[props.data.command]} />
  52             <DialogActions>
  53                 <Button
  54                     variant='text'
  55                     color='primary'
  56                     onClick={props.closeDialog}>
  57                     Close
  58                 </Button>
  59             </DialogActions>
  60         </Dialog>
  61 );