Right-click to bookmark share link

GMOD · Apr 14, 2023 · 29a779b · 29a779b
1 parent c155f5c
commit 29a779b
Showing 1 changed file with 22 additions and 27 deletions.
diff --git a/products/jbrowse-web/src/ShareButton.tsx b/products/jbrowse-web/src/ShareButton.tsx
@@ -14,6 +14,7 @@ import {
   RadioGroup,
   TextField,
   Typography,
+  Link,
 } from '@mui/material'
 import copy from 'copy-to-clipboard'
 
@@ -147,6 +148,24 @@ function InfoDialog(props: { open: boolean; onClose: Function }) {
     </Dialog>
   )
 }
+function LinkField({ url }: { url: string }) {
+  return (
+    <>
+      <TextField
+        label="URL"
+        value={url}
+        InputProps={{ readOnly: true }}
+        variant="filled"
+        style={{ width: '100%' }}
+        onClick={event => {
+          const target = event.target as HTMLTextAreaElement
+          target.select()
+        }}
+      />
+      <Link href={url}>Link for bookmarking</Link>
+    </>
+  )
+}
 
 const ShareDialog = observer(function ({
   handleClose,
@@ -239,40 +258,16 @@ const ShareDialog = observer(function ({
             ) : loading ? (
               <Typography>Generating short URL...</Typography>
             ) : (
-              <TextField
-                label="URL"
-                value={shortUrl}
-                InputProps={{
-                  readOnly: true,
-                }}
-                variant="filled"
-                style={{ width: '100%' }}
-                onClick={event => {
-                  const target = event.target as HTMLTextAreaElement
-                  target.select()
-                }}
-              />
+              <LinkField url={shortUrl} />
             )
           ) : (
-            <TextField
-              label="URL"
-              value={longUrl}
-              InputProps={{
-                readOnly: true,
-              }}
-              variant="filled"
-              style={{ width: '100%' }}
-              onClick={event => {
-                const target = event.target as HTMLTextAreaElement
-                target.select()
-              }}
-            />
+            <LinkField url={longUrl} />
           )}
         </DialogContent>
         <DialogActions>
           <Button
             onClick={() => {
-              copy(shortUrl || longUrl.toString())
+              copy(shortUrl || longUrl)
               session.notify('Copied to clipboard', 'success')
             }}
             color="primary"