16659: Added copy to clipboard button for the api token

[arvados-workbench2.git] / src / views-components / current-token-dialog / current-token-dialog.tsx

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 d2acccb78d42be530ed5a86d8a9dd2d07123a280..467fc7c8410344fbe7bd55755ad15367f7c11d52 100644 (file)
--- a/src/views-components/current-token-dialog/current-token-dialog.tsx
+++ b/src/views-components/current-token-dialog/current-token-dialog.tsx
@@ -3,16 +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 { 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: {
@@ -29,16 +30,31 @@ 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
@@ -48,7 +64,7 @@ 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
@@ -57,11 +73,21 @@ export const CurrentTokenDialog = compose(
                                 </a>
                     </Typography>
                 </Typography>
-                <Typography variant='body1' paragraph={true}>
+                <Typography 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>
-                <DefaultCodeSnippet lines={[getSnippet(data)]} />
-                <Typography variant='body1'>
+                <DefaultCodeSnippet lines={[this.getSnippet(data)]} />
+                <CopyToClipboard text={data.currentToken} onCopy={() => this.onCopy('Token copied to clipboard')}>
+                    <Button
+                        color="primary"
+                        size="small"
+                        variant="contained"
+                        className={classes.copyButton}
+                    >
+                        Copy Api Token
+                    </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).
@@ -73,10 +99,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)));
+