['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/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;