add share link copy button

src/client/js/components/OutsideShareLinkModal.jsx

@@ -20,7 +20,7 @@ const OutsideShareLinkModal = (props) => {
   /* const { t } = props; */
 
   return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
+    <Modal size="xl" isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
       <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">Title
       </ModalHeader>
       <ModalBody>

src/client/js/components/ShareLinkList.jsx

@@ -1,13 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import * as toastr from 'toastr';
 
 import { withTranslation } from 'react-i18next';
-
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Tooltip } from 'reactstrap';
 import { createSubscribedElement } from './UnstatedUtils';
 
 import AppContainer from '../services/AppContainer';
 
 const ShareLinkList = (props) => {
+  const [tooltipOpen, setToolTipOpen] = useState(false);
+
+  const showCopyedToolTip = () => {
+    setToolTipOpen(true);
+    setTimeout(() => {
+      setToolTipOpen(false);
+    }, 1000);
+  };
 
   function deleteLinkHandler(shareLink) {
     try {
@@ -44,7 +53,15 @@ const ShareLinkList = (props) => {
       <>
         {shareLinks.map(shareLink => (
           <tr>
-            <td>{shareLink.link}</td>
+            <td>
+              {shareLink.link}
+              <CopyToClipboard text={shareLink.link} onCopy={showCopyedToolTip} id="copyShareLink">
+                <button type="button" className="btn btn-outline-success float-right">Copy Link</button>
+              </CopyToClipboard>
+            </td>
+            <Tooltip placement="bottom" isOpen={tooltipOpen} target="copyShareLink" fade={false}>
+              copied!
+            </Tooltip>
             <td>{shareLink.expiration}</td>
             <td>{shareLink.description}</td>
             <td>