Merge pull request #2364 from weseek/imprv/sharelink-copy-on-modal

Imprv/sharelink copy on modal

src/client/js/components/OutsideShareLinkModal.jsx

@@ -87,9 +87,10 @@ class OutsideShareLinkModal extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, pageContainer } = this.props;
+    const { path } = pageContainer.state;
     return (
-      <Modal size="lg" isOpen={this.props.isOpen} toggle={this.props.onClose}>
+      <Modal size="xl" isOpen={this.props.isOpen} toggle={this.props.onClose}>
         <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-primary text-light">{t('share_links.Shere this page link to public')}
         </ModalHeader>
         <ModalBody>
@@ -103,6 +104,7 @@ class OutsideShareLinkModal extends React.Component {
               <ShareLinkList
                 shareLinks={this.state.shareLinks}
                 onClickDeleteButton={this.deleteLinkById}
+                pagePath={path}
               />
               <button
                 className="btn btn-outline-secondary d-block mx-auto px-5 mb-3"

src/client/js/components/Page/CopyDropdown.jsx

@@ -64,11 +64,14 @@ class CopyDropdown extends React.Component {
   }
 
   generatePermalink() {
-    const { pageId } = this.props;
+    const { pageId, isShareLinkMode } = this.props;
 
     if (pageId == null) {
       return null;
     }
+    if (isShareLinkMode) {
+      return decodeURI(`${origin}/share/${pageId}`);
+    }
 
     return decodeURI(`${origin}/${pageId}${this.uriParams}`);
   }
@@ -90,7 +93,9 @@ class CopyDropdown extends React.Component {
   );
 
   render() {
-    const { t, pageId } = this.props;
+    const {
+      t, pageId, isShareLinkMode,
+    } = this.props;
     const { isParamsAppended } = this.state;
 
     const pagePathWithParams = this.generatePagePathWithParams();
@@ -98,17 +103,19 @@ class CopyDropdown extends React.Component {
     const permalink = this.generatePermalink();
 
     const { DropdownItemContents } = this;
+    const copyTarget = isShareLinkMode ? `copyShareLink${pageId}` : 'copyPagePathDropdown';
 
     return (
       <>
-        <UncontrolledDropdown id="copyPagePathDropdown" className="grw-copy-dropdown">
-
+        <UncontrolledDropdown id={copyTarget} className="grw-copy-dropdown">
           <DropdownToggle
             caret
             className="d-block text-muted bg-transparent btn-copy border-0"
             style={this.props.buttonStyle}
           >
-            <i className="ti-clipboard"></i>
+            { isShareLinkMode ? (
+              <>Copy Link</>
+            ) : (<i className="ti-clipboard"></i>)}
           </DropdownToggle>
 
           <DropdownMenu>
@@ -146,7 +153,6 @@ class CopyDropdown extends React.Component {
                 <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl} />
               </DropdownItem>
             </CopyToClipboard>
-
             <DropdownItem divider className="my-0"></DropdownItem>
 
             {/* Parmanent Link */}
@@ -183,7 +189,7 @@ class CopyDropdown extends React.Component {
 
         </UncontrolledDropdown>
 
-        <Tooltip placement="bottom" isOpen={this.state.tooltipOpen} target="copyPagePathDropdown" fade={false}>
+        <Tooltip placement="bottom" isOpen={this.state.tooltipOpen} target={copyTarget} fade={false}>
           copied!
         </Tooltip>
       </>
@@ -198,6 +204,7 @@ CopyDropdown.propTypes = {
   pagePath: PropTypes.string.isRequired,
   pageId: PropTypes.string,
   buttonStyle: PropTypes.object,
+  isShareLinkMode: PropTypes.bool,
 };
 
 export default withTranslation()(CopyDropdown);

src/client/js/components/ShareLinkList.jsx

@@ -8,6 +8,7 @@ import dateFnsFormat from 'date-fns/format';
 import { withUnstatedContainers } from './UnstatedUtils';
 
 import AppContainer from '../services/AppContainer';
+import CopyDropdown from './Page/CopyDropdown';
 
 const ShareLinkList = (props) => {
 
@@ -19,12 +20,16 @@ const ShareLinkList = (props) => {
     props.onClickDeleteButton(shareLinkId);
   }
 
+  // TODO implement admin screen behavior when pagePath is null
   function renderShareLinks() {
     return (
       <>
         {props.shareLinks.map(shareLink => (
           <tr key={shareLink._id}>
-            <td>{shareLink._id}</td>
+            <td className="d-flex justify-content-between align-items-center">
+              <span>{shareLink._id}</span>
+              <CopyDropdown isShareLinkMode="true" pagePath={props.pagePath} pageId={shareLink._id} />
+            </td>
             <td>{shareLink.expiredAt && <span>{dateFnsFormat(new Date(shareLink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}</td>
             <td>{shareLink.description}</td>
             <td>
@@ -62,6 +67,7 @@ const ShareLinkListWrapper = withUnstatedContainers(ShareLinkList, [AppContainer
 ShareLinkList.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pagePath: PropTypes.string,
 
   shareLinks: PropTypes.array.isRequired,
   onClickDeleteButton: PropTypes.func,