PackageTree: buttons for copying canonical URIs

catalog/app/containers/Bucket/PackageTree.js

@@ -10,6 +10,7 @@ import * as Lab from '@material-ui/lab'
 import { Crumb, copyWithoutSpaces, render as renderCrumbs } from 'components/BreadCrumbs'
 import * as Intercom from 'components/Intercom'
 import * as Preview from 'components/Preview'
+import * as Notifications from 'containers/Notifications'
 import AsyncResult from 'utils/AsyncResult'
 import * as AWS from 'utils/AWS'
 import * as BucketConfig from 'utils/BucketConfig'
@@ -19,6 +20,7 @@ import * as LinkedData from 'utils/LinkedData'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import * as PackageUri from 'utils/PackageUri'
 import Link, { linkStyle } from 'utils/StyledLink'
+import copyToClipboard from 'utils/clipboard'
 import parseSearch from 'utils/parseSearch'
 import * as s3paths from 'utils/s3paths'
 import usePrevious from 'utils/usePrevious'
@@ -65,8 +67,10 @@ const useRevisionInfoStyles = M.makeStyles((t) => ({
 
 function RevisionInfo({ revisionData, revision, bucket, name, path }) {
   const { urls } = NamedRoutes.use()
+  const { push } = Notifications.use()
   const classes = useRevisionInfoStyles()
 
+  const listRef = React.useRef()
   const [anchor, setAnchor] = React.useState()
   const [opened, setOpened] = React.useState(false)
   const open = React.useCallback(() => setOpened(true), [])
@@ -84,6 +88,15 @@ function RevisionInfo({ revisionData, revision, bucket, name, path }) {
     _: R.identity,
   })
 
+  const getHttpsUri = (r) =>
+    `${window.origin}${urls.bucketPackageTree(bucket, name, r.hash, path)}`
+
+  const copyHttpsUri = (r, containerRef) => (e) => {
+    e.preventDefault()
+    copyToClipboard(getHttpsUri(r), { container: containerRef && containerRef.current })
+    push('Canonical URI copied to clipboard')
+  }
+
   return (
     <>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
@@ -96,14 +109,29 @@ function RevisionInfo({ revisionData, revision, bucket, name, path }) {
         {R.take(10, revision)} <M.Icon>expand_more</M.Icon>
       </span>
 
+      {revisionData.case({
+        Ok: (r) => (
+          <M.IconButton
+            size="small"
+            title="Copy package revision's canonical catalog URI to the clipboard"
+            href={getHttpsUri(r)}
+            onClick={copyHttpsUri(r)}
+            style={{ marginTop: -4, marginBottom: -4 }}
+          >
+            <M.Icon>link</M.Icon>
+          </M.IconButton>
+        ),
+        _: () => null,
+      })}
+
       <M.Popover
         open={opened && !!anchor}
         anchorEl={anchor}
         onClose={close}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         transformOrigin={{ vertical: 'top', horizontal: 'center' }}
       >
-        <M.List className={classes.list}>
+        <M.List className={classes.list} ref={listRef}>
           {AsyncResult.case(
             {
               Ok: R.map((r) => (
@@ -127,6 +155,15 @@ function RevisionInfo({ revisionData, revision, bucket, name, path }) {
                       </span>
                     }
                   />
+                  <M.ListItemSecondaryAction>
+                    <M.IconButton
+                      title="Copy package revision's canonical catalog URI to the clipboard"
+                      href={getHttpsUri(r)}
+                      onClick={copyHttpsUri(r, listRef)}
+                    >
+                      <M.Icon>link</M.Icon>
+                    </M.IconButton>
+                  </M.ListItemSecondaryAction>
                 </M.ListItem>
               )),
               Err: () => (