@sgrove/graphiql-code-exporter/lib/CodeExporter.js

Export working code snippets from GraphiQL queries

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToolbarMenu = exports.computeOperationDataList = undefined;

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _set = require('babel-runtime/core-js/set');

var _set2 = _interopRequireDefault(_set);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends4 = require('babel-runtime/helpers/extends');

var _extends5 = _interopRequireDefault(_extends4);

var _map = require('babel-runtime/core-js/map');

var _map2 = _interopRequireDefault(_map);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var createCodesandbox = function () {
  var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(files) {
    var res, json;
    return _regenerator2.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json'
              },
              body: (0, _stringify2.default)({ files: files })
            });

          case 2:
            res = _context.sent;
            _context.next = 5;
            return res.json();

          case 5:
            json = _context.sent;

            if (json.sandbox_id) {
              _context.next = 10;
              break;
            }

            throw new Error('Invalid response from Codesandbox API');

          case 10:
            return _context.abrupt('return', { sandboxId: json.sandbox_id });

          case 11:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  return function createCodesandbox(_x) {
    return _ref2.apply(this, arguments);
  };
}();

exports.default = CodeExporterWrapper;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _copyToClipboard = require('copy-to-clipboard');

var _copyToClipboard2 = _interopRequireDefault(_copyToClipboard);

var _graphql = require('graphql');

var _codemirror = require('codemirror');

var _codemirror2 = _interopRequireDefault(_codemirror);

var _toposort = require('./toposort.js');

var _toposort2 = _interopRequireDefault(_toposort);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// $FlowFixMe: can't find module
function formatVariableName(name) {
  var uppercasePattern = /[A-Z]/g;

  return name.charAt(0).toUpperCase() + name.slice(1).replace(uppercasePattern, '_$&').toUpperCase();
}


