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 2a77ea34b68ba3c52a2293b472a9968e3c074e68..fc01631d87d79d803264580f1b0f6ed3b04314ad 100644 (file)
--- a/src/views-components/token-dialog/token-dialog.tsx
+++ b/src/views-components/token-dialog/token-dialog.tsx
@@ -27,7 +27,8 @@ 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 { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { DetailsAttributeComponent } from '~/components/details-attribute/details-attribute';
+import * as moment from 'moment';
 
 type CssRules = 'link' | 'paper' | 'button' | 'actionButton' | 'codeBlock';
 
@@ -95,7 +96,7 @@ unset ARVADOS_API_HOST_INSECURE`
     render() {
         const { classes, open, closeDialog, ...data } = this.props;
         const tokenExpiration = data.tokenExpiration
-            ? data.tokenExpiration.toLocaleString()
+            ? `${data.tokenExpiration.toLocaleString()} (${moment(data.tokenExpiration).fromNow()})`
             : `This token does not have an expiration date`;
 
         return <Dialog
@@ -114,20 +115,20 @@ unset ARVADOS_API_HOST_INSECURE`
                         </a>
                     </Typography>
                 </Typography>
-                <Typography  paragraph={true}>
-                    <DetailsAttribute label='API Host' value={data.apiHost} copyValue={data.apiHost} />
-                    <DetailsAttribute label='API Token' value={data.token} copyValue={data.token} />
-                    <DetailsAttribute 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>
+
+                <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>