From 0fa9c234bf51476415a6253323c9c0fd9b7a53f3 Mon Sep 17 00:00:00 2001 From: svilen Date: Mon, 1 Jun 2026 18:36:31 +0300 Subject: [PATCH] GDB-14684 install and configure bootstrap Primeng components that we use in the new workbench are styled by our styleguide, but outside of them, on a page level we usually need to apply some additional styles. To style the new workbench application consistently we need some utility css classes and helpers for easy creating layouts, grids, controlling spacing, etc. That's why we introduce the bootstrap library and scope it to work in the new angular app only. Configure sass-loader to silence deprecation warnings in webpack config Update webpack configuration to support Bootstrap 5.3.8 and enhance sass-loader options --- packages/workbench/angular.json | 5 +++- packages/workbench/extra-webpack.config.js | 28 ++++++++++++++----- packages/workbench/package-lock.json | 31 ++++++++++++++++++++++ packages/workbench/package.json | 1 + packages/workbench/src/styles.scss | 19 +++++++++++++ 5 files changed, 77 insertions(+), 7 deletions(-) diff --git a/packages/workbench/angular.json b/packages/workbench/angular.json index 9ac6a3cce2..303cf7290e 100644 --- a/packages/workbench/angular.json +++ b/packages/workbench/angular.json @@ -38,7 +38,10 @@ "customWebpackConfig": { "path": "extra-webpack.config.js", "libraryName": "workbench", - "libraryTarget": "module" + "libraryTarget": "module", + "mergeStrategies": { + "module.rules": "replace" + } } }, "configurations": { diff --git a/packages/workbench/extra-webpack.config.js b/packages/workbench/extra-webpack.config.js index 55458efa8a..ee53b0e8ce 100644 --- a/packages/workbench/extra-webpack.config.js +++ b/packages/workbench/extra-webpack.config.js @@ -1,13 +1,28 @@ +const {resolve} = require('node:path'); const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default; +function patchSassLoader(rules) { + if (!Array.isArray(rules)) return; + rules.forEach(rule => { + patchSassLoader(rule.rules); + patchSassLoader(rule.oneOf); + (rule.use || []).forEach(use => { + if (typeof use === 'object' && use.loader && use.loader.includes('sass-loader')) { + use.options = { + ...use.options, + sassOptions: { + silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'if-function'], + loadPaths: [resolve(__dirname)] + } + }; + } + }); + }); +} + module.exports = (config, options) => { const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options); - // Ensure Zone.js is included - // singleSpaWebpackConfig.externals = singleSpaWebpackConfig.externals || {}; - // delete singleSpaWebpackConfig.externals['zone.js']; - // Feel free to modify this webpack config however you'd like to - singleSpaWebpackConfig.externals = [...singleSpaWebpackConfig.externals, "@ontotext/workbench-api"]; singleSpaWebpackConfig.experiments.outputModule = true; if (singleSpaWebpackConfig.output) { @@ -30,6 +45,7 @@ module.exports = (config, options) => { // singleSpaWebpackConfig.devServer.client.overlay = false; // singleSpaWebpackConfig.devServer.liveReload = false; - // console.log('=============', JSON.stringify(singleSpaWebpackConfig, null, 2)); + patchSassLoader(singleSpaWebpackConfig.module.rules); + return singleSpaWebpackConfig; }; diff --git a/packages/workbench/package-lock.json b/packages/workbench/package-lock.json index b8ede2192b..6838d56696 100644 --- a/packages/workbench/package-lock.json +++ b/packages/workbench/package-lock.json @@ -19,6 +19,7 @@ "@jsverse/transloco": "^8.3.0", "@jsverse/transloco-messageformat": "^8.3.0", "@primeuix/themes": "^2.0.3", + "bootstrap": "^5.3.8", "file-saver": "^2.0.5", "ontotext-yasgui-web-component": "^1.6.4", "primeng": "^21.1.8", @@ -6977,6 +6978,17 @@ "url": "https://opencollective.com/pkgr" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@primeuix/motion": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/@primeuix/motion/-/motion-0.0.10.tgz", @@ -9660,6 +9672,25 @@ "dev": true, "license": "ISC" }, + "node_modules/bootstrap": { + "version": "5.3.8", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz", + "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "5.0.6", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz", diff --git a/packages/workbench/package.json b/packages/workbench/package.json index 285daf7fcd..b7bc9d80ab 100644 --- a/packages/workbench/package.json +++ b/packages/workbench/package.json @@ -27,6 +27,7 @@ "@jsverse/transloco": "^8.3.0", "@jsverse/transloco-messageformat": "^8.3.0", "@primeuix/themes": "^2.0.3", + "bootstrap": "^5.3.8", "file-saver": "^2.0.5", "ontotext-yasgui-web-component": "^1.6.4", "primeng": "^21.1.8", diff --git a/packages/workbench/src/styles.scss b/packages/workbench/src/styles.scss index 79da01a2d4..31fef192a0 100644 --- a/packages/workbench/src/styles.scss +++ b/packages/workbench/src/styles.scss @@ -1,2 +1,21 @@ /* You can add global styles to this file, and also import other style files */ @use "styles/primeng-overrides"; + +app-root { + @import "../node_modules/bootstrap/scss/functions"; + // Required Bootstrap imports + @import "../node_modules/bootstrap/scss/variables"; + @import "../node_modules/bootstrap/scss/variables-dark"; + @import "../node_modules/bootstrap/scss/maps"; + @import "../node_modules/bootstrap/scss/mixins"; + // Probably not needed and leaking properties to :root + //@import "../node_modules/bootstrap/scss/root"; + // Optional components + @import "../node_modules/bootstrap/scss/utilities"; + // Probably not needed as well + //@import "../node_modules/bootstrap/scss/reboot"; + @import "../node_modules/bootstrap/scss/containers"; + @import "../node_modules/bootstrap/scss/grid"; + @import "../node_modules/bootstrap/scss/helpers"; + @import "../node_modules/bootstrap/scss/utilities/api"; +}