Merge branch '19294-sharing-dialog-overflow' into main. Closes #19294

[arvados-workbench2.git] / src / views-components / sharing-dialog / sharing-urls-component.tsx

diff --git a/src/views-components/sharing-dialog/sharing-urls-component.tsx b/src/views-components/sharing-dialog/sharing-urls-component.tsx
index ee5d50bea8e9b04fe6809e75929ff65433438355..c9cbc0df3d5e2f20ad0818a6ee8281e91fb868f8 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-urls-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-urls-component.tsx
@@ -9,6 +9,7 @@ import {
     Link,
     StyleRulesCallback,
     Tooltip,
+    Typography,
     WithStyles,
     withStyles
 } from '@material-ui/core';
@@ -54,15 +55,20 @@ export interface SharingURLsComponentActionProps {
     onCopy: (message: string) => void;
 }
 
-type SharingURLsComponentProps = SharingURLsComponentDataProps & SharingURLsComponentActionProps;
+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
+    { 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}/c=${props.collectionUuid}/t=${token.apiToken}/_/`
+        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()})`;
+        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>
@@ -77,12 +83,13 @@ export const SharingURLsComponent = withStyles(styles)((props: SharingURLsCompon
                     <CopyIcon />
                 </CopyToClipboard>
             </Tooltip></span>
-            <span className={props.classes.sharingUrlButton}><Tooltip title='Remove'>
+            <span data-cy='remove-url-btn' 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> }
 </Grid>);