var copyIcon = _react2.default.createElement(
  'svg',
  {
    xmlns: 'http://www.w3.org/2000/svg',
    width: '20',
    height: '20',
    viewBox: '0 0 24 24' },
  _react2.default.createElement('path', { fill: 'none', d: 'M0 0h24v24H0V0z' }),
  _react2.default.createElement('path', { d: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z' })
);

var codesandboxIcon = _react2.default.createElement(
  'svg',
  {
    width: '20',
    height: '20',
    viewBox: '0 0 256 296',
    version: '1.1',
    xmlns: 'http://www.w3.org/2000/svg',
    preserveAspectRatio: 'xMidYMid' },
  _react2.default.createElement(
    'g',
    null,
    _react2.default.createElement('path', {
      d: 'M115.497674,261.08837 L115.497674,154.478845 L23.8139535,101.729261 L23.8139535,162.501763 L65.8104558,186.8486 L65.8104558,232.549219 L115.497674,261.08837 Z M139.311628,261.714907 L189.916577,232.563707 L189.916577,185.779949 L232.186047,161.285235 L232.186047,101.27387 L139.311628,154.895035 L139.311628,261.714907 Z M219.971965,80.8276886 L171.155386,52.5391067 L128.292316,77.4106841 L85.1040206,52.5141067 L35.8521355,81.1812296 L127.765737,134.063073 L219.971965,80.8276886 Z M0,222.211907 L0,74.4948807 L127.986799,0 L256,74.1820085 L256,221.978632 L127.983954,295.72283 L0,222.211907 Z',
      fill: '#000000'
    })
  )
);

// TODO: Need clearer separation between option defs and option values
var computeOperationDataList = exports.computeOperationDataList = function computeOperationDataList(_ref) {
  var query = _ref.query,
      variables = _ref.variables;

  var operationDefinitions = getOperationNodes(query);

  var fragmentDefinitions = [];

  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = (0, _getIterator3.default)(operationDefinitions), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var _operationDefinition = _step.value;

      if (_operationDefinition.kind === 'FragmentDefinition') {
        fragmentDefinitions.push(_operationDefinition);
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  var rawOperationDataList = operationDefinitions.map(function (operationDefinition) {
    return {
      query: (0, _graphql.print)(operationDefinition),
      name: getOperationName(operationDefinition),
      displayName: getOperationDisplayName(operationDefinition),
      // $FlowFixMe: Come back for this
      type: operationDefinition.operation || 'fragment',
      variableName: formatVariableName(getOperationName(operationDefinition)),
      variables: getUsedVariables(variables, operationDefinition),
      operationDefinition: operationDefinition,
      fragmentDependencies: findFragmentDependencies(fragmentDefinitions, operationDefinition)
    };
  });

  var operationDataList = (0, _toposort2.default)(rawOperationDataList);

  return {
    operationDefinitions: operationDefinitions,
    fragmentDefinitions: fragmentDefinitions,
    rawOperationDataList: rawOperationDataList,
    operationDataList: operationDataList
  };
};

var findFragmentDependencies = function findFragmentDependencies(operationDefinitions, def) {
  var fragmentByName = function fragmentByName(name) {
    return operationDefinitions.find(function (def) {
      return def.name.value === name;
    });
  };

  var findReferencedFragments = function findReferencedFragments(selectionSet) {
    var selections = selectionSet.selections;

    var namedFragments = selections.map(function (selection) {
      if (selection.kind === 'FragmentSpread') {
        return fragmentByName(selection.name.value);
      } else {
        return null;
      }
    }).filter(Boolean);

    var nestedNamedFragments = selections.reduce(function (acc, selection) {
      if ((selection.kind === 'Field' || selection.kind === 'SelectionNode' || selection.kind === 'InlineFragment') && selection.selectionSet !== undefined) {
        return acc.concat(findReferencedFragments(selection.selectionSet));
      } else {
        return acc;
      }
    }, []);

    return namedFragments.concat(nestedNamedFragments);
  };

  var selectionSet = def.selectionSet;

  return findReferencedFragments(selectionSet);
};

var operationNodesMemo = [null, null];
function getOperationNodes(query) {
  if (operationNodesMemo[0] === query && operationNodesMemo[1]) {
    return operationNodesMemo[1];
  }
  var operationDefinitions = [];
  try {
    var _iteratorNormalCompletion2 = true;
    var _didIteratorError2 = false;
    var _iteratorError2 = undefined;

    try {
      for (var _iterator2 = (0, _getIterator3.default)((0, _graphql.parse)(query).definitions), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
        var def = _step2.value;

        if (def.kind === 'FragmentDefinition' || def.kind === 'OperationDefinition') {
          operationDefinitions.push(def);
        }
      }
    } catch (err) {
      _didIteratorError2 = true;
      _iteratorError2 = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion2 && _iterator2.return) {
          _iterator2.return();
        }
      } finally {
        if (_didIteratorError2) {
          throw _iteratorError2;
        }
      }
    }
  } catch (e) {}
  operationNodesMemo = [query, operationDefinitions];
  return operationDefinitions;
}

var getUsedVariables = function getUsedVariables(variables, operationDefinition) {
  return (operationDefinition.variableDefinitions || []).reduce(function (usedVariables, variable) {
    var variableName = variable.variable.name.value;
    if (variables[variableName]) {
      usedVariables[variableName] = variables[variableName];
    }

    return usedVariables;
  }, {});
};

var getOperationName = function getOperationName(operationDefinition) {
  return operationDefinition.name ? operationDefinition.name.value : operationDefinition.operation;
};

var getOperationDisplayName = function getOperationDisplayName(operationDefinition) {
  return operationDefinition.name ? operationDefinition.name.value : '<Unnamed:' + operationDefinition.operation + '>';
};

/**
 * ToolbarMenu
 *
 * A menu style button to use within the Toolbar.
 * Copied from GraphiQL: https://github.com/graphql/graphiql/blob/272e2371fc7715217739efd7817ce6343cb4fbec/src/components/ToolbarMenu.js#L16-L80
 */

var ToolbarMenu = exports.ToolbarMenu = function (_Component) {
  (0, _inherits3.default)(ToolbarMenu, _Component);

  function ToolbarMenu() {
    var _ref3;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ToolbarMenu);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref3 = ToolbarMenu.__proto__ || (0, _getPrototypeOf2.default)(ToolbarMenu)).call.apply(_ref3, [this].concat(args))), _this), _this.state = { visible: false }, _this.handleOpen = function (e) {
      e.preventDefault();
      _this.setState({ visible: true });
      _this._subscribe();
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ToolbarMenu, [{
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this._release();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var visible = this.state.visible;
      return (
        // eslint-disable-next-line
        _react2.default.createElement(
          'a',
          {
            className: 'toolbar-menu toolbar-button',
            onClick: this.handleOpen,
            onMouseDown: function onMouseDown(e) {
              return e.preventDefault();
            },
            ref: function ref(node) {
              _this2._node = node;
            },
            title: this.props.title },
          this.props.label,
          _react2.default.createElement(
            'svg',
            { width: '14', height: '8' },
            _react2.default.createElement('path', { fill: '#666', d: 'M 5 1.5 L 14 1.5 L 9.5 7 z' })
          ),
          _react2.default.createElement(
            'ul',
            { className: 'toolbar-menu-items' + (visible ? ' open' : '') },
            this.props.children
          )
        )
      );
    }
  }, {
    key: '_subscribe',
    value: function _subscribe() {
      if (!this._listener) {
        this._listener = this.handleClick.bind(this);
        document.addEventListener('click', this._listener);
      }
    }
  }, {
    key: '_release',
    value: function _release() {
      if (this._listener) {
        document.removeEventListener('click', this._listener);
        this._listener = null;
      }
    }
  }, {
    key: 'handleClick',
    value: function handleClick(e) {
      if (this._node !== e.target) {
        e.preventDefault();
        this.setState({ visible: false });
        this._release();
      }
    }
  }]);
  return ToolbarMenu;
}(_react.Component);

