From 5bf0990a9b1b70053868949a08fc8d4dd3488f0d Mon Sep 17 00:00:00 2001 From: Douglas Muraoka Date: Mon, 29 Apr 2019 17:03:16 -0300 Subject: [PATCH 1/8] Refactor API console into REST console --- src/dashboard/Dashboard.js | 17 +- .../Data/ApiConsole/ApiConsole.react.js | 197 ++--------------- .../Data/ApiConsole/RestConsole.react.js | 198 ++++++++++++++++++ 3 files changed, 229 insertions(+), 183 deletions(-) create mode 100644 src/dashboard/Data/ApiConsole/RestConsole.react.js diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js index e48e93cd1a..829507b778 100644 --- a/src/dashboard/Dashboard.js +++ b/src/dashboard/Dashboard.js @@ -35,6 +35,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 +247,18 @@ export default class Dashboard extends React.Component { return } + const ApiConsoleRoute = (props) => ( + + ( + + + + )}> + + + + ) + const AppRoute = ({ match }) => ( @@ -265,8 +278,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..8235df8479 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,23 @@ 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 = ( - -