add protected fields to Browser

BufferUnderflower · BufferUnderflower · commit c6b2c660282b · 2020-01-29T04:05:07.000+03:00
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -12,11 +12,14 @@ import ColumnsConfiguration
 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 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 SecureFieldsDialog 
+                      from 'dashboard/Data/Browser/SecureFieldsDialog.react';
 
 let BrowserToolbar = ({
   className,
@@ -143,6 +146,7 @@ let BrowserToolbar = ({
     onClick = null;
   }
 
+  const columns = {};
   const userPointers = [];
   const schemaSimplifiedData = {};
   const classSchema = schema.data.get('classes').get(classNameForEditors);
@@ -153,6 +157,8 @@ let BrowserToolbar = ({
         targetClass,
       };
 
+      columns[col] = { type, targetClass };
+
       if (col === 'objectId' || isUnique && col !== uniqueField) {
         return;
       }
@@ -162,26 +168,33 @@ let BrowserToolbar = ({
     });
   }
 
+  let clpDialogRef = useRef(null);
+  let protectedDialogRef = useRef(null);
+
+  const showCLP = ()=> clpDialogRef.current.handleOpen();
+  const showProtected = () => protectedDialogRef.current.handleOpen();
+
   return (
     <Toolbar
       relation={relation}
       filters={filters}
-      section={relation ? `Relation <${relation.targetClassName}>` : 'Class'}
+      section={relation ? `Relation <${relation.targetClassName}>` : "Class"}
       subsection={subsection}
-      details={details.join(' \u2022 ')}
+      details={details.join(" \u2022 ")}
     >
-      <a className={classes.join(' ')} onClick={onClick}>
-        <Icon name='plus-solid' width={14} height={14} />
+      <a className={classes.join(" ")} onClick={onClick}>
+        <Icon name="plus-solid" width={14} height={14} />
         <span>Add Row</span>
       </a>
       <div className={styles.toolbarSeparator} />
       <ColumnsConfiguration
         handleColumnsOrder={handleColumnsOrder}
         handleColumnDragDrop={handleColumnDragDrop}
-        order={order} />
+        order={order}
+      />
       <div className={styles.toolbarSeparator} />
       <a className={styles.toolbarButton} onClick={onRefresh}>
-        <Icon name='refresh-solid' width={14} height={14} />
+        <Icon name="refresh-solid" width={14} height={14} />
         <span>Refresh</span>
       </a>
       <div className={styles.toolbarSeparator} />
@@ -190,16 +203,52 @@ let BrowserToolbar = ({
         schema={schemaSimplifiedData}
         filters={filters}
         onChange={onFilterChange}
-        className={classNameForEditors} />
+        className={classNameForEditors}
+      />
       <div className={styles.toolbarSeparator} />
-      {enableSecurityDialog ? <SecurityDialog
-        setCurrent={setCurrent}
+      <SecurityDialog
+        ref={clpDialogRef}
+        disabled={!!relation || !!isUnique}
+        perms={perms}
+        className={classNameForEditors}
+        onChangeCLP={onChangeCLP}
+        userPointers={userPointers}
+        title="ClassLevelPermissions"
+        icon="locked-solid"
+      />
+      <SecureFieldsDialog
+        ref={protectedDialogRef}
+        columns={columns}
         disabled={!!relation || !!isUnique}
         perms={perms}
         className={classNameForEditors}
         onChangeCLP={onChangeCLP}
-        userPointers={userPointers} /> : <noscript />}
-      {enableSecurityDialog ? <div className={styles.toolbarSeparator} /> : <noscript/>}
+        userPointers={userPointers}
+        title="ProtectedFields"
+        icon="locked-solid"
+      />
+      {enableSecurityDialog ? (
+        <BrowserMenu
+          setCurrent={setCurrent}
+          title="Security"
+          icon="locked-solid"
+          disabled={!!relation || !!isUnique}
+        >
+          <div className={classes.join(" ")} onClick={showCLP}>
+            <span>{"ClassLevelPermissions"}</span>
+          </div>
+          <div className={classes.join(" ")} onClick={showProtected}>
+            <span>{"ProtectedFields"}</span>
+          </div>
+        </BrowserMenu>
+      ) : (
+        <noscript />
+      )}
+      {enableSecurityDialog ? (
+        <div className={styles.toolbarSeparator} />
+      ) : (
+        <noscript />
+      )}
       {menu}
     </Toolbar>
   );
diff --git a/src/dashboard/Data/Browser/SecureFieldsDialog.react.js b/src/dashboard/Data/Browser/SecureFieldsDialog.react.js
@@ -0,0 +1,149 @@
+/*
+ * 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";
+
+function validateEntry(pointers, text, parseServerSupportsPointerPermissions) {
+  if (parseServerSupportsPointerPermissions) {
+    if (pointers.indexOf(text) > -1) {
+      return Promise.resolve({ pointer: text });
+    }
+  }
+
+  let userQuery;
+  let roleQuery;
+
+  // 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 === "*" || text.toLowerCase() === "public") {
+    return Promise.resolve({ public: "*" });
+  }
+  if (text.startsWith("user:")) {
+    // no need to query roles
+    roleQuery = {
+      find: () => Promise.resolve([])
+    };
+
+    let user = text.substring(5);
+    userQuery = new Parse.Query.or(
+      new Parse.Query(Parse.User).equalTo("username", user),
+      new Parse.Query(Parse.User).equalTo("objectId", user)
+    );
+  } else if (text.startsWith("role:")) {
+    // no need to query users
+    userQuery = {
+      find: () => Promise.resolve([])
+    };
+    let role = text.substring(5);
+    roleQuery = new Parse.Query.or(
+      new Parse.Query(Parse.Role).equalTo("name", role),
+      new Parse.Query(Parse.Role).equalTo("objectId", role)
+    );
+  } else {
+    // query both
+    userQuery = Parse.Query.or(
+      new Parse.Query(Parse.User).equalTo("username", text),
+      new Parse.Query(Parse.User).equalTo("objectId", text)
+    );
+
+    roleQuery = Parse.Query.or(
+      new Parse.Query(Parse.Role).equalTo("name", text),
+      new Parse.Query(Parse.Role).equalTo("objectId", text)
+    );
+  }
+
+  return Promise.all([
+    userQuery.find({ useMasterKey: true }),
+    roleQuery.find({ useMasterKey: true })
+  ]).then(([user, role]) => {
+    if (user.length > 0) {
+      return { user: user[0] };
+    } else if (role.length > 0) {
+      return { role: role[0] };
+    } else {
+      return Promise.reject();
+    }
+  });
+}
+
+export default class SecureFieldsDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { open: false };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.perms !== this.props.perms) {
+      this.setState();
+    }
+  }
+
+  handleOpen() {
+    if (!this.props.disabled) {
+      this.setState({ open: true });
+    }
+  }
+
+  render() {
+    let dialog = null;
+    let parseServerSupportsPointerPermissions = this.context.currentApp
+      .serverInfo.features.schemas.editClassLevelPermissions;
+    if (this.props.perms && this.state.open) {
+      dialog = (
+        <ProtectedFieldsDialog
+          title="Edit Protected Fields"
+          columns={this.props.columns}
+          protectedFields={this.props.perms.protectedFields}
+          enablePointerPermissions={parseServerSupportsPointerPermissions}
+          advanced={true}
+          confirmText="Save Fields"
+          details={
+            <a
+              target="_blank"
+              href="http://docs.parseplatform.org/ios/guide/#security"
+            >
+              Learn more about CLPs and app security
+            </a>
+          }
+          validateEntry={entry =>
+            validateEntry(
+              this.props.userPointers,
+              entry,
+              parseServerSupportsPointerPermissions
+            )
+          }
+          onCancel={() => {
+            this.setState({ open: false });
+          }}
+          onConfirm={perms =>
+            this.props
+              .onChangeCLP(perms)
+              .then(() => this.setState({ open: false }))
+          }
+        />
+      );
+    }
+    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
@@ -6,7 +6,6 @@
  * 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';
@@ -43,44 +42,43 @@ export default class SecurityDialog extends React.Component {
     this.state = { open: false };
   }
 
+  /**
+   * Allows opening this dialog by reference
+   */
+  handleOpen(){
+    if (!this.props.disabled) {
+      this.setState({ open: true });
+    }
+  }
+
   render() {
     let dialog = null;
     let parseServerSupportsPointerPermissions = this.context.currentApp.serverInfo.features.schemas.editClassLevelPermissions;
     if (this.props.perms && this.state.open) {
       dialog = (
         <PermissionsDialog
-          title='Edit Class Level Permissions'
+          title='Edit Class Level Pesrmissions'
           enablePointerPermissions={parseServerSupportsPointerPermissions}
           advanced={true}
           confirmText='Save CLP'
           details={<a target="_blank" href='http://docs.parseplatform.org/ios/guide/#security'>Learn more about CLPs and app security</a>}
           permissions={this.props.perms}
-          validateEntry={entry => validateEntry(this.props.userPointers, entry, parseServerSupportsPointerPermissions)}
+          validateEntry={entry => 
+            validateEntry(this.props.userPointers, entry, parseServerSupportsPointerPermissions)}
           onCancel={() => {
             this.setState({ open: false });
           }}
-          onConfirm={perms => this.props.onChangeCLP(perms).then(() => this.setState({ open: false }))}
+          onConfirm={perms => 
+            this.props.onChangeCLP(perms).then(() => this.setState({ open: false }))}
         />
       );
     }
     let classes = [styles.toolbarButton];
     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 (
-      <div className={classes.join(' ')} onClick={onClick}>
-        <Icon width={14} height={14} name='locked-solid' />
-        <span>Security</span>
-        {dialog}
-      </div>
-    );
+  
+    return dialog;
   }
 }
 
