X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/d171dc7d61d9ab3d952bb5038b2d47dbeaaa8ba2..f0fb75714e54f5191a7026eedbec757ee22a682c:/src/views-components/current-token-dialog/current-token-dialog.tsx?ds=sidebyside

diff --git a/src/views-components/current-token-dialog/current-token-dialog.tsx b/src/views-components/current-token-dialog/current-token-dialog.tsx
index ba6c3258..9cb08f8b 100644
--- a/src/views-components/current-token-dialog/current-token-dialog.tsx
+++ b/src/views-components/current-token-dialog/current-token-dialog.tsx
@@ -3,17 +3,17 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Dialog, DialogActions, DialogTitle, DialogContent, WithStyles, withStyles, StyleRulesCallback, Button, Typography, Paper } from '@material-ui/core';
+import { Dialog, DialogActions, DialogTitle, DialogContent, WithStyles, withStyles, StyleRulesCallback, Button, Typography } from '@material-ui/core';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { withDialog } from '~/store/dialog/with-dialog';
 import { WithDialogProps } from '~/store/dialog/with-dialog';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { CurrentTokenDialogData, getCurrentTokenDialogData } from '~/store/current-token-dialog/current-token-dialog-actions';
-import { RootState } from '~/store/store';
+import { connect, DispatchProp } from 'react-redux';
+import { CurrentTokenDialogData, getCurrentTokenDialogData, CURRENT_TOKEN_DIALOG_NAME } from '~/store/current-token-dialog/current-token-dialog-actions';
 import { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
+import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
 
-type CssRules = 'link' | 'paper' | 'button';
+type CssRules = 'link' | 'paper' | 'button' | 'copyButton';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     link: {
@@ -30,18 +30,34 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     button: {
         fontSize: '0.8125rem',
         fontWeight: 600
+    },
+    copyButton: {
+        boxShadow: 'none',
+        marginTop: theme.spacing.unit * 2,
+        marginBottom: theme.spacing.unit * 2,
     }
 });
 
-type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules>;
+type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
+
+export class CurrentTokenDialogComponent extends React.Component<CurrentTokenProps> {
+    onCopy = (message: string) => {
+        this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
+            message,
+            hideDuration: 2000,
+            kind: SnackbarKind.SUCCESS
+        }));
+    }
+
+    getSnippet = ({ apiHost, currentToken }: CurrentTokenDialogData) =>
+        `HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
+export ARVADOS_API_TOKEN=${currentToken}
+export ARVADOS_API_HOST=${apiHost}
+unset ARVADOS_API_HOST_INSECURE`
 
-export const CurrentTokenDialog = compose(
-    withStyles(styles),
-    connect(getCurrentTokenDialogData),
-    withDialog('currentTokenDialog')
-)(class extends React.Component<CurrentTokenProps> {
     render() {
         const { classes, open, closeDialog, ...data } = this.props;
+
         return <Dialog
             open={open}
             onClose={closeDialog}
@@ -49,24 +65,34 @@ export const CurrentTokenDialog = compose(
             maxWidth='md'>
             <DialogTitle>Current Token</DialogTitle>
             <DialogContent>
-                <Typography variant='body1' paragraph={true}>
+                <Typography paragraph={true}>
                     The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
-                            <Typography component='p'>
-                        For more information see
-                                <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
-                            Getting an API token.
-                                </a>
-                    </Typography>
-                </Typography>
-                <Typography variant='body1' paragraph={true}>
-                    Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your klingenc account.
+                        <Typography component='span'>
+                            For more information see
+                            <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
+                                Getting an API token.
+                            </a>
                         </Typography>
-                <DefaultCodeSnippet lines={[getSnippet(data)]} />
-                <Typography variant='body1'>
+                </Typography>
+                <Typography paragraph={true}>
+                    Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
+                </Typography>
+                <DefaultCodeSnippet lines={[this.getSnippet(data)]} />
+                <CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Token copied to clipboard')}>
+                    <Button
+                        color="primary"
+                        size="small"
+                        variant="contained"
+                        className={classes.copyButton}
+                    >
+                        COPY TO CLIPBOARD
+                    </Button>
+                </CopyToClipboard>
+                <Typography >
                     Arvados
                             <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
                     do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
-                        </Typography>
+                </Typography>
             </DialogContent>
             <DialogActions>
                 <Button onClick={closeDialog} className={classes.button} color="primary">CLOSE</Button>
@@ -74,10 +100,9 @@ export const CurrentTokenDialog = compose(
         </Dialog>;
     }
 }
-);
 
-const getSnippet = ({ apiHost, currentToken }: CurrentTokenDialogData) =>
-`HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
-export ARVADOS_API_TOKEN=${currentToken}
-export ARVADOS_API_HOST=${apiHost}
-unset ARVADOS_API_HOST_INSECURE`;
+export const CurrentTokenDialog =
+    withStyles(styles)(
+        connect(getCurrentTokenDialogData)(
+            withDialog(CURRENT_TOKEN_DIALOG_NAME)(CurrentTokenDialogComponent)));
+