feat: Add endpoint typeahead to API Console

Closes #226

Author: dblythy

src/components/Autocomplete/Autocomplete.react.js

@@ -127,9 +127,7 @@ export default class Autocomplete extends Component {
 
   onClick(e) {
     const userInput = e.currentTarget.innerText;
-    if (this.props.strict) {
-      this.props.onChange && this.props.onChange(userInput);
-    }
+    this.props.onChange && this.props.onChange(userInput);
     const label = this.props.label || this.props.buildLabel(userInput);
 
     this.inputRef.current.focus();
@@ -343,13 +341,20 @@ export default class Autocomplete extends Component {
 
     let suggestionsListComponent;
     if (showSuggestions && !hidden && filteredSuggestions.length) {
+      const containerWidth = this.fieldRef.current
+        ? this.fieldRef.current.offsetWidth
+        : undefined;
+      const mergedSuggestionsStyle = {
+        ...suggestionsStyle,
+        ...(containerWidth ? { width: containerWidth + 'px' } : {}),
+      };
       suggestionsListComponent = (
         <SuggestionsList
           position={this.state.position}
           ref={this.dropdownRef}
           onExternalClick={onExternalClick}
           suggestions={filteredSuggestions}
-          suggestionsStyle={suggestionsStyle}
+          suggestionsStyle={mergedSuggestionsStyle}
           suggestionsItemStyle={suggestionsItemStyle}
           activeSuggestion={activeSuggestion}
           onClick={onClick}

src/dashboard/Data/ApiConsole/RestConsole.react.js

@@ -5,6 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
+import Autocomplete from 'components/Autocomplete/Autocomplete.react';
 import Button from 'components/Button/Button.react';
 import Dropdown from 'components/Dropdown/Dropdown.react';
 import Field from 'components/Field/Field.react';
@@ -26,6 +27,29 @@ import Toggle from 'components/Toggle/Toggle.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import { CurrentApp } from 'context/currentApp';
 
+const PARSE_API_ENDPOINTS = [
+  'batch',
+  'classes/',
+  'users',
+  'login',
+  'logout',
+  'sessions',
+  'roles',
+  'files/',
+  'events/',
+  'push',
+  'installations',
+  'functions/',
+  'jobs/',
+  'schemas/',
+  'config',
+  'hooks/functions',
+  'hooks/triggers',
+  'aggregate/',
+  'purge/',
+  'health',
+];
+
 export default class RestConsole extends Component {
   static contextType = CurrentApp;
   constructor() {
@@ -43,9 +67,40 @@ export default class RestConsole extends Component {
       inProgress: false,
       error: false,
       curlModal: false,
+      classNames: [],
     };
   }
 
+  componentDidMount() {
+    this.context
+      .apiRequest('GET', 'schemas', {}, { useMasterKey: true })
+      .then(({ results }) => {
+        if (results) {
+          this.setState({ classNames: results.map(s => s.className) });
+        }
+      })
+      .catch(() => {});
+  }
+
+  buildEndpointSuggestions(input) {
+    const dynamicEndpoints = this.state.classNames.flatMap(className => [
+      `classes/${className}`,
+      `schemas/${className}`,
+      `aggregate/${className}`,
+      `purge/${className}`,
+    ]);
+
+    const allEndpoints = [...PARSE_API_ENDPOINTS, ...dynamicEndpoints];
+
+    if (!input) {
+      return allEndpoints;
+    }
+
+    return allEndpoints.filter(
+      endpoint => endpoint.toLowerCase().indexOf(input.toLowerCase()) > -1
+    );
+  }
+
   fetchUser() {
     if (this.state.runAsIdentifier.length === 0) {
       this.setState({ error: false, sessionToken: null });
@@ -210,11 +265,38 @@ export default class RestConsole extends Component {
               />
             }
             input={
-              <TextInput
-                value={this.state.endpoint}
-                monospace={true}
+              <Autocomplete
+                inputStyle={{
+                  width: '100%',
+                  height: '80px',
+                  textAlign: 'center',
+                  border: 'none',
+                  fontSize: '16px',
+                  fontFamily: '"Source Code Pro", "Courier New", monospace',
+                  background: 'transparent',
+                  padding: '0 6px',
+                  outline: 'none',
+                }}
+                containerStyle={{ width: '100%', height: 'auto' }}
+                suggestionsStyle={{
+                  maxHeight: '200px',
+                  overflowY: 'auto',
+                  fontFamily: '"Source Code Pro", "Courier New", monospace',
+                  fontSize: '14px',
+                  borderRadius: '0 0 5px 5px',
+                }}
+                suggestionsItemStyle={{
+                  padding: '8px 12px',
+                }}
                 placeholder={'classes/_User'}
                 onChange={endpoint => this.setState({ endpoint })}
+                onSubmit={() => {
+                  if (!hasError) {
+                    this.makeRequest();
+                  }
+                }}
+                buildSuggestions={input => this.buildEndpointSuggestions(input)}
+                buildLabel={() => ''}
               />
             }
           />