Merge pull request #25060 from overleaf/mj-core-pug-bs5

[web] Convert various pug pages to BS5

GitOrigin-RevId: f42de89eca778db19d5faa8a19fa8a210c7a749b

services/web/app/src/Features/Collaborators/CollaboratorsInviteController.mjs

@@ -16,6 +16,7 @@ import ProjectAuditLogHandler from '../Project/ProjectAuditLogHandler.js'
 import Errors from '../Errors/Errors.js'
 import AuthenticationController from '../Authentication/AuthenticationController.js'
 import PrivilegeLevels from '../Authorization/PrivilegeLevels.js'
+import SplitTestHandler from '../SplitTests/SplitTestHandler.js'
 
 // This rate limiter allows a different number of requests depending on the
 // number of callaborators a user is allowed. This is implemented by providing
@@ -244,6 +245,10 @@ async function generateNewInvite(req, res) {
 async function viewInvite(req, res) {
   const projectId = req.params.Project_id
   const { token } = req.params
+
+  // Read split test assignment so that it's available for Pug to read
+  await SplitTestHandler.promises.getAssignment(req, res, 'core-pug-bs5')
+
   const _renderInvalidPage = function () {
     res.status(404)
     logger.debug({ projectId }, 'invite not valid, rendering not-valid page')

services/web/app/src/Features/Templates/TemplatesController.js

@@ -4,9 +4,13 @@ const TemplatesManager = require('./TemplatesManager')
 const ProjectHelper = require('../Project/ProjectHelper')
 const logger = require('@overleaf/logger')
 const { expressify } = require('@overleaf/promise-utils')
+const SplitTestHandler = require('../SplitTests/SplitTestHandler')
 
 const TemplatesController = {
-  getV1Template(req, res) {
+  async getV1Template(req, res) {
+    // Read split test assignment so that it's available for Pug to read
+    await SplitTestHandler.promises.getAssignment(req, res, 'core-pug-bs5')
+
     const templateVersionId = req.params.Template_version_id
     const templateId = req.query.id
     if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
@@ -25,7 +29,7 @@ const TemplatesController = {
       mainFile: req.query.mainFile,
       brandVariationId: req.query.brandVariationId,
     }
-    return res.render(
+    res.render(
       path.resolve(
         __dirname,
         '../../../views/project/editor/new_from_template'
@@ -55,7 +59,7 @@ const TemplatesController = {
 }
 
 module.exports = {
-  getV1Template: TemplatesController.getV1Template,
+  getV1Template: expressify(TemplatesController.getV1Template),
   createProjectFromV1Template: expressify(
     TemplatesController.createProjectFromV1Template
   ),

services/web/app/views/project/editor/new_from_template.pug

@@ -4,7 +4,8 @@ block vars
   - var suppressFooter = true
   - var suppressCookieBanner = true
   - var suppressSkipToContent = true
-  - bootstrap5PageStatus = 'disabled'
+  - bootstrap5PageStatus = 'enabled'
+  - bootstrap5PageSplitTest = 'core-pug-bs5'
 
 block content
   .editor.full-size

services/web/app/views/project/invite/not-valid.pug

@@ -1,21 +1,22 @@
 extends ../../layout-marketing
 
 block vars
-	- bootstrap5PageStatus = 'disabled'
+	- bootstrap5PageStatus = 'enabled'
+	- bootstrap5PageSplitTest = 'core-pug-bs5'
 
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
-				.col-md-8.col-md-offset-2
+				.col-md-8.col-md-offset-2.offset-md-2
 					.card.project-invite-invalid
-						.page-header.text-centered
+						.card-body
-							h1  #{translate("invite_not_valid")}
+							.page-header.text-center
-						.row.text-center
+								h1  #{translate("invite_not_valid")}
-							.col-md-12
+							.row.text-center
-								p
+								.col-12.col-md-12
-									| #{translate("invite_not_valid_description")}.
+									p
-						.row.text-center.actions
+										| #{translate("invite_not_valid_description")}.
-							.col-md-12
+							.row.text-center.actions
-								a.btn.btn-secondary-info.btn-secondary(href="/project") #{translate("back_to_your_projects")}
+								.col-12.col-md-12
-							
+									a.btn.btn-secondary-info.btn-secondary(href="/project") #{translate("back_to_your_projects")}

services/web/app/views/project/invite/show.pug

@@ -1,37 +1,39 @@
 extends ../../layout-marketing
 
 block vars
-	- bootstrap5PageStatus = 'disabled'
+	- bootstrap5PageStatus = 'enabled'
+	- bootstrap5PageSplitTest = 'core-pug-bs5'
 
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
-				.col-md-8.col-md-offset-2
+				.col-12.col-md-8.col-md-offset-2.offset-md-2
 					.card.project-invite-accept
-						.page-header.text-centered
+						.card-body
-							h1 #{translate("user_wants_you_to_see_project", {username:owner.first_name, projectname:""})}
+							.page-header.text-center
-								br
+								h1 #{translate("user_wants_you_to_see_project", {username:owner.first_name, projectname:""})}
-								em #{project.name}
+									br
-						.row.text-center
+									em #{project.name}
-							.col-md-12
+							.row.text-center
-								p
+								.col-12.col-md-12
-									| #{translate("accepting_invite_as")} 
+									p
-									em #{user.email}
+										| #{translate("accepting_invite_as")} 
-						.row
+										em #{user.email}
-							.col-md-12
+							.row
-								form.form(
+								.col-12.col-md-12
-									data-ol-regular-form
+									form.form(
-									method="POST",
+										data-ol-regular-form
-									action="/project/"+invite.projectId+"/invite/token/"+token+"/accept"
+										method="POST",
-								)
+										action="/project/"+invite.projectId+"/invite/token/"+token+"/accept"
-									input(name='_csrf', type='hidden', value=csrfToken)
+									)
-									input(name='token', type='hidden', value=token)
+										input(name='_csrf', type='hidden', value=csrfToken)
-									.form-group.text-center
+										input(name='token', type='hidden', value=token)
-										button.btn.btn-lg.btn-primary(
+										.form-group.text-center
-											type="submit"
+											button.btn.btn-lg.btn-primary(
-											data-ol-disabled-inflight
+												type="submit"
-										)
+												data-ol-disabled-inflight
-											span(data-ol-inflight="idle") #{translate("join_project")}
+											)
-											span(hidden data-ol-inflight="pending") #{translate("joining")}…
+												span(data-ol-inflight="idle") #{translate("join_project")}
-									.form-group.text-center
+												span(hidden data-ol-inflight="pending") #{translate("joining")}…
+										.form-group.text-center

services/web/test/unit/src/Collaborators/CollaboratorsInviteControllerTests.mjs

@@ -117,6 +117,7 @@ describe('CollaboratorsInviteController', function () {
 
     this.SplitTestHandler = {
       promises: {
+        getAssignment: sinon.stub().resolves({ variant: 'default' }),
         getAssignmentForUser: sinon.stub().resolves({ variant: 'default' }),
       },
     }

services/web/test/unit/src/Templates/TemplatesControllerTests.js

@@ -18,6 +18,11 @@ describe('TemplatesController', function () {
         './TemplatesManager': (this.TemplatesManager = {
           promises: { createProjectFromV1Template: sinon.stub() },
         }),
+        '../SplitTests/SplitTestHandler': (this.SplitTestHandler = {
+          promises: {
+            getAssignment: sinon.stub().resolves({ variant: 'default' }),
+          },
+        }),
       },
     })
     this.next = sinon.stub()