feat: re-add debug button/modal

Fixes #1687

framework/core/js/src/common/Application.js

@@ -1,7 +1,9 @@
 import ItemList from './utils/ItemList';
 import Alert from './components/Alert';
+import Button from './components/Button';
 import ModalManager from './components/ModalManager';
 import AlertManager from './components/AlertManager';
+import RequestErrorModal from './components/RequestErrorModal';
 import Translator from './Translator';
 import Store from './Store';
 import Session from './Session';
@@ -141,7 +143,7 @@ export default class Application {
   bootExtensions(extensions) {
     Object.keys(extensions).forEach(name => {
       const extension = extensions[name];
-      
+
       const extenders = flattenDeep(extension.extend);
 
       for (const extender of extenders) {
@@ -330,7 +332,10 @@ export default class Application {
 
       error.alert = new Alert({
         type: 'error',
-        children
+        children,
+        controls: app.forum.attribute('debug') ? [
+          <Button className="Button Button--link" onclick={this.showDebug.bind(this, error)}>Debug</Button>
+        ] : undefined
       });
 
       try {
@@ -345,6 +350,16 @@ export default class Application {
     return deferred.promise;
   }
 
+  /**
+   * @param {RequestError} error
+   * @private
+   */
+  showDebug(error) {
+    this.alerts.dismiss(this.requestErrorAlert);
+
+    this.modal.show(new RequestErrorModal({error}));
+  }
+
   /**
    * Construct a URL to the route with the given name.
    *

framework/core/js/src/common/compat.js

@@ -37,6 +37,7 @@ import Placeholder from './components/Placeholder';
 import Separator from './components/Separator';
 import Dropdown from './components/Dropdown';
 import SplitDropdown from './components/SplitDropdown';
+import RequestErrorModal from './components/RequestErrorModal';
 import FieldSet from './components/FieldSet';
 import Select from './components/Select';
 import Navigation from './components/Navigation';
@@ -100,6 +101,7 @@ export default {
   'components/Separator': Separator,
   'components/Dropdown': Dropdown,
   'components/SplitDropdown': SplitDropdown,
+  'components/RequestErrorModal': RequestErrorModal,
   'components/FieldSet': FieldSet,
   'components/Select': Select,
   'components/Navigation': Navigation,

framework/core/js/src/common/components/RequestErrorModal.js

@@ -0,0 +1,30 @@
+import Modal from './Modal';
+
+export default class RequestErrorModal extends Modal {
+  className() {
+    return 'RequestErrorModal Modal--large';
+  }
+
+  title() {
+    return this.props.error.xhr
+      ? this.props.error.xhr.status+' '+this.props.error.xhr.statusText
+      : '';
+  }
+
+  content() {
+    let responseText;
+
+    try {
+      responseText = JSON.stringify(JSON.parse(this.props.error.responseText), null, 2);
+    } catch (e) {
+      responseText = this.props.error.responseText;
+    }
+
+    return <div className="Modal-body">
+      <pre>
+        {this.props.error.options.method} {this.props.error.options.url}<br/><br/>
+        {responseText}
+      </pre>
+    </div>;
+  }
+}