-
+
+ {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,96 @@ export default class PermissionsDialog extends React.Component {
perms.update = perms.update || Map();
perms.delete = perms.delete || Map();
perms.addField = perms.addField || Map();
+
+ (pointerPermsSubset.get = perms.get.pointerFields || []),
+ (pointerPermsSubset.find = perms.find.pointerFields || []),
+ (pointerPermsSubset.count = perms.count.pointerFields || []),
+ (pointerPermsSubset.create = perms.create.pointerFields || []),
+ (pointerPermsSubset.update = perms.update.pointerFields || []),
+ (pointerPermsSubset.delete = perms.delete.pointerFields || []),
+ (pointerPermsSubset.addField = perms.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 +687,150 @@ 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 (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 {
+ return this.setState({
+ entryError: 'Unsupported entry'
+ });
+ }
+
+ // 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 (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);
+ 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', id], true);
- nextPerms = nextPerms.setIn(['write', id], true);
+ nextPerms = nextPerms.setIn(['read', key], true);
+ nextPerms = nextPerms.setIn(['write', key], true);
}
- 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.'
- });
+ nextKeys = this.state.newKeys.concat([key]);
+ nextEntryTypes = this.state.entryTypes.set(key, newEntry);
+
+ return this.setState(
+ {
+ perms: nextPerms,
+ 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 +845,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 +867,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 +891,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 +929,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;
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 (type.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 +1031,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 +1073,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 +1155,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 +1188,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 +1208,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, true)
+ )
+ : 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 58d8e179b2..8fb0355dbd 100644
--- a/src/components/PushAudienceDialog/PushAudienceDialog.react.js
+++ b/src/components/PushAudienceDialog/PushAudienceDialog.react.js
@@ -55,6 +55,7 @@ export default class PushAudienceDialog extends React.Component {
audienceName: '',
audienceSize: undefined,
approximate: false,
+ errorMessage: undefined,
};
}
@@ -91,6 +92,10 @@ export default class PushAudienceDialog extends React.Component {
}
handleAddCondition() {
+ if (!this.props.schema || !Object.keys(this.props.schema).length) {
+ this.setState({ errorMessage: 'You first need to create the Installation class before adding conditions to an audience.' });
+ return;
+ }
let available = Filters.availableFilters(this.props.schema, this.state.filters);
let field = Object.keys(available)[0];
this.setState(({ filters }) => ({
@@ -258,9 +263,9 @@ export default class PushAudienceDialog extends React.Component {
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.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..8c3edf752a 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() {
@@ -22,16 +44,21 @@ export default class TextInput extends React.Component {
if (this.props.multiline) {
return (
+ onChange={this.changeValue.bind(this)}
+ onBlur={this.updateValue.bind(this)} />
);
}
return (
+ {'Yellow block is ' + this.state.visibility + '% visible'}
+
+
+ {'Scroll down'}
+
+
+
+
+
+ {'Scroll up'}
+
+
+ );
+ }
+}
+export const demos = [
+ {
+ render: () => (
+ {props.children}
;
+}
diff --git a/src/dashboard/Analytics/Retention/Retention.react.js b/src/dashboard/Analytics/Retention/Retention.react.js
index b734e84a31..5fe7e4a905 100644
--- a/src/dashboard/Analytics/Retention/Retention.react.js
+++ b/src/dashboard/Analytics/Retention/Retention.react.js
@@ -139,7 +139,7 @@ export default class Retention extends DashboardView {
let dayData = this.state.retentions['days_old_' + daysAgo]['day_' + daysAgo];
let date = DateUtils.daysFrom(this.state.date, -daysAgo);
let formattedDate = DateUtils.monthDayStringUTC(date);
- let formattedDateSplit = formattedDate.split(" ");
+ let formattedDateSplit = formattedDate.split(' ');
let formattedDateMonth = formattedDateSplit[0];
let formattedDateDay = formattedDateSplit[1];
@@ -171,9 +171,9 @@ export default class Retention extends DashboardView {
if (!this.state.retentions || Object.keys(this.state.retentions).length === 0) {
chart = (
window.location = 'https://parse.com/apps/quickstart'} />
);
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index dd33e4dce2..6ccc04bc2b 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -56,6 +56,7 @@ import {
import { Route, Redirect } from 'react-router-dom';
import createClass from 'create-react-class';
import { Helmet } from 'react-helmet';
+import Playground from './Data/Playground/Playground.react';
const ShowSchemaOverview = false; //In progress features. Change false to true to work on this feature.
@@ -100,6 +101,9 @@ const PARSE_DOT_COM_SERVER_INFO = {
update: true,
delete: true,
},
+ playground: {
+ evalCode: true
+ }
},
parseServerVersion: 'Parse.com',
}
@@ -139,21 +143,21 @@ export default class Dashboard extends React.Component {
app.serverInfo = {
error: 'unable to connect to server',
enabledFeatures: {},
- parseServerVersion: "unknown"
+ parseServerVersion: 'unknown'
}
return Promise.resolve(app);
} else if (error.code === 107) {
app.serverInfo = {
error: 'server version too low',
enabledFeatures: {},
- parseServerVersion: "unknown"
+ parseServerVersion: 'unknown'
}
return Promise.resolve(app);
} else {
app.serverInfo = {
error: error.message || 'unknown error',
enabledFeatures: {},
- parseServerVersion: "unknown"
+ parseServerVersion: 'unknown'
}
return Promise.resolve(app);
}
@@ -260,6 +264,11 @@ export default class Dashboard extends React.Component {
(
+
+
+ )} />
);
}
@@ -157,10 +160,14 @@ export default class BrowserTable extends React.Component {
isEditing={isEditingRow}
className={this.props.className}
columns={this.props.columns}
+ schema={this.props.schema}
+ simplifiedSchema={this.props.simplifiedSchema}
+ filters={this.props.filters}
currentCol={currentCol}
isUnique={this.props.isUnique}
obj={obj}
onPointerClick={this.props.onPointerClick}
+ onFilterChange={this.props.onFilterChange}
order={this.props.order}
readOnlyFields={READ_ONLY}
row={i}
@@ -170,7 +177,9 @@ export default class BrowserTable extends React.Component {
setCurrent={this.props.setCurrent}
setEditing={this.props.setEditing}
setRelation={this.props.setRelation}
- setCopyableValue={this.props.setCopyableValue} />
+ setCopyableValue={this.props.setCopyableValue}
+ setContextMenu={this.props.setContextMenu}
+ onEditSelectedRow={this.props.onEditSelectedRow} />
}
if (this.props.editing) {
@@ -219,7 +228,8 @@ export default class BrowserTable extends React.Component {
}
let wrapLeft = 30;
for (let i = 0; i < this.props.current.col; i++) {
- wrapLeft += this.props.order[i].width;
+ const column = this.props.order[i];
+ wrapLeft += column.visible ? column.width : 0;
}
if (!this.props.isUnique) {
editor = (
@@ -240,14 +250,15 @@ export default class BrowserTable extends React.Component {
);
}
this.props.setEditing(false);
- }} />
+ }}
+ onCancel={() =>this.props.setEditing(false)} />
);
}
}
}
let addRow = null;
- if (!this.props.newObject) {
+ if (!this.props.newObject && this.props.onAddRow) {
if (this.props.relation) {
addRow = (
@@ -305,9 +316,9 @@ export default class BrowserTable extends React.Component {
icon='files-solid' /> :
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index 08ce5fe20c..017ac7573b 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -5,18 +5,18 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import BrowserFilter from 'components/BrowserFilter/BrowserFilter.react';
-import BrowserMenu from 'components/BrowserMenu/BrowserMenu.react';
-import ColumnsConfiguration
- from 'components/ColumnsConfiguration/ColumnsConfiguration.react';
-import Icon from 'components/Icon/Icon.react';
-import MenuItem from 'components/BrowserMenu/MenuItem.react';
-import prettyNumber from 'lib/prettyNumber';
-import React from 'react';
-import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react';
-import Separator from 'components/BrowserMenu/Separator.react';
-import styles from 'dashboard/Data/Browser/Browser.scss';
-import Toolbar from 'components/Toolbar/Toolbar.react';
+import BrowserFilter from 'components/BrowserFilter/BrowserFilter.react';
+import BrowserMenu from 'components/BrowserMenu/BrowserMenu.react';
+import Icon from 'components/Icon/Icon.react';
+import MenuItem from 'components/BrowserMenu/MenuItem.react';
+import prettyNumber from 'lib/prettyNumber';
+import React, { useRef } from 'react';
+import Separator from 'components/BrowserMenu/Separator.react';
+import styles from 'dashboard/Data/Browser/Browser.scss';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import SecurityDialog from 'dashboard/Data/Browser/SecurityDialog.react';
+import ColumnsConfiguration from 'components/ColumnsConfiguration/ColumnsConfiguration.react'
+import SecureFieldsDialog from 'dashboard/Data/Browser/SecureFieldsDialog.react';
let BrowserToolbar = ({
className,
@@ -31,7 +31,9 @@ let BrowserToolbar = ({
onFilterChange,
onAddColumn,
onAddRow,
+ onAddRowWithModal,
onAddClass,
+ onEditSelectedRow,
onAttachRows,
onAttachSelectedRows,
onCloneSelectedRows,
@@ -41,6 +43,7 @@ let BrowserToolbar = ({
onDropClass,
onChangeCLP,
onRefresh,
+ onEditPermissions,
hidePerms,
isUnique,
uniqueField,
@@ -98,13 +101,20 @@ let BrowserToolbar = ({
/>
);
- } else {
+ } else if (onAddRow) {
menu = (
clpDialogRef.current.handleOpen();
+ const showProtected = () => protectedDialogRef.current.handleOpen();
+
return (
-
- Add Row
-
-
+ {onAddRow && (
+
+ Add Row
+
+ )}
+ {onAddRow &&
}
- Refresh
@@ -190,16 +212,56 @@ let BrowserToolbar = ({
schema={schemaSimplifiedData}
filters={filters}
onChange={onFilterChange}
- className={classNameForEditors} />
-
- {enableSecurityDialog ?
}
+ {perms && enableSecurityDialog ? (
+
:
+
+ ) : (
+
+ ) : (
+
);
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 105ff4d908..096038b53a 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -8,6 +8,7 @@
import copy from 'copy-to-clipboard';
import BrowserTable from 'dashboard/Data/Browser/BrowserTable.react';
import BrowserToolbar from 'dashboard/Data/Browser/BrowserToolbar.react';
+import ContextMenu from 'components/ContextMenu/ContextMenu.react';
import * as ColumnPreferences from 'lib/ColumnPreferences';
import ParseApp from 'lib/ParseApp';
import React from 'react';
@@ -33,7 +34,8 @@ export default class DataBrowser extends React.Component {
order: order,
current: null,
editing: false,
- copyableValue: undefined
+ copyableValue: undefined,
+ simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className)
};
this.handleKey = this.handleKey.bind(this);
@@ -43,6 +45,7 @@ export default class DataBrowser extends React.Component {
this.setEditing = this.setEditing.bind(this);
this.handleColumnsOrder = this.handleColumnsOrder.bind(this);
this.setCopyableValue = this.setCopyableValue.bind(this);
+ this.setContextMenu = this.setContextMenu.bind(this);
this.saveOrderTimeout = null;
}
@@ -58,6 +61,7 @@ export default class DataBrowser extends React.Component {
order: order,
current: null,
editing: false,
+ simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className)
});
} else if (Object.keys(props.columns).length !== Object.keys(this.props.columns).length
|| (props.isUnique && props.uniqueField !== this.props.uniqueField)) {
@@ -89,6 +93,20 @@ export default class DataBrowser extends React.Component {
}, 1000);
}
+ getSimplifiedSchema(schema, classNameForEditors) {
+ const schemaSimplifiedData = {};
+ const classSchema = schema.data.get('classes').get(classNameForEditors);
+ if (classSchema) {
+ classSchema.forEach(({ type, targetClass }, col) => {
+ schemaSimplifiedData[col] = {
+ type,
+ targetClass,
+ };
+ });
+ }
+ return schemaSimplifiedData;
+ }
+
handleResize(index, delta) {
this.setState(({ order }) => {
order[index].width = Math.max(60, order[index].width + delta);
@@ -184,7 +202,9 @@ export default class DataBrowser extends React.Component {
case 67: // C
if ((e.ctrlKey || e.metaKey) && this.state.copyableValue !== undefined) {
copy(this.state.copyableValue); // Copies current cell value to clipboard
- this.props.showNote('Value copied to clipboard', false)
+ if (this.props.showNote) {
+ this.props.showNote('Value copied to clipboard', false);
+ }
e.preventDefault()
}
break;
@@ -192,8 +212,10 @@ export default class DataBrowser extends React.Component {
}
setEditing(editing) {
- if (this.state.editing !== editing) {
- this.setState({ editing: editing });
+ if (this.props.updateRow) {
+ if (this.state.editing !== editing) {
+ this.setState({ editing: editing });
+ }
}
}
@@ -202,13 +224,17 @@ export default class DataBrowser extends React.Component {
this.setState({ current });
}
}
-
+
setCopyableValue(copyableValue) {
if (this.state.copyableValue !== copyableValue) {
this.setState({ copyableValue });
}
}
+ setContextMenu(contextMenuX, contextMenuY, contextMenuItems) {
+ this.setState({ contextMenuX, contextMenuY, contextMenuItems });
+ }
+
handleColumnsOrder(order) {
this.setState({ order: [ ...order ] }, () => {
this.updatePreferences(order);
@@ -216,7 +242,7 @@ export default class DataBrowser extends React.Component {
}
render() {
- let { className, count, ...other } = this.props;
+ let { className, count, disableSecurityDialog, ...other } = this.props;
const { preventSchemaEdits } = this.context.currentApp;
return (
@@ -224,12 +250,15 @@ export default class DataBrowser extends React.Component {
order={this.state.order}
current={this.state.current}
editing={this.state.editing}
+ simplifiedSchema={this.state.simplifiedSchema}
className={className}
handleHeaderDragDrop={this.handleHeaderDragDrop}
handleResize={this.handleResize}
setEditing={this.setEditing}
setCurrent={this.setCurrent}
setCopyableValue={this.setCopyableValue}
+ setContextMenu={this.setContextMenu}
+ onFilterChange={this.props.onFilterChange}
{...other} />
);
}
diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
new file mode 100644
index 0000000000..5025c71fa9
--- /dev/null
+++ b/src/dashboard/Data/Browser/EditRowDialog.react.js
@@ -0,0 +1,418 @@
+import React from 'react';
+import Parse from 'parse';
+import { dateStringUTC } from 'lib/DateUtils';
+import PropTypes from 'lib/PropTypes';
+import ParseApp from 'lib/ParseApp';
+import Modal from 'components/Modal/Modal.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import TextInput from 'components/TextInput/TextInput.react';
+import DateTimeInput from 'components/DateTimeInput/DateTimeInput.react';
+import Toggle from 'components/Toggle/Toggle.react';
+import Pill from 'components/Pill/Pill.react';
+import GeoPointEditor from 'components/GeoPointEditor/GeoPointEditor.react';
+import FileEditor from 'components/FileEditor/FileEditor.react';
+import ObjectPickerDialog from 'dashboard/Data/Browser/ObjectPickerDialog.react';
+import styles from 'dashboard/Data/Browser/Browser.scss';
+
+export default class EditRowDialog extends React.Component {
+ constructor(props) {
+ super(props);
+
+ const { selectedObject } = this.props;
+ const { currentObject, openObjectPickers } = this.initializeState(
+ selectedObject
+ );
+ this.state = { currentObject, openObjectPickers };
+
+ this.updateCurrentObject = this.updateCurrentObject.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+ this.openAcl = this.openAcl.bind(this);
+ this.openPointer = this.openPointer.bind(this);
+ this.toggleObjectPicker = this.toggleObjectPicker.bind(this);
+ this.openRelation = this.openRelation.bind(this);
+ }
+
+ componentWillReceiveProps(props) {
+ const newSelectedObject = props.selectedObject;
+ const previousSelectedObject = this.props.selectedObject;
+ if (newSelectedObject.id !== previousSelectedObject.id) {
+ const { currentObject, openObjectPickers } = this.initializeState(
+ newSelectedObject
+ );
+ this.setState({ currentObject, openObjectPickers });
+ }
+ }
+
+ initializeState(newObject) {
+ const { columns } = this.props;
+ const currentObject = { ...newObject };
+ const openObjectPickers = {};
+ columns.forEach(column => {
+ const { name, type } = column;
+ if (['Array', 'Object'].indexOf(type) >= 0) {
+ currentObject[name] = JSON.stringify(currentObject[name], null, 2);
+ }
+ if (type === 'Polygon') {
+ currentObject[name] = JSON.stringify(
+ (currentObject[name] && currentObject[name].coordinates) || [
+ ['lat', 'lon']
+ ],
+ null,
+ 2
+ );
+ }
+ if (type === 'Pointer') {
+ currentObject[name] =
+ (currentObject[name] && currentObject[name].id) || '';
+ openObjectPickers[name] = false;
+ }
+ if (type === 'Relation') {
+ openObjectPickers[name] = false;
+ }
+ });
+
+ return { currentObject, openObjectPickers };
+ }
+
+ updateCurrentObject(newValue, name) {
+ const { currentObject } = this.state;
+ currentObject[name] = newValue;
+ this.setState({ currentObject });
+ }
+
+ handleChange(newValue, name, type, targetClass, toDelete) {
+ if (name == 'password') {
+ if (newValue === '') {
+ return false;
+ } else {
+ const { currentObject } = this.state;
+ currentObject.password = '';
+ }
+ }
+ const {
+ selectedObject,
+ className,
+ updateRow,
+ confirmAttachSelectedRows
+ } = this.props;
+ if (type === 'Relation') {
+ if (toDelete.length > 0) {
+ selectedObject[name].remove(toDelete);
+ selectedObject[name].parent.save(null, { useMasterKey: true });
+ }
+ if (newValue.length > 0) {
+ confirmAttachSelectedRows(
+ className,
+ selectedObject.id,
+ name,
+ newValue,
+ targetClass
+ );
+ }
+ this.toggleObjectPicker(name, false);
+ } else {
+ if (['Array', 'Object', 'Polygon'].indexOf(type) >= 0) {
+ const { currentObject } = this.state;
+ currentObject[name] = JSON.stringify(newValue, null, 2);
+ if (type === 'Polygon') {
+ newValue = {
+ __type: type,
+ coordinates: newValue
+ };
+ }
+ }
+ if (type === 'Pointer') {
+ // when Pointer newValue is array with length 0 or 1
+ const pointerId = newValue[0];
+ newValue = pointerId
+ ? Parse.Object.fromJSON({
+ className: targetClass,
+ objectId: pointerId
+ })
+ : undefined;
+ this.toggleObjectPicker(name, false);
+ }
+ updateRow(selectedObject.row, name, newValue);
+ }
+ }
+
+ openAcl() {
+ const { selectedObject, columns, handleShowAcl } = this.props;
+ const { row } = selectedObject;
+ const col = columns.findIndex(c => c.name === 'ACL');
+ handleShowAcl(row, col);
+ }
+
+ openPointer(className, id) {
+ const { onClose, handlePointerClick } = this.props;
+ onClose();
+ handlePointerClick({ className: className, id: id });
+ }
+
+ openRelation(relation) {
+ const { onClose, setRelation } = this.props;
+ onClose();
+ setRelation(relation);
+ }
+
+ toggleObjectPicker(name, isOpen) {
+ const { openObjectPickers } = this.state;
+ openObjectPickers[name] = isOpen;
+ this.setState({ openObjectPickers });
+ }
+
+ render() {
+ const { selectedObject, className, columns, onClose, schema } = this.props;
+ const { currentObject, openObjectPickers } = this.state;
+
+ const fields = columns.map(column => {
+ const { name, type, targetClass } = column;
+
+ const isHidden =
+ ['objectId', 'createdAt', 'updatedAt', 'ACL'].indexOf(name) >= 0;
+
+ if (isHidden) {
+ return;
+ }
+
+ let inputComponent;
+
+ const isDisabled =
+ (className === '_User' && ['authData'].indexOf(name) >= 0) ||
+ (selectedObject.id &&
+ className === '_Role' &&
+ ['name'].indexOf(name) >= 0) ||
+ (className === '_Session' &&
+ [
+ 'sessionToken',
+ 'expiresAt',
+ 'user',
+ 'createdWith',
+ 'installationId',
+ 'restricted'
+ ].indexOf(name) >= 0);
+
+ switch (type) {
+ case 'String':
+ inputComponent = (
+ 25
+ ? true
+ : false
+ }
+ disabled={isDisabled}
+ placeholder={name === 'password' ? '(hidden)' : ''}
+ value={currentObject[name]}
+ onChange={newValue => this.updateCurrentObject(newValue, name)}
+ onBlur={newValue => this.handleChange(newValue, name)}
+ />
+ );
+ break;
+ case 'Number':
+ inputComponent = (
+ this.updateCurrentObject(newValue, name)}
+ onBlur={newValue => this.handleChange(parseFloat(newValue), name)}
+ />
+ );
+ break;
+ case 'Array':
+ case 'Object':
+ case 'Polygon':
+ inputComponent = (
+ this.updateCurrentObject(newValue, name)}
+ onBlur={newValue =>
+ this.handleChange(JSON.parse(newValue), name, type)
+ }
+ />
+ );
+ break;
+ case 'Boolean':
+ inputComponent = isDisabled ? (
+ this.handleChange(newValue, name)}
+ />
+ );
+ break;
+ case 'Date':
+ inputComponent = (
+ this.handleChange(newValue, name)}
+ />
+ );
+ break;
+ case 'GeoPoint':
+ inputComponent = (
+
+ this.handleChange(newValue, name)}
+ />
+
+ );
+ break;
+ case 'File':
+ inputComponent = (
+
+ this.handleChange(newValue, name)}
+ />
+
+ );
+ break;
+ case 'Pointer':
+ const pointerId = selectedObject[name] && selectedObject[name].id;
+ inputComponent = openObjectPickers[name] ? (
+
+ this.handleChange(newValue, name, type, targetClass)
+ }
+ onCancel={() => this.toggleObjectPicker(name, false)}
+ />
+ ) : (
+
+ {pointerId && (
+
this.openPointer(targetClass, pointerId)}
+ value={pointerId}
+ />
+ )}
+ this.toggleObjectPicker(name, true)}
+ value={`Select ${name}`}
+ />
+
+ this.handleChange(newValue, name, type, targetClass, toDelete)
+ }
+ onCancel={() => this.toggleObjectPicker(name, false)}
+ />
+ ) : (
+ selectedObject.id && (
+
+
this.openRelation(relation)}
+ value={`View ${type}`}
+ />
+ this.toggleObjectPicker(name, true)}
+ value={`Select ${name}`}
+ />
+
;
+ }
+
+ return (
+ ` : type}
+ />
+ }
+ labelWidth={33}
+ input={inputComponent}
+ />
+ );
+ });
+
+ return (
+
+ Edit {selectedObject.id}
+
+ ) : (
+
+ New {className}
+
+ )
+ }
+ subtitle={
+
+ {selectedObject.createdAt && (
+
+ CreatedAt{' '}
+ {dateStringUTC(selectedObject.createdAt)}
+
+ )}
+ {selectedObject.updatedAt && (
+
+ UpdatedAt{' '}
+ {dateStringUTC(selectedObject.updatedAt)}
+
+ )}
+
{fields}
+
+ );
+ }
+}
+
+EditRowDialog.contextTypes = {
+ currentApp: PropTypes.instanceOf(ParseApp)
+};
diff --git a/src/dashboard/Data/Browser/Editor.react.js b/src/dashboard/Data/Browser/Editor.react.js
index 5425d333bc..30758cd710 100644
--- a/src/dashboard/Data/Browser/Editor.react.js
+++ b/src/dashboard/Data/Browser/Editor.react.js
@@ -16,7 +16,7 @@ import decode from 'parse/lib/browser/decode';
import React from 'react';
import StringEditor from 'components/StringEditor/StringEditor.react';
-let Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit }) => {
+let Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit, onCancel }) => {
let content = null;
if (type === 'String') {
content = (
@@ -119,7 +119,8 @@ let Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit }
`}
+ width={'80vw'}
+ customFooter={
+
+
+
+ this.setState({
+ selectionInput: newValue,
+ disableDataBrowserKeyControls: true
+ })
+ }
+ onBlur={newValue => this.updateSelectionFromInput(newValue)}
+ />
+
+
+
+
+
+
+
+ {Object.keys(selection).map(id => {
+ return (
+ this.selectRow(id, false)}
+ />
+ );
+ })}
+
+
+
+
+ );
+ }
+}
+
+ObjectPickerDialog.contextTypes = {
+ currentApp: PropTypes.instanceOf(ParseApp)
+};
diff --git a/src/dashboard/Data/Browser/SecureFieldsDialog.react.js b/src/dashboard/Data/Browser/SecureFieldsDialog.react.js
new file mode 100644
index 0000000000..9c0a0f08ce
--- /dev/null
+++ b/src/dashboard/Data/Browser/SecureFieldsDialog.react.js
@@ -0,0 +1,169 @@
+/*
+ * 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 Parse from 'parse';
+import React from 'react';
+import styles from 'dashboard/Data/Browser/Browser.scss';
+import ProtectedFieldsDialog from 'components/ProtectedFieldsDialog/ProtectedFieldsDialog.react';
+import ParseApp from 'lib/ParseApp';
+import PropTypes from 'prop-types';
+
+const pointerPrefix = 'userField:';
+
+function validateEntry(pointers, text, parseServerSupportsPointerPermissions) {
+ if (parseServerSupportsPointerPermissions) {
+ let fieldName = text.startsWith(pointerPrefix)
+ ? text.substring(pointerPrefix.length)
+ : text;
+ if (pointers.includes(fieldName)) {
+ return Promise.resolve({
+ entry: pointerPrefix + fieldName,
+ type: 'pointer'
+ });
+ }
+ }
+
+ let userQuery;
+ let roleQuery;
+
+ if (text === '*') {
+ return Promise.resolve({ entry: '*', type: 'public' });
+ }
+
+ if (text.toLowerCase() === 'authenticated') {
+ return Promise.resolve({ entry: 'authenticated', type: 'auth' });
+ }
+ // allow explicitly define whether it is a role or user
+ // (e.g there might be both role 'admin' and user 'admin')
+ // in such case you can type role:admin to query only roles
+
+ 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 { entry: user[0], type: 'user' };
+ } else if (role.length > 0) {
+ return { entry: role[0], type: 'role' };
+ } else {
+ return Promise.reject();
+ }
+ });
+}
+
+export default class SecureFieldsDialog extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { open: false };
+
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.perms !== this.props.perms) {
+ this.setState();
+ }
+ }
+
+ handleOpen() {
+ if (!this.props.disabled) {
+ this.setState({ open: true }, () => this.props.onEditPermissions(true));
+ }
+ }
+
+ handleClose() {
+ this.setState({ open: false },() => this.props.onEditPermissions(false));
+ }
+
+ render() {
+ let dialog = null;
+ let parseServerSupportsPointerPermissions = this.context.currentApp
+ .serverInfo.features.schemas.editClassLevelPermissions;
+ if (this.props.perms && this.state.open) {
+ dialog = (
+
+ Learn more about CLPs and app security
+
+ }
+ validateEntry={entry =>
+ validateEntry(
+ this.props.userPointers,
+ entry,
+ parseServerSupportsPointerPermissions
+ )
+ }
+ onCancel={this.handleClose}
+ onConfirm={protectedFields => {
+ let newPerms = this.props.perms;
+ newPerms.protectedFields = protectedFields;
+ this.props
+ .onChangeCLP(newPerms)
+ .then(this.handleClose);
+ }}
+ />
+ );
+ }
+ let classes = [styles.toolbarButton];
+ if (this.props.disabled) {
+ classes.push(styles.toolbarButtonDisabled);
+ }
+
+ return dialog;
+ }
+}
+
+SecureFieldsDialog.contextTypes = {
+ currentApp: PropTypes.instanceOf(ParseApp)
+};
diff --git a/src/dashboard/Data/Browser/SecurityDialog.react.js b/src/dashboard/Data/Browser/SecurityDialog.react.js
index 8f62c91daf..370e6986a3 100644
--- a/src/dashboard/Data/Browser/SecurityDialog.react.js
+++ b/src/dashboard/Data/Browser/SecurityDialog.react.js
@@ -6,30 +6,79 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import Icon from 'components/Icon/Icon.react';
import Parse from 'parse'
import ParseApp from 'lib/ParseApp';
import PermissionsDialog from 'components/PermissionsDialog/PermissionsDialog.react';
import React from 'react';
import styles from 'dashboard/Data/Browser/Browser.scss';
+const pointerPrefix = 'userField:';
+
function validateEntry(pointers, text, parseServerSupportsPointerPermissions) {
- if (parseServerSupportsPointerPermissions) {
- if (pointers.indexOf(text) > -1) {
- return Promise.resolve({ pointer: text });
+ if (parseServerSupportsPointerPermissions) {
+ let fieldName = text.startsWith(pointerPrefix)
+ ? text.substring(pointerPrefix.length)
+ : text;
+ if (pointers.includes(fieldName)) {
+ return Promise.resolve({ entry: fieldName, type: 'pointer' });
}
}
- 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.toLowerCase() === 'requiresAuthentication') {
+ return Promise.resolve({ entry: 'requiresAuthentication', type: 'auth' });
+ }
+
+ if (text.startsWith('user:')) {
+ 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)
+ );
+ // no need to query roles
+ roleQuery = {
+ find: () => Promise.resolve([])
+ };
+
+ } else if (text.startsWith('role:')) {
+ 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)
+ );
+ // no need to query users
+ userQuery = {
+ find: () => Promise.resolve([])
+ };
+ } 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 {
return Promise.reject();
}
@@ -41,6 +90,22 @@ export default class SecurityDialog extends React.Component {
super();
this.state = { open: false };
+ this.handleClose = this.handleClose.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ }
+
+ /**
+ * Allows opening this dialog by reference
+ */
+
+ handleOpen() {
+ if (!this.props.disabled) {
+ this.setState({ open: true }, () => this.props.onEditPermissions(true));
+ }
+ }
+
+ handleClose() {
+ this.setState({ open: false },() => this.props.onEditPermissions(false));
}
render() {
@@ -53,13 +118,15 @@ export default class SecurityDialog extends React.Component {
enablePointerPermissions={parseServerSupportsPointerPermissions}
advanced={true}
confirmText='Save CLP'
+ columns={this.props.columns}
details={Learn more about CLPs and app security }
permissions={this.props.perms}
- validateEntry={entry => validateEntry(this.props.userPointers, entry, parseServerSupportsPointerPermissions)}
- onCancel={() => {
- this.setState({ open: false });
- }}
- onConfirm={perms => this.props.onChangeCLP(perms).then(() => this.setState({ open: false }))}
+ userPointers={this.props.userPointers}
+ validateEntry={entry =>
+ validateEntry(this.props.userPointers, entry, parseServerSupportsPointerPermissions)}
+ onCancel={this.handleClose}
+ onConfirm={perms =>
+ this.props.onChangeCLP(perms).then(this.handleClose)}
/>
);
}
@@ -67,20 +134,8 @@ export default class SecurityDialog extends React.Component {
if (this.props.disabled) {
classes.push(styles.toolbarButtonDisabled);
}
- let onClick = null;
- if (!this.props.disabled) {
- onClick = () => {
- this.setState({ open: true });
- this.props.setCurrent(null);
- };
- }
- return (
-
- Security
- {dialog}
-
- );
+
+ return dialog;
}
}
diff --git a/src/dashboard/Data/Config/Config.react.js b/src/dashboard/Data/Config/Config.react.js
index 273b0b8dc2..4f5a9e2dda 100644
--- a/src/dashboard/Data/Config/Config.react.js
+++ b/src/dashboard/Data/Config/Config.react.js
@@ -5,19 +5,20 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import { ActionTypes } from 'lib/stores/ConfigStore';
-import Button from 'components/Button/Button.react';
-import ConfigDialog from 'dashboard/Data/Config/ConfigDialog.react';
-import EmptyState from 'components/EmptyState/EmptyState.react';
-import Icon from 'components/Icon/Icon.react';
-import { isDate } from 'lib/DateUtils';
-import Parse from 'parse';
-import React from 'react';
-import SidebarAction from 'components/Sidebar/SidebarAction';
-import subscribeTo from 'lib/subscribeTo';
-import TableHeader from 'components/Table/TableHeader.react';
-import TableView from 'dashboard/TableView.react';
-import Toolbar from 'components/Toolbar/Toolbar.react';
+import { ActionTypes } from 'lib/stores/ConfigStore';
+import Button from 'components/Button/Button.react';
+import ConfigDialog from 'dashboard/Data/Config/ConfigDialog.react';
+import DeleteParameterDialog from 'dashboard/Data/Config/DeleteParameterDialog.react';
+import EmptyState from 'components/EmptyState/EmptyState.react';
+import Icon from 'components/Icon/Icon.react';
+import { isDate } from 'lib/DateUtils';
+import Parse from 'parse';
+import React from 'react';
+import SidebarAction from 'components/Sidebar/SidebarAction';
+import subscribeTo from 'lib/subscribeTo';
+import TableHeader from 'components/Table/TableHeader.react';
+import TableView from 'dashboard/TableView.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
@subscribeTo('Config', 'config')
class Config extends TableView {
@@ -28,6 +29,7 @@ class Config extends TableView {
this.action = new SidebarAction('Create a parameter', this.createParameter.bind(this));
this.state = {
modalOpen: false,
+ showDeleteParameterDialog: false,
modalParam: '',
modalType: 'String',
modalValue: '',
@@ -56,20 +58,28 @@ class Config extends TableView {
}
renderExtras() {
- if (!this.state.modalOpen) {
- return null;
- }
const { currentApp = {} } = this.context;
- return (
- this.setState({ modalOpen: false })}
- param={this.state.modalParam}
- type={this.state.modalType}
- value={this.state.modalValue}
- masterKeyOnly={this.state.modalMasterKeyOnly}
- parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} />
- );
+ let extras = null;
+ if (this.state.modalOpen) {
+ extras = (
+ this.setState({ modalOpen: false })}
+ param={this.state.modalParam}
+ type={this.state.modalType}
+ value={this.state.modalValue}
+ masterKeyOnly={this.state.modalMasterKeyOnly}
+ parseServerVersion={currentApp.serverInfo && currentApp.serverInfo.parseServerVersion} />
+ );
+ } else if (this.state.showDeleteParameterDialog) {
+ extras = (
+ this.setState({ showDeleteParameterDialog: false })}
+ onConfirm={this.deleteParam.bind(this, this.state.modalParam)} />
+ );
+ }
+ return extras;
}
renderRow(data) {
@@ -119,6 +129,11 @@ class Config extends TableView {
}
openModal()
}
+
+ let openDeleteParameterDialog = () => this.setState({
+ showDeleteParameterDialog: true,
+ modalParam: data.param
+ });
return (
@@ -127,7 +142,7 @@ class Config extends TableView {
{value}
{data.masterKeyOnly.toString()}
-
+
@@ -196,7 +211,9 @@ class Config extends TableView {
this.props.config.dispatch(
ActionTypes.DELETE,
{ param: name }
- )
+ ).then(() => {
+ this.setState({ showDeleteParameterDialog: false });
+ });
}
createParameter() {
diff --git a/src/dashboard/Data/Config/ConfigDialog.react.js b/src/dashboard/Data/Config/ConfigDialog.react.js
index 1f7b2a0e53..bf33016e65 100644
--- a/src/dashboard/Data/Config/ConfigDialog.react.js
+++ b/src/dashboard/Data/Config/ConfigDialog.react.js
@@ -19,7 +19,7 @@ import TextInput from 'components/TextInput/TextInput.react';
import Toggle from 'components/Toggle/Toggle.react';
import validateNumeric from 'lib/validateNumeric';
import styles from 'dashboard/Data/Browser/Browser.scss';
-import semver from 'semver';
+import semver from 'semver/preload.js';
const PARAM_TYPES = [
'Boolean',
diff --git a/src/dashboard/Data/Config/DeleteParameterDialog.react.js b/src/dashboard/Data/Config/DeleteParameterDialog.react.js
new file mode 100644
index 0000000000..c3c4ed252e
--- /dev/null
+++ b/src/dashboard/Data/Config/DeleteParameterDialog.react.js
@@ -0,0 +1,60 @@
+/*
+ * 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 Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+
+export default class DeleteParameterDialog extends React.Component {
+ constructor() {
+ super();
+
+ this.state = {
+ confirmation: ''
+ };
+ }
+
+ valid() {
+ if (this.state.confirmation === this.props.param) {
+ return true;
+ }
+ return false;
+ }
+
+ render() {
+ let content = (
+ this.setState({ confirmation })} />
+ } />
+ );
+ return (
+
+ {content}
+
+ );
+ }
+}
diff --git a/src/dashboard/Data/Jobs/JobScheduleReminder.react.js b/src/dashboard/Data/Jobs/JobScheduleReminder.react.js
index a430195be9..59c09d3a9c 100644
--- a/src/dashboard/Data/Jobs/JobScheduleReminder.react.js
+++ b/src/dashboard/Data/Jobs/JobScheduleReminder.react.js
@@ -6,14 +6,14 @@ export default class JobScheduleReminder extends React.Component {
return (
- {"Be noted that "}
- {"parse-server doesn't run the jobs in the scheduled times"}
- {" by itself."}
+ {'Be noted that '}
+ {'parse-server doesn\'t run the jobs in the scheduled times'}
+ {' by itself.'}
- {"Please take a look at the "}
+ {'Please take a look at the '}
{'docs'}
- {" on how to do that."}
+ {' on how to do that.'}
);
diff --git a/src/dashboard/Data/Jobs/Jobs.react.js b/src/dashboard/Data/Jobs/Jobs.react.js
index c097c244f9..59bdea7c90 100644
--- a/src/dashboard/Data/Jobs/Jobs.react.js
+++ b/src/dashboard/Data/Jobs/Jobs.react.js
@@ -234,7 +234,7 @@ class Jobs extends TableView {
title='Delete job schedule?'
subtitle='Careful, this action cannot be undone'
confirmText='Yes, delete it'
- cancelText={`Never mind, don't`}
+ cancelText={'Never mind, don\'t'}
onCancel={() => this.setState({ toDelete: null })}
onConfirm={() => {
this.setState({ toDelete: null });
diff --git a/src/dashboard/Data/Migration/Migration.react.js b/src/dashboard/Data/Migration/Migration.react.js
index 2a36938ae1..c615a2c16d 100644
--- a/src/dashboard/Data/Migration/Migration.react.js
+++ b/src/dashboard/Data/Migration/Migration.react.js
@@ -258,7 +258,7 @@ export default class Migration extends DashboardView {
let errorMessage = null;
switch (this.context.currentApp.migration.wellKnownError) {
case 1:
- errorMessage = "This is an error state.";
+ errorMessage = 'This is an error state.';
break;
default:
errorMessage = this.context.currentApp.migration.migrationState === MIGRATION_INITIALSYNC ? null : ' ';
diff --git a/src/dashboard/Data/Playground/Playground.react.js b/src/dashboard/Data/Playground/Playground.react.js
new file mode 100644
index 0000000000..be34ccc5e9
--- /dev/null
+++ b/src/dashboard/Data/Playground/Playground.react.js
@@ -0,0 +1,204 @@
+import React, { Component } from 'react';
+import ReactJson from 'react-json-view';
+import Parse from 'parse';
+
+import PropTypes from 'lib/PropTypes';
+import ParseApp from 'lib/ParseApp';
+import CodeEditor from 'components/CodeEditor/CodeEditor.react';
+import Button from 'components/Button/Button.react';
+import SaveButton from 'components/SaveButton/SaveButton.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+
+import styles from './Playground.scss';
+
+export default class Playground extends Component {
+ constructor() {
+ super();
+ this.section = 'Core';
+ this.subsection = 'JS Console';
+ this.localKey = 'parse-dashboard-playground-code';
+ this.state = {
+ results: [],
+ running: false,
+ saving: false,
+ savingState: SaveButton.States.WAITING
+ };
+ }
+
+ overrideConsole() {
+ const originalConsoleLog = console.log;
+ const originalConsoleError = console.error;
+
+ console.log = (...args) => {
+ this.setState(({ results }) => ({
+ results: [
+ ...results,
+ ...args.map(arg => ({
+ log:
+ typeof arg === 'object'
+ ? Array.isArray(arg)
+ ? arg.map(this.getParseObjectAttr)
+ : this.getParseObjectAttr(arg)
+ : { result: arg },
+ name: 'Log'
+ }))
+ ]
+ }));
+
+ originalConsoleLog.apply(console, args);
+ };
+ console.error = (...args) => {
+ this.setState(({ results }) => ({
+ results: [
+ ...results,
+ ...args.map(arg => ({
+ log:
+ arg instanceof Error
+ ? { message: arg.message, name: arg.name, stack: arg.stack }
+ : { result: arg },
+ name: 'Error'
+ }))
+ ]
+ }));
+
+ originalConsoleError.apply(console, args);
+ };
+
+ return [originalConsoleLog, originalConsoleError];
+ }
+
+ async runCode() {
+ const [originalConsoleLog, originalConsoleError] = this.overrideConsole();
+
+ try {
+ const {
+ currentApp: { applicationId, masterKey, serverURL, javascriptKey }
+ } = this.context;
+ const originalCode = this.editor.value;
+
+ const finalCode = `return (async function(){
+ try{
+ Parse.initialize('${applicationId}', ${
+ javascriptKey ? `'${javascriptKey}'` : undefined
+ });
+ Parse.masterKey = '${masterKey}';
+ Parse.serverUrl = '${serverURL}';
+
+ ${originalCode}
+ } catch(e) {
+ console.error(e);
+ }
+ })()`;
+
+ this.setState({ running: true, results: [] });
+
+ await new Function('Parse', finalCode)(Parse);
+ } catch (e) {
+ console.error(e);
+ } finally {
+ console.log = originalConsoleLog;
+ console.error = originalConsoleError;
+ this.setState({ running: false });
+ }
+ }
+
+ saveCode() {
+ try {
+ this.setState({ saving: true, savingState: SaveButton.States.SAVING });
+ const code = this.editor.value;
+
+ window.localStorage.setItem(this.localKey, code);
+ this.setState({
+ saving: false,
+ savingState: SaveButton.States.SUCCEEDED
+ });
+
+ setTimeout(
+ () => this.setState({ savingState: SaveButton.States.WAITING }),
+ 3000
+ );
+ } catch (e) {
+ console.error(e);
+ this.setState({ saving: false, savingState: SaveButton.States.FAILED });
+ }
+ }
+
+ getParseObjectAttr(parseObject) {
+ if (parseObject instanceof Parse.Object) {
+ return parseObject.attributes;
+ }
+
+ return parseObject;
+ }
+
+ componentDidMount() {
+ if (window.localStorage) {
+ const initialCode = window.localStorage.getItem(this.localKey);
+ if (initialCode) {
+ this.editor.value = initialCode;
+ }
+ }
+ }
+
+ render() {
+ const { results, running, saving, savingState } = this.state;
+
+ return React.cloneElement(
+
+
+
+
(this.editor = editor)}
+ />
+
+
+ Console
+
+
+
+ {window.localStorage && (
+ this.saveCode()}
+ progress={saving}
+ />
+ )}
+
+
this.runCode()}
+ progress={running}
+ color="white"
+ />
+
+
+
+ {results.map(({ log, name }, i) => (
+
+
+
{
let promise = validateAndSubmitConnectionString(
diff --git a/src/dashboard/Settings/HostingSettings.react.js b/src/dashboard/Settings/HostingSettings.react.js
index 546756bf54..494cf8b800 100644
--- a/src/dashboard/Settings/HostingSettings.react.js
+++ b/src/dashboard/Settings/HostingSettings.react.js
@@ -61,7 +61,7 @@ export default class HostingSettings extends DashboardView {
labelWidth={62}
label={This page will be loaded when users click on a reset password link. Download the template .} />
}
@@ -230,7 +230,7 @@ export default class HostingSettings extends DashboardView {
This page will be loaded when users successfully change their password. Download the template .} />
}
input={This page will be loaded when users verify their email address. Download the template .} />
}
input={This page will be loaded whenever users mistype the reset password or verify email links. Download the template .} />
}
input={Upload this file to your server and tell us where you put it.} />
}
input={
+