diff --git a/js/src/common/Application.js b/js/src/common/Application.js index 9950c7dd0..4957d5ce8 100644 --- a/js/src/common/Application.js +++ b/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') ? [ + + ] : 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. * diff --git a/js/src/common/compat.js b/js/src/common/compat.js index f5ed2d2db..442c1f369 100644 --- a/js/src/common/compat.js +++ b/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, diff --git a/js/src/common/components/RequestErrorModal.js b/js/src/common/components/RequestErrorModal.js new file mode 100644 index 000000000..bc0ec7650 --- /dev/null +++ b/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
+
+        {this.props.error.options.method} {this.props.error.options.url}

+ {responseText} +
+
; + } +}