var CodeDisplay = function (_React$PureComponent) {
  (0, _inherits3.default)(CodeDisplay, _React$PureComponent);

  function CodeDisplay() {
    (0, _classCallCheck3.default)(this, CodeDisplay);
    return (0, _possibleConstructorReturn3.default)(this, (CodeDisplay.__proto__ || (0, _getPrototypeOf2.default)(CodeDisplay)).apply(this, arguments));
  }

  (0, _createClass3.default)(CodeDisplay, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.editor = (0, _codemirror2.default)(this._node, {
        value: this.props.code.trim(),
        lineNumbers: false,
        mode: this.props.mode,
        readOnly: true,
        theme: this.props.theme
      });
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      if (this.props.code !== prevProps.code) {
        this.editor.setValue(this.props.code);
      }
      if (this.props.mode !== prevProps.mode) {
        this.editor.setOption('mode', this.props.mode);
      }
      if (this.props.theme !== prevProps.theme) {
        this.editor.setOption('theme', this.props.theme);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      return _react2.default.createElement('div', { ref: function ref(_ref4) {
          return _this4._node = _ref4;
        } });
    }
  }]);
  return CodeDisplay;
}(_react2.default.PureComponent);

var CodeExporter = function (_Component2) {
  (0, _inherits3.default)(CodeExporter, _Component2);

  function CodeExporter() {
    var _ref5,
        _this6 = this;

    var _temp2, _this5, _ret2;

    (0, _classCallCheck3.default)(this, CodeExporter);

    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    return _ret2 = (_temp2 = (_this5 = (0, _possibleConstructorReturn3.default)(this, (_ref5 = CodeExporter.__proto__ || (0, _getPrototypeOf2.default)(CodeExporter)).call.apply(_ref5, [this].concat(args))), _this5), _this5.state = {
      showCopiedTooltip: false,
      optionValuesBySnippet: new _map2.default(),
      snippet: null,
      codesandboxResult: null
    }, _this5._activeSnippet = function () {
      return _this5.props.snippet || _this5.state.snippet || _this5.props.snippets[0];
    }, _this5.setSnippet = function (snippet) {
      _this5.props.onSelectSnippet && _this5.props.onSelectSnippet(snippet);
      _this5.setState({ snippet: snippet, codesandboxResult: null });
    }, _this5.setLanguage = function (language) {
      var snippet = _this5.props.snippets.find(function (snippet) {
        return snippet.language === language;
      });

      if (snippet) {
        _this5.setSnippet(snippet);
      }
    }, _this5.handleSetOptionValue = function (snippet, id, value) {
      _this5.props.onSetOptionValue && _this5.props.onSetOptionValue(snippet, id, value);
      var optionValuesBySnippet = _this5.state.optionValuesBySnippet;

      var snippetOptions = optionValuesBySnippet.get(snippet) || {};
      optionValuesBySnippet.set(snippet, (0, _extends5.default)({}, snippetOptions, (0, _defineProperty3.default)({}, id, value)));

      return _this5.setState({ optionValuesBySnippet: optionValuesBySnippet });
    }, _this5.getOptionValues = function (snippet) {
      var snippetDefaults = snippet.options.reduce(function (acc, option) {
        return (0, _extends5.default)({}, acc, (0, _defineProperty3.default)({}, option.id, option.initial));
      }, {});
      return (0, _extends5.default)({}, snippetDefaults, _this5.state.optionValuesBySnippet.get(snippet) || {}, _this5.props.optionValues);
    }, _this5._generateCodesandbox = function () {
      var _ref6 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2(operationDataList) {
        var snippet, generateFiles, sandboxResult;
        return _regenerator2.default.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _this5.setState({ codesandboxResult: { type: 'loading' } });
                snippet = _this5._activeSnippet();

                if (snippet) {
                  _context2.next = 5;
                  break;
                }

                // Shouldn't be able to get in this state, but just in case...
                _this5.setState({
                  codesandboxResult: { type: 'error', error: 'No active snippet' }
                });
                return _context2.abrupt('return');

              case 5:
                generateFiles = snippet.generateCodesandboxFiles;

                if (generateFiles) {
                  _context2.next = 9;
                  break;
                }

                // Shouldn't be able to get in this state, but just in case...
                _this5.setState({
                  codesandboxResult: {
                    type: 'error',
                    error: 'Snippet does not support CodeSandbox'
                  }
                });
                return _context2.abrupt('return');

              case 9:
                _context2.prev = 9;
                _context2.next = 12;
                return createCodesandbox(generateFiles(_this5._collectOptions(snippet, operationDataList, _this5.props.schema)));

              case 12:
                sandboxResult = _context2.sent;

                _this5.setState({
                  codesandboxResult: (0, _extends5.default)({ type: 'success' }, sandboxResult)
                });
                _this5.props.onGenerateCodesandbox && _this5.props.onGenerateCodesandbox(sandboxResult);
                _context2.next = 21;
                break;

              case 17:
                _context2.prev = 17;
                _context2.t0 = _context2['catch'](9);

                console.error('Error generating codesandbox', _context2.t0);
                _this5.setState({
                  codesandboxResult: {
                    type: 'error',
                    error: 'Failed to generate CodeSandbox'
                  }
                });

              case 21:
              case 'end':
                return _context2.stop();
            }
          }
        }, _callee2, _this6, [[9, 17]]);
      }));

      return function (_x2) {
        return _ref6.apply(this, arguments);
      };
    }(), _this5._collectOptions = function (snippet, operationDataList, schema) {
      var _this5$props = _this5.props,
          serverUrl = _this5$props.serverUrl,
          _this5$props$context = _this5$props.context,
          context = _this5$props$context === undefined ? {} : _this5$props$context,
          _this5$props$headers = _this5$props.headers,
          headers = _this5$props$headers === undefined ? {} : _this5$props$headers;

      var optionValues = _this5.getOptionValues(snippet);
      return {
        serverUrl: serverUrl,
        headers: headers,
        context: context,
        operationDataList: operationDataList,
        options: optionValues,
        schema: schema
      };
    }, _temp2), (0, _possibleConstructorReturn3.default)(_this5, _ret2);
  }

  (0, _createClass3.default)(CodeExporter, [{
    key: 'render',
    value: function render() {
      var _this7 = this;

      var _props = this.props,
          query = _props.query,
          snippets = _props.snippets,
          _props$variables = _props.variables,
          variables = _props$variables === undefined ? {} : _props$variables;
      var _state = this.state,
          showCopiedTooltip = _state.showCopiedTooltip,
          codesandboxResult = _state.codesandboxResult;


      var snippet = this._activeSnippet();
      var name = snippet.name,
          language = snippet.language,
          generate = snippet.generate;

      var _computeOperationData = computeOperationDataList({ query: query, variables: variables }),
          operationDefinitions = _computeOperationData.operationDefinitions,
          fragmentDefinitions = _computeOperationData.fragmentDefinitions,
          rawOperationDataList = _computeOperationData.rawOperationDataList,
          operationDataList = _computeOperationData.operationDataList;

      var optionValues = this.getOptionValues(snippet);

      var codeSnippet = operationDefinitions.length ? generate(this._collectOptions(snippet, operationDataList, this.props.schema)) : null;

      var supportsCodesandbox = snippet.generateCodesandboxFiles;

      var languages = [].concat((0, _toConsumableArray3.default)(new _set2.default(snippets.map(function (snippet) {
        return snippet.language;
      })))).sort(function (a, b) {
        return a.localeCompare(b);
      });

      return _react2.default.createElement(
        'div',
        { className: 'graphiql-code-exporter', style: { minWidth: 410 } },
        _react2.default.createElement(
          'div',
          {
            style: {
              fontFamily: 'system, -apple-system, San Francisco, Helvetica Neue, arial, sans-serif'
            } },
          _react2.default.createElement(
            'div',
            { style: { padding: '12px 7px 8px' } },
            _react2.default.createElement(
              ToolbarMenu,
              { label: language, title: 'Language' },
              languages.map(function (lang) {
                return _react2.default.createElement(
                  'li',
                  { key: lang, onClick: function onClick() {
                      return _this7.setLanguage(lang);
                    } },
                  lang
                );
              })
            ),
            _react2.default.createElement(
              ToolbarMenu,
              { label: name, title: 'Mode' },
              snippets.filter(function (snippet) {
                return snippet.language === language;
              }).map(function (snippet) {
                return _react2.default.createElement(
                  'li',
                  {
                    key: snippet.name,
                    onClick: function onClick() {
                      return _this7.setSnippet(snippet);
                    } },
                  snippet.name
                );
              })
            )
          ),
          snippet.options.length > 0 ? _react2.default.createElement(
            'div',
            { style: { padding: '0px 11px 10px' } },
            _react2.default.createElement(
              'div',
              {
                style: {
                  fontWeight: 700,
                  color: 'rgb(177, 26, 4)',
                  fontVariant: 'small-caps',
                  textTransform: 'lowercase'
                } },
              'Options'
            ),
            snippet.options.map(function (option) {
              return _react2.default.createElement(
                'div',
                { key: option.id },
                _react2.default.createElement('input', {
                  id: option.id,
                  type: 'checkbox',
                  style: { position: 'relative', top: -1 }
                  // $FlowFixMe: Come back for this
                  , checked: optionValues[option.id],
                  onChange: function onChange() {
                    return _this7.handleSetOptionValue(snippet, option.id,
                    // $FlowFixMe: Come back for this
                    !optionValues[option.id]);
                  }
                }),
                _react2.default.createElement(
                  'label',
                  { htmlFor: option.id, style: { paddingLeft: 5 } },
                  option.label
                )
              );
            })
          ) : _react2.default.createElement('div', { style: { minHeight: 8 } }),
          supportsCodesandbox ? _react2.default.createElement(
            'div',
            { style: { padding: '0 7px 8px' } },
            _react2.default.createElement(
              'button',
              {
                className: 'toolbar-button',
                style: (0, _extends5.default)({
                  backgroundColor: 'white',
                  border: 'none',
                  outline: 'none',
                  maxWidth: 320,
                  display: 'flex'
                }, codeSnippet ? {} : {
                  opacity: 0.6,
                  cursor: 'default',
                  background: '#ececec'
                }),
                type: 'button',
                disabled: !codeSnippet,
                onClick: function onClick() {
                  return _this7._generateCodesandbox(operationDataList);
                } },
              codesandboxIcon,
              ' ',
              _react2.default.createElement(
                'span',
                { style: { paddingLeft: '0.5em' } },
                'Create CodeSandbox'
              )
            ),
            codesandboxResult ? _react2.default.createElement(
              'div',
              { style: { paddingLeft: 5, paddingTop: 5 } },
              codesandboxResult.type === 'loading' ? 'Loading...' : codesandboxResult.type === 'error' ? 'Error: ' + codesandboxResult.error : _react2.default.createElement(
                'a',
                {
                  rel: 'noopener noreferrer',
                  target: '_blank',
                  href: 'https://codesandbox.io/s/' + codesandboxResult.sandboxId },
                'Visit CodeSandbox'
              )
            ) : null
          ) : null
        ),
        _react2.default.createElement(
          'button',
          {
            className: 'toolbar-button',
            style: {
              fontSize: '1.2em',
              padding: 0,
              position: 'absolute',
              left: 340,
              marginTop: -20,
              width: 40,
              height: 40,
              backgroundColor: 'white',
              borderRadius: 40,
              border: 'none',
              outline: 'none'
            },
            type: 'link',
            onClick: function onClick() {
              (0, _copyToClipboard2.default)(codeSnippet);
              _this7.setState({ showCopiedTooltip: true }, function () {
                return setTimeout(function () {
                  return _this7.setState({ showCopiedTooltip: false });
                }, 450);
              });
            } },
          _react2.default.createElement(
            'div',
            {
              style: {
                position: 'absolute',
                top: '-30px',
                left: '-15px',
                fontSize: 'small',
                padding: '6px 8px',
                color: '#fff',
                textAlign: 'left',
                textDecoration: 'none',
                wordWrap: 'break-word',
                backgroundColor: 'rgba(0,0,0,0.75)',
                borderRadius: '4px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                display: showCopiedTooltip ? 'block' : 'none'
              },
              pointerEvents: 'none' },
            'Copied!'
          ),
          copyIcon
        ),
        _react2.default.createElement(
          'div',
          {
            style: {
              padding: '15px 12px',
              margin: 0,
              borderTop: '1px solid rgb(220, 220, 220)',
              fontSize: 12
            } },
          codeSnippet ? _react2.default.createElement(CodeDisplay, {
            code: codeSnippet,
            mode: snippet.codeMirrorMode,
            theme: this.props.codeMirrorTheme
          }) : _react2.default.createElement(
            'div',
            null,
            'The query is invalid.',
            _react2.default.createElement('br', null),
            'The generated code will appear here once the errors in the query editor are resolved.'
          )
        )
      );
    }
  }]);
  return CodeExporter;
}(_react.Component);

