user-select-translation (#2956)

frontend/package-lock.json

@@ -13,12 +13,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.1.3",
+      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.3.tgz",
-      "integrity": "sha512-RpPOVfK+yatXyn8n4PB1NW6k9qjinrXrRR8ugBN8fD6hCy5RXI6PSbVqpOJBO9oSaY7Nom4ohj35feb0UR9hSA==",
+      "integrity": "sha512-2tACZ80Wg09UnPg5uGAOUvvInaqLk3l/IAhQzlxLQOIXacr6bMsra5SH6AWw/hIDRCSbCdHP2KzSOD+cT7TzMQ==",
       "requires": {
         "esutils": "^2.0.2",
-        "lodash": "^4.17.10",
+        "lodash": "^4.17.11",
         "to-fast-properties": "^2.0.0"
       },
       "dependencies": {
@@ -640,7 +640,7 @@
     },
     "axios": {
       "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
         "follow-redirects": "^1.3.0",
@@ -1025,21 +1025,23 @@
       "integrity": "sha1-r+3IU70/jcNUjqZx++adA8wsF2c="
     },
     "babel-plugin-macros": {
-      "version": "2.4.2",
+      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.5.0.tgz",
-      "integrity": "sha512-NBVpEWN4OQ/bHnu1fyDaAaTPAjnhXCEPqr1RwqxrU7b6tZ2hypp+zX4hlNfmVGfClD5c3Sl6Hfj5TJNF5VG5aA==",
+      "integrity": "sha512-BWw0lD0kVZAXRD3Od1kMrdmfudqzDzYv2qrN3l2ISR1HVp1EgLKfbOrYV9xmY5k3qx3RIu5uPAUZZZHpo0o5Iw==",
       "requires": {
         "cosmiconfig": "^5.0.5",
         "resolve": "^1.8.1"
       },
       "dependencies": {
         "cosmiconfig": {
-          "version": "5.0.6",
+          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.0.6.tgz",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.1.0.tgz",
-          "integrity": "sha512-6DWfizHriCrFWURP1/qyhsiFvYdlJzbCzmtFWh744+KyWsJo5+kPzUZZaMRSSItoYc0pxFX7gEO7ZC1/gN/7AQ==",
+          "integrity": "sha512-kCNPvthka8gvLtzAxQXvWo4FxqRB+ftRZyPZNuab5ngvM9Y7yw7hbEysglptLgpkGX9nAOKTBVkHUAe8xtYR6Q==",
           "requires": {
+            "import-fresh": "^2.0.0",
             "is-directory": "^0.3.1",
             "js-yaml": "^3.9.0",
+            "lodash.get": "^4.4.2",
             "parse-json": "^4.0.0"
           }
         },
@@ -1049,9 +1051,9 @@
           "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
         },
         "js-yaml": {
-          "version": "3.12.0",
+          "version": "3.12.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.1.tgz",
-          "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
+          "integrity": "sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -1066,12 +1068,17 @@
             "json-parse-better-errors": "^1.0.1"
           }
         },
+        "path-parse": {
+          "version": "1.0.6",
+          "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+          "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+        },
         "resolve": {
-          "version": "1.8.1",
+          "version": "1.10.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
-          "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==",
+          "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==",
           "requires": {
-            "path-parse": "^1.0.5"
+            "path-parse": "^1.0.6"
           }
         }
       }
@@ -2201,6 +2208,21 @@
       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
       "dev": true
     },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "requires": {
+        "callsites": "^2.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+        }
+      }
+    },
     "caller-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
@@ -3115,9 +3137,9 @@
       }
     },
     "csstype": {
-      "version": "2.5.7",
+      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
-      "integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw=="
+      "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -6116,6 +6138,30 @@
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
       "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
     },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      },
