-
+
+ {addField.editable ? (
onChange(rowId, 'write', value)} />
-
+ label="Add field"
+ checked={addField.checked}
+ onChange={value => onChange(rowId, 'addField', value)}
+ />
+ ) : (
+
+ )}
);
}
return cols;
}
+const intersectionMargin = '10px 0px 0px 20px';
export default class PermissionsDialog extends React.Component {
- constructor({
- permissions,
- advanced,
- }) {
- super();
+ constructor(props) {
+ super(props);
+
+ const { permissions, advanced, columns } = props;
+
+ this.refEntry = React.createRef(null);
+ this.refTable = React.createRef(null);
+ this.refScrollIndicator = React.createRef(null);
- let uniqueKeys = ['*'];
+ const callback = ([entry]) => {
+ const ratio = entry.intersectionRatio;
+ const hidden = ratio < 0.92;
+ // hide suggestions to avoid ugly footer overlap
+ this.refEntry.current.setHidden(hidden);
+ // also show indicator when input is not visible
+ // this.refScrollHint.current.toggleActive(hidden);
+ };
+
+ this.observer = new IntersectionObserver(callback, {
+ root: this.refTable.current,
+ rootMargin: intersectionMargin,
+ threshold: [0.92]
+ });
+
+ this.suggestInput = this.suggestInput.bind(this);
+ this.buildLabel = this.buildLabel.bind(this);
+
+ let uniqueKeys = [...(advanced ? ['requiresAuthentication'] : []), '*'];
let perms = {};
for (let k in permissions) {
- if (k !== 'readUserFields' && k !== 'writeUserFields') {
- Object.keys(permissions[k]).forEach((key) => {
+ if (
+ k !== 'readUserFields' &&
+ k !== 'writeUserFields' &&
+ k !== 'protectedFields'
+ ) {
+ Object.keys(permissions[k]).forEach(key => {
+ if (key === 'pointerFields') {
+ //pointerFields is not a regular entity; processed later
+ return;
+ }
if (uniqueKeys.indexOf(key) < 0) {
uniqueKeys.push(key);
}
+
+ // requireAuthentication is only available for CLP
+ if (advanced) {
+ if (!permissions[k].requiresAuthentication) {
+ permissions[k].requiresAuthentication = false;
+ }
+ }
});
perms[k] = Map(permissions[k]);
}
}
+
+ let pointerPermsSubset = {
+ read: permissions.readUserFields || [],
+ write: permissions.writeUserFields || []
+ };
+
if (advanced) {
// Fill any missing fields
perms.get = perms.get || Map();
@@ -265,47 +588,98 @@ export default class PermissionsDialog extends React.Component {
perms.update = perms.update || Map();
perms.delete = perms.delete || Map();
perms.addField = perms.addField || Map();
+
+ // The double check is necessary because the permissions object seems to be empty when accessing the CLP section
+ // if the class was recently created.
+ (pointerPermsSubset.get = permissions.get && permissions.get.pointerFields || []),
+ (pointerPermsSubset.find = permissions.find && permissions.find.pointerFields || []),
+ (pointerPermsSubset.count = permissions.count && permissions.count.pointerFields || []),
+ (pointerPermsSubset.create = permissions.create && permissions.create.pointerFields || []),
+ (pointerPermsSubset.update = permissions.update && permissions.update.pointerFields || []),
+ (pointerPermsSubset.delete = permissions.delete && permissions.delete.pointerFields || []),
+ (pointerPermsSubset.addField = permissions.addField && permissions.addField.pointerFields || []);
}
let pointerPerms = {};
- if (permissions.readUserFields) {
- permissions.readUserFields.forEach((f) => {
- let p = { read: true };
- if (permissions.writeUserFields && permissions.writeUserFields.indexOf(f) > -1) {
- p.write = true;
- }
- pointerPerms[f] = Map(p);
- });
+
+ // form an object where each pointer-field name holds operations it has access to
+ // e.g. { [field]: { read: true, create: true}, [field2]: {read: true,} ...}
+ for (const action in pointerPermsSubset) {
+ // action holds array of field names
+ for (const field of pointerPermsSubset[action]) {
+ pointerPerms[field] = Object.assign(
+ { [action]: true },
+ pointerPerms[field]
+ );
+ }
}
- if (permissions.writeUserFields) {
- permissions.writeUserFields.forEach((f) => {
- if (!pointerPerms[f]) {
- pointerPerms[f] = Map({ write: true });
- }
- });
+ // preserve protectedFields
+ if (permissions.protectedFields) {
+ perms.protectedFields = permissions.protectedFields;
}
this.state = {
transitioning: false,
showLevels: false,
level: 'Simple', // 'Simple' | 'Advanced'
-
+ entryTypes: undefined,
perms: Map(perms), // Permissions map
keys: uniqueKeys, // Permissions row order
- pointerPerms: Map(pointerPerms), // Pointer permissions map
+ pointerPerms: Map(fromJS(pointerPerms)), // Pointer permissions map
pointers: Object.keys(pointerPerms), // Pointer order
-
+ columns,
newEntry: '',
entryError: null,
- newKeys: [], // Order for new entries
+ newKeys: [] // Order for new entries
};
}
+ async componentDidMount() {
+ // validate existing entries, also preserve their types
+ // to render correct pills and details.
+ const rows = await Promise.all(
+ this.state.keys
+ .filter(key => !['requiresAuthentication', '*'].includes(key))
+ .map(key => this.props.validateEntry(key))
+ );
+
+ let entryTypes = new Map({});
+
+ for (const { entry, type } of rows) {
+ let key;
+ let value = {};
+
+ if (type === 'user') {
+ key = entry.id;
+ value[type] = {
+ name: entry.get('username'),
+ id: entry.id
+ };
+ }
+
+ if (type === 'role') {
+ key = 'role:' + entry.getName();
+ value[type] = {
+ name: entry.getName(),
+ id: entry.id
+ };
+ }
+
+ if (type === 'pointer') {
+ key = entry;
+ value[type] = true;
+ }
+ entryTypes = entryTypes.set(key, value);
+ }
+
+ this.setState({ entryTypes });
+ }
+
toggleField(rowId, type, value) {
- this.setState((state) => {
+ this.setState(state => {
let perms = state.perms;
if (Array.isArray(type)) {
- type.forEach((t) => {
+ type.forEach(t => {
perms = perms.setIn([t, rowId], value);
});
} else {
@@ -315,77 +689,167 @@ export default class PermissionsDialog extends React.Component {
});
}
- togglePointer(field, type, value) {
- this.setState((state) => {
- let pointerPerms = state.pointerPerms.setIn([field, type], value);
+ togglePointer(field, action, value) {
+ this.setState(state => {
+ let pointerPerms = state.pointerPerms;
+
+ // toggle the value clicked
+ pointerPerms = pointerPerms.setIn([field, action], value);
+
+ const readGroup = ['get', 'find', 'count'];
+ const writeGroup = ['create', 'update', 'delete', 'addField'];
+
+ // since there're two ways a permission can be granted for field ({read/write}UserFields:['field'] or action: pointerFields:['field'] )
+ // both views (advanced/simple) need to be in sync
+ // e.g.
+ // read is true (checked in simple view); then 'get' changes true->false in advanced view - 'read' should be also unset in simple view
+
+ // when read/write changes - also update all individual actions with new value
+ if (action === 'read') {
+ for (const op of readGroup) {
+ pointerPerms = pointerPerms.setIn([field, op], value);
+ }
+ } else if (action === 'write') {
+ for (const op of writeGroup) {
+ pointerPerms = pointerPerms.setIn([field, op], value);
+ }
+ } else {
+ const groupKey = readGroup.includes(action) ? 'read' : 'write';
+ const group = groupKey === 'read' ? readGroup : writeGroup;
+
+ // if granular action changed to true
+ if (value) {
+ // if all become checked, unset them as granulars and enable write group instead
+ if (!group.some(op => !pointerPerms.getIn([field, op]))) {
+ for (const op of group) {
+ pointerPerms = pointerPerms.setIn([field, op], false);
+ }
+ pointerPerms = pointerPerms.setIn([field, groupKey], true);
+ }
+ }
+ // if granular action changed to false
+ else {
+ // if group was checked on simple view / {read/write}UserFields contained this field
+ if (pointerPerms.getIn([field, groupKey])) {
+ // unset value for group
+ pointerPerms = pointerPerms.setIn([field, groupKey], false);
+ // and enable all granular actions except the one unchecked
+ group
+ .filter(op => op !== action)
+ .forEach(op => {
+ pointerPerms = pointerPerms.setIn([field, op], true);
+ });
+ }
+ }
+ }
return { pointerPerms };
});
}
- handleKeyDown(e) {
- if (e.keyCode === 13) {
- this.checkEntry();
- }
- }
-
- checkEntry() {
- if (this.state.newEntry === '') {
+ checkEntry(input) {
+ if (input === '') {
return;
}
if (this.props.validateEntry) {
- this.props.validateEntry(this.state.newEntry).then((type) => {
- if (type.user || type.role) {
- let id = type.user ? type.user.id : 'role:' + type.role.getName();
- if (this.state.keys.indexOf(id) > -1 || this.state.newKeys.indexOf(id) > -1) {
+ this.props.validateEntry(input).then(
+ ({ type, entry }) => {
+ let next = { [type]: entry };
+
+ if (next.public) {
return this.setState({
- entryError: 'You already have a row for this object'
- })
+ entryError: 'You already have a row for Public'
+ });
}
+ let id, name, key, newEntry;
+
+ let nextKeys;
+ let nextEntryTypes;
let nextPerms = this.state.perms;
- if (this.props.advanced) {
- nextPerms = nextPerms.setIn(['get', id], true);
- nextPerms = nextPerms.setIn(['find', id], true);
- nextPerms = nextPerms.setIn(['count', id], true);
- nextPerms = nextPerms.setIn(['create', id], true);
- nextPerms = nextPerms.setIn(['update', id], true);
- nextPerms = nextPerms.setIn(['delete', id], true);
- nextPerms = nextPerms.setIn(['addField', id], true);
+ let nextPointerPerms = this.state.pointerPerms;
+
+ if (next.user || next.role) {
+ id = next.user ? next.user.id : next.role.id;
+ name = next.user ? next.user.get('username') : next.role.getName();
+
+ key = next.user ? id : 'role:' + name;
+ newEntry = { [type]: { name, id } };
+ } else if (next.pointer) {
+ key = next.pointer;
+ newEntry = { [type]: true };
} else {
- nextPerms = nextPerms.setIn(['read', id], true);
- nextPerms = nextPerms.setIn(['write', id], true);
+ return this.setState({
+ entryError: 'Unsupported entry'
+ });
}
- let nextKeys = this.state.newKeys.concat([id]);
- return this.setState({
- perms: nextPerms,
- newKeys: nextKeys,
- newEntry: '',
- entryError: null,
- });
- }
- if (type.pointer) {
- let nextPerms = this.state.pointerPerms.set(type.pointer, Map({ read: true, write: true }));
- let nextKeys = this.state.newKeys.concat('pointer:' + type.pointer);
-
- this.setState({
- pointerPerms: nextPerms,
- newKeys: nextKeys,
- newEntry: '',
- entryError: null,
- });
- }
- }, () => {
- if (this.props.advanced && this.props.enablePointerPermissions) {
- this.setState({
- entryError: 'Role, User or pointer field not found. Enter a valid Role name, Username, User ID or User pointer field name.'
- });
- } else {
- this.setState({
- entryError: 'Role or User not found. Enter a valid Role name, Username, or User ID.'
- });
+ // check if key already in list
+ if (
+ this.state.keys.indexOf(key) > -1 ||
+ this.state.newKeys.indexOf(key) > -1
+ ) {
+ return this.setState({
+ entryError: 'You already have a row for this object'
+ });
+ }
+
+ // create new permissions
+ if (next.pointer) {
+ if (this.props.advanced) {
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'get'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'find'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'count'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'create'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'update'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'delete'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'addField'], true)
+ } else {
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'read'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'write'], true)
+ }
+ } else {
+ if (this.props.advanced) {
+ nextPerms = nextPerms.setIn(['get', key], true);
+ nextPerms = nextPerms.setIn(['find', key], true);
+ nextPerms = nextPerms.setIn(['count', key], true);
+ nextPerms = nextPerms.setIn(['create', key], true);
+ nextPerms = nextPerms.setIn(['update', key], true);
+ nextPerms = nextPerms.setIn(['delete', key], true);
+ nextPerms = nextPerms.setIn(['addField', key], true);
+ } else {
+ nextPerms = nextPerms.setIn(['read', key], true);
+ nextPerms = nextPerms.setIn(['write', key], true);
+ }
+ }
+
+ nextKeys = this.state.newKeys.concat([key]);
+ nextEntryTypes = this.state.entryTypes.set(key, newEntry);
+
+ return this.setState(
+ {
+ perms: nextPerms,
+ pointerPerms: nextPointerPerms,
+ newKeys: nextKeys,
+ entryTypes: nextEntryTypes,
+ newEntry: '',
+ entryError: null
+ },
+ () => this.refEntry.current.resetInput()
+ );
+ },
+ () => {
+ if (this.props.advanced && this.props.enablePointerPermissions) {
+ this.setState({
+ entryError:
+ 'Role, User or field not found. Enter a valid id, name or column'
+ });
+ } else {
+ this.setState({
+ entryError: 'Role or User not found. Enter a valid name or id.'
+ });
+ }
}
- })
+ );
}
}
@@ -400,7 +864,7 @@ export default class PermissionsDialog extends React.Component {
pointerPerms: this.state.pointerPerms.delete(key)
});
}
- index = this.state.newKeys.indexOf('pointer:' + key);
+ index = this.state.newKeys.indexOf(key);
if (index > -1) {
let filtered = this.state.newKeys.concat([]);
filtered.splice(index, 1);
@@ -422,9 +886,7 @@ export default class PermissionsDialog extends React.Component {
.deleteIn(['delete', key])
.deleteIn(['addField', key]);
} else {
- newPerms = newPerms
- .deleteIn(['read', key])
- .deleteIn(['write', key]);
+ newPerms = newPerms.deleteIn(['read', key]).deleteIn(['write', key]);
}
if (index > -1) {
let filtered = this.state.keys.concat([]);
@@ -448,14 +910,29 @@ export default class PermissionsDialog extends React.Component {
outputPerms() {
let output = {};
- let fields = [ 'read', 'write' ];
+ let fields = ['read', 'write'];
if (this.props.advanced) {
- fields = [ 'get', 'find', 'count', 'create', 'update', 'delete', 'addField' ];
+ fields = [
+ 'get',
+ 'find',
+ 'count',
+ 'create',
+ 'update',
+ 'delete',
+ 'addField'
+ ];
}
- fields.forEach((field) => {
+ fields.forEach(field => {
output[field] = {};
this.state.perms.get(field).forEach((v, k) => {
+ if (k === 'pointerFields') {
+ return;
+ }
+ if (k === 'requiresAuthentication' && !v){
+ // only acceppt requiresAuthentication with true
+ return
+ }
if (v) {
output[field][k] = true;
}
@@ -471,28 +948,90 @@ export default class PermissionsDialog extends React.Component {
if (perms.get('write')) {
writeUserFields.push(key);
}
+
+ fields.forEach(op => {
+ if (perms.get(op)) {
+ if (!output[op].pointerFields) {
+ output[op].pointerFields = [];
+ }
+
+ output[op].pointerFields.push(key);
+ }
+ });
});
+
if (readUserFields.length) {
output.readUserFields = readUserFields;
}
if (writeUserFields.length) {
output.writeUserFields = writeUserFields;
}
+ // should also preserve protectedFields!
+ if (this.state.perms.get('protectedFields')) {
+ output.protectedFields = this.state.perms.get('protectedFields');
+ }
return output;
}
- renderRow(key, forcePointer) {
- let pointer = !!forcePointer;
+ renderRow(key, columns, types) {
+ const pill = text => (
+
+
+ );
+
+ // types is immutable.js Map
+ const type = (types && types.get(key)) || {};
+
+ let pointer = this.state.pointerPerms.has(key);
let label =
{key} ;
- if (key.startsWith('role:')) {
- label =
{key.substr(5)} (Role) ;
- } else if (key.startsWith('pointer:')) {
- pointer = true;
- key = key.substr(8);
- }
- if (pointer) {
- label =
{key} ;
+
+ if (type.user) {
+ label = (
+
+
+
+ {type.user.id}
+ {pill('User')}
+
+
+
+ {'username: '}
+ {type.user.name}
+
+
+ );
+ } else if (type.role) {
+ label = (
+
+
+
+ {'role:'}
+ {type.role.name}
+
+
+
+ id: {type.role.id}
+
+
+ );
+ } else if (pointer) {
+ // get class info from schema
+ let { type, targetClass } = columns[key];
+
+ let pillText = type + (targetClass ? `<${targetClass}>` : '');
+
+ label = (
+
+
+ {key}
+ {pill(pillText)}
+
+ Only users pointed to by this field
+
+ );
}
+
let content = null;
if (!this.state.transitioning) {
if (pointer) {
@@ -511,15 +1050,23 @@ export default class PermissionsDialog extends React.Component {
this.toggleField.bind(this)
);
} else {
- content = renderSimpleCheckboxes(key, this.state.perms, this.toggleField.bind(this));
+ content = renderSimpleCheckboxes(
+ key,
+ this.state.perms,
+ this.toggleField.bind(this)
+ );
}
}
let trash = null;
if (!this.state.transitioning) {
trash = (
);
@@ -545,11 +1092,76 @@ export default class PermissionsDialog extends React.Component {
this.toggleField.bind(this)
);
}
- return renderSimpleCheckboxes('*', this.state.perms, this.toggleField.bind(this));
+ return renderSimpleCheckboxes(
+ '*',
+ this.state.perms,
+ this.toggleField.bind(this)
+ );
+ }
+
+ renderAuthenticatedCheckboxes() {
+ if (this.state.transitioning) {
+ return null;
+ }
+ if (this.props.advanced) {
+ return renderAdvancedCheckboxes(
+ 'requiresAuthentication',
+ this.state.perms,
+ this.state.level === 'Advanced',
+ this.toggleField.bind(this)
+ );
+ }
+ return null;
+ }
+
+ buildLabel(input) {
+ let label;
+ if (input.startsWith('userField:')) {
+ label = 'Name of field with pointer(s) to User';
+ } else if (input.startsWith('user:')) {
+ label = 'Find User by id or name';
+ } else if (input.startsWith('role:')) {
+ label = 'Find Role by id or name';
+ }
+
+ return label;
+ }
+
+ suggestInput(input) {
+ // role: user: suggested if entry empty or does start with not already start with any of them
+ // and not - suggestedPrefix is currently set
+ const userPointers = this.props.userPointers || [];
+
+ const keys = this.state.keys;
+ const newKeys = this.state.newKeys;
+ const allKeys = [...keys, ...newKeys];
+
+ // "userPointer:" fields that were not added yet
+ let unusedPointerFields = userPointers.filter(
+ ptr => !allKeys.includes(ptr) && ptr.includes(input)
+ );
+
+ // roles
+ let prefixes = ['role:']
+ .filter(o => o.startsWith(input) && o.length > input.length) // filter matching input
+ .concat(...unusedPointerFields);
+
+ // pointer fields that are not applied yet;
+ let availableFields = [];
+
+ availableFields.push(...prefixes);
+
+ return availableFields;
}
render() {
let classes = [styles.dialog, unselectable];
+
+ // for 3-column CLP dialog
+ if (this.props.advanced) {
+ classes.push(styles.clp);
+ }
+
if (this.state.level === 'Advanced') {
classes.push(styles.advanced);
}
@@ -562,16 +1174,31 @@ export default class PermissionsDialog extends React.Component {
}
return (
-
+
{this.props.title}
- {this.props.advanced ?
-
this.setState(({ showLevels }) => ({ showLevels: !showLevels }))}>
-
: null}
- {this.props.advanced && this.state.showLevels ?
-
: null}
+ {this.props.advanced ? (
+
+ this.setState(({ showLevels }) => ({
+ showLevels: !showLevels
+ }))
+ }
+ >
+
+ ) : null}
+ {this.props.advanced && this.state.showLevels ? (
+
+ ) : null}
@@ -580,15 +1207,19 @@ export default class PermissionsDialog extends React.Component {
darkBg={true}
value={this.state.level}
type={Toggle.Types.TWO_WAY}
- optionLeft='Simple'
- optionRight='Advanced'
- onChange={(level) => {
+ optionLeft="Simple"
+ optionRight="Advanced"
+ onChange={level => {
if (this.state.transitioning || this.state.level === level) {
return;
}
this.setState({ level, transitioning: true });
- setTimeout(() => this.setState({ transitioning: false }), 700);
- }} />
+ setTimeout(
+ () => this.setState({ transitioning: false }),
+ 700
+ );
+ }}
+ />
@@ -596,44 +1227,78 @@ export default class PermissionsDialog extends React.Component {
Write
Add
-
-
+
+
-
- Public
-
+
Public
{this.renderPublicCheckboxes()}
- {this.state.keys.slice(1).map((key) => this.renderRow(key))}
- {this.props.advanced ?
- this.state.pointers.map((pointer) => this.renderRow(pointer, true)) :
- null}
- {this.state.newKeys.map((key) => this.renderRow(key))}
+ {this.props.advanced ? (
+
+
Authenticated
+ {this.renderAuthenticatedCheckboxes()}
+
+ ) : null}
+
+ {this.state.keys
+ .slice(this.props.advanced ? 2 : 1)
+ .map(key =>
+ this.renderRow(key, this.state.columns, this.state.entryTypes)
+ )}
+ {this.props.advanced
+ ? this.state.pointers.map(pointer =>
+ this.renderRow(pointer, this.state.columns)
+ )
+ : null}
+ {this.state.newKeys.map(key =>
+ this.renderRow(key, this.state.columns, this.state.entryTypes)
+ )}
+
+
- this.props.onConfirm(this.outputPerms())} />
+ onClick={() => this.props.onConfirm(this.outputPerms())}
+ />
{this.props.details}
diff --git a/src/components/PermissionsDialog/PermissionsDialog.scss b/src/components/PermissionsDialog/PermissionsDialog.scss
index 841ae6d600..48e3090878 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.scss
+++ b/src/components/PermissionsDialog/PermissionsDialog.scss
@@ -5,298 +5,352 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-@import 'stylesheets/globals.scss';
-
-$labelWidth: 330px;
-$colWidth: 82px;
-$writeColWidth: 92px;
-$addFieldColWidth: 118px;
-$deleteColWidth: 44px;
-
-$sumReadColsWidth: calc(3 * #{$colWidth});
-$sumWriteColsWidth: calc(3 * #{$writeColWidth});
-
-$permissionsDialogWidth: calc(#{$labelWidth} + (2 * #{$colWidth}) + #{$deleteColWidth});
-$permissionsDialogMaxWidth: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth} + #{$addFieldColWidth} + #{$deleteColWidth});
-
-.dialog {
- @include modalAnimation();
- position: absolute;
- top: 50%;
- left: 50%;
- width: $permissionsDialogWidth;
- background: white;
- border-radius: 5px;
- overflow: hidden;
- transition: width 0.3s 0.15s ease-out;
-}
-
-.header {
- height: 50px;
- background: $blue;
- position: relative;
- color: #ffffff;
- line-height: 50px;
- font-size: 16px;
- text-align: center;
-
- .settings {
- position: absolute;
- top: 15px;
- right: 15px;
- cursor: pointer;
-
- svg {
- fill: #0E69A1;
- vertical-align: top;
- }
-
- &:hover svg {
- fill: #094367;
- }
- }
-
- .arrow {
- position: absolute;
- @include arrow('up', 12px, 6px, #0E69A1);
- top: 44px;
- right: 19px;
- }
-}
-
-.level {
- height: 50px;
- width: $permissionsDialogWidth;
- background: #0E69A1;
- position: relative;
- color: white;
- transition: width 0.3s 0.15s ease-out;
-
- > div {
- margin: 0;
- position: absolute;
- top: 10px;
- right: 10px;
- }
-
- > span {
- display: inline-block;
- font-size: 12;
- height: 50px;
- line-height: 50px;
- padding-left: 20px;
- }
-}
-
-.tableWrap {
- height: 250px;
- overflow-y: auto;
- overflow-x: hidden;
-}
-
-.second, .third, .fourth {
- width: $colWidth;
-}
-.fifth, .sixth, .seventh {
- width: $writeColWidth;
-}
-.eighth {
- width: $addFieldColWidth;
-}
-.nineth {
- width: $deleteColWidth;
-}
-
-.table {
- position: relative;
- min-height: 250px;
-
- .overlay {
- position: absolute;
- top: 0;
- bottom: 0;
- pointer-events: none;
- background: rgba(0,0,40,0.03);
-
- &.second {
- left: $labelWidth;
- }
- &.fourth {
- left: calc(#{$labelWidth} + (2 * #{$colWidth}));
- }
- &.sixth {
- left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$writeColWidth});
- }
- &.eighth {
- left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth});
- }
- }
-}
-
-.footer {
- position: relative;
- height: 51px;
- border-top: 1px solid #e3e3ea;
-
- .details {
- font-size: 12px;
- padding-left: 20px;
-
- a {
- color: $blue;
- }
- }
-
- .actions {
- float: right;
- padding: 10px 15px;
-
- a {
- margin-left: 10px;
- }
- }
-}
-
-.headers {
- overflow: hidden;
- transition: height .3s cubic-bezier(0.645,0.045,0.355,1) .5s;
- background: #56AEE3;
- height: 0;
- padding-left: $labelWidth;
- text-align: center;
- color: white;
- font-size: 12px;
-
- div {
- float: left;
- border-left: 1px solid white;
- height: 20px;
- line-height: 20px;
- vertical-align: top;
- }
-}
-
-.readHeader {
- width: $sumReadColsWidth;
-}
-
-.writeHeader {
- width: $sumWriteColsWidth;
-}
-
-.addHeader {
- width: $addFieldColWidth;
- border-right: 1px solid white;
-}
-
-.advanced {
- width: $permissionsDialogMaxWidth;
-
- .level {
- width: $permissionsDialogMaxWidth;
- }
-
- .headers {
- height: 20px;
- }
-}
-
-.row {
- height: 50px;
- line-height: 50px;
+ @import 'stylesheets/globals.scss';
+
+ $labelWidth: 330px;
+ $colWidth: 82px;
+ $writeColWidth: 92px;
+ $addFieldColWidth: 118px;
+ $deleteColWidth: 44px;
+
+ $sumReadColsWidth: calc(3 * #{$colWidth});
+ $sumWriteColsWidth: calc(3 * #{$writeColWidth});
+
+ $permissionsDialogWidth: calc(#{$labelWidth} + (2 * #{$colWidth}) + #{$deleteColWidth});
+ $permissionsDialogMaxWidth: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth} + #{$addFieldColWidth} + #{$deleteColWidth});
+
+ $simplePointerWriteWidth: calc( #{$colWidth} + #{$addFieldColWidth});
+ $pointerWriteWidth: calc( #{$sumWriteColsWidth} + #{$addFieldColWidth});
+
+ $clpDialogWidth: calc(#{$permissionsDialogWidth} + #{$addFieldColWidth});
+
+ .dialog {
+ @include modalAnimation();
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: $permissionsDialogWidth;
+ background: white;
+ border-radius: 5px;
+ overflow: hidden;
+ transition: width 0.3s 0.15s ease-out;
+ }
+
+ .clp{
+ width: $clpDialogWidth;
+
+ .level{
+ width: $clpDialogWidth;
+ }
+ // 118px for add field in CLP only
+ .fourth {
+ width: $addFieldColWidth;
+ }
+ }
+
+ .clp.advanced{
+ .fourth {
+ width: $colWidth;
+ }
+ }
+
+ .header {
+ height: 50px;
+ background: $blue;
+ position: relative;
+ color: #ffffff;
+ line-height: 50px;
+ font-size: 16px;
+ text-align: center;
+
+ .settings {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ cursor: pointer;
+
+ svg {
+ fill: #0E69A1;
+ vertical-align: top;
+ }
+
+ &:hover svg {
+ fill: #094367;
+ }
+ }
+
+ .arrow {
+ position: absolute;
+ @include arrow('up', 12px, 6px, #0E69A1);
+ top: 44px;
+ right: 19px;
+ }
+ }
+
+
+ .level {
+ height: 50px;
+ width: $permissionsDialogWidth; // width: 658px;
+ background: #0E69A1;
+ position: relative;
+ color: white;
+ transition: width 0.3s 0.15s ease-out;
+
+ > div {
+ margin: 0;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+
+ > span {
+ display: inline-block;
+ font-size: 12;
+ height: 50px;
+ line-height: 50px;
+ padding-left: 20px;
+ }
+ }
+
+ .tableWrap {
+ height: 300px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+
+ .second, .third, .fourth {
+ width: $colWidth;
+ }
+ .fifth, .sixth, .seventh {
+ width: $writeColWidth;
+ }
+ .eighth {
+ width: $addFieldColWidth;
+ }
+ .nineth {
+ width: $deleteColWidth;
+ }
+
+ .table {
+ position: relative;
+ min-height:300px;
+
+ .overlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ pointer-events: none;
+ background: rgba(0,0,40,0.03);
+
+ &.second {
+ left: $labelWidth;
+ }
+ &.fourth {
+ left: calc(#{$labelWidth} + (2 * #{$colWidth}));
+ }
+ &.sixth {
+ left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$writeColWidth});
+ }
+ &.eighth {
+ left: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth});
+ }
+ }
+ }
+
+ .footer {
+ position: relative;
+ height: 51px;
+ border-top: 1px solid #e3e3ea;
+
+ .details {
+ font-size: 12px;
+ padding-left: 20px;
+
+ a {
+ color: $blue;
+ }
+ }
+
+ .actions {
+ float: right;
+ padding: 10px 15px;
+
+ a {
+ margin-left: 10px;
+ }
+ }
+ }
+
+ .headers {
+ overflow: hidden;
+ transition: height .3s cubic-bezier(0.645,0.045,0.355,1) .5s;
+ background: #56AEE3;
+ height: 0;
+ padding-left: $labelWidth;
+ text-align: center;
+ color: white;
+ font-size: 12px;
+
+ div {
+ float: left;
+ border-left: 1px solid white;
+ height: 20px;
+ line-height: 20px;
+ vertical-align: top;
+ }
+ }
+
+ .readHeader {
+ width: $sumReadColsWidth;
+ }
+
+ .writeHeader {
+ width: $sumWriteColsWidth;
+ }
+
+ .addHeader {
+ width: $addFieldColWidth;
+ border-right: 1px solid white;
+ }
+
+ .advanced {
+ width: $permissionsDialogMaxWidth;
+
+ .level {
+ width: $permissionsDialogMaxWidth;
+ }
+
+ .headers {
+ height: 20px;
+ }
+ }
+
+ .row {
+ display: flex;
+ min-height: 50px;
+ height: 100%;
+ vertical-align: middle;
font-size: 15px;
border-bottom: 1px solid #e3e3ea;
white-space: nowrap;
- &:nth-child(odd) {
- background: rgba(14, 105, 161, 0.03);
- }
-}
-
-.row.public {
- background: rgba(22, 156, 238, 0.18);
- border-bottom: 1px solid #0E69A1;
- color: $blue;
-}
-
-.label {
- display: inline-block;
+ &:nth-child(odd) {
+ background: rgba(14, 105, 161, 0.03);
+ }
+ }
+
+ .row.public {
+ background: rgba(22, 156, 238, 0.18);
+ border-bottom: 1px solid #0E69A1;
+ color: $blue;
+ }
+
+
+ .label {
+ display: inline-flex;
width: $labelWidth;
padding: 0 20px;
-}
-.check {
- display: inline-block;
- text-align: center;
-
- > svg {
- fill: $blue;
- vertical-align: middle;
- }
+ flex-direction: column;
+ align-self: center;
}
-.pointerRead {
- display: inline-block;
- width: $sumReadColsWidth;
- padding: 5px 10px;
-}
-.pointerWrite {
- display: inline-block;
- width: calc(#{$sumWriteColsWidth} + #{$addFieldColWidth});
- padding: 5px 10px;
-}
-
-.checkboxWrap {
- position: relative;
- vertical-align: top;
- border: 1px solid #e3e3ea;
- height: 40px;
- line-height: 40px;
- text-align: center;
- border-radius: 5px;
- background: white;
+ .check {
+ display: inline-flex;
+ flex-direction: column;
+ align-self: center;
+ text-align: center;
+
+ > svg {
+ fill: $blue;
+ vertical-align: middle;
+ align-self: center;
+ }
+ }
+
+ .pointerRead {
+ display: inline-block;
+ width: $sumReadColsWidth;
+ padding: 5px 10px;
+ }
+
+ .pointerWrite {
+ width: $simplePointerWriteWidth;
+ padding: 0px 10px;
+ display: inline-block;
+ }
+
+ .checkboxWrap {
+ position: relative;
+ vertical-align: top;
+ border: 1px solid #e3e3ea;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border-radius: 5px;
+ background: white;
+ }
+
+ .entry {
+ height: 30px;
+ width: 290px;
+ border: 1px solid $mainTextColor;
+ border-radius: 5px;
+ font-size: 14px;
+ outline: none;
+ padding: 0 6px;
+ margin: 10px 0 0 20px;
+ vertical-align: top;
+ }
+
+ .error {
+ border-color: $red;
+ color: $red;
+ }
+
+ .delete {
+ display: inline-block;
+ vertical-align: top;
+ width: 32px;
+ height: 50px;
+ padding-top: 15px;
+ text-align: right;
+
+ svg {
+ vertical-align: top;
+ cursor: pointer;
+ fill: #C1C7CD;
+
+ &:hover {
+ fill: $red;
+ }
+ }
+ }
+
+ .pillHolder{
+ max-width: 100px;
+ position: relative;
+ display: inline-block;
+ top: 5px;
+ }
+
+ .pillType{
+ width: auto;
+ display: inline-flex;
+ height: 20;
+ padding: 2px 8px 0 8px;
}
-.entry {
- height: 30px;
- width: 290px;
- border: 1px solid $mainTextColor;
- border-radius: 5px;
- font-size: 14px;
- outline: none;
- padding: 0 6px;
- margin: 10px 0 0 20px;
- vertical-align: top;
+.prefix {
+ color: #0E69A1;
}
-.error {
- border-color: $red;
- color: $red;
-}
-
-.delete {
- display: inline-block;
- vertical-align: top;
- width: 32px;
- height: 50px;
- padding-top: 15px;
- text-align: right;
-
- svg {
- vertical-align: top;
- cursor: pointer;
- fill: #C1C7CD;
-
- &:hover {
- fill: $red;
- }
- }
+.hint{
+ color: $secondaryTextColor;
+ font-size: 0.8em;
}
-.pillHolder{
- max-width: 100px;
- position: relative;
- display: inline-block;
- top: 5px;
+.selectable{
+ user-select: text;
}
-@include modalKeyframes();
+ @include modalKeyframes();
diff --git a/src/components/Popover/Popover.react.js b/src/components/Popover/Popover.react.js
index 243aef3d1c..4c5900035d 100644
--- a/src/components/Popover/Popover.react.js
+++ b/src/components/Popover/Popover.react.js
@@ -5,44 +5,43 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import PropTypes from 'lib/PropTypes';
-import hasAncestor from 'lib/hasAncestor';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import styles from 'components/Popover/Popover.scss';
+import PropTypes from 'lib/PropTypes';
+import hasAncestor from 'lib/hasAncestor';
+import React from 'react';
+import styles from 'components/Popover/Popover.scss';
+import ParseApp from 'lib/ParseApp';
+import { createPortal } from 'react-dom';
-// We use this component to proxy the current tree's context (just the React Router history for now) to the new tree
-class ContextProxy extends React.Component {
- getChildContext() {
- return this.props.cx;
- }
+// We use this component to proxy the current tree's context
+// (React Router history and ParseApp) to the new tree
+export default class Popover extends React.Component {
+ constructor(props) {
+ super(props);
+ this._checkExternalClick = this._checkExternalClick.bind(this);
- render() {
- return this.props.children;
+ this._popoverLayer = document.createElement('div');
}
-}
-
-ContextProxy.childContextTypes = {
- history: PropTypes.object,
- router: PropTypes.object
-};
-export default class Popover extends React.Component {
- constructor() {
- super();
- this._checkExternalClick = this._checkExternalClick.bind(this);
+ componentDidUpdate(prevState) {
+ if (this.props.position !== prevState.position) {
+ this._popoverLayer.style.left = this.props.position.x + 'px';
+ this._popoverLayer.style.top = this.props.position.y + 'px';
+ }
}
- componentWillMount() {
- let wrapperStyle = this.props.fixed ?
- styles.fixed_wrapper :
- styles.popover_wrapper;
- this._popoverWrapper = document.getElementById(wrapperStyle);
+
+ componentDidMount() {
if (!this._popoverWrapper) {
this._popoverWrapper = document.createElement('div');
- this._popoverWrapper.id = wrapperStyle;
document.body.appendChild(this._popoverWrapper);
}
- this._popoverLayer = document.createElement('div');
+
+ let wrapperStyle = this.props.fixed
+ ? styles.fixed_wrapper
+ : styles.popover_wrapper;
+
+ this._popoverWrapper.className = wrapperStyle;
+ this._popoverWrapper.appendChild(this._popoverLayer);
+
if (this.props.position) {
this._popoverLayer.style.left = this.props.position.x + 'px';
this._popoverLayer.style.top = this.props.position.y + 'px';
@@ -54,47 +53,46 @@ export default class Popover extends React.Component {
if (this.props.color) {
this._popoverLayer.style.background = this.props.color;
}
- if (this.props.fadeIn){
+ if (this.props.fadeIn) {
this._popoverLayer.className = styles.transition;
}
- this._popoverWrapper.appendChild(this._popoverLayer);
- }
- componentWillReceiveProps(nextProps) {
- if (nextProps.position) {
- this._popoverLayer.style.left = this.props.position.x + 'px';
- this._popoverLayer.style.top = this.props.position.y + 'px';
- }
+ document.body.addEventListener('click', this._checkExternalClick);
}
- componentDidMount() {
- ReactDOM.render(
{React.Children.only(this.props.children)} , this._popoverLayer);
- document.body.addEventListener('click', this._checkExternalClick);
+ setPosition(position) {
+ this._popoverLayer.style.left = position.x + 'px';
+ this._popoverLayer.style.top = position.y + 'px';
+ this.forceUpdate();
}
componentWillUnmount() {
+ document.body.removeChild(this._popoverWrapper);
document.body.removeEventListener('click', this._checkExternalClick);
- ReactDOM.unmountComponentAtNode(this._popoverLayer);
- this._popoverWrapper.removeChild(this._popoverLayer);
- }
-
- componentWillUpdate(nextProps) {
- ReactDOM.render(
{React.Children.only(nextProps.children)} , this._popoverLayer);
}
_checkExternalClick(e) {
- if (!hasAncestor(e.target, this._popoverWrapper) &&
- this.props.onExternalClick) {
+ const { contentId } = this.props;
+ const popoverWrapper = contentId
+ ? document.getElementById(contentId)
+ : this._popoverLayer;
+ const isChromeDropdown = e.target.parentNode.classList.contains('chromeDropdown');
+ if (
+ !hasAncestor(e.target, popoverWrapper) &&
+ this.props.onExternalClick &&
+ !isChromeDropdown
+ ) {
this.props.onExternalClick(e);
}
}
render() {
- return null;
+ return createPortal(this.props.children, this._popoverLayer);
}
}
Popover.contextTypes = {
history: PropTypes.object,
- router: PropTypes.object
+ router: PropTypes.object,
+ currentApp: PropTypes.instanceOf(ParseApp)
};
diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
index 7db5a291d6..e4971eff69 100644
--- a/src/components/Popover/Popover.scss
+++ b/src/components/Popover/Popover.scss
@@ -7,13 +7,14 @@
*/
@import 'stylesheets/globals.scss';
-#popover_wrapper, #fixed_wrapper {
+.popover_wrapper, .fixed_wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
+ z-index: 6;
& > div {
position: absolute;
@@ -26,14 +27,19 @@
opacity: 1;
}
-#popover_wrapper {
+.popover_wrapper {
position: absolute;
}
-#fixed_wrapper {
+.fixed_wrapper {
position: fixed;
}
+.popoverLayer {
+ cursor: pointer;
+}
+
+
@include keyframes(fade-in) {
0% {
opacity: 0;
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.example.js b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.example.js
new file mode 100644
index 0000000000..6eb0e024d2
--- /dev/null
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.example.js
@@ -0,0 +1,109 @@
+/*
+ * 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 ProtectedFieldsDialog
+ from 'components/ProtectedFieldsDialog/ProtectedFieldsDialog.react';
+import Button from 'components/Button/Button.react';
+
+export const component = ProtectedFieldsDialog;
+
+
+function validateDemo(text) {
+ if (text===('*')) {
+ return Promise.resolve({ entry: '*' , type:'public'});
+ }
+ if (text===('authenticated')) {
+ return Promise.resolve({ entry: 'authenticated' , type:'auth'});
+ }
+ if (text.startsWith('u')) {
+ return Promise.resolve({ entry: { id: text, get:() => 'demouser' } , type:'user'});
+ }
+ if (text.startsWith('role:')) {
+ const roleName = text.substring(5)
+ return Promise.resolve({ entry: {id:`1d0f${roleName}`, getName:()=>roleName}, type:'role' });
+ }
+
+ // if (text.startsWith('f')) {
+ // return Promise.resolve({ userField: { id: 'i' + ((Math.random() * 10000) | 0)}});
+ // }
+ if (text.startsWith('ptr')) {
+ return Promise.resolve({ entry: text, type: 'pointer' });
+ }
+ return Promise.reject();
+}
+
+const columns = {
+ 'email': { type: 'String',},
+ 'password':{ type: 'String', },
+ 'ptr_owner':{ type: 'Pointer', targetClass:'_User'},
+ 'nickname':{ type: 'String',},
+ 'ptr_followers':{ type: 'Array', },
+ 'ptr_friends':{ type: 'Array', }
+};
+
+const userPointers = [
+ 'ptr_followers',
+ 'ptr_owner',
+ 'ptr_friends'
+]
+
+
+class ProtectedFieldsDemo extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ show: false
+ };
+ }
+
+ render() {
+
+ return (
+
+
{
+ this.setState({
+ show: true
+ });
+ }}/>
+
+ Learn more about CLPs and app security}
+ protectedFields={{
+ '*': ['password', 'email'],
+ 'userField:ptr_owner': [],
+ 'us3r1d': ['password']
+ }}
+ userPointers={userPointers}
+ columns={columns}
+ validateEntry={validateDemo}
+ onCancel={() => {
+ this.setState({
+ show: false,
+ });
+ }}
+ onClose={()=>{}}
+ onConfirm={(perms) => {
+ console.log(perms);
+ }} />
+
+ );
+ }
+}
+
+export const demos = [
+ {
+ render() {
+ return (
);
+ }
+ }
+];
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
new file mode 100644
index 0000000000..652aaf453f
--- /dev/null
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
@@ -0,0 +1,521 @@
+/*
+ * 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 hasAncestor from 'lib/hasAncestor';
+import Button from 'components/Button/Button.react';
+import Autocomplete from 'components/Autocomplete/Autocomplete.react';
+import Icon from 'components/Icon/Icon.react';
+import { Map } from 'immutable';
+import Pill from 'components/Pill/Pill.react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import React from 'react';
+import ScrollHint from 'components/ScrollHint/ScrollHint.react'
+import styles from 'components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss';
+import MultiSelect from 'components/MultiSelect/MultiSelect.react';
+import MultiSelectOption from 'components/MultiSelect/MultiSelectOption.react';
+import TrackVisibility from 'components/TrackVisibility/TrackVisibility.react';
+import {
+ unselectable,
+ verticalCenter } from 'stylesheets/base.scss';
+
+let origin = new Position(0, 0);
+const intersectionMargin = '10px 0px 0px 20px';
+
+export default class ProtectedFieldsDialog extends React.Component {
+ constructor({ protectedFields, columns }) {
+ super();
+
+ let keys = Object.keys(protectedFields || {});
+
+ this.refEntry = React.createRef(null);
+ this.refTable = React.createRef(null);
+ this.refScrollHint = React.createRef(null);
+
+ // Intersection observer is used to avoid ugly effe t
+ // when suggestion are shown whil input field is scrolled out oof viewpoort
+ const callback = ([entry]) => {
+ const ratio = entry.intersectionRatio;
+ const hidden = ratio < 0.92;
+ // hide suggestions to avoid ugly footer overlap
+ this.refEntry.current.setHidden(hidden);
+ // also show indicator when input is not visible
+ this.refScrollHint.current.toggleActive(hidden);
+ };
+
+ this.observer = new IntersectionObserver(callback, {
+ root: this.refTable.current,
+ rootMargin: intersectionMargin,
+ threshold: [0.92]
+ });
+
+ this.state = {
+ entryTypes: undefined,
+ transitioning: false,
+ columns: columns,
+ protectedFields: new Map(protectedFields || {}), // protected fields map
+ keys,
+ newEntry: '',
+ entryError: null,
+ newKeys: []
+ };
+ }
+
+ async componentDidMount() {
+ // validate existing entries, also preserve their types (to render correct pills).
+ const rows = await Promise.all(
+ this.state.keys.map(key => this.props.validateEntry(key))
+ );
+
+ let entryTypes = new Map({});
+
+ for (const { entry, type } of rows) {
+ let key;
+ let value = {};
+
+ if (type === 'user') {
+ key = entry.id;
+ value[type] = {
+ name: entry.get('username'),
+ id: entry.id
+ };
+ }
+
+ if (type === 'role') {
+ key = 'role:' + entry.getName();
+ value[type] = {
+ name: entry.getName(),
+ id: entry.id
+ };
+ }
+
+ if (type === 'public' || type === 'auth' || type === 'pointer') {
+ key = entry;
+ value[type] = true;
+ }
+
+ entryTypes = entryTypes.set(key, value);
+ }
+
+ this.setState({ entryTypes });
+ }
+
+ checkEntry(input) {
+ if (input === '') {
+ return;
+ }
+ if (this.props.validateEntry) {
+ this.props.validateEntry(input).then(
+ ({ type, entry }) => {
+ let next = { [type]: entry };
+
+ let key;
+ let name;
+ let id;
+ let newEntry = {};
+
+ if (next.user || next.role) {
+ // entry for saving
+ key = next.user ? next.user.id : 'role:' + next.role.getName();
+
+ // info for displaying
+ name = next.user ? next.user.get('username') : next.role.getName();
+ id = next.user ? next.user.id : next.role.id;
+ newEntry[type] = { name, id };
+ } else {
+ key = next.public || next.auth || next.pointer;
+ newEntry[type] = true;
+ }
+
+ if (key) {
+ if (
+ this.state.keys.includes(key) ||
+ this.state.newKeys.includes(key)
+ ) {
+ return this.setState({
+ entryError: 'You already have a row for this object'
+ });
+ }
+
+ let nextKeys = this.state.newKeys.concat([key]);
+ let nextFields = this.state.protectedFields.set(key, []);
+ let nextEntryTypes = this.state.entryTypes.set(key, newEntry);
+
+ return this.setState(
+ {
+ entryTypes: nextEntryTypes,
+ protectedFields: nextFields,
+ newKeys: nextKeys,
+ entryError: null
+ },
+ this.refEntry.current.resetInput()
+ );
+ }
+ },
+ () => {
+ if (this.props.enablePointerPermissions) {
+ this.setState({
+ entryError:
+ 'Role, User or field not found. Enter a valid id, name or column.'
+ });
+ } else {
+ this.setState({
+ entryError: 'Role or User not found. Enter a valid name or id'
+ });
+ }
+ }
+ );
+ }
+ }
+
+ deleteRow(key) {
+ // remove from proectedFields
+ let protectedFields = this.state.protectedFields.delete(key);
+
+ // also remove from local state
+ let keys = this.state.keys.filter(k => k !== key);
+ let newKeys = this.state.newKeys.filter(k => k !== key);
+
+ return this.setState({
+ protectedFields,
+ newKeys,
+ keys
+ });
+ }
+
+ outputPerms() {
+ let output = this.state.protectedFields.toObject();
+
+ return output;
+ }
+
+ onChange(key, newValue) {
+ this.setState(state => {
+ let protectedFields = state.protectedFields;
+ protectedFields = protectedFields.set(key, newValue);
+ return { protectedFields };
+ });
+ }
+
+ /**
+ * @param {String} key - entity (Public, User, Role, field-pointer)
+ * @param {Object} schema - object with fields of collection: { [fieldName]: { type: String, targetClass?: String }}
+ * @param {String[]} selected - fields that are set for entity
+ *
+ * Renders Dropdown allowing to pick multiple fields for an entity (row).
+ */
+ renderSelector(key, schema, selected) {
+ let options = [];
+ let values = selected || [];
+
+ let entries = Object.entries(schema);
+ for (let [field, { type, targetClass }] of entries) {
+ if (
+ field === 'objectId' ||
+ field === 'createdAt' ||
+ field === 'updatedAt' ||
+ field === 'ACL'
+ ) {
+ continue;
+ }
+
+ let pillText = type + (targetClass ? `<${targetClass}>` : '');
+
+ options.push(
+
+ {field}
+
+
+
+ );
+ }
+
+ let noAvailableFields = options.length === 0;
+
+ if(noAvailableFields){
+ options.push(
+
+ {'This class has no fields to protect'}
+
+ )
+ }
+
+ const placeholder = 'All fields allowed.'+ (noAvailableFields ? '': ' Click to protect.');
+
+ return (
+
+ {
+ this.onChange(key, s);
+ }}
+ value={values}
+ placeHolder={placeholder}
+ >
+ {options}
+
+
+ );
+ }
+
+ renderRow(key, columns, types) {
+ const pill = text => (
+
+
+ );
+
+ // types is immutable.js Map
+ const type = (types && types.get(key)) || {};
+
+ let label =
{key} ;
+
+ if (type.role) {
+ label = (
+
+
+
+ {'role:'}
+ {type.role.name}
+
+
+
+ id: {type.role.id}
+
+
+ );
+ }
+
+ if (type.user) {
+ label = (
+
+
+
+ {type.user.id}
+ {pill('User')}
+
+
+
+ username:{' '}
+ {type.user.name}
+
+
+ );
+ }
+
+ if (type.public) {
+ label = (
+
+
+ {' '}
+ * (Public Access)
+
+ Applies to all queries
+
+ );
+ }
+
+ if (type.auth) {
+ label = (
+
+ Authenticated
+ Applies to any logged user
+
+ );
+ }
+
+ if (type.pointer) {
+ let { type, targetClass } = columns[key.substring(10)];
+ let pillText = type + (targetClass ? `<${targetClass}>` : '');
+
+ label = (
+
+
+ userField:
+ {key.substring(10)}
+ {pill(pillText)}
+
+ Only users pointed to by this field
+
+ );
+ }
+
+ let content = null;
+ if (!this.state.transitioning) {
+ content = this.renderSelector(
+ key,
+ this.state.columns,
+ this.state.protectedFields.get(key)
+ );
+ }
+ let trash = null;
+ if (!this.state.transitioning) {
+ trash = (
+
+ );
+ }
+ return (
+
+
{label}
+ {content}
+ {trash}
+
+ );
+ }
+
+ close(e) {
+ if (!hasAncestor(e.target, this.node)) {
+ //In the case where the user clicks on the node, toggle() will handle closing the dropdown.
+ this.setState({ open: false });
+ }
+ }
+
+ onUserInput(input) {
+ this.setState({ newEntry: input, entryError: undefined });
+ }
+
+ suggestInput(input) {
+ const userPointers = this.props.userPointers;
+
+ const keys = this.state.keys;
+ const newKeys = this.state.newKeys;
+ const allKeys = [...keys, ...newKeys];
+
+ let availablePointerFields = userPointers
+ .map(ptr => `userField:${ptr}`)
+ .filter(ptr => !allKeys.includes(ptr) && ptr.includes(input));
+
+ let possiblePrefix = ['role:']
+ .filter(o => o.startsWith(input) && o.length > input.length) // filter matching prefixes
+ .concat(...availablePointerFields); //
+
+ // pointer fields that are not applied yet;
+ let availableFields = [];
+
+ // do not suggest unique rows that are already added;
+ let uniqueOptions = ['*', 'authenticated'].filter(
+ key =>
+ !allKeys.includes(key) && (input.length == 0 || key.startsWith(input))
+ );
+
+ availableFields.push(...uniqueOptions);
+ availableFields.push(...possiblePrefix);
+
+ return availableFields;
+ }
+
+ onClick(e) {
+ this.setState(
+ {
+ activeSuggestion: 0,
+ newEntry: e.currentTarget.innerText,
+ showSuggestions: false
+ },
+ () => {
+ this.props.onChange(this.state.newEntry);
+ }
+ );
+ }
+
+ buildLabel(input) {
+ let label;
+ if (input.startsWith('userField:')) {
+ label = 'Name of field with pointer(s) to User';
+ } else if (input.startsWith('user:')) {
+ label = 'Find User by id or name';
+ } else if (input.startsWith('role:')) {
+ label = 'Find Role by id or name';
+ }
+
+ return label;
+ }
+
+ render() {
+ let classes = [styles.dialog, unselectable];
+
+ let placeholderText = 'Role/User id/name * or authenticated\u2026';
+
+ return (
+
+
+
{this.props.title}
+
+
+
+ {this.state.keys.map(key =>
+ this.renderRow(key, this.state.columns, this.state.entryTypes)
+ )}
+
+ {this.state.newKeys.map(key =>
+ this.renderRow(key, this.state.columns, this.state.entryTypes)
+ )}
+
+
+
+ this.onUserInput(e)}
+ onSubmit={this.checkEntry.bind(this)}
+ placeholder={placeholderText}
+ buildSuggestions={input => this.suggestInput(input)}
+ buildLabel={input => this.buildLabel(input)}
+ error={this.state.entryError}
+ />
+
+
+
+ {this.state.entryError}
+
+
+
+
+
+
+
+ this.props.onConfirm(this.outputPerms())}
+ />
+
+
+ {this.props.details}
+
+
+
+ );
+ }
+}
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
new file mode 100644
index 0000000000..5888126fec
--- /dev/null
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
@@ -0,0 +1,236 @@
+/*
+ * 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 "stylesheets/globals.scss";
+
+$labelWidth: 440px;
+$fieldsWidth: 480px;
+
+$deleteColWidth: 44px;
+
+$entryMargin: 20px;
+$entryWidth: calc(#{$labelWidth} - #{$entryMargin}* 2);
+
+$permissionsDialogWidth: calc(
+ #{$labelWidth} + #{$fieldsWidth} + #{$deleteColWidth}
+);
+
+.dialog {
+ @include modalAnimation();
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: $permissionsDialogWidth;
+ background: white;
+ border-radius: 5px;
+ overflow: hidden;
+ transition: width 0.3s 0.15s ease-out;
+}
+
+.header {
+ height: 50px;
+ background: $blue;
+ position: relative;
+ color: #ffffff;
+ line-height: 50px;
+ font-size: 16px;
+ text-align: center;
+}
+
+.level {
+ height: 50px;
+ width: $permissionsDialogWidth; // width: 658px;
+ background: #0e69a1;
+ position: relative;
+ color: white;
+ transition: width 0.3s 0.15s ease-out;
+
+ > div {
+ margin: 0;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+
+ > span {
+ display: inline-block;
+ font-size: 12;
+ height: 50px;
+ line-height: 50px;
+ padding-left: 20px;
+ }
+}
+
+.tableWrap {
+ height: 450px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.second {
+ width: #{$fieldsWidth};
+}
+
+.table {
+ position: relative;
+ min-height: 450px;
+
+ .overlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ pointer-events: none;
+ background: rgba(0, 0, 40, 0.03);
+
+ &.second {
+ left: $labelWidth;
+ }
+ }
+}
+
+.footer {
+ position: relative;
+ height: 51px;
+ border-top: 1px solid #e3e3ea;
+
+ .details {
+ font-size: 12px;
+ padding-left: 20px;
+
+ a {
+ color: $blue;
+ }
+ }
+
+ .actions {
+ float: right;
+ padding: 10px 15px;
+
+ a {
+ margin-left: 10px;
+ }
+ }
+}
+
+.multiselect {
+ display: inline-block;
+ width: #{$fieldsWidth};
+}
+
+.row {
+ display: flex;
+ min-height: 50px;
+ height: 100%;
+ vertical-align: middle;
+ font-size: 15px;
+ border-bottom: 1px solid #e3e3ea;
+ white-space: nowrap;
+
+ &:nth-child(odd) {
+ background: rgba(14, 105, 161, 0.03);
+ }
+}
+
+.row.public {
+ background: rgba(22, 156, 238, 0.18);
+ border-bottom: 1px solid #0e69a1;
+ color: $blue;
+}
+
+.label {
+ display: inline-flex;
+ width: $labelWidth;
+ padding: 0 20px;
+ flex-direction: column;
+ align-self: center;
+}
+
+.entry {
+ height: 30px;
+ width: $entryWidth;
+ border: 1px solid $mainTextColor;
+ border-radius: 5px;
+ font-size: 14px;
+ outline: none;
+ padding: 0 6px;
+ margin: 10px $entryMargin;
+ vertical-align: top;
+}
+
+.error {
+ border-color: $red;
+ color: $red;
+ overflow: hidden;
+ white-space: normal;
+}
+
+.delete {
+ display: inline-block;
+ vertical-align: top;
+ width: 32px;
+ height: 50px;
+ padding-top: 15px;
+ text-align: right;
+
+ svg {
+ vertical-align: top;
+ cursor: pointer;
+ fill: #c1c7cd;
+
+ &:hover {
+ fill: $red;
+ }
+ }
+}
+
+.pillHolder {
+ max-width: 200px;
+ overflow: hidden;
+ display: inline-flex;
+ align-self: center;
+ padding-left: 4px;
+}
+
+.pillType {
+ width: auto;
+ display: inline-flex;
+ height: 20;
+ padding: 2px 8px 0 8px;
+}
+
+.multiselect {
+ .pillType {
+ visibility: collapse;
+ display: none;
+ top: 5px;
+ }
+}
+
+.hint {
+ color: $secondaryTextColor;
+ font-size: 0.8em;
+}
+.selectable {
+ user-select: text;
+}
+.prefix {
+ color: #0e69a1;
+}
+
+.suggestions {
+ margin-left: -19px;
+ width: $entryWidth;
+ margin-top: -24px;
+}
+
+.entry input {
+ width: $entryWidth !important;
+ padding: 0 6px;
+ margin: 10px 20px;
+}
+
+@include modalKeyframes();
diff --git a/src/components/PushAudienceDialog/InstallationCondition.react.js b/src/components/PushAudienceDialog/InstallationCondition.react.js
index 812cb67697..b9f3b68564 100644
--- a/src/components/PushAudienceDialog/InstallationCondition.react.js
+++ b/src/components/PushAudienceDialog/InstallationCondition.react.js
@@ -51,7 +51,7 @@ function compareValue(info, value, onChangeCompareTo) {
return
onChangeCompareTo(_value === 'True')} >
- {["True", "False"].map(value => {value} )}
+ {['True', 'False'].map(value => {value} )}
case 'Number':
return
onChangeCompareTo(validateNumeric(_value) ? Number(_value) : Number(value))} ref={setFocus}/>;
diff --git a/src/components/PushAudienceDialog/PushAudienceDialog.react.js b/src/components/PushAudienceDialog/PushAudienceDialog.react.js
index 98d9f4a336..8fb0355dbd 100644
--- a/src/components/PushAudienceDialog/PushAudienceDialog.react.js
+++ b/src/components/PushAudienceDialog/PushAudienceDialog.react.js
@@ -263,7 +263,7 @@ export default class PushAudienceDialog extends React.Component {
0 || this.state.errorMessage && this.state.errorMessage.length > 0)}
+ show={Boolean((this.props.errorMessage && this.props.errorMessage.length > 0) || (this.state.errorMessage && this.state.errorMessage.length > 0))}
color='red' >
{this.props.errorMessage || this.state.errorMessage}
diff --git a/src/components/ScrollHint/ScrollHint.react.js b/src/components/ScrollHint/ScrollHint.react.js
new file mode 100644
index 0000000000..8933679914
--- /dev/null
+++ b/src/components/ScrollHint/ScrollHint.react.js
@@ -0,0 +1,31 @@
+/*
+ * 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 styles from 'components/ScrollHint/ScrollHint.scss'
+
+ export default class ScrollHint extends React.Component {
+ constructor() {
+ super();
+ this.state = { active: false };
+ }
+
+ toggle(active) {
+ this.setState({ active });
+ }
+
+ render() {
+ const { active } = this.state;
+
+ const classes = [
+ styles.scrollHint,
+ active ? styles.active: undefined
+ ].join(' ');
+
+ return
;
+ }
+ }
diff --git a/src/components/ScrollHint/ScrollHint.scss b/src/components/ScrollHint/ScrollHint.scss
new file mode 100644
index 0000000000..96ffb54834
--- /dev/null
+++ b/src/components/ScrollHint/ScrollHint.scss
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+.scrollHint.active::before{
+ content: '╲╱';
+ color: rgb(116, 214, 249);
+ position: absolute;
+ opacity: 0.8;
+ text-shadow: 0 0 .5rem rgba(0,0,0,0.5);
+ width: 6rem;
+ font-size: 1rem;
+ height: 2rem;
+ line-height: 2rem;
+ text-align: center;
+ bottom: 2rem;
+ margin-left: -3rem;
+ left: 50%;
+ animation: bounce 1s ease infinite;
+ }
+
+ @keyframes bounce {
+ 50% {
+ transform: translateY(-50%);
+ }
+ 100% {
+ transform: translateY(0);
+ }
+ }
\ No newline at end of file
diff --git a/src/components/SuggestionsList/SuggestionsList.react.js b/src/components/SuggestionsList/SuggestionsList.react.js
new file mode 100644
index 0000000000..448236ddbb
--- /dev/null
+++ b/src/components/SuggestionsList/SuggestionsList.react.js
@@ -0,0 +1,80 @@
+/*
+ * 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 Popover from 'components/Popover/Popover.react';
+import React from 'react';
+import styles from 'components/SuggestionsList/SuggestionsList.scss';
+import Position from 'lib/Position';
+
+export default class Suggestion extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ activeSuggestion: 0,
+ open: false,
+ position: null
+ };
+
+ this.popoverRef = React.createRef(null);
+
+ this.handleScroll = () => {
+ let newPosition = this.props.fixed
+ ? Position.inWindow(this.node)
+ : Position.inDocument(this.node);
+ newPosition.y += this.node.offsetHeight;
+ if (this.popoverRef.current) {
+ this.popoverRef.current.setPosition(newPosition);
+ }
+ };
+ }
+
+ toggle() {
+ this.setPosition();
+ this.setState({ open: !this.state.open });
+ }
+
+ setPosition(position) {
+ this.popoverRef.current && this.popoverRef.current.setPosition(position);
+ }
+
+ close() {
+ this.setState({ open: false });
+ }
+
+ render() {
+ const {
+ position,
+ onExternalClick,
+ suggestions,
+ suggestionsStyle,
+ activeSuggestion,
+ onClick} = this.props;
+
+ return (
+
+
+ {suggestions.map((suggestion, index) => {
+ let className;
+ if (index === activeSuggestion) {
+ className = styles.active;
+ }
+ return (
+
+ {suggestion}
+
+ );
+ })}
+
+
+ );
+ }
+}
diff --git a/src/components/SuggestionsList/SuggestionsList.scss b/src/components/SuggestionsList/SuggestionsList.scss
new file mode 100644
index 0000000000..1314d0ba8f
--- /dev/null
+++ b/src/components/SuggestionsList/SuggestionsList.scss
@@ -0,0 +1,36 @@
+/*
+ * 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 'stylesheets/globals.scss';
+
+.suggestions {
+ border: 1px solid $mainTextColor;
+ border-top-width: 0;
+ list-style: none;
+ max-height: 143px;
+ overflow-y: auto;
+ -moz-box-shadow: 0px 0px 0px #666, 0px 4px 8px #666;
+ -webkit-box-shadow: 0px 0px 0px #666, 0px 4px 8px #666;
+ box-shadow:0px 0px 0px #666, 0px 4px 8px #666;
+}
+
+.suggestions li {
+ background: white;
+ padding-left: 10px;
+ font-family:"Open Sans", sans-serif;
+}
+
+.active,
+.suggestions li:hover {
+ color: #0e69a1;
+ cursor: pointer;
+ font-weight: 500;
+}
+
+.suggestions li:not(:last-of-type) {
+ border-bottom: 1px solid #999;
+}
\ No newline at end of file
diff --git a/src/components/TextInput/TextInput.react.js b/src/components/TextInput/TextInput.react.js
index 124976410e..5b111761c1 100644
--- a/src/components/TextInput/TextInput.react.js
+++ b/src/components/TextInput/TextInput.react.js
@@ -10,8 +10,30 @@ import React from 'react';
import styles from 'components/TextInput/TextInput.scss';
export default class TextInput extends React.Component {
+ componentWillReceiveProps(props) {
+ if (props.multiline !== this.props.multiline) {
+ const previousInput = this.refs.input;
+ // wait a little while for component to re-render
+ setTimeout(function() {
+ const newInput = previousInput ? this.refs.textarea : this.refs.input;
+ newInput.focus();
+ newInput.value = '';
+ newInput.value = props.value;
+ }.bind(this), 1);
+ }
+ }
+
changeValue(e) {
- this.props.onChange(e.nativeEvent.target.value);
+ const { onChange } = this.props;
+ if (onChange) {
+ onChange(e.nativeEvent.target.value);
+ }
+ }
+ updateValue(e) {
+ const { onBlur } = this.props;
+ if (onBlur) {
+ onBlur(e.nativeEvent.target.value);
+ }
}
render() {
@@ -19,19 +41,25 @@ export default class TextInput extends React.Component {
if (this.props.monospace) {
classes.push(styles.monospace);
}
- if (this.props.multiline) {
+ if (this.props.multiline || this.props.multiplelines) {
return (