hasura · rikinsk · Jan 31, 2020 · Oct 9, 2019 · Oct 9, 2019 · Oct 9, 2019
@@ -57,10 +57,10 @@
     "apollo-link-ws": "^1.0.8",
     "brace": "^0.11.1",
     "deep-equal": "^1.0.1",
-    "graphiql-explorer": "0.4.4",
-    "graphql": "^14.3.0",
+    "graphiql": "1.0.0-alpha.0",
+    "graphiql-explorer": "^0.5.1",
+    "graphql": "14.5.8",
     "graphql-voyager": "^1.0.0-rc.27",
-    "hasura-console-graphiql": "0.0.11",
     "history": "^3.0.0",
     "hoist-non-react-statics": "^1.0.3",
     "inflection": "^1.12.0",
@@ -77,12 +77,12 @@
     "pretty-error": "^1.2.0",
     "prop-types": "^15.6.0",
     "query-string": "^6.1.0",
-    "react": "16.8.2",
+    "react": "16.8.6",
     "react-ace": "^6.1.1",
     "react-autosuggest": "^9.4.3",
     "react-bootstrap": "^0.32.1",
     "react-copy-to-clipboard": "^5.0.0",
-    "react-dom": "16.8.2",
+    "react-dom": "16.8.6",
     "react-helmet": "^5.2.0",
     "react-modal": "^3.1.2",
     "react-notification-system": "^0.2.17",
@@ -174,8 +174,8 @@
     "sass-loader": "^7.0.1",
     "sinon": "^1.17.7",
     "style-loader": "^0.20.3",
+    "terser-webpack-plugin": "^2.3.3",
     "timekeeper": "1.0.0",
-    "uglifyjs-webpack-plugin": "^1.2.7",
     "unused-files-webpack-plugin": "^3.4.0",
     "url-loader": "^1.0.1",
     "webpack": "^4.14.0",

@@ -0,0 +1,180 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import QueryAnalyzer from './QueryAnalyzer';
+import GraphiQL from 'graphiql';
+import { print, parse } from 'graphql';
+import { isValidGraphQLOperation } from '../utils';
+
+export default class AnalyseButton extends React.Component {
+  constructor(props) {
+    super(props);
+    // Ensure props are correct
+    if (typeof props.analyzeFetcher !== 'function') {
+      throw new TypeError('GraphiQL requires a analyzeFetcher function.');
+    }
+    this.state = {
+      optionsOpen: false,
+      highlight: null,
+      isAnalysing: false,
+      analyseQuery: '',
+    };
+  }
+  render() {
+    const operations = this.props.operations;
+    const optionsOpen = this.state.optionsOpen;
+    const hasOptions = operations && operations.length > 1;
+
+    let options = null;
+    if (hasOptions && optionsOpen) {
+      const highlight = this.state.highlight;
+      const validOperations = operations.filter(isValidGraphQLOperation);
+      if (validOperations.length) {
+        options = (
+          <ul className="execute-options">
+            {validOperations.map(operation => {
+              return (
+                <li
+                  key={operation.name ? operation.name.value : '*'}
+                  className={operation === highlight ? 'selected' : null}
+                  onMouseOver={() => this.setState({ highlight: operation })}
+                  onFocus={() => this.setState({ highlight: operation })}
+                  onMouseOut={() => this.setState({ highlight: null })}
+                  onBlur={() => this.setState({ highlight: null })}
+                  onMouseUp={() => this._onOptionSelected(operation)}
+                >
+                  {operation.name ? operation.name.value : '<Unnamed>'}
+                </li>
+              );
+            })}
+          </ul>
+        );
+      }
+    }
+    let onMouseDown;
+    if (!this.state.isAnalysing && hasOptions && !optionsOpen) {
+      onMouseDown = this._onOptionsOpen;
+    }
+
+    return (
+      <span className="analyse-button-wrap">
+        <GraphiQL.Button
+          onClick={this.handleAnalyseClick.bind(this)}
+          onMouseDown={onMouseDown}
+          title="Analyze Query"
+          label={this.state.isAnalysing ? 'Analyzing' : 'Analyze'}
+        />
+        {options}
+        {this.state.analyseQuery && (
+          <QueryAnalyzer
+            show={this.state.isAnalysing}
+            analyseQuery={this.state.analyseQuery}
+            clearAnalyse={this.clearAnalyse.bind(this)}
+            {...this.props}
+          />
+        )}
+      </span>
+    );
+  }
+  handleAnalyseClick = () => {
+    try {
+      const parsedQuery = this.props.query ? parse(this.props.query) : '';
+      if (!parsedQuery) {
+        // Don't do anything and return
+        throw new Error('No valid query');
+      }
+    } catch (e) {
+      throw new Error(`Error analysing query: ${e.message}`);
+    }
+    if (this.props.operations && this.props.operations.length > 1) {
+      this.setState({ optionsOpen: !this.state.optionsOpen });
+      return;
+    }
+    if (this.props.operations.length === 1) {
+      // Handle analyse click
+      this.onRun(
+        (this.props.operations &&
+          this.props.operations[0].name &&
+          this.props.operations[0].name.value) ||
+          ''
+      );
+    }
+  };
+  clearAnalyse = () => {
+    this.setState({ isAnalysing: false, analyseQuery: '' });
+  };
+  onRun = operation => {
+    let parseQuery = null;
+    try {
+      parseQuery = parse(this.props.query);
+    } catch (e) {
+      throw new Error(`Error analysing query: ${e.message}.`);
+    }
+
+    let jsonVariables = null;
+    try {
+      jsonVariables =
+        this.props.variables && this.props.variables.trim() !== ''
+          ? JSON.parse(this.props.variables)
+          : null;
+    } catch (e) {
+      throw new Error(`Variables are invalid JSON: ${e.message}.`);
+    }
+
+    if (typeof jsonVariables !== 'object') {
+      throw new Error('Variables are not a JSON object.');
+    }
+
+    const plainQuery = print(parseQuery);
+    const query = {
+      query: plainQuery,
+      variables: jsonVariables,
+    };
+    if (operation) {
+      query.operationName = operation;
+    }
+    const analyseQuery = {
+      query,
+    };
+    this.setState({
+      analyseQuery,
+      isAnalysing: true,
+      optionsOpen: false,
+      highlight: null,
+    });
+  };
+  _onOptionSelected = operation => {
+    this.setState({ optionsOpen: false });
+    this.onRun(operation.name && operation.name.value);
+  };
+
+  _onOptionsOpen = downEvent => {
+    let initialPress = true;
+    const downTarget = downEvent.target;
+    this.setState({ highlight: null, optionsOpen: true });
+
+    let onMouseUp = upEvent => {
+      if (initialPress && upEvent.target === downTarget) {
+        initialPress = false;
+      } else {
+        document.removeEventListener('mouseup', onMouseUp);
+        onMouseUp = null;
+        const isOptionsMenuClicked =
+          downTarget.parentNode.compareDocumentPosition(upEvent.target) &
+          Node.DOCUMENT_POSITION_CONTAINED_BY;
+        if (!isOptionsMenuClicked) {
+          // menu calls setState if it was clicked
+          this.setState({ optionsOpen: false });
+        }
+      }
+    };
+
+    document.addEventListener('mouseup', onMouseUp);
+  };
+}
+
+AnalyseButton.propTypes = {
+  operations: PropTypes.array,
+  query: PropTypes.string,
+  variables: PropTypes.string,
+  analyzeFetcher: PropTypes.func.isRequired,
+};