delete share links (#5572)

* delete share links

* [share dialog] 'Share Link' panel: fixup & improvements for 'visit link details & delete link/links'

---------

Co-authored-by: llj <lingjun.li1@gmail.com>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import copy from 'copy-to-clipboard';
@@ -6,12 +6,14 @@ import toaster from '../toast';
 import { isPro, gettext } from '../../utils/constants';
 import ShareLinkPermissionEditor from '../../components/select-editor/share-link-permission-editor';
 import { Utils } from '../../utils/utils';
+import CommonOperationConfirmationDialog from '../../components/dialog/common-operation-confirmation-dialog';
 
 const propTypes = {
   item: PropTypes.object.isRequired,
   permissionOptions: PropTypes.array,
   showLinkDetails : PropTypes.func.isRequired,
-  toggleSelectLink: PropTypes.func.isRequired
+  toggleSelectLink: PropTypes.func.isRequired,
+  deleteLink: PropTypes.func.isRequired
 };
 
 class LinkItem extends React.Component {
@@ -19,7 +21,8 @@ class LinkItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isItemOpVisible: false
+      isItemOpVisible: false,
+      isDeleteShareLinkDialogOpen: false
     };
   }
 
@@ -40,6 +43,10 @@ class LinkItem extends React.Component {
     return link.slice(0, 9) + '...' + link.slice(length-5);
   }
 
+  toggleDeleteShareLinkDialog = () => {
+    this.setState({isDeleteShareLinkDialogOpen: !this.state.isDeleteShareLinkDialogOpen});
+  }
+
   copyLink = (e) => {
     e.preventDefault();
     const { item } = this.props;
@@ -57,36 +64,55 @@ class LinkItem extends React.Component {
     this.props.toggleSelectLink(item, e.target.checked);
   }
 
+  deleteLink = () => {
+    const { item } = this.props;
+    this.props.deleteLink(item.token);
+  }
+
   render() {
     const { isItemOpVisible } = this.state;
     const { item, permissionOptions } = this.props;
     const { isSelected = false, permissions, link, expire_date } = item;
     const currentPermission = Utils.getShareLinkPermissionStr(permissions);
     return (
-      <tr onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={isSelected ? 'tr-highlight' : ''}>
-        <td className="text-center">
-          <input type="checkbox" checked={isSelected} onChange={this.toggleSelectLink} className="vam" />
-        </td>
-        <td>{this.cutLink(link)}</td>
-        <td>
-          {(isPro && permissions) && (
-            <ShareLinkPermissionEditor
-              isTextMode={true}
-              isEditIconShow={false}
-              currentPermission={currentPermission}
-              permissionOptions={permissionOptions}
-              onPermissionChanged={() => {}}
-            />
-          )}
-        </td>
-        <td>
-          {expire_date ? moment(expire_date).format('YYYY-MM-DD HH:mm') : '--'}
-        </td>
-        <td>
-          <a href="#" role="button" onClick={this.copyLink} className={`sf2-icon-copy action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Copy')} aria-label={gettext('Copy')}></a>
-          <a href="#" role="button" onClick={this.viewDetails} className={`fas fa-info-circle font-weight-bold action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Details')} aria-label={gettext('Details')}></a>
-        </td>
-      </tr>
+      <Fragment>
+        <tr onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={isSelected ? 'tr-highlight' : ''}>
+          <td className="text-center">
+            <input type="checkbox" checked={isSelected} onChange={this.toggleSelectLink} className="vam" />
+          </td>
+          <td>
+            <a href="#" onClick={this.viewDetails} className="text-inherit">{this.cutLink(link)}</a>
+          </td>
+          <td>
+            {(isPro && permissions) && (
+              <ShareLinkPermissionEditor
+                isTextMode={true}
+                isEditIconShow={false}
+                currentPermission={currentPermission}
+                permissionOptions={permissionOptions}
+                onPermissionChanged={() => {}}
+              />
+            )}
+          </td>
+          <td>
+            {expire_date ? moment(expire_date).format('YYYY-MM-DD HH:mm') : '--'}
+          </td>
+          <td>
+            <a href="#" role="button" onClick={this.copyLink} className={`sf2-icon-copy action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Copy')} aria-label={gettext('Copy')}></a>
+            <a href="#" role="button" onClick={this.viewDetails} className={`fa fa-pencil-alt attr-action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Edit')} aria-label={gettext('Edit')}></a>
+            <a href="#" role="button" onClick={this.toggleDeleteShareLinkDialog} className={`sf2-icon-delete action-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Delete')} aria-label={gettext('Delete')}></a>
+          </td>
+        </tr>
+        {this.state.isDeleteShareLinkDialogOpen && (
+          <CommonOperationConfirmationDialog
+            title={gettext('Delete share link')}
+            message={gettext('Are you sure you want to delete the share link?')}
+            executeOperation={this.deleteLink}
+            confirmBtnText={gettext('Delete')}
+            toggleDialog={this.toggleDeleteShareLinkDialog}
+          />
+        )}
+      </Fragment>
     );
   }
 }