['share' dialog, group 'manage members' dialog] fixup for the 'select (#7949)

users' icon & the input before it; improved the code

- highlight the 'select user' icon in the 'share' dialog when hover on
  it
- fixed the content width of the 'search users' inputs in the 'share'
  dialog & the group 'manage members' dialog
- improved code: added a common component for the 'select user' icon

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { gettext, isPro, cloudMode, isOrgContext } from '../../utils/constants';
+import { gettext, isPro } from '../../utils/constants';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils, isMobile } from '../../utils/utils';
@@ -11,6 +11,7 @@ import SharePermissionEditor from '../select-editor/share-permission-editor';
 import DepartmentDetailDialog from './department-detail-dialog';
 import EmptyTip from '../../components/empty-tip';
 import Loading from '../../components/loading';
+import SelectUsersIcon from '../select-members-to-share-with';
 
 import '../../css/invitations.css';
 import '../../css/share-to-user.css';
@@ -247,7 +248,6 @@ class ShareToUser extends React.Component {
       sharedItems: [],
       isWiki: this.props.repoType === 'wiki',
       tmpUserList: [],
-      enableSelectMembersFromDept: false,
       isShowDepartmentDetailDialog: false,
       isLoading: true
     };
@@ -278,7 +278,6 @@ class ShareToUser extends React.Component {
   componentDidMount() {
     let path = this.props.itemPath;
     let repoID = this.props.repoID;
-    this.getPermForSelectMembersFromDept();
     seafileAPI.listSharedItems(repoID, path, 'user').then((res) => {
       if (res.data.length !== 0) {
         let tmpUserList = res.data.map(item => {
@@ -510,34 +509,8 @@ class ShareToUser extends React.Component {
     this.toggleDepartmentDetailDialog();
   };
 
-  getPermForSelectMembersFromDept = () => {
-    if (window.app.config.lang !== 'zh-cn') {
-      this.setState({
-        enableSelectMembersFromDept: false
-      });
-      return;
-    }
-
-    if (cloudMode && !isOrgContext) {
-      this.setState({
-        enableSelectMembersFromDept: false
-      });
-      return;
-    }
-
-    seafileAPI.listAddressBookDepartments().then((res) => {
-      this.setState({
-        enableSelectMembersFromDept: res.data.departments.length > 0
-      });
-    }).catch(error => {
-      this.setState({
-        enableSelectMembersFromDept: false
-      });
-    });
-  };
-
   render() {
-    const { sharedItems, enableSelectMembersFromDept } = this.state;
+    const { sharedItems } = this.state;
     let thead = (
       <thead>
         <tr>
@@ -568,17 +541,12 @@ class ShareToUser extends React.Component {
                 <div className='add-members'>
                   <UserSelect
                     isMulti={true}
-                    className={classnames('share-to-user-select', { 'user-select-right-btn': enableSelectMembersFromDept })}
+                    className="share-to-user-select"
                     placeholder={gettext('Search users...')}
                     onSelectChange={this.handleSelectChange}
                     selectedUsers={this.state.selectedUsers}
                   />
-                  {enableSelectMembersFromDept &&
-                    <span
-                      onClick={this.toggleDepartmentDetailDialog}
-                      className="sf3-font sf3-font-invite-visitors toggle-detail-btn">
-                    </span>
-                  }
+                  <SelectUsersIcon onClick={this.toggleDepartmentDetailDialog} />
                 </div>
               </td>
               <td>

frontend/src/components/list-and-add-group-members.js

@@ -2,12 +2,13 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, InputGroup, InputGroupText, Input } from 'reactstrap';
 import { Utils } from '../utils/utils';
-import { gettext, cloudMode, isOrgContext } from '../utils/constants';
+import { gettext } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
 import UserSelect from './user-select';
 import toaster from './toast';
 import Loading from './loading';
 import GroupMembers from './group-members';
+import SelectUsersIcon from './select-members-to-share-with';
 
 const propTypes = {
   toggleManageMembersDialog: PropTypes.func,
@@ -21,7 +22,6 @@ class ManageMembersDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      enableSelectMembersFromDept: false,
       isLoading: true, // first loading
       isLoadingMore: false,
       groupMembers: [],
@@ -38,7 +38,6 @@ class ManageMembersDialog extends React.Component {
   }
 
   componentDidMount() {
-    this.getPermForSelectMembersFromDept();
     this.listGroupMembers(this.state.page);
   }
 
@@ -162,40 +161,8 @@ class ManageMembersDialog extends React.Component {
     });
   };
 
-  onClickDeptBtn = () => {
-    this.props.toggleDepartmentDetailDialog();
-  };
-
-  getPermForSelectMembersFromDept = () => {
-    if (window.app.config.lang !== 'zh-cn') {
-      this.setState({
-        enableSelectMembersFromDept: false
-      });
-      return;
-    }
-
-    if (cloudMode && !isOrgContext) {
-      this.setState({
-        enableSelectMembersFromDept: false
-      });
-      return;
-    }
-
-    seafileAPI.listAddressBookDepartments().then((res) => {
-      this.setState({
-        enableSelectMembersFromDept: res.data.departments.length > 0
-      });
-    }).catch(error => {
-      this.setState({
-        enableSelectMembersFromDept: false
-      });
-    });
-  };
-
-
   render() {
     const {
-      enableSelectMembersFromDept,
       isLoading, hasNextPage, groupMembers,
       keyword, membersFound,
       searchActive
@@ -205,16 +172,16 @@ class ManageMembersDialog extends React.Component {
       <Fragment>
         <p className="mb-2">{gettext('Add group member')}</p>
         <div className='add-members'>
-          <UserSelect
-            placeholder={gettext('Search users')}
-            onSelectChange={this.onSelectChange}
-            selectedUsers={this.state.selectedUsers}
-            isMulti={true}
-            className="add-members-select"
-          />
-          {enableSelectMembersFromDept &&
-            <span onClick={this.onClickDeptBtn} className="sf3-font sf3-font-invite-visitors toggle-detail-btn"></span>
-          }
+          <div className="position-relative">
+            <UserSelect
+              placeholder={gettext('Search users')}
+              onSelectChange={this.onSelectChange}
+              selectedUsers={this.state.selectedUsers}
+              isMulti={true}
+              className="add-members-select"
+            />
+            <SelectUsersIcon onClick={this.props.toggleDepartmentDetailDialog} />
+          </div>
           {this.state.selectedUsers.length > 0 ?
             <Button color="primary" onClick={this.addGroupMember}>{gettext('Submit')}</Button> :
             <Button color="primary" disabled>{gettext('Submit')}</Button>

frontend/src/components/select-members-to-share-with.js

@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { cloudMode, isOrgContext } from '../utils/constants';
+import { seafileAPI } from '../utils/seafile-api';
+
+import '../css/select-users-icon.css';
+
+const propTypes = {
+  onClick: PropTypes.func
+};
+
+class SelectUsersIcon extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      enableSelectMembersFromDept: false
+    };
+  }
+
+  componentDidMount() {
+    this.getPermForSelectMembersFromDept();
+  }
+
+  getPermForSelectMembersFromDept = () => {
+    if (window.app.config.lang !== 'zh-cn') {
+      this.setState({
+        enableSelectMembersFromDept: false
+      });
+      return;
+    }
+
+    if (cloudMode && !isOrgContext) {
+      this.setState({
+        enableSelectMembersFromDept: false
+      });
+      return;
+    }
+
+    seafileAPI.listAddressBookDepartments().then((res) => {
+      this.setState({
+        enableSelectMembersFromDept: res.data.departments.length > 0
+      });
+    }).catch(error => {
+      this.setState({
+        enableSelectMembersFromDept: false
+      });
+    });
+  };
+
+  render() {
+    const { enableSelectMembersFromDept } = this.state;
+    return (
+      <>
+        {enableSelectMembersFromDept &&
+          <i role="button" onClick={this.props.onClick} className="sf3-font sf3-font-invite-visitors toggle-detail-btn"></i>
+        }
+      </>
+    );
+  }
+}
+
+SelectUsersIcon.propTypes = propTypes;
+
+export default SelectUsersIcon;

frontend/src/css/manage-members-dialog.css

@@ -33,21 +33,6 @@
   margin-top: 10px;
 }
 
-.group-manage-members-dialog .add-members .toggle-detail-btn {
-  position: absolute;
-  top: 6px;
-  right: 90px;
-  border-left: 1px solid #ccc;
-  padding-left: 9px;
-  font-size: 18px;
-  cursor: pointer;
-  color: #999;
-}
-
-.group-manage-members-dialog .add-members .toggle-detail-btn:hover {
-  color: #666;
-}
-
 .group-manage-members-dialog .search-group-members {
   color: #666;
   font-size: 14px;

frontend/src/css/select-users-icon.css

@@ -0,0 +1,19 @@
+.add-members .toggle-detail-btn {
+  position: absolute;
+  top: 6px;
+  right: 12px;
+  border-left: 1px solid #ccc;
+  padding-left: 9px;
+  font-size: 18px;
+  cursor: pointer;
+  color: #999;
+}
+
+.add-members .toggle-detail-btn:hover {
+  color: #666;
+}
+
+/* for the input before .toggle-detail-btn */
+.selected-user-item-container:has(+ .toggle-detail-btn) {
+  padding-right: 40px;
+}

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

@@ -28,22 +28,3 @@
   justify-content: space-between;
   position: relative;
 }
-
-.share-link-container .add-members .share-to-user-select {
-  max-width: calc(100% - 10px);
-}
-
-.share-link-container .add-members .toggle-detail-btn {
-  position: absolute;
-  top: 6px;
-  right: 20px;
-  border-left: 1px solid #ccc;
-  padding-left: 9px;
-  font-size: 18px;
-  color: #999;
-  cursor: pointer;
-}
-
-.user-select.user-select-right-btn .true__value-container {
-  padding-right: 40px;
-}