Merge pull request #17712 from overleaf/td-bs5-feature-flag

Add feature flag check and per-page opt-in for Bootstrap 5

GitOrigin-RevId: 111474c19f0202efc4e701eef597c7653f8e8b61

services/web/app/src/Features/User/UserPagesController.js

@@ -138,6 +138,10 @@ async function settingsPage(req, res) {
     )
   }
 
+  // Get the user's assignment for the Bootstrap 5 split test, which populates
+  // splitTestVariants with a value for 'bootstrap-5' and allows Pug to read it
+  await SplitTestHandler.promises.getAssignment(req, res, 'bootstrap-5')
+
   res.render('user/settings', {
     title: 'account_settings',
     user: {

services/web/app/src/infrastructure/ExpressLocals.js

@@ -204,10 +204,12 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
       return staticFilesBase + webpackManifest[cssFileName]
     }
 
-    res.locals.buildCssPath = function (themeModifier = '') {
+    res.locals.buildCssPath = function (
+      themeModifier = '',
+      bootstrapVersion = 3
+    ) {
       // Pick which main stylesheet to use based on Bootstrap version
-      const bootstrap5Modifier =
-        res.locals.bootstrapVersion === 5 ? '-bootstrap-5' : ''
+      const bootstrap5Modifier = bootstrapVersion === 5 ? '-bootstrap-5' : ''
 
       return res.locals.buildStylesheetPath(
         `main-${themeModifier}style${bootstrap5Modifier}.css`
@@ -360,13 +362,6 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
     next()
   })
 
-  webRouter.use(function (req, res, next) {
-    // Set the Bootstrap version to 3 in all cases for now. This will come from
-    // a split test/feature flag in future.
-    res.locals.bootstrapVersion = 3
-    next()
-  })
-
   webRouter.use(function (req, res, next) {
     res.locals.ExposedSettings = {
       isOverleaf: Settings.overleaf != null,

services/web/app/views/layout-base.pug

@@ -4,6 +4,7 @@ html(
 	class=(fixedSizeDocument ? 'fixed-size-document' : undefined)
 )
 	- metadata = metadata || {}
+	- bootstrap5EnabledPage = false
 
 	block entrypointVar
 
@@ -12,8 +13,10 @@ html(
 	head
 		include ./_metadata.pug
 			
+		- var bootstrapVersion = bootstrap5EnabledPage && splitTestVariants['bootstrap-5'] === 'enabled' ? 5 : 3
+
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation)), id="main-stylesheet")
+		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation), bootstrapVersion), id="main-stylesheet")
 		block css
 			each file in entrypointStyles(entrypoint)
 				link(rel='stylesheet', href=file)

services/web/app/views/user/settings.pug

@@ -3,6 +3,9 @@ extends ../layout-marketing
 block entrypointVar
 	- entrypoint = 'pages/user/settings'
 		
+block vars
+	- bootstrap5EnabledPage = true
+
 block append meta
 	meta(name="ol-hasPassword" data-type="boolean" content=hasPassword)
 	meta(name="ol-shouldAllowEditingDetails" data-type="boolean" content=shouldAllowEditingDetails)