Share link (#5419)

* [share dialog] 'share link' panel: display details of a new link after generating it

* [share dialog] 'share link' panel: modified 'Details' UI & added 'mouse hover' effects for link items

* [share dialog] 'share link' panel: fixup & improvement for 'link details'(refactored it)

frontend/src/components/dialog/share-dialog.js

@@ -2,16 +2,16 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, additionalShareDialogNote, enableOCM, isPro } from '../../utils/constants';
+import ShareLinkPanel from './share-link-panel';
+import GenerateUploadLink from './generate-upload-link';
 import ShareToUser from './share-to-user';
 import ShareToGroup from './share-to-group';
 import ShareToInvitePeople from './share-to-invite-people';
-import GenerateShareLink from './generate-share-link';
-import GenerateUploadLink from './generate-upload-link';
 import ShareToOtherServer from './share-to-other-server';
 import InternalLink from './internal-link';
 import { seafileAPI } from '../../utils/seafile-api';
-import Loading from '../loading';
 import { Utils } from '../../utils/utils';
+import Loading from '../loading';
 import toaster from '../toast';
 import CustomPermissionManager from './custom-permission/custom-permission-manager';
 
@@ -170,7 +170,7 @@ class ShareDialog extends React.Component {
           <TabContent activeTab={this.state.activeTab}>
             {(enableShareLink && activeTab === 'shareLink') &&
               <TabPane tabId="shareLink" role="tabpanel" id="share-link-panel">
-                <GenerateShareLink
+                <ShareLinkPanel
                   itemPath={this.props.itemPath}
                   repoID={this.props.repoID}
                   closeShareDialog={this.props.toggleDialog}
@@ -279,7 +279,7 @@ class ShareDialog extends React.Component {
           <TabContent activeTab={this.state.activeTab}>
             {enableShareLink && activeTab === 'shareLink' &&
               <TabPane tabId="shareLink" role="tabpanel" id="share-link-panel">
-                <GenerateShareLink
+                <ShareLinkPanel
                   itemPath={this.props.itemPath}
                   repoID={this.props.repoID}
                   closeShareDialog={this.props.toggleDialog}

frontend/src/components/dialog/share-link-panel.js

@@ -24,7 +24,7 @@ const propTypes = {
 
 const inputWidth = Utils.isDesktop() ? 250 : 210;
 
-class GenerateShareLink extends React.Component {
+class ShareLinkPanel extends React.Component {
 
   constructor(props) {
     super(props);
@@ -33,26 +33,20 @@ class GenerateShareLink extends React.Component {
     this.defaultExpireDays = this.isExpireDaysNoLimit ? '' : shareLinkExpireDaysDefault;
 
     this.state = {
-      isOpIconShown: false,
       isShowPasswordInput: shareLinkForceUsePassword ? true : false,
       isPasswordVisible: false,
       isExpireChecked: !this.isExpireDaysNoLimit,
-      isExpirationEditIconShow: false,
-      isEditingExpiration: false,
       expType: 'by-days',
       expireDays: this.defaultExpireDays,
       expDate: null,
       password: '',
       passwdnew: '',
-      storedPasswordVisible: false,
       errorInfo: '',
       sharedLinkInfo: null,
       shareLinks: [],
-      isNoticeMessageShow: false,
       isLoading: true,
       permissionOptions: [],
       currentPermission: '',
-      isSendLinkShown: false
     };
   }
 
@@ -145,12 +139,6 @@ class GenerateShareLink extends React.Component {
     this.setState({passwdnew: passwd});
   }
 
-  toggleStoredPasswordVisible = () => {
-    this.setState({
-      storedPasswordVisible: !this.state.storedPasswordVisible
-    });
-  }
-
   setPermission = (e) => {
     this.setState({currentPermission: e.target.value});
   }
@@ -176,7 +164,8 @@ class GenerateShareLink extends React.Component {
       }
       seafileAPI.createMultiShareLink(repoID, itemPath, password, expirationTime, permissions).then((res) => {
         const links = this.state.shareLinks;
-        links.unshift(new ShareLink(res.data));
+        const newLink = new ShareLink(res.data);
+        links.unshift(newLink);
         this.setState({
           password: '',
           passwdnew: '',
@@ -185,6 +174,7 @@ class GenerateShareLink extends React.Component {
           expDate: null,
           isExpireChecked: !this.isExpireDaysNoLimit,
           errorInfo: '',
+          sharedLinkInfo: newLink,
           shareLinks: links
         });
       }).catch((error) => {
@@ -194,35 +184,6 @@ class GenerateShareLink extends React.Component {
     }
   }
 
-  onCopySharedLink = () => {
-    let sharedLink = this.state.sharedLinkInfo.link;
-    copy(sharedLink);
-    toaster.success(gettext('Share link is copied to the clipboard.'));
-    this.props.closeShareDialog();
-  }
-
-  onCopyDownloadLink = () => {
-    let downloadLink = this.state.sharedLinkInfo.link + '?dl=1';
-    copy(downloadLink);
-    toaster.success(gettext('Direct download link is copied to the clipboard.'));
-    this.props.closeShareDialog();
-  }
-
-  deleteShareLink = () => {
-    const { sharedLinkInfo, shareLinks } = this.state;
-    seafileAPI.deleteShareLink(sharedLinkInfo.token).then(() => {
-      this.setState({
-        isNoticeMessageShow: false,
-        sharedLinkInfo: null,
-        shareLinks: shareLinks.filter(item => item.token !== sharedLinkInfo.token)
-      });
-      toaster.success(gettext('The link is deleted.'));
-    }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
   onExpireChecked = (e) => {
     this.setState({isExpireChecked: e.target.checked});
   }
@@ -306,81 +267,34 @@ class GenerateShareLink extends React.Component {
     return true;
   }
 
-  handleMouseOverExpirationEditIcon = () => {
-    this.setState({isExpirationEditIconShow: true});
-  }
-
-  handleMouseOutExpirationEditIcon = () => {
-    this.setState({isExpirationEditIconShow: false});
-  }
-
-  editingExpirationToggle = () => {
-    this.setState({isEditingExpiration: !this.state.isEditingExpiration});
-  }
-
-  updateExpiration = (e) => {
-    e.preventDefault();
-    e.nativeEvent.stopImmediatePropagation();
-
-    const { expType, expireDays, expDate, sharedLinkInfo, shareLinks } = this.state;
-
-    let expirationTime = '';
-    if (expType == 'by-days') {
-      expirationTime = moment().add(parseInt(expireDays), 'days').format();
-    } else {
-      expirationTime = expDate.format();
-    }
-
-    seafileAPI.updateShareLink(sharedLinkInfo.token, '', expirationTime).then((res) => {
-      const updatedShareLink = new ShareLink(res.data);
-      this.setState({
-        isEditingExpiration: false,
-        sharedLinkInfo: updatedShareLink,
-        shareLinks: shareLinks.map(item => item.token == sharedLinkInfo.token ? updatedShareLink : item)
-      });
-    }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  onNoticeMessageToggle = () => {
-    this.setState({isNoticeMessageShow: !this.state.isNoticeMessageShow});
-  }
-
-  toggleSendLink = () => {
-    this.setState({ isSendLinkShown: !this.state.isSendLinkShown });
-  }
-
-  handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
-  }
-
-  handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
-  }
-
-  changePerm = (permission) => {
-    const { sharedLinkInfo, shareLinks } = this.state;
-    const { permissionDetails } = Utils.getShareLinkPermissionObject(permission);
-    seafileAPI.updateShareLink(sharedLinkInfo.token, JSON.stringify(permissionDetails)).then((res) => {
-      const updatedShareLink = new ShareLink(res.data);
-      this.setState({
-        sharedLinkInfo: updatedShareLink,
-        shareLinks: shareLinks.map(item => item.token == sharedLinkInfo.token ? updatedShareLink : item)
-      });
-    }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
   showLinkDetails = (link) => {
     this.setState({
       sharedLinkInfo: link
     });
   }
 
+  updateLink = (link) => {
+    const { shareLinks } = this.state;
+    this.setState({
+      sharedLinkInfo: link,
+      shareLinks: shareLinks.map(item => item.token == link.token ? link : item)
+    });
+  }
+
+  deleteLink = () => {
+    const { sharedLinkInfo, shareLinks } = this.state;
+    seafileAPI.deleteShareLink(sharedLinkInfo.token).then(() => {
+      this.setState({
+        sharedLinkInfo: null,
+        shareLinks: shareLinks.filter(item => item.token !== sharedLinkInfo.token)
+      });
+      toaster.success(gettext('The link is deleted.'));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
   render() {
     if (this.state.isLoading) {
       return <Loading />;
@@ -388,125 +302,19 @@ class GenerateShareLink extends React.Component {
 
     const { userPerm } = this.props;
     const { isCustomPermission } = Utils.getUserPermission(userPerm);
-    const { shareLinks, permissionOptions, sharedLinkInfo, isOpIconShown } = this.state;
+    const { shareLinks, permissionOptions, sharedLinkInfo } = this.state;
 
     if (sharedLinkInfo) {
-      let currentPermission = Utils.getShareLinkPermissionStr(sharedLinkInfo.permissions);
       return (
-        <div>
-          <button className="fa fa-arrow-left back-icon border-0 bg-transparent text-secondary p-0" onClick={this.showLinkDetails.bind(this, null)} title={gettext('Back')} aria-label={gettext('Back')}></button>
-          <Form className="mb-4">
-            <FormGroup className="mb-0">
-              <dt className="text-secondary font-weight-normal">{gettext('Link:')}</dt>
-              <dd>
-                <SharedLink
-                  link={sharedLinkInfo.link}
-                  linkExpired={sharedLinkInfo.is_expired}
-                  copyLink={this.onCopySharedLink}
-                />
-              </dd>
-            </FormGroup>
-            {!sharedLinkInfo.is_dir && sharedLinkInfo.permissions.can_download && ( // just for file
-              <FormGroup className="mb-0">
-                <dt className="text-secondary font-weight-normal">{gettext('Direct Download Link:')}</dt>
-                <dd>
-                  <SharedLink
-                    link={`${sharedLinkInfo.link}?dl=1`}
-                    linkExpired={sharedLinkInfo.is_expired}
-                    copyLink={this.onCopyDownloadLink}
-                  />
-                </dd>
-              </FormGroup>
-            )}
-            {sharedLinkInfo.password && (
-              <FormGroup className="mb-0">
-                <dt className="text-secondary font-weight-normal">{gettext('Password:')}</dt>
-                <dd className="d-flex">
-                  <div className="d-flex align-items-center">
-                    <input id="stored-password" className="border-0 mr-1" type="text" value={this.state.storedPasswordVisible ? sharedLinkInfo.password : '****************************************'} readOnly={true} size={Math.max(sharedLinkInfo.password.length, 10)} />
-                    <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
-                  </div>
-                </dd>
-              </FormGroup>
-            )}
-            {sharedLinkInfo.expire_date && (
-              <FormGroup className="mb-0">
-                <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
-                {!this.state.isEditingExpiration &&
-                  <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
-                    {moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
-                    {this.state.isExpirationEditIconShow && (
-                      <a href="#"
-                        role="button"
-                        aria-label={gettext('Edit')}
-                        title={gettext('Edit')}
-                        className="fa fa-pencil-alt attr-action-icon"
-                        onClick={this.editingExpirationToggle}>
-                      </a>
-                    )}
-                  </dd>
-                }
-                {this.state.isEditingExpiration &&
-                  <div className="ml-4">
-                    <SetLinkExpiration
-                      minDays={shareLinkExpireDaysMin}
-                      maxDays={shareLinkExpireDaysMax}
-                      defaultDays={shareLinkExpireDaysDefault}
-                      expType={this.state.expType}
-                      setExpType={this.setExpType}
-                      expireDays={this.state.expireDays}
-                      onExpireDaysChanged={this.onExpireDaysChanged}
-                      expDate={this.state.expDate}
-                      onExpDateChanged={this.onExpDateChanged}
-                    />
-                    <div className={this.state.expType == 'by-days' ? 'mt-2' : 'mt-3'}>
-                      <button className="btn btn-primary mr-2" onClick={this.updateExpiration}>{gettext('Update')}</button>
-                      <button className="btn btn-secondary" onClick={this.editingExpirationToggle}>{gettext('Cancel')}</button>
-                    </div>
-                  </div>
-                }
-              </FormGroup>
-            )}
-
-            {(isPro && sharedLinkInfo.permissions) && (
-              <FormGroup className="mb-0">
-                <dt className="text-secondary font-weight-normal">{gettext('Permission:')}</dt>
-                <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-                  <ShareLinkPermissionEditor
-                    isTextMode={true}
-                    isEditIconShow={isOpIconShown && !sharedLinkInfo.is_expired}
-                    currentPermission={currentPermission}
-                    permissionOptions={permissionOptions}
-                    onPermissionChanged={this.changePerm}
-                  />
-                </dd>
-              </FormGroup>
-            )}
-
-          </Form>
-          {(canSendShareLinkEmail && !this.state.isSendLinkShown && !this.state.isNoticeMessageShow) &&
-            <Button onClick={this.toggleSendLink} className='mr-2'>{gettext('Send')}</Button>
-          }
-          {this.state.isSendLinkShown &&
-          <SendLink
-            linkType='shareLink'
-            token={sharedLinkInfo.token}
-            toggleSendLink={this.toggleSendLink}
-            closeShareDialog={this.props.closeShareDialog}
-          />
-          }
-          {(!this.state.isSendLinkShown && !this.state.isNoticeMessageShow) &&
-            <Button onClick={this.onNoticeMessageToggle}>{gettext('Delete')}</Button>
-          }
-          {this.state.isNoticeMessageShow &&
-            <div className="alert alert-warning">
-              <h4 className="alert-heading">{gettext('Are you sure you want to delete the share link?')}</h4>
-              <p className="mb-4">{gettext('If the share link is deleted, no one will be able to access it any more.')}</p>
-              <button className="btn btn-primary" onClick={this.deleteShareLink}>{gettext('Delete')}</button>{' '}
-              <button className="btn btn-secondary" onClick={this.onNoticeMessageToggle}>{gettext('Cancel')}</button>
-            </div>
-          }
-        </div>
+        <LinkDetails
+          sharedLinkInfo={sharedLinkInfo}
+          permissionOptions={permissionOptions}
+          defaultExpireDays={this.defaultExpireDays}
+          showLinkDetails={this.showLinkDetails}
+          updateLink={this.updateLink}
+          deleteLink={this.deleteLink}
+          closeShareDialog={this.props.closeShareDialog}
+        />
       );
     } else {
       return (
@@ -590,7 +398,7 @@ class GenerateShareLink extends React.Component {
             <Button onClick={this.generateShareLink} className="mt-2">{gettext('Generate')}</Button>
           </Form>
           {shareLinks.length > 0 && (
-            <table>
+            <table className="table-hover">
               <thead>
                 <tr>
                   <th width="28%">{gettext('Link')}</th>
@@ -625,6 +433,21 @@ class LinkItem extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      isItemOpVisible: false
+    };
+  }
+
+  onMouseOver = () => {
+    this.setState({
+      isItemOpVisible: true
+    });
+  }
+
+  onMouseOut = () => {
+    this.setState({
+      isItemOpVisible: false
+    });
   }
 
   cutLink = (link) => {
@@ -632,16 +455,18 @@ class LinkItem extends React.Component {
     return link.slice(0, 9) + '...' + link.slice(length-5);
   }
 
-  viewDetails = () => {
+  viewDetails = (e) => {
+    e.preventDefault();
     this.props.showLinkDetails(this.props.item);
   }
 
   render() {
+    const { isItemOpVisible } = this.state;
     const { item, permissionOptions } = this.props;
     const { permissions, link, expire_date } = item;
     const currentPermission = Utils.getShareLinkPermissionStr(permissions);
     return (
-      <tr>
+      <tr onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
         <td>{this.cutLink(link)}</td>
         <td>
           {(isPro && permissions) && (
@@ -658,7 +483,7 @@ class LinkItem extends React.Component {
           {expire_date ? moment(expire_date).format('YYYY-MM-DD HH:mm') : '--'}
         </td>
         <td>
-          <button onClick={this.viewDetails} className="border-0 btn-sm text-gray">{gettext('Details')}</button>
+          <a href="#" role="button" onClick={this.viewDetails} className={isItemOpVisible ? '' : 'invisible'}>{gettext('Details')}</a>
         </td>
       </tr>
     );
@@ -671,6 +496,253 @@ LinkItem.propTypes = {
   showLinkDetails : PropTypes.func.isRequired
 };
 
-GenerateShareLink.propTypes = propTypes;
+class LinkDetails extends React.Component {
 
-export default GenerateShareLink;
+  constructor(props) {
+    super(props);
+    this.state = {
+      storedPasswordVisible: false,
+      isEditingExpiration: false,
+      isExpirationEditIconShow: false,
+      expType: 'by-days',
+      expireDays: this.props.defaultExpireDays,
+      expDate: null,
+      isOpIconShown: false,
+      isNoticeMessageShow: false,
+      isSendLinkShown: false
+    };
+  }
+
+  onCopySharedLink = () => {
+    const { sharedLinkInfo } = this.props;
+    copy(sharedLinkInfo.link);
+    toaster.success(gettext('Share link is copied to the clipboard.'));
+    this.props.closeShareDialog();
+  }
+
+  onCopyDownloadLink = () => {
+    const { sharedLinkInfo } = this.props;
+    copy(`${sharedLinkInfo.link}?dl=1`);
+    toaster.success(gettext('Direct download link is copied to the clipboard.'));
+    this.props.closeShareDialog();
+  }
+
+  toggleStoredPasswordVisible = () => {
+    this.setState({
+      storedPasswordVisible: !this.state.storedPasswordVisible
+    });
+  }
+
+  handleMouseOverExpirationEditIcon = () => {
+    this.setState({isExpirationEditIconShow: true});
+  }
+
+  handleMouseOutExpirationEditIcon = () => {
+    this.setState({isExpirationEditIconShow: false});
+  }
+
+  editingExpirationToggle = () => {
+    this.setState({isEditingExpiration: !this.state.isEditingExpiration});
+  }
+
+  setExpType = (e) => {
+    this.setState({
+      expType: e.target.value
+    });
+  }
+
+  onExpDateChanged = (value) => {
+    this.setState({
+      expDate: value
+    });
+  }
+
+  onExpireDaysChanged = (e) => {
+    let day = e.target.value.trim();
+    this.setState({expireDays: day});
+  }
+
+  updateExpiration = () => {
+    const { sharedLinkInfo } = this.props;
+    const { expType, expireDays, expDate } = this.state;
+    let expirationTime = '';
+    if (expType == 'by-days') {
+      expirationTime = moment().add(parseInt(expireDays), 'days').format();
+    } else {
+      expirationTime = expDate.format();
+    }
+    seafileAPI.updateShareLink(sharedLinkInfo.token, '', expirationTime).then((res) => {
+      this.setState({
+        isEditingExpiration: false
+      });
+      this.props.updateLink(new ShareLink(res.data));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  handleMouseOver = () => {
+    this.setState({isOpIconShown: true});
+  }
+
+  handleMouseOut = () => {
+    this.setState({isOpIconShown: false});
+  }
+
+  changePerm = (permission) => {
+    const { sharedLinkInfo } = this.props;
+    const { permissionDetails } = Utils.getShareLinkPermissionObject(permission);
+    seafileAPI.updateShareLink(sharedLinkInfo.token, JSON.stringify(permissionDetails)).then((res) => {
+      this.props.updateLink(new ShareLink(res.data));
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onNoticeMessageToggle = () => {
+    this.setState({isNoticeMessageShow: !this.state.isNoticeMessageShow});
+  }
+
+  toggleSendLink = () => {
+    this.setState({ isSendLinkShown: !this.state.isSendLinkShown });
+  }
+
+  render() {
+    const { sharedLinkInfo, permissionOptions } = this.props;
+    const { isOpIconShown } = this.state;
+    const currentPermission = Utils.getShareLinkPermissionStr(sharedLinkInfo.permissions);
+    return (
+      <div>
+        <button className="fa fa-arrow-left back-icon border-0 bg-transparent text-secondary p-0" onClick={this.props.showLinkDetails.bind(this, null)} title={gettext('Back')} aria-label={gettext('Back')}></button>
+        <dl>
+          <dt className="text-secondary font-weight-normal">{gettext('Link:')}</dt>
+          <dd>
+            <SharedLink
+              link={sharedLinkInfo.link}
+              linkExpired={sharedLinkInfo.is_expired}
+              copyLink={this.onCopySharedLink}
+            />
+          </dd>
+          {!sharedLinkInfo.is_dir && sharedLinkInfo.permissions.can_download && ( // just for file
+            <>
+              <dt className="text-secondary font-weight-normal">{gettext('Direct Download Link:')}</dt>
+              <dd>
+                <SharedLink
+                  link={`${sharedLinkInfo.link}?dl=1`}
+                  linkExpired={sharedLinkInfo.is_expired}
+                  copyLink={this.onCopyDownloadLink}
+                />
+              </dd>
+            </>
+          )}
+          {sharedLinkInfo.password && (
+            <>
+              <dt className="text-secondary font-weight-normal">{gettext('Password:')}</dt>
+              <dd className="d-flex">
+                <div className="d-flex align-items-center">
+                  <input id="stored-password" className="border-0 mr-1" type="text" value={this.state.storedPasswordVisible ? sharedLinkInfo.password : '****************************************'} readOnly={true} size={Math.max(sharedLinkInfo.password.length, 10)} />
+                  <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
+                </div>
+              </dd>
+            </>
+          )}
+          {sharedLinkInfo.expire_date && (
+            <>
+              <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
+              {!this.state.isEditingExpiration &&
+              <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
+                {moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
+                {this.state.isExpirationEditIconShow && (
+                  <a href="#"
+                    role="button"
+                    aria-label={gettext('Edit')}
+                    title={gettext('Edit')}
+                    className="fa fa-pencil-alt attr-action-icon"
+                    onClick={this.editingExpirationToggle}>
+                  </a>
+                )}
+              </dd>
+              }
+              {this.state.isEditingExpiration &&
+              <dd>
+                <div className="ml-4">
+                  <SetLinkExpiration
+                    minDays={shareLinkExpireDaysMin}
+                    maxDays={shareLinkExpireDaysMax}
+                    defaultDays={shareLinkExpireDaysDefault}
+                    expType={this.state.expType}
+                    setExpType={this.setExpType}
+                    expireDays={this.state.expireDays}
+                    onExpireDaysChanged={this.onExpireDaysChanged}
+                    expDate={this.state.expDate}
+                    onExpDateChanged={this.onExpDateChanged}
+                  />
+                  <div className={this.state.expType == 'by-days' ? 'mt-2' : 'mt-3'}>
+                    <button className="btn btn-primary mr-2" onClick={this.updateExpiration}>{gettext('Update')}</button>
+                    <button className="btn btn-secondary" onClick={this.editingExpirationToggle}>{gettext('Cancel')}</button>
+                  </div>
+                </div>
+              </dd>
+              }
+            </>
+          )}
+          {(isPro && sharedLinkInfo.permissions) && (
+            <>
+              <dt className="text-secondary font-weight-normal">{gettext('Permission:')}</dt>
+              <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+                <ShareLinkPermissionEditor
+                  isTextMode={true}
+                  isEditIconShow={isOpIconShown && !sharedLinkInfo.is_expired}
+                  currentPermission={currentPermission}
+                  permissionOptions={permissionOptions}
+                  onPermissionChanged={this.changePerm}
+                />
+              </dd>
+            </>
+          )}
+        </dl>
+        {(canSendShareLinkEmail && !this.state.isSendLinkShown && !this.state.isNoticeMessageShow) &&
+        <Button onClick={this.toggleSendLink} className='mr-2'>{gettext('Send')}</Button>
+        }
+        {this.state.isSendLinkShown &&
+          <SendLink
+            linkType='shareLink'
+            token={sharedLinkInfo.token}
+            toggleSendLink={this.toggleSendLink}
+            closeShareDialog={this.props.closeShareDialog}
+          />
+        }
+        {(!this.state.isSendLinkShown && !this.state.isNoticeMessageShow) &&
+        <Button onClick={this.onNoticeMessageToggle}>{gettext('Delete')}</Button>
+        }
+        {this.state.isNoticeMessageShow &&
+        <div className="alert alert-warning">
+          <h4 className="alert-heading">{gettext('Are you sure you want to delete the share link?')}</h4>
+          <p className="mb-4">{gettext('If the share link is deleted, no one will be able to access it any more.')}</p>
+          <button className="btn btn-primary" onClick={this.props.deleteLink}>{gettext('Delete')}</button>{' '}
+          <button className="btn btn-secondary" onClick={this.onNoticeMessageToggle}>{gettext('Cancel')}</button>
+        </div>
+        }
+      </div>
+    );
+  }
+}
+
+LinkDetails.propTypes = {
+  sharedLinkInfo: PropTypes.object.isRequired,
+  permissionOptions: PropTypes.array.isRequired,
+  defaultExpireDays: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  showLinkDetails: PropTypes.func.isRequired,
+  updateLink: PropTypes.func.isRequired,
+  deleteLink: PropTypes.func.isRequired,
+  closeShareDialog: PropTypes.func.isRequired
+};
+
+ShareLinkPanel.propTypes = propTypes;
+
+export default ShareLinkPanel;