20085: Fix quirky behavior when removing share with public/all users row

[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 c9cbc0df3d5e2f20ad0818a6ee8281e91fb868f8..5facb2e3812e61b43394cb220c299741e64c6451 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-urls-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-urls-component.tsx
@@ -14,7 +14,7 @@ import {
     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';
@@ -58,38 +58,38 @@ export interface 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.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`;
+    {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 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> }
+                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>);