feat: "Copy link" button in Export dialog

package.json

@@ -79,6 +79,7 @@
     "numeral": "2.0.6",
     "p-min-delay": "3.1.0",
     "papaparse": "5.1.1",
+    "popper.js": "1.16.1",
     "prop-types": "15.7.2",
     "raf": "3.4.1",
     "react": "16.13.0",

src/components/Buttons/ClipboardButton.tsx

@@ -0,0 +1,49 @@
+import React, { useState, ReactNode } from 'react'
+import Popper from 'popper.js'
+import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap'
+import { copyToClipboard } from '../../helpers/copyToClipboard'
+
+interface ClipboardButtonProps {
+  disabled: boolean
+  children: ReactNode
+  textToCopy?: string
+  popoverBody: ReactNode
+  popoverHeader?: string
+  popoverPlacement?: Popper.Placement
+  popoverTarget: string | HTMLElement | React.RefObject<HTMLElement>
+}
+
+/**
+ * When clicked, copies textToCopy to clipboard
+ * The user could then paste this text somewhere else
+ */
+export default function ClipboardButton({
+  disabled,
+  children,
+  textToCopy,
+  popoverBody = '',
+  popoverHeader = '',
+  popoverPlacement = 'bottom',
+  popoverTarget,
+}: ClipboardButtonProps) {
+  const [popoverOpen, setPopoverOpen] = useState(false)
+  const closePopover = () => setPopoverOpen(false)
+  const onClick = () => {
+    if (textToCopy) {
+      copyToClipboard(String(textToCopy))
+      setPopoverOpen(true)
+    }
+  }
+
+  return (
+    <>
+      <Button disabled={disabled} onClick={onClick} color="primary" size="sm">
+        {children}
+      </Button>
+      <Popover placement={popoverPlacement} open={popoverOpen} target={popoverTarget} ontoggle={closePopover}>
+        <PopoverHeader>{popoverHeader}</PopoverHeader>
+        <PopoverBody>{popoverBody}</PopoverBody>
+      </Popover>
+    </>
+  )
+}

src/components/Main/Results/ExportSimulationDialog.tsx

@@ -1,8 +1,12 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Table } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import { AlgorithmResult } from '../../../algorithms/types/Result.types'
 import { exportAll, exportParams, exportResult } from '../../../algorithms/utils/exportResult'
+import ClipboardButton from '../../Buttons/ClipboardButton'
+import { createNonExistingElement } from '../../../helpers/createNonExistingElement'
+
+const POPOVER_TARGET = 'export-simulation-dialog-popover'
 
 export interface ExportSimulationDialogProps {
   canExport: boolean
@@ -14,6 +18,10 @@ export interface ExportSimulationDialogProps {
 export default function ExportSimulationDialog({ showModal, toggleShowModal, result }: ExportSimulationDialogProps) {
   const { t } = useTranslation()
 
+  useEffect(() => {
+    createNonExistingElement(POPOVER_TARGET)
+  }, [])
+
   return (
     <Modal className="height-fit" centered size="lg" isOpen={showModal} toggle={toggleShowModal}>
       <ModalHeader toggle={toggleShowModal}>{t('Export simulation')}</ModalHeader>
@@ -58,6 +66,22 @@ export default function ExportSimulationDialog({ showModal, toggleShowModal, res
                 </Button>
               </td>
             </tr>
+            <tr>
+              <td></td>
+              <td>{t('Shareable link')}</td>
+              <td>URL</td>
+              <td>
+                <ClipboardButton
+                  disabled={!(result?.params ?? null)}
+                  textToCopy={window.location.href}
+                  popoverHeader="Copied!"
+                  popoverBody={'The scenario link is now copied.'}
+                  popoverTarget={POPOVER_TARGET}
+                >
+                  {t('Copy link')}
+                </ClipboardButton>
+              </td>
+            </tr>
           </tbody>
         </Table>
       </ModalBody>

src/helpers/copyToClipboard.ts

@@ -0,0 +1,8 @@
+export const copyToClipboard = (str: string) => {
+  const el = document.createElement('textarea')
+  el.value = str
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+}

src/helpers/createNonExistingElement.ts

@@ -0,0 +1,9 @@
+export const createNonExistingElement = (id: string, type = 'div') => {
+  let element = document.getElementById(id)
+
+  if (!element) {
+    element = document.createElement(type)
+    element.setAttribute('id', id)
+    document.body.append(element)
+  }
+}

yarn.lock

@@ -11417,7 +11417,7 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.14.1, popper.js@^1.14.4:
+popper.js@1.16.1, popper.js@^1.14.1, popper.js@^1.14.4:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==