+      "dependencies": {
+        "caller-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+          "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+          "requires": {
+            "caller-callsite": "^2.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+        }
+      }
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -7347,6 +7393,11 @@
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
       "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -10071,17 +10122,24 @@
       }
     },
     "react-select": {
-      "version": "2.1.1",
+      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.1.tgz",
-      "integrity": "sha512-ukie2LJStNfJEJ7wtqA+crAfzYpkpPr86urvmJGisECwsWJob9boCM4zjmKCi5QR7G8uY9+v7ZoliJpeCz/4xw==",
+      "integrity": "sha512-je1cVAFsyQrGxkruQnNCuwo3+P0+1dyq7M4/gTlSwhO4ptPeTjf0eNrvCJ9iurVyorrnI88zgx2/yxrr2/oLLQ==",
       "requires": {
         "classnames": "^2.2.5",
         "emotion": "^9.1.2",
-        "memoize-one": "^4.0.0",
+        "memoize-one": "^5.0.0",
         "prop-types": "^15.6.0",
         "raf": "^3.4.0",
         "react-input-autosize": "^2.2.1",
         "react-transition-group": "^2.2.1"
+      },
+      "dependencies": {
+        "memoize-one": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.0.tgz",
+          "integrity": "sha512-7g0+ejkOaI9w5x6LvQwmj68kUj6rxROywPSCqmclG/HBacmFnZqhVscQ8kovkn9FBCNJmOz6SY42+jnvZzDWdw=="
+        }
       }
     },
     "react-transform-catch-errors": {
@@ -11525,9 +11583,9 @@
       }
     },
     "stylis": {
-      "version": "3.5.3",
+      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-      "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ=="
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
     },
     "stylis-rule-sheet": {
       "version": "0.0.10",

frontend/package.json

@@ -32,7 +32,7 @@
     "react-image-lightbox": "^5.1.0",
     "react-moment": "^0.7.9",
     "react-responsive": "^6.1.1",
-    "react-select": "^2.1.1",
+    "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
     "seafile-js": "^0.2.63",
     "socket.io-client": "^2.2.0",

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

@@ -89,6 +89,12 @@ const propTypes = {
   repoID: PropTypes.string.isRequired
 };
 
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
+  );
+};
+
 class ShareToGroup extends React.Component {
 
   constructor(props) {
@@ -267,6 +273,7 @@ class ShareToGroup extends React.Component {
                   maxMenuHeight={200}
                   inputId={'react-select-2-input'}
                   value={this.state.selectedOption}
+                  components={{ NoOptionsMessage }}
                 />
               </td>
               <td>

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

@@ -89,6 +89,12 @@ const propTypes = {
   repoID: PropTypes.string.isRequired
 };
 
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('User not found')}</div>
+  );
+};
+
 class ShareToUser extends React.Component {
 
   constructor(props) {
@@ -284,6 +290,7 @@ class ShareToUser extends React.Component {
                   loadOptions={this.loadOptions}
                   onChange={this.handleSelectChange}
                   value={this.state.selectedOption}
+                  components={{ NoOptionsMessage }}
                   maxMenuHeight={200}
                   isMulti 
                   isFocused

frontend/src/components/user-select.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/lib/Async';
 import { seafileAPI } from '../utils/seafile-api.js';
+import gettext from '../utils/constants';
 
 const propTypes = {
   placeholder: PropTypes.string.isRequired,
@@ -10,6 +11,12 @@ const propTypes = {
   className: PropTypes.string.isRequired,
 };
 
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('No Options.')}</div>
+  );
+};
+
 class UserSelect extends React.Component {
 
   constructor(props) {
@@ -53,6 +60,7 @@ class UserSelect extends React.Component {
       <AsyncSelect
         isClearable
         classNamePrefix
+        components={{ NoOptionsMessage }}
         isMulti={this.props.isMulti}
         loadOptions={this.loadOptions}
         onChange={this.handleSelectChange}

frontend/src/css/layout.css

@@ -129,6 +129,10 @@
   border-radius: 2px;
 }
 
+.cur-view-content .permission-editor-select .permission-editor__control {
+  height: 24px;
+  min-height: 24px;
+}
 .cur-view-detail {
   flex: 0 0 20rem;
   display: flex;

frontend/src/css/select-editor.css

@@ -11,10 +11,6 @@
   padding-top: 2px;
   padding-bottom: 2px;
 }
-.permission-editor-select .permission-editor__control {
-  height: 24px;
-  min-height: 24px;
-}
 .permission-editor .permission-editor__control .permission-editor-explanation {
   display: none;
 }