var ErrorBoundary = function (_React$Component) {
  (0, _inherits3.default)(ErrorBoundary, _React$Component);

  function ErrorBoundary() {
    var _ref7;

    var _temp3, _this8, _ret3;

    (0, _classCallCheck3.default)(this, ErrorBoundary);

    for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
      args[_key3] = arguments[_key3];
    }

    return _ret3 = (_temp3 = (_this8 = (0, _possibleConstructorReturn3.default)(this, (_ref7 = ErrorBoundary.__proto__ || (0, _getPrototypeOf2.default)(ErrorBoundary)).call.apply(_ref7, [this].concat(args))), _this8), _this8.state = { hasError: false }, _temp3), (0, _possibleConstructorReturn3.default)(_this8, _ret3);
  }

  (0, _createClass3.default)(ErrorBoundary, [{
    key: 'componentDidCatch',
    value: function componentDidCatch(error, info) {
      this.setState({ hasError: true });
      console.error('Error in component', error, info);
    }
  }, {
    key: 'render',
    value: function render() {
      if (this.state.hasError) {
        return _react2.default.createElement(
          'div',
          { style: { fontFamily: 'sans-serif' }, className: 'error-container' },
          'Error generating code. Please',
          ' ',
          _react2.default.createElement(
            'a',
            {
              href: 'https://spectrum.chat/onegraph',
              target: '_blank',
              rel: 'noreferrer noopener' },
            'report your query on Spectrum'
          ),
          '.'
        );
      }
      return this.props.children;
    }
  }]);
  return ErrorBoundary;
}(_react2.default.Component);

