withStyles
} from '@material-ui/core';
import { ApiClientAuthorization } from 'models/api-client-authorization';
-import { CopyIcon, RemoveIcon } from 'components/icon/icon';
+import { CopyIcon, CloseIcon } from 'components/icon/icon';
import CopyToClipboard from 'react-copy-to-clipboard';
import { ArvadosTheme } from 'common/custom-theme';
import moment from 'moment';
export type SharingURLsComponentProps = SharingURLsComponentDataProps & SharingURLsComponentActionProps;
export const SharingURLsComponent = withStyles(styles)((props: SharingURLsComponentProps & WithStyles<CssRules>) => <Grid container direction='column' spacing={24} className={props.classes.sharingUrlList}>
- { props.sharingTokens.length > 0
- ? props.sharingTokens
- .sort((a, b) => (new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime()))
- .map(token => {
- const url = props.sharingURLsPrefix.includes('*')
- ? `${props.sharingURLsPrefix.replace('*', props.collectionUuid)}/t=${token.apiToken}/_/`
- : `${props.sharingURLsPrefix}/c=${props.collectionUuid}/t=${token.apiToken}/_/`;
- const expDate = new Date(token.expiresAt);
- const urlLabel = `Token ${token.apiToken.slice(0, 8)}... expiring at: ${expDate.toLocaleString()} (${moment(expDate).fromNow()})`;
+ {props.sharingTokens.length > 0
+ ? props.sharingTokens
+ .sort((a, b) => (new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime()))
+ .map(token => {
+ const url = props.sharingURLsPrefix.includes('*')
+ ? `${props.sharingURLsPrefix.replace('*', props.collectionUuid)}/t=${token.apiToken}/_/`
+ : `${props.sharingURLsPrefix}/c=${props.collectionUuid}/t=${token.apiToken}/_/`;
+ const expDate = new Date(token.expiresAt);
+ const urlLabel = !!token.expiresAt
+ ? `Token ${token.apiToken.slice(0, 8)}... expiring at: ${expDate.toLocaleString()} (${moment(expDate).fromNow()})`
+ : `Token ${token.apiToken.slice(0, 8)}... with no expiration date`;
- return <Grid container alignItems='center' key={token.uuid} className={props.classes.sharingUrlRow}>
- <Grid item>
- <Link className={props.classes.sharingUrlText} href={url} target='_blank'>
- {urlLabel}
- </Link>
- </Grid>
- <Grid item xs />
- <Grid item>
- <span className={props.classes.sharingUrlButton}><Tooltip title='Copy to clipboard'>
- <CopyToClipboard text={url} onCopy={() => props.onCopy('Sharing URL copied')}>
- <CopyIcon />
- </CopyToClipboard>
- </Tooltip></span>
- <span className={props.classes.sharingUrlButton}><Tooltip title='Remove'>
- <IconButton onClick={() => props.onDeleteSharingToken(token.uuid)}>
- <RemoveIcon />
- </IconButton>
- </Tooltip></span>
- </Grid>
- </Grid>
- })
- : <Grid item><Typography>No sharing URLs</Typography></Grid> }
+ return <Grid container alignItems='center' key={token.uuid} className={props.classes.sharingUrlRow}>
+ <Grid item>
+ <Link className={props.classes.sharingUrlText} href={url} target='_blank'>
+ {urlLabel}
+ </Link>
+ </Grid>
+ <Grid item xs />
+ <Grid item>
+ <span className={props.classes.sharingUrlButton}><Tooltip title='Copy to clipboard'>
+ <CopyToClipboard text={url} onCopy={() => props.onCopy('Sharing URL copied')}>
+ <CopyIcon />
+ </CopyToClipboard>
+ </Tooltip></span>
+ <span data-cy='remove-url-btn' className={props.classes.sharingUrlButton}><Tooltip title='Remove'>
+ <IconButton onClick={() => props.onDeleteSharingToken(token.uuid)}>
+ <CloseIcon />
+ </IconButton>
+ </Tooltip></span>
+ </Grid>
+ </Grid>
+ })
+ : <Grid item><Typography>No sharing URLs</Typography></Grid>}
</Grid>);