1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
14 } from '@material-ui/core';
15 import { ApiClientAuthorization } from 'models/api-client-authorization';
16 import { CopyIcon, RemoveIcon } from 'components/icon/icon';
17 import CopyToClipboard from 'react-copy-to-clipboard';
18 import { ArvadosTheme } from 'common/custom-theme';
19 import moment from 'moment';
21 type CssRules = 'sharingUrlText'
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
31 color: theme.palette.grey["500"],
36 verticalAlign: 'middle',
42 borderBottom: `1px solid ${theme.palette.grey["300"]}`,
46 export interface SharingURLsComponentDataProps {
47 collectionUuid: string;
48 sharingTokens: ApiClientAuthorization[];
49 sharingURLsPrefix: string;
52 export interface SharingURLsComponentActionProps {
53 onDeleteSharingToken: (uuid: string) => void;
54 onCopy: (message: string) => void;
57 type SharingURLsComponentProps = SharingURLsComponentDataProps & SharingURLsComponentActionProps;
59 export const SharingURLsComponent = withStyles(styles)((props: SharingURLsComponentProps & WithStyles<CssRules>) => <Grid container direction='column' spacing={24} className={props.classes.sharingUrlList}>
61 .sort((a, b) => (new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime()))
63 const url = `${props.sharingURLsPrefix}/c=${props.collectionUuid}/t=${token.apiToken}/_/`
64 const expDate = new Date(token.expiresAt);
65 const urlLabel = `Token ${token.apiToken.slice(0, 8)}... expiring at: ${expDate.toLocaleString()} (${moment(expDate).fromNow()})`;
67 return <Grid container alignItems='center' key={token.uuid} className={props.classes.sharingUrlRow}>
69 <Link className={props.classes.sharingUrlText} href={url} target='_blank'>
75 <span className={props.classes.sharingUrlButton}><Tooltip title='Copy to clipboard'>
76 <CopyToClipboard text={url} onCopy={() => props.onCopy('Sharing URL copied')}>
80 <span className={props.classes.sharingUrlButton}><Tooltip title='Remove'>
81 <IconButton onClick={() => props.onDeleteSharingToken(token.uuid)}>