// we borrow class names from graphiql's CSS as the visual appearance is the same
// yet we might want to change that at some point in order to have a self-contained standalone
function CodeExporterWrapper(_ref8) {
  var query = _ref8.query,
      serverUrl = _ref8.serverUrl,
      variables = _ref8.variables,
      _ref8$context = _ref8.context,
      context = _ref8$context === undefined ? {} : _ref8$context,
      _ref8$headers = _ref8.headers,
      headers = _ref8$headers === undefined ? {} : _ref8$headers,
      _ref8$hideCodeExporte = _ref8.hideCodeExporter,
      hideCodeExporter = _ref8$hideCodeExporte === undefined ? function () {} : _ref8$hideCodeExporte,
      snippets = _ref8.snippets,
      snippet = _ref8.snippet,
      codeMirrorTheme = _ref8.codeMirrorTheme,
      onSelectSnippet = _ref8.onSelectSnippet,
      onSetOptionValue = _ref8.onSetOptionValue,
      optionValues = _ref8.optionValues,
      onGenerateCodesandbox = _ref8.onGenerateCodesandbox,
      schema = _ref8.schema;

  var jsonVariables = {};

  try {
    var parsedVariables = JSON.parse(variables);
    if ((typeof parsedVariables === 'undefined' ? 'undefined' : (0, _typeof3.default)(parsedVariables)) === 'object') {
      jsonVariables = parsedVariables;
    }
  } catch (e) {}

  return _react2.default.createElement(
    'div',
    {
      className: 'docExplorerWrap',
      style: {
        width: 440,
        minWidth: 440,
        zIndex: 7
      } },
    _react2.default.createElement(
      'div',
      { className: 'doc-explorer-title-bar' },
      _react2.default.createElement(
        'div',
        { className: 'doc-explorer-title' },
        'Code Exporter'
      ),
      _react2.default.createElement(
        'div',
        { className: 'doc-explorer-rhs' },
        _react2.default.createElement(
          'div',
          { className: 'docExplorerHide', onClick: hideCodeExporter },
          '\u2715'
        )
      )
    ),
    _react2.default.createElement(
      'div',
      {
        className: 'doc-explorer-contents',
        style: { borderTop: '1px solid #d6d6d6', padding: 0 } },
      snippets.length ? _react2.default.createElement(
        ErrorBoundary,
        null,
        _react2.default.createElement(CodeExporter, {
          query: query,
          serverUrl: serverUrl,
          snippets: snippets,
          snippet: snippet,
          context: context,
          headers: headers,
          variables: jsonVariables,
          codeMirrorTheme: codeMirrorTheme,
          onSelectSnippet: onSelectSnippet,
          onSetOptionValue: onSetOptionValue,
          optionValues: optionValues || {},
          onGenerateCodesandbox: onGenerateCodesandbox,
          schema: schema
        })
      ) : _react2.default.createElement(
        'div',
        { style: { fontFamily: 'sans-serif' }, className: 'error-container' },
        'Please provide a list of snippets'
      )
    )
  );
}