Browse as Parse.User (Continuation)

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).

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 (

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;
   }

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>;
 };
 

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>
     );
   }

src/components/Toggle/Toggle.scss

@@ -60,6 +60,10 @@
   transition: background-position 0.15s ease-out;
 }
 
+.switchNoMargin {
+  margin: 0;
+}
+
 .left {
   .label {
     &:first-of-type {