X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/37e43f4e19ad2bd27b15fe7f0d857218dad39055..2ee1db29750704c6cd381483c44c98c6cff656e0:/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 fca9f059..467fc7c8 100644
--- a/src/views-components/current-token-dialog/current-token-dialog.tsx
+++ b/src/views-components/current-token-dialog/current-token-dialog.tsx
@@ -3,10 +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 { 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: {
@@ -23,68 +30,78 @@ 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,
     }
 });
 
-interface CurrentTokenDataProps {
-    currentToken?: string;
-    open: boolean;
-}
-
-interface CurrentTokenActionProps {
-    handleClose: () => void;
-}
+type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
 
-type CurrentTokenProps = CurrentTokenDataProps & CurrentTokenActionProps & WithStyles<CssRules>;
+export class CurrentTokenDialogComponent extends React.Component<CurrentTokenProps> {
+    onCopy = (message: string) => {
+        this.props.dispatch(snackbarActions.OPEN_SNACKBAR({
+            message,
+            hideDuration: 2000,
+            kind: SnackbarKind.SUCCESS
+        }));
+    }
 
-export const CurrentTokenDialog = withStyles(styles)(
-    class extends React.Component<CurrentTokenProps> {
+    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`;
 
-        render() {
-            const { classes, open, handleClose, currentToken } = this.props;
-            return (
-                <Dialog open={open} onClose={handleClose} fullWidth={true} maxWidth='md'>
-                    <DialogTitle>Current Token</DialogTitle>
-                    <DialogContent>
-                        <Typography variant='body1' paragraph={true}>
-                            The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
+    render() {
+        const { classes, open, closeDialog, ...data } = this.props;
+        return <Dialog
+            open={open}
+            onClose={closeDialog}
+            fullWidth={true}
+            maxWidth='md'>
+            <DialogTitle>Current Token</DialogTitle>
+            <DialogContent>
+                <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
+                        For more information see
                                 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
-                                    Getting an API token.
+                            Getting an API token.
                                 </a>
-                            </Typography>
+                    </Typography>
+                </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 klingenc account.
                         </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>
-
-                        <Paper className={classes.paper} elevation={0}>
-                            <Typography variant='body1'>
-                                HISTIGNORE=$HISTIGNORE:'export ARVADOS_API_TOKEN=*'
-                            </Typography>
-                            <Typography variant='body1'>
-                                export ARVADOS_API_TOKEN={currentToken}
-                            </Typography>
-                            <Typography variant='body1'>
-                                export ARVADOS_API_HOST=api.ardev.roche.com
-                            </Typography>
-                            <Typography variant='body1'>
-                                unset ARVADOS_API_HOST_INSECURE
-                            </Typography>
-                        </Paper>
-                        <Typography variant='body1'>
-                            Arvados
+                <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).
+                    do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
                         </Typography>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={handleClose} className={classes.button} color="primary">CLOSE</Button>
-                    </DialogActions>
-                </Dialog>
-            );
-        }
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={closeDialog} className={classes.button} color="primary">CLOSE</Button>
+            </DialogActions>
+        </Dialog>;
     }
-);
+}
+
+export const CurrentTokenDialog =
+    withStyles(styles)(
+        connect(getCurrentTokenDialogData)(
+            withDialog(CURRENT_TOKEN_DIALOG_NAME)(CurrentTokenDialogComponent)));
+