refs #14161 Merge branch 'origin/14161-inputs-focus-enter-action'

[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 fca9f05982b6ed559875a7bfeb252e8d4b8f1e5c..ba6c3258f428a3fe882fa47463b623e798f25451 100644 (file)
--- a/src/views-components/current-token-dialog/current-token-dialog.tsx
+++ b/src/views-components/current-token-dialog/current-token-dialog.tsx
@@ -5,6 +5,13 @@
 import * as React from 'react';
 import { Dialog, DialogActions, DialogTitle, DialogContent, WithStyles, withStyles, StyleRulesCallback, Button, Typography, Paper } from '@material-ui/core';
 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 { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
 
 type CssRules = 'link' | 'paper' | 'button';
 
@@ -26,65 +33,51 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-interface CurrentTokenDataProps {
-    currentToken?: string;
-    open: boolean;
-}
-
-interface CurrentTokenActionProps {
-    handleClose: () => void;
-}
-
-type CurrentTokenProps = CurrentTokenDataProps & CurrentTokenActionProps & WithStyles<CssRules>;
-
-export const CurrentTokenDialog = withStyles(styles)(
-    class extends React.Component<CurrentTokenProps> {
+type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules>;
 
-        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.
+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}
+            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.
                             <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 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>
-
-                        <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={[getSnippet(data)]} />
+                <Typography variant='body1'>
+                    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>;
     }
+}
 );
+
+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`;