Browse as Parse.User (Continuation) (#1750)

* Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed quickfix for next PR * Removed quickfix for next PR * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: don't update Array, Object or Polygon field on EditRowDialog when no changes * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed quickfix for next PR * Removed quickfix for next PR * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Reposition Browse as User menu item * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: don't update Array, Object or Polygon field on EditRowDialog when no changes * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed quickfix for next PR * Removed quickfix for next PR * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * Used object shorthand on useMasterKey * Clear user & pass from LoginDialog on handleClose * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: don't update Array, Object or Polygon field on EditRowDialog when no changes * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed quickfix for next PR * Removed quickfix for next PR * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * Test ACL with parse user login * Login dialog upgrades; Expand / Collapse TextArea fields on EditRowDialog; Fix for live reload data on EditRowDialog when data is updated on server * fix: don't update Array, Object or Polygon field on EditRowDialog when no changes * fix: eslint fixes * UX changes in main nav bar for browse as user; Toggle new type added - HIDE_LABELS; * fix: eslint fixes * Use master key state property on editRowDialog and ObjectPickerDialog; Enabled using useMasteKey property for save actions and other actions * Removed quickfix for next PR * Removed quickfix for next PR * Removed EditRowDialog fixes for next PR * Reposition Browse as User menu item * setCurrent to null on BrowserMenu open * fix rebase GeoPointEditor.react.js * fix rebase TextInput.react.js * Update Browser.react.js * Update EditRowDialog.react.js * Update EditRowDialog.react.js * Update EditRowDialog.react.js * Update ObjectPickerDialog.react.js * Update README.md * Update README.md * added missing dynamic useMasterKey Co-authored-by: Nino Crljenec <nino.crljenec@gmail.com>
parse-community · Aug 3, 2021 · 69bf041 · 69bf041
1 parent dd0a460
commit 69bf041
Show file tree

Hide file tree

Showing 11 changed files with 307 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Parse Dashboard
+# Parse Dashboard <!-- omit in toc -->
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/parse-community/parse-dashboard.svg)](https://greenkeeper.io/)
 [![Build Status](https://img.shields.io/travis/parse-community/parse-dashboard/master.svg?style=flat)](https://travis-ci.org/parse-community/parse-dashboard)
@@ -11,32 +11,34 @@
 
 Parse Dashboard is a standalone dashboard for managing your [Parse Server](https://github.com/ParsePlatform/parse-server) apps.
 
-* [Getting Started](#getting-started)
-* [Local Installation](#local-installation)
-  * [Configuring Parse Dashboard](#configuring-parse-dashboard)
-    * [File](#file)
-    * [Environment variables](#environment-variables)
-      * [Multiple apps](#multiple-apps)
-      * [Single app](#single-app)
-  * [Managing Multiple Apps](#managing-multiple-apps)
-  * [GraphQL Playground](#graphql-playground)    
-  * [App Icon Configuration](#app-icon-configuration)
-  * [App Background Color Configuration](#app-background-color-configuration)
-  * [Other Configuration Options](#other-configuration-options)
-    * [Prevent columns sorting](#prevent-columns-sorting)
-* [Running as Express Middleware](#running-as-express-middleware)
-* [Deploying Parse Dashboard](#deploying-parse-dashboard)
-  * [Preparing for Deployment](#preparing-for-deployment)
-  * [Security Considerations](#security-considerations)
-    * [Configuring Basic Authentication](#configuring-basic-authentication)
-    * [Separating App Access Based on User Identity](#separating-app-access-based-on-user-identity)
-  * [Use Read-Only masterKey](#use-read-only-masterKey)
-    * [Making an app read-only for all users](#making-an-app-read-only-for-all-users)
-    * [Makings users read-only](#makings-users-read-only)
-    * [Making user's apps readOnly](#making-users-apps-readonly)
-  * [Configuring Localized Push Notifications](#configuring-localized-push-notifications)
-  * [Run with Docker](#run-with-docker)
-* [Contributing](#contributing)
+- [Getting Started](#getting-started)
+- [Local Installation](#local-installation)
+  - [Configuring Parse Dashboard](#configuring-parse-dashboard)
+    - [File](#file)
+    - [Environment variables](#environment-variables)
+      - [Multiple apps](#multiple-apps)
+      - [Single app](#single-app)
+  - [Managing Multiple Apps](#managing-multiple-apps)
+  - [GraphQL Playground](#graphql-playground)
+  - [App Icon Configuration](#app-icon-configuration)
+  - [App Background Color Configuration](#app-background-color-configuration)
+  - [Other Configuration Options](#other-configuration-options)
+    - [Prevent columns sorting](#prevent-columns-sorting)
+- [Running as Express Middleware](#running-as-express-middleware)
+- [Deploying Parse Dashboard](#deploying-parse-dashboard)
+  - [Preparing for Deployment](#preparing-for-deployment)
+  - [Security Considerations](#security-considerations)
+    - [Configuring Basic Authentication](#configuring-basic-authentication)
+    - [Separating App Access Based on User Identity](#separating-app-access-based-on-user-identity)
+  - [Use Read-Only masterKey](#use-read-only-masterkey)
+    - [Making an app read-only for all users](#making-an-app-read-only-for-all-users)
+    - [Makings users read-only](#makings-users-read-only)
+    - [Making user's apps readOnly](#making-users-apps-readonly)
+  - [Configuring Localized Push Notifications](#configuring-localized-push-notifications)
+  - [Run with Docker](#run-with-docker)
+- [Features](#features)
+  - [Browse as User](#browse-as-user)
+- [Contributing](#contributing)
 
 # Getting Started
 
@@ -557,6 +559,17 @@ docker run -d -p 80:8080 -v host/path/to/config.json:/src/Parse-Dashboard/parse-
 
 If you are not familiar with Docker, ``--port 8080`` will be passed in as argument to the entrypoint to form the full command ``npm start -- --port 8080``. The application will start at port 8080 inside the container and port ``8080`` will be mounted to port ``80`` on your host machine.
 
+# Features
+*(The following is not a complete list of features but a work in progress to build a comprehensive feature list.)*
+
+## Browse as User
+
+▶️ *Core > Browser > Browse*
+
+This feature allows you to use the data browser as another user, respecting that user's data permissions. For example, you will only see records and fields the user has permission to see.
+
+> ⚠️ Logging in as another user will trigger the same Cloud Triggers as if the user logged in themselves using any other login method. Logging in as another user requires to enter that user's password.
+
 # Contributing
 
 We really want Parse to be yours, to see it grow and thrive in the open source community. Please see the [Contributing to Parse Dashboard guide](CONTRIBUTING.md).

diff --git a/src/components/BrowserMenu/BrowserMenu.react.js b/src/components/BrowserMenu/BrowserMenu.react.js
@@ -28,10 +28,14 @@ export default class BrowserMenu extends React.Component {
     let menu = null;
     if (this.state.open) {
       let position = Position.inDocument(this.node);
+      let titleStyle = [styles.title];
+      if (this.props.active) {
+        titleStyle.push(styles.active);
+      }
       menu = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
           <div className={styles.menu}>
-            <div className={styles.title} onClick={() => this.setState({ open: false })}>
+            <div className={titleStyle.join(' ')} onClick={() => this.setState({ open: false })}>
               <Icon name={this.props.icon} width={14} height={14} />
               <span>{this.props.title}</span>
             </div>
@@ -48,13 +52,17 @@ export default class BrowserMenu extends React.Component {
       );
     }
     const classes = [styles.entry];
+    if (this.props.active) {
+      classes.push(styles.active);
+    }
     if (this.props.disabled) {
       classes.push(styles.disabled);
     }
     let onClick = null;
     if (!this.props.disabled) {
       onClick = () => {
         this.setState({ open: true });
+        this.props.setCurrent(null);
       };
     }
     return (

diff --git a/src/components/BrowserMenu/BrowserMenu.scss b/src/components/BrowserMenu/BrowserMenu.scss
@@ -12,8 +12,8 @@
 }
 
 .entry {
-  height: 22px;
-  padding: 8px 8px 0 8px;
+  height: 30px;
+  padding: 8px;
 
   svg {
     fill: #66637A;
@@ -33,6 +33,15 @@
       fill: #66637A;
     }
   }
+
+  &.active {
+    background: $orange;
+    border-radius: 5px;
+
+    svg {
+      fill: white;
+    }
+  }
 }
 
 .title {
@@ -43,21 +52,28 @@
   svg {
     fill: white;
   }
+
+  &.active {
+    background: $orange;
+    border-radius: 5px;
+  }
 }
 
 .entry, .title {
   @include NotoSansFont;
+  position: relative;
+  bottom: -4px;
   font-size: 14px;
   color: #ffffff;
   cursor: pointer;
 
   svg {
-    vertical-align: middle;
+    vertical-align: top;
     margin-right: 4px;
   }
 
   span {
-    vertical-align: middle;
+    vertical-align: top;
     height: 14px;
     line-height: 14px;
   }

diff --git a/src/components/BrowserMenu/MenuItem.react.js b/src/components/BrowserMenu/MenuItem.react.js
@@ -8,11 +8,17 @@
 import React  from 'react';
 import styles from 'components/BrowserMenu/BrowserMenu.scss';
 
-let MenuItem = ({ text, disabled, onClick }) => {
+let MenuItem = ({ text, disabled, active, greenActive, onClick }) => {
   let classes = [styles.item];
   if (disabled) {
     classes.push(styles.disabled);
   }
+  if (active) {
+    classes.push(styles.active);
+  }
+  if (greenActive) {
+    classes.push(styles.greenActive);
+  }
   return <div className={classes.join(' ')} onClick={disabled ? undefined : onClick}>{text}</div>;
 };
 

diff --git a/src/components/Toggle/Toggle.react.js b/src/components/Toggle/Toggle.react.js
@@ -80,6 +80,10 @@ export default class Toggle extends React.Component {
         left = this.props.value === this.props.optionLeft;
         colored = this.props.colored;
         break;
+      case Toggle.Types.HIDE_LABELS:
+        colored = true;
+        left = !this.props.value;
+        break;
       default:
         labelLeft = 'No';
         labelRight = 'Yes';
@@ -90,7 +94,10 @@ export default class Toggle extends React.Component {
 
     let switchClasses = [styles.switch];
     if (colored) {
-      switchClasses.push(styles.colored)
+      switchClasses.push(styles.colored);
+    }
+    if (this.props.switchNoMargin) {
+      switchClasses.push(styles.switchNoMargin);
     }
     let toggleClasses = [styles.toggle, unselectable, input];
     if (left) {
@@ -101,9 +108,9 @@ export default class Toggle extends React.Component {
     }
     return (
       <div className={toggleClasses.join(' ')} style={this.props.additionalStyles || {}}>
-        <span className={styles.label} onClick={this.toLeft.bind(this)}>{labelLeft}</span>
+        {labelLeft && <span className={styles.label} onClick={this.toLeft.bind(this)}>{labelLeft}</span>}
         <span className={switchClasses.join(' ')} onClick={this.toggle.bind(this)}></span>
-        <span className={styles.label} onClick={this.toRight.bind(this)}>{labelRight}</span>
+        {labelRight && <span className={styles.label} onClick={this.toRight.bind(this)}>{labelRight}</span>}
       </div>
     );
   }

diff --git a/src/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss
@@ -60,6 +60,10 @@
   transition: background-position 0.15s ease-out;
 }
 
+.switchNoMargin {
+  margin: 0;
+}
+
 .left {
   .label {
     &:first-of-type {