Add ProtectedFields dialog and enhance Permissions dialogs (#1478)

* chip and multiselect dense variant

* autocomplete component

* popover refactor, ContextProxy -> portal

* add intersection observer component

* suggestions for autocomplete

* do not show security dialog in edit modal

* table will ignore keys when security modal opened

* add autocomplete for ACL

* add protected fields dialog component

* permissioons dialog refactor

* add new dialogs to databroowser toolbar

* protected fields dialog example

* removed comments

* fix floating menus - show on top of toolbar

* add whitespaces in toolbar menu

* use menuitem

* trailing newlines

* update examples

* adds scroll hint

* handle case when no fields to protect

Co-authored-by: Antonio Davi Macedo Coelho de Castro <[email protected]>

Author: BufferUnderflower

src/components/ACLEditor/ACLEditor.react.js

@@ -10,18 +10,58 @@ import PermissionsDialog from 'components/PermissionsDialog/PermissionsDialog.re
 import React             from 'react';
 
 function validateEntry(text) {
-  let userQuery = Parse.Query.or(
-    new Parse.Query(Parse.User).equalTo('username', text),
-    new Parse.Query(Parse.User).equalTo('objectId', text)
-  );
-  let roleQuery = new Parse.Query(Parse.Role).equalTo('name', text);
-  return Promise.all([userQuery.find({ useMasterKey: true }), roleQuery.find({ useMasterKey: true })]).then(([user, role]) => {
+
+  let userQuery;
+  let roleQuery;
+
+  if (text === '*') {
+    return Promise.resolve({ entry: '*', type: 'public' });
+  }
+
+  if (text.startsWith('user:')) {
+    // no need to query roles
+    roleQuery = {
+      find: () => Promise.resolve([])
+    };
+
+    let user = text.substring(5);
+    userQuery = new Parse.Query.or(
+      new Parse.Query(Parse.User).equalTo('username', user),
+      new Parse.Query(Parse.User).equalTo('objectId', user)
+    );
+  } else if (text.startsWith('role:')) {
+    // no need to query users
+    userQuery = {
+      find: () => Promise.resolve([])
+    };
+    let role = text.substring(5);
+    roleQuery = new Parse.Query.or(
+      new Parse.Query(Parse.Role).equalTo('name', role),
+      new Parse.Query(Parse.Role).equalTo('objectId', role)
+    );
+  } else {
+    // query both
+    userQuery = Parse.Query.or(
+      new Parse.Query(Parse.User).equalTo('username', text),
+      new Parse.Query(Parse.User).equalTo('objectId', text)
+    );
+
+    roleQuery = Parse.Query.or(
+      new Parse.Query(Parse.Role).equalTo('name', text),
+      new Parse.Query(Parse.Role).equalTo('objectId', text)
+    );
+  }
+
+  return Promise.all([
+    userQuery.find({ useMasterKey: true }),
+    roleQuery.find({ useMasterKey: true })
+  ]).then(([user, role]) => {
     if (user.length > 0) {
-      return { user: user[0] };
+      return { entry: user[0], type: 'user' };
     } else if (role.length > 0) {
-      return { role: role[0] };
+      return { entry: role[0], type: 'role' };
     } else {
-      throw new Error();
+      return Promise.reject();
     }
   });
 }

src/components/Autocomplete/Autocomplete.example.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import React        from 'react';
+import Autocomplete from 'components/Autocomplete/Autocomplete.react';
+
+export const component = Autocomplete;
+
+class AutocompleteDemo extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      suggestions: ['aaa', 'abc', 'xxx', 'xyz']
+    };
+
+    this.onSubmit = input => console.log('onSubmit: ' + input);
+    this.onUserInput = input => {
+      console.log(`input: ${input}`);
+    };
+    this.buildLabel = input =>
+      input.length > 0
+        ? `You've typed ${input.length} characters`
+        : 'Start typing';
+    this.buildSuggestions = input =>
+      this.state.suggestions.filter(s => s.startsWith(input));
+  }
+
+  render() {
+    return (
+      <Autocomplete
+        inputStyle={{
+          width: '400px',
+          padding: '0 6px',
+          margin: '10px 20px'
+        }}
+        suggestionsStyle={{
+          margin: '-6px 0px 0px 20px',
+          width: '400px'
+        }}
+        locked={true}
+        onChange={this.onUserInput}
+        onSubmit={this.onSubmit}
+        placeholder={'Placeholder'}
+        buildSuggestions={this.buildSuggestions}
+        buildLabel={this.buildLabel}
+      />
+    );
+  }
+}
+
+export const demos = [
+  {
+    render: () => (
+      <div>
+        <AutocompleteDemo />
+      </div>
+    )
+  }
+];