From e03642be0db64ab489443671f75626d9d898e37d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= Date: Wed, 5 Jun 2024 20:08:21 -0300 Subject: [PATCH] Extract config inline params JS from config/form_display/display.twig MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Maurício Meneghini Fauth --- psalm-baseline.xml | 5 +- resources/js/src/modules/config.ts | 61 ++++++++++++------- .../config/form_display/display.twig | 18 +----- src/Config/FormDisplay.php | 12 ++-- src/Config/FormDisplayTemplate.php | 19 +++--- tests/unit/Config/FormDisplayTemplateTest.php | 6 +- tests/unit/Config/PageSettingsTest.php | 25 +++++++- 7 files changed, 83 insertions(+), 63 deletions(-) diff --git a/psalm-baseline.xml b/psalm-baseline.xml index 8fbe101457..176b4ec703 100644 --- a/psalm-baseline.xml +++ b/psalm-baseline.xml @@ -481,7 +481,7 @@ $workPath, $translatedPath, $userPrefsAllow, - $jsDefault, + $defaultValues, )]]> @@ -499,9 +499,6 @@ - - - config->get('is_setup')]]> diff --git a/resources/js/src/modules/config.ts b/resources/js/src/modules/config.ts index 8c5d213c5a..17ab47a238 100644 --- a/resources/js/src/modules/config.ts +++ b/resources/js/src/modules/config.ts @@ -4,11 +4,11 @@ import { ajaxShowMessage } from './ajax-message.ts'; import isStorageSupported from './functions/isStorageSupported.ts'; import formatDateTime from './functions/formatDateTime.ts'; -window.configInlineParams; -window.configScriptLoaded; +let configInlineParams: any[] | undefined; +let configScriptLoaded: boolean = false; // default values for fields -window.defaultValues = {}; +const defaultValues: object = {}; /** * Returns field type @@ -170,21 +170,21 @@ function getAllValues () { function checkFieldDefault (field, type) { var $field = $(field); var fieldId = $field.attr('id'); - if (typeof window.defaultValues[fieldId] === 'undefined') { + if (typeof defaultValues[fieldId] === 'undefined') { return true; } var isDefault = true; var currentValue = getFieldValue($field, type); if (type !== 'select') { - isDefault = currentValue === window.defaultValues[fieldId]; + isDefault = currentValue === defaultValues[fieldId]; } else { // compare arrays, will work for our representation of select values - if (currentValue.length !== window.defaultValues[fieldId].length) { + if (currentValue.length !== defaultValues[fieldId].length) { isDefault = false; } else { for (var i = 0; i < currentValue.length; i++) { - if (currentValue[i] !== window.defaultValues[fieldId][i]) { + if (currentValue[i] !== defaultValues[fieldId][i]) { isDefault = false; break; } @@ -313,7 +313,7 @@ const validators = { * @param {boolean} onKeyUp whether fire on key up * @param {any[]} params validation function parameters */ -function registerFieldValidator (id, type, onKeyUp, params) { +function registerFieldValidator (id, type, onKeyUp, params = undefined) { if (typeof window.validators[type] === 'undefined') { return; } @@ -509,21 +509,44 @@ function validateFieldAndFieldset (field, isKeyUp) { } function loadInlineConfig () { - if (! Array.isArray(window.configInlineParams)) { + if (! Array.isArray(configInlineParams)) { return; } - for (var i = 0; i < window.configInlineParams.length; ++i) { - if (typeof window.configInlineParams[i] === 'function') { - window.configInlineParams[i](); + for (var i = 0; i < configInlineParams.length; ++i) { + if (typeof configInlineParams[i] === 'function') { + configInlineParams[i](); } } } function setupValidation () { validate = {}; - window.configScriptLoaded = true; - if (window.configScriptLoaded && typeof window.configInlineParams !== 'undefined') { + + const configInlineParamsData = $('#configInlineParamsData'); + if (configInlineParamsData.length > 0) { + const fieldValidators = configInlineParamsData.data('fieldValidators'); + const inlineDefaultValues = configInlineParamsData.data('defaultValues'); + + if (typeof configInlineParams === 'undefined' || !Array.isArray(configInlineParams)) { + configInlineParams = []; + } + + configInlineParams.push(function () { + for (const validator of fieldValidators) { + if (validator.args) { + registerFieldValidator(validator.fieldId, validator.name, true, validator.args); + } else { + registerFieldValidator(validator.fieldId, validator.name, true); + } + } + }); + + $.extend(defaultValues, inlineDefaultValues); + } + + configScriptLoaded = true; + if (configScriptLoaded && typeof configInlineParams !== 'undefined') { Config.loadInlineConfig(); } @@ -598,11 +621,11 @@ function adjustPrefsNotification () { */ function restoreField (fieldId): void { var $field = $('#' + fieldId); - if ($field.length === 0 || window.defaultValues[fieldId] === undefined) { + if ($field.length === 0 || defaultValues[fieldId] === undefined) { return; } - setFieldValue($field, getFieldType($field), window.defaultValues[fieldId]); + setFieldValue($field, getFieldType($field), defaultValues[fieldId]); } function setupRestoreField () { @@ -755,7 +778,7 @@ function on () { $('.optbox input[type=button][name=submit_reset]').on('click', function () { var fields = $(this).closest('fieldset').find('input, select, textarea'); for (var i = 0, imax = fields.length; i < imax; i++) { - setFieldValue(fields[i], getFieldType(fields[i]), window.defaultValues[fields[i].id]); + setFieldValue(fields[i], getFieldType(fields[i]), defaultValues[fields[i].id]); } setDisplayError(); @@ -833,7 +856,6 @@ function on () { const Config = { getAllValues: getAllValues, getIdPrefix: getIdPrefix, - registerFieldValidator: registerFieldValidator, displayErrors: displayErrors, loadInlineConfig: loadInlineConfig, setupValidation: setupValidation, @@ -844,9 +866,6 @@ const Config = { declare global { interface Window { - configInlineParams: any[] | undefined; - configScriptLoaded: boolean | undefined; - defaultValues: object; validators: typeof validators; Config: typeof Config; } diff --git a/resources/templates/config/form_display/display.twig b/resources/templates/config/form_display/display.twig index 3781dc6e3f..e9255fa6e1 100644 --- a/resources/templates/config/form_display/display.twig +++ b/resources/templates/config/form_display/display.twig @@ -53,18 +53,6 @@ - + diff --git a/src/Config/FormDisplay.php b/src/Config/FormDisplay.php index 8c112e0fbe..9350fe1023 100644 --- a/src/Config/FormDisplay.php +++ b/src/Config/FormDisplay.php @@ -214,8 +214,8 @@ class FormDisplay string|null $formAction = null, array|null $hiddenFields = null, ): string { - $js = []; - $jsDefault = []; + $fieldValidators = []; + $defaultValues = []; /** * We do validation on page refresh when browser remembers field values, @@ -278,14 +278,14 @@ class FormDisplay $workPath, $translatedPath, $userPrefsAllow, - $jsDefault, + $defaultValues, ); // register JS validators for this field if (! isset($validators[$path])) { continue; } - $this->formDisplayTemplate->addJsValidate($translatedPath, $validators[$path], $js); + $this->formDisplayTemplate->addJsValidate($translatedPath, $validators[$path], $fieldValidators); } } @@ -296,8 +296,8 @@ class FormDisplay 'tabs' => $tabs, 'forms' => $forms, 'show_buttons' => $showButtons, - 'js_array' => $js, - 'js_default' => $jsDefault, + 'default_values' => $defaultValues, + 'field_validators' => $fieldValidators, ]); } diff --git a/src/Config/FormDisplayTemplate.php b/src/Config/FormDisplayTemplate.php index c0b61f0c7a..813163ce04 100644 --- a/src/Config/FormDisplayTemplate.php +++ b/src/Config/FormDisplayTemplate.php @@ -11,9 +11,6 @@ use PhpMyAdmin\Config; use PhpMyAdmin\Template; use function array_shift; -use function json_encode; - -use const JSON_HEX_TAG; /** * PhpMyAdmin\Config\FormDisplayTemplate class @@ -127,18 +124,20 @@ class FormDisplayTemplate /** * Appends JS validation code to $js_array * - * @param string $fieldId ID of field to validate - * @param string|mixed[] $validators validators callback - * @param mixed[] $jsArray will be updated with javascript code + * @param string $fieldId ID of field to validate + * @param string|mixed[] $validators validators callback + * @param mixed[] $fieldValidators will be updated with javascript code */ - public function addJsValidate(string $fieldId, string|array $validators, array &$jsArray): void + public function addJsValidate(string $fieldId, string|array $validators, array &$fieldValidators): void { foreach ((array) $validators as $validator) { $validator = (array) $validator; $vName = array_shift($validator); - $vArgs = $validator !== [] ? ', ' . json_encode($validator, JSON_HEX_TAG) : ''; - $jsArray[] = "window.Config.registerFieldValidator('" - . $fieldId . "', '" . $vName . "', true" . $vArgs . ')'; + $fieldValidators[] = [ + 'fieldId' => $fieldId, + 'name' => $vName, + 'args' => $validator !== [] ? $validator : null, + ]; } } diff --git a/tests/unit/Config/FormDisplayTemplateTest.php b/tests/unit/Config/FormDisplayTemplateTest.php index 1a0387b7c3..45a651f6e6 100644 --- a/tests/unit/Config/FormDisplayTemplateTest.php +++ b/tests/unit/Config/FormDisplayTemplateTest.php @@ -242,10 +242,8 @@ class FormDisplayTemplateTest extends AbstractTestCase self::assertSame( [ - 'window.Config.registerFieldValidator(\'testID\', \'\\\';\', true, ' - . '["\\\\r\\\\n\\\\\'' - . '\u003CscrIpt\u003E\u003C\/\' + \'script\u003E"])', - 'window.Config.registerFieldValidator(\'testID\', \'\', true)', + ['fieldId' => 'testID', 'name' => '\\\';', 'args' => ['\r\n\\\'