Change share link dialog UI (#7881)

* 01 Add qr-code in share link item

* 02 Show access scope and password in share list

* 03 optimise style

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

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import copy from 'copy-to-clipboard';
 import classnames from 'classnames';
+import { QRCodeSVG } from 'qrcode.react';
+import { Popover, PopoverBody } from 'reactstrap';
 import toaster from '../toast';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -22,10 +24,31 @@ class LinkItem extends React.Component {
     this.state = {
       isHighlighted: false,
       isItemOpVisible: false,
-      isDeleteShareLinkDialogOpen: false
+      isDeleteShareLinkDialogOpen: false,
+      isQRCodePopoverOpen: false
     };
+    this.qrCodeBtn = null;
+    this.popoverContainerRef = React.createRef();
   }
 
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  handleClickOutside = (event) => {
+    if (this.state.isQRCodePopoverOpen && this.popoverContainerRef.current &&
+        !this.popoverContainerRef.current.contains(event.target) &&
+        this.qrCodeBtn && !this.qrCodeBtn.contains(event.target)) {
+      this.setState({
+        isQRCodePopoverOpen: false
+      });
+    }
+  };
+
   onMouseOver = () => {
     this.setState({
       isHighlighted: true,
@@ -81,8 +104,33 @@ class LinkItem extends React.Component {
     this.props.deleteLink(item.token);
   };
 
+  toggleQRCodePopover = () => {
+    this.setState({
+      isQRCodePopoverOpen: !this.state.isQRCodePopoverOpen
+    });
+  };
+
+  onQRCodeIconClicked = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.toggleQRCodePopover();
+  };
+
+  translateScope = (scope) => {
+    if (scope === 'all_users') {
+      return gettext('Anyone with the link');
+    }
+    if (scope === 'specific_users') {
+      return gettext('Specific users in the team');
+    }
+    if (scope === 'specific_emails') {
+      return gettext('Specific people with email address');
+    }
+    return '';
+  };
+
   render() {
-    const { isHighlighted, isItemOpVisible } = this.state;
+    const { isHighlighted, isItemOpVisible, isQRCodePopoverOpen } = this.state;
     const { item } = this.props;
     const { isSelected = false, permissions, link, expire_date } = item;
     const currentPermission = Utils.getShareLinkPermissionStr(permissions);
@@ -113,12 +161,25 @@ class LinkItem extends React.Component {
           <td>
             {permissions && Utils.getShareLinkPermissionObject(currentPermission).text}
           </td>
+          <td>{this.translateScope(item.user_scope)}</td>
           <td>
             {expire_date ? dayjs(expire_date).format('YYYY-MM-DD HH:mm') : '--'}
           </td>
+          <td>{item.password && <i className='sf2-icon-tick'></i>}</td>
           <td>
             <a href="#" role="button" onClick={this.onCopyIconClicked} className={`sf3-font sf3-font-copy1 op-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Copy')} aria-label={gettext('Copy')}></a>
             <a href="#" role="button" onClick={this.onDeleteIconClicked} className={`sf3-font-delete1 sf3-font op-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('Delete')} aria-label={gettext('Delete')}></a>
+            <a href="#" role="button" ref={ref => this.qrCodeBtn = ref} onClick={this.onQRCodeIconClicked} className={`sf3-font sf3-font-qr-code op-icon ${isItemOpVisible ? '' : 'invisible'}`} title={gettext('QR Code')} aria-label={gettext('QR Code')}></a>
+            {this.qrCodeBtn && (
+              <div ref={this.popoverContainerRef}>
+                <Popover className="link-item-qrcode-popover" placement="bottom" isOpen={isQRCodePopoverOpen} target={this.qrCodeBtn}>
+                  <PopoverBody>
+                    <QRCodeSVG value={link} size={128} />
+                    <p className="link-item-qrcode-tip">{gettext('Scan the QR code to view the shared content directly')}</p>
+                  </PopoverBody>
+                </Popover>
+              </div>
+            )}
           </td>
         </tr>
         {this.state.isDeleteShareLinkDialogOpen && (

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

@@ -79,12 +79,14 @@ class LinkList extends React.Component {
             <table className="table-place-header">
               <thead>
                 <tr>
-                  <th width="5%" className="text-center">
+                  <th width="3%" className="text-center">
                     <input type="checkbox" checked={isAllLinksSelected} className="vam" onChange={this.toggleSelectAllLinks} />
                   </th>
-                  <th width="26%">{gettext('Link')}</th>
+                  <th width="18%">{gettext('Link')}</th>
-                  <th width="30%">{gettext('Permission')}</th>
+                  <th width="25%">{gettext('Permission')}</th>
-                  <th width="25%">{gettext('Expiration')}</th>
+                  <th width="20%">{gettext('Access scope')}</th>
+                  <th width="20%">{gettext('Expiration')}</th>
+                  <th width="11%">{gettext('Password')}</th>
                   <th width="14%"></th>
                 </tr>
               </thead>
@@ -93,10 +95,12 @@ class LinkList extends React.Component {
               <table className="table-real-content table-thead-hidden">
                 <thead>
                   <tr>
-                    <th width="5%" className="text-center"></th>
+                    <th width="3%" className="text-center"></th>
-                    <th width="26%">{gettext('Link')}</th>
+                    <th width="18%">{gettext('Link')}</th>
-                    <th width="30%">{gettext('Permission')}</th>
+                    <th width="25%">{gettext('Permission')}</th>
-                    <th width="25%">{gettext('Expiration')}</th>
+                    <th width="20%">{gettext('Access scope')}</th>
+                    <th width="20%">{gettext('Expiration')}</th>
+                    <th width="11%">{gettext('Password')}</th>
                     <th width="14%"></th>
                   </tr>
                 </thead>

frontend/src/css/share-link-dialog.css

@@ -6,7 +6,7 @@
 }
 
 .share-dialog-content .share-dialog-side {
-  flex-basis: 22%;
+  flex-basis: 18%;
   padding: 1rem;
   border-bottom: 1px solid #eee;
 }
@@ -69,7 +69,7 @@
 
 .share-dialog-content .share-dialog-main {
   display: flex;
-  flex-basis: 78%;
+  flex-basis: 82%;
   padding: 1rem;
 }
 
@@ -210,3 +210,11 @@ input.expire-input {
   max-height: 350px;
   overflow-y: scroll;
 }
+
+.link-item-qrcode-popover .link-item-qrcode-tip {
+  margin: 0;
+  margin-top: 0.25rem;
+  text-align: center;
+  max-width: 128px;
+  color: #666;
+}