Enable useNextVariants and replace depracated typography variants

[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 fe5f850c77fe75c757977bea6cba7d76453dd833..bc0071aff9397055706648aa582ffc7b24e991f3 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,8 +3,13 @@
 // 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 { ArvadosTheme } from '../../common/custom-theme';
+import { Dialog, DialogActions, DialogTitle, DialogContent, WithStyles, withStyles, StyleRulesCallback, Button, Typography } 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 { connect } 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';
 
 type CssRules = 'link' | 'paper' | 'button';
 
@@ -26,65 +31,51 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-interface CurrentTokenDataProps {
-    currentToken?: string; 
-    open: boolean;
-}
+type CurrentTokenProps = CurrentTokenDialogData & WithDialogProps<{}> & WithStyles<CssRules>;
 
-interface CurrentTokenActionProps {
-    handleClose: () => void;
-}
-
-type CurrentTokenProps = CurrentTokenDataProps & CurrentTokenActionProps & WithStyles<CssRules>;
-
-export const CurrentTokenDialog = withStyles(styles)(    
+export const CurrentTokenDialog =
+    withStyles(styles)(
+    connect(getCurrentTokenDialogData)(
+    withDialog(CURRENT_TOKEN_DIALOG_NAME)(
     class extends React.Component<CurrentTokenProps> {
-        
         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. 
-                            <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.
+            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
+                                    <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>
+                                Getting an API token.
+                                    </a>
                         </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  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'>
-                                unset ARVADOS_API_HOST_INSECURE
+                    <DefaultCodeSnippet lines={[getSnippet(data)]} />
+                    <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>
-                        </Paper>
-                        <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).
-                        </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>;
         }
     }
-);
\ No newline at end of file
+)));
+
+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`;