Merge pull request #2479 from weseek/feat/set-sharelink-dropdown-for-admin-page

Feat/set sharelink dropdown for admin page

src/client/js/components/Admin/Security/ShareLinkSetting.jsx

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import dateFnsFormat from 'date-fns/format';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -12,6 +11,7 @@ import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 
 import DeleteAllShareLinksModal from './DeleteAllShareLinksModal';
+import ShareLinkList from '../../ShareLinkList';
 
 class ShareLinkSetting extends React.Component {
 
@@ -118,41 +118,11 @@ class ShareLinkSetting extends React.Component {
         </div>
 
         {pager}
-        <div className="table-responsive">
-          <table className="table table-bordered">
-            <thead>
-              <tr>
-                <th>{t('share_links.Share Link')}</th>
-                <th>{t('share_links.Page Path')}</th>
-                <th>{t('share_links.expire')}</th>
-                <th>{t('share_links.description')}</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {adminGeneralSecurityContainer.state.shareLinks.map((sharelink) => {
-                return (
-                  <tr key={sharelink._id}>
-                    <td>{sharelink._id}</td>
-                    <td><a href={sharelink.relatedPage.path}>{sharelink.relatedPage.path}</a></td>
-                    <td>{sharelink.expiredAt && <span>{dateFnsFormat(new Date(sharelink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}</td>
-                    <td>{sharelink.description}</td>
-                    <td>
-                      <button
-                        className="btn btn-outline-warning"
-                        type="button"
-                        shareLinks={sharelink._id}
-                        onClick={() => { this.deleteLinkById(sharelink._id) }}
-                      >
-                        <i className="icon-trash mr-2"></i>{t('Delete')}
-                      </button>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
+        <ShareLinkList
+          shareLinks={adminGeneralSecurityContainer.state.shareLinks}
+          onClickDeleteButton={this.deleteLinkById}
+          isAdmin
+        />
 
         <DeleteAllShareLinksModal
           isOpen={this.state.isDeleteConfirmModalShown}

src/client/js/components/OutsideShareLinkModal.jsx

@@ -87,8 +87,8 @@ class OutsideShareLinkModal extends React.Component {
   }
 
   render() {
-    const { t, pageContainer } = this.props;
-    const { path } = pageContainer.state;
+    const { t } = this.props;
+
     return (
       <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')}
@@ -104,7 +104,6 @@ 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

@@ -104,13 +104,14 @@ class CopyDropdown extends React.Component {
 
     const { DropdownItemContents } = this;
     const copyTarget = isShareLinkMode ? `copyShareLink${pageId}` : 'copyPagePathDropdown';
+    const dropdownToggleStyle = isShareLinkMode ? 'btn btn-secondary' : 'd-block text-muted bg-transparent btn-copy border-0';
 
     return (
       <>
         <UncontrolledDropdown id={copyTarget} className="grw-copy-dropdown">
           <DropdownToggle
             caret
-            className="d-block text-muted bg-transparent btn-copy border-0"
+            className={dropdownToggleStyle}
             style={this.props.buttonStyle}
           >
             { isShareLinkMode ? (
@@ -118,7 +119,7 @@ class CopyDropdown extends React.Component {
             ) : (<i className="ti-clipboard"></i>)}
           </DropdownToggle>
 
-          <DropdownMenu>
+          <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
 
             <div className="d-flex align-items-center justify-content-between">
               <DropdownItem header className="px-3">

src/client/js/components/ShareLinkList.jsx

@@ -20,16 +20,18 @@ 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 className="d-flex justify-content-between align-items-center">
-              <span>{shareLink._id}</span>
-              <CopyDropdown isShareLinkMode="true" pagePath={props.pagePath} pageId={shareLink._id} />
+            <td>
+              <div className="d-flex">
+                <span className="mr-auto my-auto">{shareLink._id}</span>
+                <CopyDropdown isShareLinkMode pagePath={shareLink.relatedPage.path} pageId={shareLink._id} />
+              </div>
             </td>
+            {props.isAdmin && <td><a href={shareLink.relatedPage.path}>{shareLink.relatedPage.path}</a></td>}
             <td>{shareLink.expiredAt && <span>{dateFnsFormat(new Date(shareLink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}</td>
             <td>{shareLink.description}</td>
             <td>
@@ -49,6 +51,7 @@ const ShareLinkList = (props) => {
         <thead>
           <tr>
             <th>{t('share_links.Share Link')}</th>
+            {props.isAdmin && <th>{t('share_links.Page Path')}</th>}
             <th>{t('share_links.expire')}</th>
             <th>{t('share_links.description')}</th>
             <th></th>
@@ -67,10 +70,10 @@ 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,
+  isAdmin: PropTypes.bool,
 };
 
 export default withTranslation()(ShareLinkListWrapper);