Playground

CHANGELOG.md

@@ -3,7 +3,8 @@
 ### master
 [Full Changelog](https://github.com/parse-community/parse-dashboard/compare/2.0.4...master)
 
-* _Contributing to this repo? Add info about your change here to be included in next release_
+* Feature: added playground feature to run custom queries
+* Feature: added save button on playground feature to save the custom query on the local storage
 ### 2.0.5
  [Full Changelog](https://github.com/parse-community/parse-dashboard/compare/2.0.4...2.0.5)
  * Fix: delete and regenerate package-lock to fix broken build

package.json

@@ -64,9 +64,11 @@
     "react-dnd-html5-backend": "10.0.2",
     "react-dom": "16.12.0",
     "react-helmet": "5.2.1",
+    "react-json-view": "^1.19.1",
     "react-redux": "5.1.1",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
+    "react-simple-code-editor": "^0.10.0",
     "regenerator-runtime": "0.13.3",
     "semver": "7.1.2"
   },
@@ -90,7 +92,7 @@
     "http-server": "0.12.0",
     "jest": "24.8.0",
     "marked": "0.8.0",
-    "node-sass": "4.13.0",
+    "node-sass": "^4.13.1",
     "null-loader": "^3.0.0",
     "parse-server": "github:parseplatform/parse-server#master",
     "path-to-regexp": "3.2.0",

src/components/BrowserFilter/BrowserFilter.react.js

@@ -34,7 +34,7 @@ export default class BrowserFilter extends React.Component {
     this.node = ReactDOM.findDOMNode(this);
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     if (props.className !== this.props.className) {
       this.setState({ open: false });
     }

src/components/Calendar/Calendar.react.js

@@ -26,7 +26,7 @@ export default class Calendar extends React.Component {
     };
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     if (props.value) {
       this.setState({
         currentMonth: new Date(props.value[getDateMethod(props.local, 'getFullYear')](), props.value[getDateMethod(props.local, 'getMonth')](), 1)

src/components/ChromeDropdown/ChromeDropdown.react.js

@@ -22,7 +22,7 @@ export default class ChromeDropdown extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.keyValueMap = {};
     nextProps.options.forEach((value) => {
       if (value instanceof Object) {
@@ -34,7 +34,7 @@ export default class ChromeDropdown extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.styles = this.props.styles || styles;
   }
 

src/components/CodeEditor/CodeEditor.example.js

@@ -0,0 +1,20 @@
+/*
+ * 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 CodeEditor from 'components/CodeEditor/CodeEditor.react';
+
+export const component = CodeEditor;
+
+export const demos = [
+  {
+    name: 'Simple code editor (only JS support)',
+    render: () => (
+      <CodeEditor placeHolder={'//I am editable, try change me!'} id='example1'/>
+    )
+  }
+];

src/components/CodeEditor/CodeEditor.react.js

@@ -0,0 +1,61 @@
+/*
+ * 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 Editor from 'react-simple-code-editor';
+import PropTypes from 'lib/PropTypes';
+import {highlight, languages} from 'prismjs/components/prism-core';
+
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import './CodeEditor.scss';
+
+export default class CodeEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {code: ''};
+    this.id = `EDITOR-${Math.floor(Math.random() * 1000)}`
+  }
+
+  get value() {
+    return document.querySelector(`#${this.id}`).value;
+  }
+
+  set value(code) {
+    this.setState({code});
+  }
+
+  render() {
+    const {className, placeHolder, id = this.id} = this.props;
+
+    return (
+      <pre style={{margin: 0}} className={`${className} line-numbers language-javascript`}>
+        <Editor
+          placeholder={placeHolder || ''}
+          value={this.state.code}
+          onValueChange={code => this.setState({code})}
+          highlight={code => highlight(code, languages.js)}
+          padding={10}
+          textareaId={id}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 12,
+            minHeight: 550,
+            height: '100%'
+          }}
+        />
+      </pre>
+    )
+  }
+}
+
+CodeEditor.propTypes = {
+  id: PropTypes.string.describe('Text area element id to be queried afterwards'),
+  className: PropTypes.string.describe('CSS classes'),
+  placeHolder: PropTypes.string.describe('Code place holder')
+};

src/components/CodeEditor/CodeEditor.scss

@@ -0,0 +1,3 @@
+pre > div > textarea:focus {
+  outline: none;
+}

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -23,7 +23,7 @@ export default class ColumnsConfiguration extends React.Component {
     this.node = ReactDOM.findDOMNode(this);
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     if (props.schema !== this.props.schema) {
       this.setState({
         open: false

src/components/DateTimeEditor/DateTimeEditor.react.js

@@ -25,7 +25,7 @@ export default class DateTimeEditor extends React.Component {
     this.handleKey = this.handleKey.bind(this);
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setState({ value: props.value, text: props.value.toISOString() });
   }
 

src/components/DateTimeEntry/DateTimeEntry.react.js

@@ -22,7 +22,7 @@ export default class DateTimeEntry extends React.Component {
     }
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setState({
       value: props.value.toISOString ? props.value.toISOString() : props.value
     });

src/components/DateTimePicker/DateTimePicker.react.js

@@ -22,7 +22,7 @@ export default class DateTimePicker extends React.Component {
     }
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     let timeRef = props.value || hoursFrom(new Date(), 1);
     this.setState({
       hours: String(timeRef[getDateMethod(props.local, 'getHours')]()),

src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js

@@ -187,7 +187,7 @@ export default class ExplorerQueryComposer extends React.Component {
     return options;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let initialState = this.getInitialStateFromProps(nextProps);
     this.setState({ ...initialState });
   }

src/components/FlowView/FlowView.react.js

@@ -22,7 +22,7 @@ export default class FlowView extends React.Component {
     };
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     let newChanges = {...this.state.changes};
     for (let k in props.initialFields) {
       if (this.state.changes[k] === props.initialFields[k]) {

src/components/FourOhFour/FourOhFour.react.js

@@ -22,7 +22,7 @@ export default class FourOhFour extends React.Component {
     this.updateEmoji = this.updateEmoji.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.timeout = setTimeout(this.updateEmoji, 3000);
   }
 

src/components/LiveReload/LiveReload.react.js

@@ -53,7 +53,7 @@ export default class LiveReload extends React.Component {
 		return promise;
 	}
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
 		this.shouldContinueReloading = true;
 		if (!this.state.currentData) {
 			this.fetchNewData();

src/components/MultiSelect/MultiSelect.react.js

@@ -27,7 +27,7 @@ export default class MultiSelect extends React.Component {
     this.node = ReactDOM.findDOMNode(this);
   }
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     //Necessary for when the size of the field changes.
     this.setState({}, this.setPosition.bind(this));
   }

src/components/Popover/Popover.react.js

@@ -32,7 +32,7 @@ export default class Popover extends React.Component {
     super();
     this._checkExternalClick = this._checkExternalClick.bind(this);
   }
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     let wrapperStyle = this.props.fixed ?
       styles.fixed_wrapper :
       styles.popover_wrapper;
@@ -60,7 +60,7 @@ export default class Popover extends React.Component {
     this._popoverWrapper.appendChild(this._popoverLayer);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.position) {
       this._popoverLayer.style.left = this.props.position.x + 'px';
       this._popoverLayer.style.top = this.props.position.y + 'px';
@@ -78,7 +78,7 @@ export default class Popover extends React.Component {
     this._popoverWrapper.removeChild(this._popoverLayer);
   }
 
-  componentWillUpdate(nextProps) {
+  UNSAFE_componentWillUpdate(nextProps) {
     ReactDOM.render(<ContextProxy cx={this.context}>{React.Children.only(nextProps.children)}</ContextProxy>, this._popoverLayer);
   }
 

src/components/PushAudienceDialog/PushAudienceDialog.react.js

@@ -58,7 +58,7 @@ export default class PushAudienceDialog extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     let stateSettings = {};
     let audienceInfo = this.props.audienceInfo;
     //this case is only for 'New Segment' to prepopulate existing audience

src/components/PushAudiencesSelector/PushAudiencesBaseRow.react.js

@@ -43,14 +43,14 @@ export default class PushAudiencesBaseRow extends React.Component {
     }, () => {});
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchPushSubscriberCount.call(this,this.context);
     if (this.props.id == NEW_SEGMENT_ID) {
       this.setState({ isNewSegment: true });
     }
   }
 
-  componentWillReceiveProps(props, context) {
+  UNSAFE_componentWillReceiveProps(props, context) {
     if (this.context !== context) {
       this.fetchPushSubscriberCount.call(this, context);
     }

src/components/PushAudiencesSelector/PushAudiencesOption.react.js

@@ -40,7 +40,7 @@ export default class PushAudiencesOption extends PushAudiencesBaseRow {
   }
 
   // pass count information to PushNew flow
-  componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps, nextState) {
     if ((nextState.count !== this.state.count || JSON.stringify(nextProps.query) !== JSON.stringify(this.props.query))
       && this.props.isChecked) {
       nextProps.onChange.call(undefined, nextState.count);

src/components/PushExperimentDropdown/PushExperimentDropdown.react.js

@@ -22,7 +22,7 @@ export default class PushExperimentDropdown extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.styles = this.props.styles || styles;
   }
 

src/components/Sidebar/SidebarHeader.react.js

@@ -17,7 +17,7 @@ export default class SidebarHeader extends React.Component {
     super();
     this.state = { };
   }
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     let mountPath = window.PARSE_DASHBOARD_PATH;
     fetch(mountPath).then(response => {
       this.setState({ dashboardUser: response.headers.get('username') });

src/components/SlowQueriesFilter/SlowQueriesFilter.react.js

@@ -27,7 +27,7 @@ export default class SlowQueriesFilter extends React.Component {
     this.node = ReactDOM.findDOMNode(this);
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     if (props.schema !== this.props.schema) {
       this.setState({ open: false });
     }

src/dashboard/Analytics/Overview/Overview.react.js

@@ -99,11 +99,11 @@ export default class Overview extends DashboardView {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchOverview(this.context.currentApp);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
       this.fetchOverview(nextContext.currentApp);
     }

src/dashboard/Analytics/Performance/Performance.react.js

@@ -101,15 +101,15 @@ export default class Performance extends DashboardView {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.handleRunQuery(this.context.currentApp);
   }
 
   componentWillUnmount() {
     this.xhrHandles.forEach(xhr => xhr.abort());
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
       this.handleRunQuery(nextContext.currentApp);
     }

src/dashboard/Analytics/Retention/Retention.react.js

@@ -52,15 +52,15 @@ export default class Retention extends DashboardView {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchRetention(this.context.currentApp);
   }
 
   componentWillUnmount() {
     this.xhrHandles.forEach((xhr) => xhr.abort());
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
       this.fetchRetention(nextContext.currentApp);
     }

src/dashboard/Apps/AppsIndex.react.js

@@ -95,7 +95,7 @@ export default class AppsIndex extends React.Component {
     this.focusField = this.focusField.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (AppsManager.apps().length === 1) {
       const [app] = AppsManager.apps();
       history.push(`/apps/${app.slug}/browser`);