ApiSandbox: Display params as JSON on request page

In the future we can provide more formats via a dropdown
(e.g. PHP object notation, MW formatted javascript, ...)
but for now JSON is a very commonly used format, and easily
adaptable.

Bug: T130501
Change-Id: I9c24a2309d2474e9543e2b577fe90d160a1b6cbc

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 02831fc..4b25a20 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1919,6 +1919,7 @@
        "apisandbox-sending-request": "Sending API request...",
        "apisandbox-loading-results": "Receiving API results...",
        "apisandbox-results-error": "An error occurred while loading the API query response: $1.",
+       "apisandbox-request-params-json": "JSON parameters:",
        "apisandbox-request-url-label": "Request URL:",
        "apisandbox-request-time": "Request time: {{PLURAL:$1|$1 ms}}",
        "apisandbox-results-fixtoken": "Correct token and resubmit",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 95e6983..f5b2879 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -2103,6 +2103,7 @@
        "apisandbox-sending-request": "JavaScript message displayed while the request is being sent.",
        "apisandbox-loading-results": "JavaScript message displayed while the response is being read.",
        "apisandbox-results-error": "Displayed as an error message from JavaScript when the request failed.\n\nParameters:\n* $1 - Error message",
+       "apisandbox-request-params-json": "Label for text field display the request parameters as JSON.",
        "apisandbox-request-url-label": "Label for the text field displaying the URL used to make this request.",
        "apisandbox-request-time": "Label and value for displaying the time taken by the request.\n\nParameters:\n* $1 - Time taken in milliseconds",
        "apisandbox-results-fixtoken": "JavaScript button label",

diff --git a/resources/Resources.php b/resources/Resources.php
index e8be528..5423d54 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1826,6 +1826,7 @@ return [
                        'apisandbox-sending-request',
                        'apisandbox-loading-results',
                        'apisandbox-results-error',
+                       'apisandbox-request-params-json',
                        'apisandbox-request-url-label',
                        'apisandbox-request-time',
                        'apisandbox-results-fixtoken',

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
index 99f6c13..707a579 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
@@ -85,3 +85,11 @@
 .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator.mw-apisandbox-clickable-indicator {
        cursor: pointer;
 }
+
+.mw-apisandbox-textInputCode .oo-ui-inputWidget-input {
+       font-family: monospace, 'Courier';
+       font-size: 0.8125em;
+       -moz-tab-size: 4;
+       -o-tab-size: 4;
+       tab-size: 4;
+}

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
index 43321fe..f108e50 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
+++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js
@@ -916,6 +916,8 @@
                        }
 
                        $.when.apply( $, deferreds ).done( function () {
+                               var jsonInput;
+
                                if ( $.inArray( false, arguments ) !== -1 ) {
                                        windowManager.openWindow( 'errorAlert', {
                                                title: Util.parseMsg( 'apisandbox-submit-invalid-fields-title' ),
@@ -967,11 +969,26 @@
                                                                label: Util.parseMsg( 'apisandbox-request-url-label' )
                                                        }
                                                ).$element,
+                                               new OO.ui.FieldLayout(
+                                                       jsonInput = new OO.ui.TextInputWidget( {
+                                                               classes: [ 'mw-apisandbox-textInputCode' ],
+                                                               readOnly: true,
+                                                               multiline: true,
+                                                               autosize: true,
+                                                               maxRows: 6,
+                                                               value: JSON.stringify( displayParams, null, '\t' )
+                                                       } ), {
+                                                               label: Util.parseMsg( 'apisandbox-request-params-json' )
+                                                       }
+                                               ).$element,
                                                $result
                                        );
                                ApiSandbox.updateUI();
                                booklet.setPage( '|results|' );
 
+                               // Resize the multiline input once visible
+                               jsonInput.adjustSize();
+
                                location.href = oldhash = '#' + query;
 
                                api.post( params, {