17568: Adds relative time information to token expiration time display.

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

diff --git a/src/views-components/token-dialog/token-dialog.tsx b/src/views-components/token-dialog/token-dialog.tsx
index ba3d19425bb927a9ca5e7fc1b1dc4d2b795e53f0..fc01631d87d79d803264580f1b0f6ed3b04314ad 100644 (file)
--- a/src/views-components/token-dialog/token-dialog.tsx
+++ b/src/views-components/token-dialog/token-dialog.tsx
@@ -27,8 +27,10 @@ import {
 import { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
 import { getNewExtraToken } from '~/store/auth/auth-action';
+import { DetailsAttributeComponent } from '~/components/details-attribute/details-attribute';
+import * as moment from 'moment';
 
-type CssRules = 'link' | 'paper' | 'button' | 'actionButton';
+type CssRules = 'link' | 'paper' | 'button' | 'actionButton' | 'codeBlock';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     link: {
@@ -51,7 +53,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         marginTop: theme.spacing.unit * 2,
         marginBottom: theme.spacing.unit * 2,
         marginRight: theme.spacing.unit * 2,
-    }
+    },
+    codeBlock: {
+        fontSize: '0.8125rem',
+    },
 });
 
 type TokenDialogProps = TokenDialogData & WithDialogProps<{}> & WithStyles<CssRules> & DispatchProp;
@@ -90,6 +95,9 @@ unset ARVADOS_API_HOST_INSECURE`
 
     render() {
         const { classes, open, closeDialog, ...data } = this.props;
+        const tokenExpiration = data.tokenExpiration
+            ? `${data.tokenExpiration.toLocaleString()} (${moment(data.tokenExpiration).fromNow()})`
+            : `This token does not have an expiration date`;
 
         return <Dialog
             open={open}
@@ -100,24 +108,32 @@ unset ARVADOS_API_HOST_INSECURE`
             <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='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>
+                    <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>
                 </Typography>
+
+                <DetailsAttributeComponent label='API Host' value={data.apiHost} copyValue={data.apiHost} onCopy={this.onCopy} />
+                <DetailsAttributeComponent label='API Token' value={data.token} copyValue={data.token} onCopy={this.onCopy} />
+                <DetailsAttributeComponent label='Token expiration' value={tokenExpiration} />
+                { this.props.canCreateNewTokens && <Button
+                    onClick={() => this.onGetNewToken()}
+                    color="primary"
+                    size="small"
+                    variant="contained"
+                    className={classes.actionButton}
+                >
+                    GET NEW TOKEN
+                </Button> }
+
                 <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)]} />
-                <Typography component='span'>
-                { data.tokenExpiration
-                    ? `Expires at: ${data.tokenExpiration.toLocaleString()}`
-                    : `This token does not have an expiration date`
-                }
-                </Typography>
-                <CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Token copied to clipboard')}>
+                <DefaultCodeSnippet className={classes.codeBlock} lines={[this.getSnippet(data)]} />
+                <CopyToClipboard text={this.getSnippet(data)} onCopy={() => this.onCopy('Shell code block copied')}>
                     <Button
                         color="primary"
                         size="small"
@@ -127,16 +143,7 @@ unset ARVADOS_API_HOST_INSECURE`
                         COPY TO CLIPBOARD
                     </Button>
                 </CopyToClipboard>
-                { this.props.canCreateNewTokens && <Button
-                    onClick={() => this.onGetNewToken()}
-                    color="primary"
-                    size="small"
-                    variant="contained"
-                    className={classes.actionButton}
-                >
-                    GET NEW TOKEN
-                </Button> }
-                <Typography >
+                <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).