Right-click to bookmark share link

GMOD · Apr 12, 2023 · b76782d · b76782d
1 parent 0e8bff2
commit b76782d
Showing 1 changed file with 22 additions and 30 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}>Right click to bookmark</Link>
+    </>
+  )
+}
 
 const ShareDialog = observer(function ({
   handleClose,
@@ -224,7 +243,6 @@ const ShareDialog = observer(function ({
         open
         onClose={handleClose}
         title="JBrowse Shareable Link"
-        data-testid="share-dialog"
       >
         <DialogContent>
           <DialogContentText>
@@ -240,34 +258,10 @@ 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>
@@ -291,9 +285,7 @@ const ShareDialog = observer(function ({
 
       <SettingsDialog
         open={settingsDialogOpen}
-        onClose={() => {
-          setSettingsDialogOpen(false)
-        }}
+        onClose={() => setSettingsDialogOpen(false)}
         currentSetting={currentSetting}
       />
     </>