update dir shared item api (#4648)

* update dir shared item api

return contact_email and avatar_url field

* [share dialog] share to user: show avatar & user details popover for shared user

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

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

@@ -9,12 +9,15 @@ import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import '../../css/invitations.css';
 
+import '../../css/share-to-user.css';
+
 class UserItem extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isOperationShow: false
+      isOperationShow: false,
+      isUserDetailsPopoverOpen: false
     };
   }
   
@@ -26,11 +29,19 @@ class UserItem extends React.Component {
     this.setState({isOperationShow: false});
   }
 
+  userAvatarOnMouseEnter = () => {
+    this.setState({isUserDetailsPopoverOpen: true});
+  }
+
+  userAvatarOnMouseLeave = () => {
+    this.setState({isUserDetailsPopoverOpen: false});
+  }
+
   deleteShareItem = () => {
     let item = this.props.item;
     this.props.deleteShareItem(item.user_info.name);
   }
-  
+
   onChangeUserPermission = (permission) => {
     let item = this.props.item;
     this.props.onChangeUserPermission(item, permission);
@@ -39,9 +50,33 @@ class UserItem extends React.Component {
   render() {
     let item = this.props.item;
     let currentPermission = item.is_admin ? 'admin' : item.permission;
+    const { isUserDetailsPopoverOpen } = this.state;
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="name">{item.user_info.nickname}</td>
+        <td className="name">
+          <div className="position-relative">
+            <img src={item.user_info.avatar_url}
+              width="24" alt={item.user_info.nickname}
+              className="rounded-circle mr-2 cursor-pointer"
+              onMouseEnter={this.userAvatarOnMouseEnter}
+              onMouseLeave={this.userAvatarOnMouseLeave} />
+            <span>{item.user_info.nickname}</span>
+            {isUserDetailsPopoverOpen && (
+              <div className="user-details-popover p-4 position-absolute w-100 mt-1">
+                <div className="user-details-main pb-3">
+                  <img src={item.user_info.avatar_url} width="40"
+                    alt={item.user_info.nickname}
+                    className="rounded-circle mr-2" />
+                  <span className="user-details-name">{item.user_info.nickname}</span>
+                </div>
+                <dl className="m-0 mt-3 d-flex">
+                  <dt className="m-0 mr-3">{gettext('Email')}</dt>
+                  <dd className="m-0">{item.user_info.contact_email}</dd>
+                </dl>
+              </div>
+            )}
+          </div>
+        </td>
         <td>
           <SharePermissionEditor 
             isTextMode={true}

frontend/src/css/share-to-user.css

@@ -0,0 +1,15 @@
+.user-details-popover {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  box-shadow: 0 0 14px rgba(0, 0, 0, 0.14);
+  background: #fff;
+  z-index: 1000;
+  left: 2px;
+}
+.user-details-main {
+  border-bottom: 1px solid #eee;
+}
+.user-details-name {
+  font-size: 1rem;
+  font-weight: 500;
+}

seahub/api2/endpoints/dir_shared_items.py

@@ -21,7 +21,8 @@ from seahub.api2.throttling import UserRateThrottle
 from seahub.api2.utils import api_error
 from seahub.api2.endpoints.utils import is_org_user
 
-from seahub.base.templatetags.seahub_tags import email2nickname
+from seahub.base.templatetags.seahub_tags import email2nickname, \
+        email2contact_email
 from seahub.base.accounts import User
 from seahub.group.utils import is_group_member
 from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
@@ -35,6 +36,7 @@ from seahub.share.signals import share_repo_to_user_successful, share_repo_to_gr
 from seahub.constants import PERMISSION_READ, PERMISSION_READ_WRITE, \
         PERMISSION_ADMIN
 from seahub.utils.repo import get_available_repo_perms
+from seahub.avatar.templatetags.avatar_tags import api_avatar_url
 
 
 logger = logging.getLogger(__name__)
@@ -73,11 +75,14 @@ class DirSharedItemsEndpoint(APIView):
         admin_users = ExtraSharePermission.objects.get_admin_users_by_repo(repo_id)
         ret = []
         for item in share_items:
+            avatar_url, is_default, date_uploaded = api_avatar_url(item.user, 72)
             ret.append({
                 "share_type": "user",
                 "user_info": {
                     "name": item.user,
                     "nickname": email2nickname(item.user),
+                    "contact_email": email2contact_email(item.user),
+                    "avatar_url": avatar_url,
                 },
                 "permission": item.perm,
                 "is_admin": item.user in admin_users
@@ -378,11 +383,14 @@ class DirSharedItemsEndpoint(APIView):
 
                         share_dir_to_user(repo, path, repo_owner, username, to_user, permission, None)
 
+                    avatar_url, is_default, date_uploaded = api_avatar_url(to_user, 72)
                     result['success'].append({
                         "share_type": "user",
                         "user_info": {
                             "name": to_user,
                             "nickname": email2nickname(to_user),
+                            "contact_email": email2contact_email(to_user),
+                            "avatar_url": avatar_url,
                         },
                         "permission": PERMISSION_READ_WRITE if permission == PERMISSION_ADMIN else permission,
                         "is_admin": permission == PERMISSION_ADMIN