+ {sections.map(({
+ name,
+ icon,
+ style,
+ link,
+ subsections,
+ }) => {
+ const active = name === section;
+ return (
+
+ {active ? _subMenu(subsections) : null}
+
+ );
+ })}
+
+
+ )
+ }
+
return
- {appSelector ?
: null}
-
-
- {sections.map(({
- name,
- icon,
- style,
- link,
- subsections,
- }) => {
- const active = name === section;
- return (
-
- {active ? _subMenu(subsections) : null}
-
- );
- })}
-
+ {sidebarContent}
Open Source Hub
GitHub
@@ -92,7 +114,7 @@ const Sidebar = ({
}
Sidebar.contextTypes = {
- generatePath: PropTypes.func
+ currentApp: PropTypes.instanceOf(ParseApp)
};
export default Sidebar;
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index bc96d2c50b..46cb2b79bb 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -7,6 +7,11 @@
*/
@import 'stylesheets/globals.scss';
+$headerHeight: 48px;
+$menuSectionHeight: 24px;
+$sidebarMenuItemHeight: 48px;
+$footerHeight: 36px;
+
.sidebar {
position: fixed;
width: 300px;
@@ -54,21 +59,21 @@
.content {
position: absolute;
overflow-y: auto;
- top: 48px;
+ top: $headerHeight;
right: 0;
bottom: 36px;
left: 0;
}
.apps + .content {
- top: 96px;
+ top: $headerHeight + $sidebarMenuItemHeight;
}
.footer {
@include NotoSansFont;
position: absolute;
background: #05283c;
- height: 36px;
+ height: $footerHeight;
line-height: 18px;
padding: 9px 0;
text-align: center;
@@ -102,7 +107,7 @@
.header {
background: #05283c;
- height: 48px;
+ height: $headerHeight;
padding: 10px 14px;
:global(.icon) {
@@ -116,7 +121,7 @@
@include ellipsis();
display: block;
background: #094162;
- height: 48px;
+ height: $sidebarMenuItemHeight;
padding: 10px 14px;
color: white;
@@ -179,11 +184,16 @@
.menuRow:hover {
background: #0c5582;
}
+
+ .appListContainer {
+ overflow-y: auto;
+ height: calc(100vh - #{$headerHeight} - #{$menuSectionHeight} - #{$sidebarMenuItemHeight} - #{$footerHeight});
+ }
}
.menuSection {
@include DosisFont;
- height: 24px;
+ height: $menuSectionHeight;
line-height: 24px;
background: #0c5582;
color: #84A5BC;
@@ -233,7 +243,7 @@
.section_header {
display: block;
- height: 48px;
+ height: $sidebarMenuItemHeight;
font-size: 18px;
line-height: 28px;
padding: 12px 14px;
diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index e48e93cd1a..dd33e4dce2 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -18,6 +18,7 @@ import Config from './Data/Config/Config.react';
import Explorer from './Analytics/Explorer/Explorer.react';
import FourOhFour from 'components/FourOhFour/FourOhFour.react';
import GeneralSettings from './Settings/GeneralSettings.react';
+import GraphQLConsole from './Data/ApiConsole/GraphQLConsole.react';
import history from 'dashboard/history';
import HostingSettings from './Settings/HostingSettings.react';
import Icon from 'components/Icon/Icon.react';
@@ -35,6 +36,7 @@ import PushIndex from './Push/PushIndex.react';
import PushNew from './Push/PushNew.react';
import PushSettings from './Settings/PushSettings.react';
import React from 'react';
+import RestConsole from './Data/ApiConsole/RestConsole.react';
import Retention from './Analytics/Retention/Retention.react';
import SchemaOverview from './Data/Browser/SchemaOverview.react';
import SecuritySettings from './Settings/SecuritySettings.react';
@@ -246,6 +248,22 @@ export default class Dashboard extends React.Component {
return
}
+ const ApiConsoleRoute = (props) => (
+
+ (
+
+
+
+ )} />
+ (
+
+
+
+ )} />
+
+
+ )
+
const AppRoute = ({ match }) => (
@@ -265,8 +283,8 @@ export default class Dashboard extends React.Component {
-
- />
+
+
diff --git a/src/dashboard/Data/ApiConsole/ApiConsole.react.js b/src/dashboard/Data/ApiConsole/ApiConsole.react.js
index a5bcc8ffb9..37bf78ac54 100644
--- a/src/dashboard/Data/ApiConsole/ApiConsole.react.js
+++ b/src/dashboard/Data/ApiConsole/ApiConsole.react.js
@@ -5,28 +5,9 @@
* 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 Button from 'components/Button/Button.react';
-import DashboardView from 'dashboard/DashboardView.react';
-import Dropdown from 'components/Dropdown/Dropdown.react';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
-import fieldStyle from 'components/Field/Field.scss';
-import FlowFooter from 'components/FlowFooter/FlowFooter.react';
-import FormNote from 'components/FormNote/FormNote.react';
-import generateCurl from 'dashboard/Data/ApiConsole/generateCurl';
-import JsonPrinter from 'components/JsonPrinter/JsonPrinter.react';
-import Label from 'components/Label/Label.react';
-import Modal from 'components/Modal/Modal.react';
-import Option from 'components/Dropdown/Option.react';
-import Parse from 'parse';
-import ParseApp from 'lib/ParseApp';
-import React from 'react';
-import request from 'dashboard/Data/ApiConsole/request';
-import styles from 'dashboard/Data/ApiConsole/ApiConsole.scss';
-import TextInput from 'components/TextInput/TextInput.react';
-import Toggle from 'components/Toggle/Toggle.react';
-import Toolbar from 'components/Toolbar/Toolbar.react';
+import React from 'react'
+import CategoryList from 'components/CategoryList/CategoryList.react'
+import DashboardView from 'dashboard/DashboardView.react'
export default class ApiConsole extends DashboardView {
@@ -34,169 +15,24 @@ export default class ApiConsole extends DashboardView {
super();
this.section = 'Core';
this.subsection = 'API Console';
-
- this.state = {
- method: 'GET',
- endpoint: '',
- useMasterKey: false,
- runAsIdentifier: '',
- sessionToken: null,
- parameters: '',
- response: {results:[]},
- fetchingUser: false,
- inProgress: false,
- error: false,
- curlModal: false,
- };
- }
-
- fetchUser() {
- if (this.state.runAsIdentifier.length === 0) {
- this.setState({ error: false, sessionToken: null });
- return;
- }
- Parse.Query.or(
- new Parse.Query(Parse.User).equalTo('username', this.state.runAsIdentifier ),
- new Parse.Query(Parse.User).equalTo('objectId', this.state.runAsIdentifier )
- ).first({ useMasterKey: true }).then((found) => {
- if (found) {
- if (found.getSessionToken()) {
- this.setState({ sessionToken: found.getSessionToken(), error: false, fetchingUser: false });
- } else {
- // Check the Sessions table
- new Parse.Query(Parse.Session).equalTo('user', found).first({ useMasterKey: true }).then((session) => {
- if (session) {
- this.setState({ sessionToken: session.getSessionToken(), error: false, fetchingUser: false });
- } else {
- this.setState({ error: 'Unable to find any active sessions for that user.', fetchingUser: false });
- }
- }, () => {
- this.setState({ error: 'Unable to find any active sessions for that user.', fetchingUser: false });
- });
- }
- } else {
- this.setState({ error: 'Unable to find that user.', fetchingUser: false });
- }
- }, () => {
- this.setState({ error: 'Unable to find that user.', fetchingUser: false });
- });
- this.setState({ fetchingUser: true });
}
- makeRequest() {
- let endpoint = this.state.endpoint + (this.state.method === 'GET' ? `?${this.state.parameters}` : '');
- let payload = (this.state.method === 'DELETE' || this.state.method === 'GET') ? null : this.state.parameters;
- let options = {};
- if (this.state.useMasterKey) {
- options.useMasterKey = true;
- }
- if (this.state.sessionToken) {
- options.sessionToken = this.state.sessionToken;
- }
- request(
- this.context.currentApp,
- this.state.method,
- endpoint,
- payload,
- options
- ).then((response) => {
- this.setState({ response });
- document.body.scrollTop = 540;
- });
- }
-
- showCurl() {
- this.setState({ curlModal: true });
+ renderSidebar() {
+ const { path } = this.props.match
+ const current = path.substr(path.lastIndexOf('/') + 1, path.length - 1)
+ return (
+
+ )
}
renderContent() {
- const methodDropdown =
- this.setState({method})} value={this.state.method}>
-
-
-
-
-
-
- let hasError = this.state.fetchingUser ||
- this.state.endpoint.length === 0 ||
- (this.state.runAsIdentifier.length > 0 && !this.state.sessionToken);
- let parameterPlaceholder = 'where={"username":"johndoe"}';
- if (this.state.method === 'POST' || this.state.method === 'PUT') {
- parameterPlaceholder = '{"name":"John"}';
- }
-
- let modal = null;
- if (this.state.curlModal) {
- let payload = this.state.method === 'DELETE' ? null : this.state.parameters;
- let options = {};
- if (this.state.useMasterKey) {
- options.useMasterKey = true;
- }
- if (this.state.sessionToken) {
- options.sessionToken = this.state.sessionToken;
- }
- let content = generateCurl(
- this.context.currentApp,
- this.state.method,
- this.state.endpoint,
- payload,
- options
- );
- modal = (
-
-
- }>
-
{content}
-
- );
- }
-
- return (
-
-
-
-
-
}
- secondary={
} />
- {modal}
-
- );
+ const child = React.Children.only(this.props.children);
+ return React.cloneElement(
+ child,
+ { ...child.props }
+ )
}
}
-
-ApiConsole.contextTypes = {
- currentApp: PropTypes.instanceOf(ParseApp)
-};
diff --git a/src/dashboard/Data/ApiConsole/ApiConsole.scss b/src/dashboard/Data/ApiConsole/ApiConsole.scss
index b0e12b0cd3..b5d307c936 100644
--- a/src/dashboard/Data/ApiConsole/ApiConsole.scss
+++ b/src/dashboard/Data/ApiConsole/ApiConsole.scss
@@ -20,3 +20,17 @@
padding: 10px 0;
text-align: center;
}
+
+.content {
+ position: relative;
+ min-height: 100vh;
+ padding-top: 96px;
+}
+
+.empty {
+ position: absolute;
+ top: 96px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
diff --git a/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js b/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js
new file mode 100644
index 0000000000..070fe4b90a
--- /dev/null
+++ b/src/dashboard/Data/ApiConsole/GraphQLConsole.react.js
@@ -0,0 +1,57 @@
+/*
+ * 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 ParseApp from 'lib/ParseApp';
+import PropTypes from 'lib/PropTypes';
+import React, { Component } from 'react';
+import { Provider } from 'react-redux'
+import { Playground, store } from 'graphql-playground-react';
+import EmptyState from 'components/EmptyState/EmptyState.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import styles from 'dashboard/Data/ApiConsole/ApiConsole.scss';
+
+export default class GraphQLConsole extends Component {
+ render() {
+ const { applicationId, graphQLServerURL, masterKey } = this.context.currentApp;
+ let content;
+ if (!graphQLServerURL) {
+ content = (
+
+
+
+ );
+ } else {
+ const headers = {
+ 'X-Parse-Application-Id': applicationId,
+ 'X-Parse-Master-Key': masterKey
+ }
+ content = (
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ {content}
+
+
+ );
+ }
+}
+
+GraphQLConsole.contextTypes = {
+ currentApp: PropTypes.instanceOf(ParseApp)
+};
diff --git a/src/dashboard/Data/ApiConsole/RestConsole.react.js b/src/dashboard/Data/ApiConsole/RestConsole.react.js
new file mode 100644
index 0000000000..23afd3abfc
--- /dev/null
+++ b/src/dashboard/Data/ApiConsole/RestConsole.react.js
@@ -0,0 +1,198 @@
+/*
+ * 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 Button from 'components/Button/Button.react';
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import fieldStyle from 'components/Field/Field.scss';
+import FlowFooter from 'components/FlowFooter/FlowFooter.react';
+import FormNote from 'components/FormNote/FormNote.react';
+import generateCurl from 'dashboard/Data/ApiConsole/generateCurl';
+import JsonPrinter from 'components/JsonPrinter/JsonPrinter.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import Option from 'components/Dropdown/Option.react';
+import Parse from 'parse';
+import ParseApp from 'lib/ParseApp';
+import PropTypes from 'lib/PropTypes';
+import React, { Component } from 'react';
+import request from 'dashboard/Data/ApiConsole/request';
+import styles from 'dashboard/Data/ApiConsole/ApiConsole.scss';
+import TextInput from 'components/TextInput/TextInput.react';
+import Toggle from 'components/Toggle/Toggle.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+
+export default class RestConsole extends Component {
+ constructor() {
+ super()
+
+ this.state = {
+ method: 'GET',
+ endpoint: '',
+ useMasterKey: false,
+ runAsIdentifier: '',
+ sessionToken: null,
+ parameters: '',
+ response: {results:[]},
+ fetchingUser: false,
+ inProgress: false,
+ error: false,
+ curlModal: false,
+ };
+ }
+
+ fetchUser() {
+ if (this.state.runAsIdentifier.length === 0) {
+ this.setState({ error: false, sessionToken: null });
+ return;
+ }
+ Parse.Query.or(
+ new Parse.Query(Parse.User).equalTo('username', this.state.runAsIdentifier ),
+ new Parse.Query(Parse.User).equalTo('objectId', this.state.runAsIdentifier )
+ ).first({ useMasterKey: true }).then((found) => {
+ if (found) {
+ if (found.getSessionToken()) {
+ this.setState({ sessionToken: found.getSessionToken(), error: false, fetchingUser: false });
+ } else {
+ // Check the Sessions table
+ new Parse.Query(Parse.Session).equalTo('user', found).first({ useMasterKey: true }).then((session) => {
+ if (session) {
+ this.setState({ sessionToken: session.getSessionToken(), error: false, fetchingUser: false });
+ } else {
+ this.setState({ error: 'Unable to find any active sessions for that user.', fetchingUser: false });
+ }
+ }, () => {
+ this.setState({ error: 'Unable to find any active sessions for that user.', fetchingUser: false });
+ });
+ }
+ } else {
+ this.setState({ error: 'Unable to find that user.', fetchingUser: false });
+ }
+ }, () => {
+ this.setState({ error: 'Unable to find that user.', fetchingUser: false });
+ });
+ this.setState({ fetchingUser: true });
+ }
+
+ makeRequest() {
+ let endpoint = this.state.endpoint + (this.state.method === 'GET' ? `?${this.state.parameters}` : '');
+ let payload = (this.state.method === 'DELETE' || this.state.method === 'GET') ? null : this.state.parameters;
+ let options = {};
+ if (this.state.useMasterKey) {
+ options.useMasterKey = true;
+ }
+ if (this.state.sessionToken) {
+ options.sessionToken = this.state.sessionToken;
+ }
+ request(
+ this.context.currentApp,
+ this.state.method,
+ endpoint,
+ payload,
+ options
+ ).then((response) => {
+ this.setState({ response });
+ document.body.scrollTop = 540;
+ });
+ }
+
+ showCurl() {
+ this.setState({ curlModal: true });
+ }
+
+ render() {
+ const methodDropdown =
+
this.setState({method})} value={this.state.method}>
+
+
+
+
+
+
+ let hasError = this.state.fetchingUser ||
+ this.state.endpoint.length === 0 ||
+ (this.state.runAsIdentifier.length > 0 && !this.state.sessionToken);
+ let parameterPlaceholder = 'where={"username":"johndoe"}';
+ if (this.state.method === 'POST' || this.state.method === 'PUT') {
+ parameterPlaceholder = '{"name":"John"}';
+ }
+
+ let modal = null;
+ if (this.state.curlModal) {
+ let payload = this.state.method === 'DELETE' ? null : this.state.parameters;
+ let options = {};
+ if (this.state.useMasterKey) {
+ options.useMasterKey = true;
+ }
+ if (this.state.sessionToken) {
+ options.sessionToken = this.state.sessionToken;
+ }
+ let content = generateCurl(
+ this.context.currentApp,
+ this.state.method,
+ this.state.endpoint,
+ payload,
+ options
+ );
+ modal = (
+
+
+ }>
+