From 2e2546b473a984f6cedf0832f36fdd899e50d491 Mon Sep 17 00:00:00 2001 From: Nathaniel Steers Date: Mon, 6 Jan 2025 14:42:44 +0000 Subject: [PATCH] PP-13452 remove nunjucksify dependency from build toolchain (#4401) - bundle nunjucks in clientside code and inline multiselect template --- Gruntfile.js | 10 +---- app/browsered/multi-select.js | 63 ++++++++++++++++++++--------- app/utils/logger.js | 15 +++---- app/views/includes/multi-select.njk | 23 ----------- package-lock.json | 37 +++++------------ package.json | 3 +- 6 files changed, 61 insertions(+), 90 deletions(-) delete mode 100644 app/views/includes/multi-select.njk diff --git a/Gruntfile.js b/Gruntfile.js index 096a461305..f39cb292ab 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -105,15 +105,7 @@ module.exports = function (grunt) { options: { browserifyOptions: { standalone: 'module' - }, - transform: [ - [ - 'nunjucksify', - { - extension: '.njk' - } - ] - ] + } } }, diff --git a/app/browsered/multi-select.js b/app/browsered/multi-select.js index 87d7fa3613..c7455dbebb 100644 --- a/app/browsered/multi-select.js +++ b/app/browsered/multi-select.js @@ -1,9 +1,33 @@ // TODO: we should probably do some browser testing in this project to prove this all works as intended - -const multiSelect = require('../views/includes/multi-select.njk') - // Polyfills introduced as a temporary fix to make Smoketests pass. See PP-3489 require('./polyfills') +const nunjucks = require('nunjucks') + +const multiSelectTemplate = ` +
+ + +
+` const MAXIMUM_VISIBLE_ITEMS = 8.5 // Maximum amount of items to show in dropdown const MINIMUM_VISIBLE_ITEMS = 3.5 // Minimum amount of items to show in dropdown (assuming total is larger than this value) @@ -43,7 +67,7 @@ function progressivelyEnhanceSelects () { return { value, id, checked, text } }) } - select.outerHTML = multiSelect(configuration) + select.outerHTML = nunjucks.renderString(multiSelectTemplate, configuration) const newMultiSelect = document.getElementById(`${configuration.id}__container`) const openButton = [...newMultiSelect.querySelectorAll(OPEN_BUTTON_SELECTOR)][0] @@ -53,20 +77,6 @@ function progressivelyEnhanceSelects () { const dropdown = [...newMultiSelect.querySelectorAll(DROPDOWN_SELECTOR)][0] const scrollContainer = [...newMultiSelect.querySelectorAll(SCROLL_CONTAINER_SELECTOR)][0] - // close if user clicks outside the dropdown - document.addEventListener('click', (event) => { - const dropdowns = document.querySelectorAll(DROPDOWN_SELECTOR) - dropdowns.forEach(dropdown => { - if (!dropdown.contains(event.target) && - !event.target.closest(OPEN_BUTTON_SELECTOR)) { - dropdown.style.visibility = 'hidden' - dropdown.closest(TOP_LEVEL_SELECTOR) - .querySelector(OPEN_BUTTON_SELECTOR) - .setAttribute('aria-expanded', false) - } - }) - }, false) - openButton.addEventListener('click', onOpenButtonClick, false) closeButton.addEventListener('click', onCloseButtonClick, false) items.forEach(item => { @@ -82,6 +92,7 @@ function progressivelyEnhanceSelects () { }) closeMultiSelectOnEscapeKeypress() + closeMultiSelectOnOutOfBoundsClick() } const closeMultiSelectOnEscapeKeypress = function () { @@ -102,6 +113,22 @@ const closeMultiSelectOnEscapeKeypress = function () { } } +const closeMultiSelectOnOutOfBoundsClick = function () { + // close if user clicks outside the dropdown + document.addEventListener('click', (event) => { + const dropdowns = document.querySelectorAll(DROPDOWN_SELECTOR) + dropdowns.forEach(dropdown => { + if (!dropdown.contains(event.target) && + !event.target.closest(OPEN_BUTTON_SELECTOR)) { + dropdown.style.visibility = 'hidden' + dropdown.closest(TOP_LEVEL_SELECTOR) + .querySelector(OPEN_BUTTON_SELECTOR) + .setAttribute('aria-expanded', false) + } + }) + }, false) +} + const onCloseButtonClick = event => { const { target } = event event.stopPropagation() diff --git a/app/utils/logger.js b/app/utils/logger.js index 929e8bd3ff..484a447798 100644 --- a/app/utils/logger.js +++ b/app/utils/logger.js @@ -24,11 +24,11 @@ const logger = createLogger({ ] }) -const nsDebugFormat = printf(({ level, message, timestamp }) => { +const simpleLoggingFormat = printf(({ level, message, timestamp, ...metadata }) => { return `${timestamp} [${level}]: ${message}` }) -const nsDebugLogger = createLogger({ +const simpleLogger = createLogger({ format: combine( colorize({ colors: { @@ -41,7 +41,7 @@ const nsDebugLogger = createLogger({ timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }), - nsDebugFormat + simpleLoggingFormat ), transports: [ new transports.Console({ @@ -50,14 +50,9 @@ const nsDebugLogger = createLogger({ ] }) -const nsDebug = process.env.GOVUK_PAY__USE_BASIC_LOGGER === 'true' - module.exports = (loggerName) => { if (process.env.GOVUK_PAY__USE_BASIC_LOGGER === 'true') { - return console + return simpleLogger } - const childLogger = nsDebug - ? nsDebugLogger.child({ logger_name: loggerName }) - : logger.child({ logger_name: loggerName }) - return addSentryToErrorLevel(childLogger) + return addSentryToErrorLevel(logger.child({ logger_name: loggerName })) } diff --git a/app/views/includes/multi-select.njk b/app/views/includes/multi-select.njk deleted file mode 100644 index c1d32b9004..0000000000 --- a/app/views/includes/multi-select.njk +++ /dev/null @@ -1,23 +0,0 @@ -
- - -
diff --git a/package-lock.json b/package-lock.json index 5f5d01fb32..cc8c0724b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@aws-sdk/client-s3": "3.693.0", "@aws-sdk/s3-request-presigner": "3.693.0", - "@govuk-pay/pay-js-commons": "^6.0.15", + "@govuk-pay/pay-js-commons": "^6.0.22", "@govuk-pay/pay-js-metrics": "^1.0.6", "@sentry/node": "6.12.0", "accessible-autocomplete": "2.0.4", @@ -87,7 +87,6 @@ "nock": "13.3.3", "nodemon": "3.0.1", "notp": "2.0.3", - "nunjucksify": "2.2.0", "portfinder": "1.0.32", "proxyquire": "~2.1.0", "sass": "^1.66.1", @@ -3303,11 +3302,12 @@ } }, "node_modules/@govuk-pay/pay-js-commons": { - "version": "6.0.15", - "resolved": "https://registry.npmjs.org/@govuk-pay/pay-js-commons/-/pay-js-commons-6.0.15.tgz", - "integrity": "sha512-2Q3JRyXCJwMD1qj/Mwgt47MHLhBLc4cHfhSw1tQVc1eS0MRlPHO6ogJTENzVDtDOxLNYvWc6YH5Gv9rXz2xE2w==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@govuk-pay/pay-js-commons/-/pay-js-commons-6.0.22.tgz", + "integrity": "sha512-b9Vt14mr/G+uSXK/1uWUQg73wrghRYA7vtNlpvW5WaMpippyI3a7osVLmRsKUphNC30YyPGXBXtfuwvOerYngA==", "dependencies": { "axios": "^1.6.5", + "csrf": "^3.1.0", "lodash": "4.17.21", "moment-timezone": "0.5.43", "rfc822-validate": "1.0.0", @@ -15383,16 +15383,6 @@ } } }, - "node_modules/nunjucksify": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/nunjucksify/-/nunjucksify-2.2.0.tgz", - "integrity": "sha512-pXR72leLWTUt7PpvOpIDDxTZIyhrij7Jg7leKFSu9MOoN+9LnfJsGYxFaJwEwMOtv09xsm6R3lXE0gkO3+32Rg==", - "dev": true, - "dependencies": { - "nunjucks": "^3.0.0", - "through": "~2.3.4" - } - }, "node_modules/nwsapi": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz", @@ -23097,11 +23087,12 @@ "dev": true }, "@govuk-pay/pay-js-commons": { - "version": "6.0.15", - "resolved": "https://registry.npmjs.org/@govuk-pay/pay-js-commons/-/pay-js-commons-6.0.15.tgz", - "integrity": "sha512-2Q3JRyXCJwMD1qj/Mwgt47MHLhBLc4cHfhSw1tQVc1eS0MRlPHO6ogJTENzVDtDOxLNYvWc6YH5Gv9rXz2xE2w==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@govuk-pay/pay-js-commons/-/pay-js-commons-6.0.22.tgz", + "integrity": "sha512-b9Vt14mr/G+uSXK/1uWUQg73wrghRYA7vtNlpvW5WaMpippyI3a7osVLmRsKUphNC30YyPGXBXtfuwvOerYngA==", "requires": { "axios": "^1.6.5", + "csrf": "^3.1.0", "lodash": "4.17.21", "moment-timezone": "0.5.43", "rfc822-validate": "1.0.0", @@ -32295,16 +32286,6 @@ "commander": "^5.1.0" } }, - "nunjucksify": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/nunjucksify/-/nunjucksify-2.2.0.tgz", - "integrity": "sha512-pXR72leLWTUt7PpvOpIDDxTZIyhrij7Jg7leKFSu9MOoN+9LnfJsGYxFaJwEwMOtv09xsm6R3lXE0gkO3+32Rg==", - "dev": true, - "requires": { - "nunjucks": "^3.0.0", - "through": "~2.3.4" - } - }, "nwsapi": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz", diff --git a/package.json b/package.json index a6fd914c37..ad9c2a74c3 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "dependencies": { "@aws-sdk/client-s3": "3.693.0", "@aws-sdk/s3-request-presigner": "3.693.0", - "@govuk-pay/pay-js-commons": "^6.0.15", + "@govuk-pay/pay-js-commons": "^6.0.22", "@govuk-pay/pay-js-metrics": "^1.0.6", "@sentry/node": "6.12.0", "accessible-autocomplete": "2.0.4", @@ -171,7 +171,6 @@ "nock": "13.3.3", "nodemon": "3.0.1", "notp": "2.0.3", - "nunjucksify": "2.2.0", "portfinder": "1.0.32", "proxyquire": "~2.1.0", "sass": "^1.66.1",