Merge pull request #3884 from overleaf/jpa-meta-editor-take-2

[misc] migrate the editor templates to meta tags -- take 2

GitOrigin-RevId: 447d4c6c2197dd2c5f5e182a5edf57313557b8b9

services/web/app/src/Features/Project/ProjectController.js

@@ -839,7 +839,6 @@ const ProjectController = {
                 lineHeight: user.ace.lineHeight || 'normal',
                 overallTheme: user.ace.overallTheme
               },
-              trackChangesState: project.track_changes,
               privilegeLevel,
               chatUrl: Settings.apis.chat.url,
               anonymous,

services/web/app/src/Features/Project/ProjectEditorHandler.js

@@ -80,6 +80,10 @@ module.exports = ProjectEditorHandler = {
       trackChangesVisible: ProjectEditorHandler.trackChangesAvailable
     })
 
+    if (result.features.trackChanges) {
+      result.trackChangesState = project.track_changes || false
+    }
+
     // Originally these two feature flags were both signalled by the now-deprecated `references` flag.
     // For older users, the presence of the `references` feature flag should still turn on these features.
     result.features.referencesSearch =

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

@@ -162,39 +162,37 @@ block content
 			h3 {{ title }}
 		.modal-body(ng-bind-html="message")
 
-	script#data(type="application/json").
+block append meta
-		!{StringHelper.stringifyJsonForScript({ userSettings: userSettings, user: user, trackChangesState: trackChangesState, useV2History: useV2History, enabledLinkedFileTypes: settings.enabledLinkedFileTypes, brandVariation: brandVariation })}
+	meta(name="ol-useV2History" data-type="boolean" content=useV2History)
+	meta(name="ol-project_id" content=project_id)
+	meta(name="ol-userSettings" data-type="json" content=userSettings)
+	meta(name="ol-user" data-type="json" content=user)
+	meta(name="ol-anonymous" data-type="boolean" content=anonymous)
+	meta(name="ol-brandVariation" data-type="json" content=brandVariation)
+	meta(name="ol-anonymousAccessToken" content=anonymousAccessToken)
+	meta(name="ol-isTokenMember" data-type="boolean" content=isTokenMember)
+	meta(name="ol-isRestrictedTokenMember" data-type="boolean" content=isRestrictedTokenMember)
+	meta(name="ol-maxDocLength" data-type="json" content=maxDocLength)
+	meta(name="ol-wikiEnabled" data-type="boolean" content=!!(settings.apis.wiki && settings.apis.wiki.url))
+	meta(name="ol-gitBridgePublicBaseUrl" content=gitBridgePublicBaseUrl)
+	//- Set base path for Ace scripts loaded on demand/workers and don't use cdn
+	meta(name="ol-aceBasePath" content="/js/" + lib('ace'))
+	//- Set path for PDFjs CMaps
+	meta(name="ol-pdfCMapsPath" content="/js/cmaps/")
+	//- enable doc hash checking for all projects
+	//- used in public/js/libs/sharejs.js
+	meta(name="ol-useShareJsHash" data-type="boolean" content=true)
+	meta(name="ol-wsRetryHandshake" data-type="json" content=settings.wsRetryHandshake)
+	meta(name="ol-showReactFileTree" data-type="boolean" content=showReactFileTree)
+	meta(name="ol-showReactAddFilesModal" data-type="boolean" content=showReactAddFilesModal)
+	meta(name="ol-showNewLogsUI" data-type="boolean" content=showNewLogsUI)
+	meta(name="ol-logsUISubvariant" content=logsUISubvariant)
 
-	script(type="text/javascript", nonce=scriptNonce).
+	- var fileActionI18n = ['edited', 'renamed', 'created', 'deleted'].reduce((acc, i) => {acc[i] = translate('file_action_' + i); return acc}, {})
-		window.data = JSON.parse(document.querySelector("#data").text);
+	meta(name="ol-fileActionI18n" data-type="json" content=fileActionI18n)
-		window.project_id = "!{project_id}";
-		window.userSettings = window.data.userSettings;
-		window.user = window.data.user;
-		window.enabledLinkedFiles = window.data.enabledLinkedFiles;
-		window.csrfToken = "!{csrfToken}";
-		window.anonymous = #{anonymous};
-		window.brandVariation = window.data.brandVariation;
-		window.anonymousAccessToken = "#{anonymousAccessToken}";
-		window.isTokenMember = #{!!isTokenMember};
-		window.isRestrictedTokenMember = #{!!isRestrictedTokenMember};
-		window.maxDocLength = #{maxDocLength};
-		window.trackChangesState = window.data.trackChangesState;
-		window.wikiEnabled = #{!!(settings.apis.wiki && settings.apis.wiki.url)};
-		window.gitBridgePublicBaseUrl = '#{gitBridgePublicBaseUrl}'
-		//- Set base path for Ace scripts loaded on demand/workers and don't use cdn
-		window.aceBasePath = "/js/#{lib('ace')}"
-		//- Set path for PDFjs CMaps
-		window.pdfCMapsPath = "/js/cmaps/"
-		//- enable doc hash checking for all projects
-		//- used in public/js/libs/sharejs.js
-		window.useShareJsHash = true
-		window.wsRetryHandshake = #{settings.wsRetryHandshake}
-		window.showReactFileTree = "!{showReactFileTree}" === 'true'
-		window.showReactAddFilesModal = "!{showReactAddFilesModal}" === 'true'
 
 	if (settings.overleaf != null)
-		script(type="text/javascript", nonce=scriptNonce).
+		meta(name="ol-overallThemes" data-type="json" content=overallThemes)
-			window.overallThemes = JSON.parse('!{StringHelper.stringifyJsonForScript(overallThemes)}');
 
 block foot-scripts
 	script(type="text/javascript", nonce=scriptNonce, src=(wsUrl || '/socket.io') + '/socket.io.js')

services/web/app/views/project/editor/history/fileTreeV2.pug

@@ -55,7 +55,3 @@ script(type="text/ng-template", id="historyFileEntityTpl")
 				ng-repeat="childEntity in $ctrl.fileEntity.children"
 				file-entity="childEntity"
 			)
-
-- var fileActionI18n = ['edited', 'renamed', 'created', 'deleted'].reduce((acc, i) => {acc[i] = translate('file_action_' + i); return acc}, {})
-script(type="text/javascript", nonce=scriptNonce).
-	window.fileActionI18n = JSON.parse('!{StringHelper.stringifyJsonForScript(fileActionI18n)}')

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

@@ -413,7 +413,3 @@ script(type='text/ng-template', id='clearCacheModalTemplate')
 		) 
 			span(ng-show="!state.inflight") #{translate("clear_cache")}
 			span(ng-show="state.inflight") #{translate("clearing")}…
-
-script(type="text/javascript", nonce=scriptNonce).
-	window.showNewLogsUI = #{showNewLogsUI || false}
-	window.logsUISubvariant = !{logsUISubvariant ? '"' + logsUISubvariant + '"' : 'null'}

services/web/frontend/js/ide/pdf/controllers/PdfController.js

@@ -711,7 +711,7 @@ App.controller('PdfController', function(
         warnings: $scope.pdf.logEntries.warnings.length,
         typesetting: $scope.pdf.logEntries.typesetting.length,
         newLogsUI: window.showNewLogsUI,
-        subvariant: window.logsUISubvariant
+        subvariant: window.logsUISubvariant || null
       }
       eventTracking.sendMBSampled(
         'compile-result',

services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js

@@ -1074,10 +1074,7 @@ export default App.controller('ReviewPanelController', function(
     }
     const { project } = ide.$scope
     if (project.features.trackChanges) {
-      if (window.trackChangesState == null) {
+      applyTrackChangesStateToClient(project.trackChangesState)
-        window.trackChangesState = false
-      }
-      applyTrackChangesStateToClient(window.trackChangesState)
     } else {
       applyTrackChangesStateToClient(false)
     }

services/web/test/smoke/src/steps/101_loadEditor.js

@@ -6,7 +6,7 @@ async function run({ assertHasStatusCode, request }) {
   assertHasStatusCode(response, 200)
 
   const PROJECT_ID_REGEX = new RegExp(
-    `window.project_id = "${Settings.smokeTest.projectId}"`
+    `<meta name="ol-project_id" content="${Settings.smokeTest.projectId}">`
   )
   if (!PROJECT_ID_REGEX.test(response.body)) {
     throw new Error('project page html does not have project_id')

services/web/test/unit/src/Project/ProjectEditorHandlerTests.js

@@ -325,6 +325,60 @@ describe('ProjectEditorHandler', function() {
         )
       })
     })
+
+    describe('trackChangesState', function() {
+      describe('when the owner does not have the trackChanges feature', function() {
+        beforeEach(function() {
+          this.owner.features = {
+            trackChanges: false
+          }
+          this.result = this.handler.buildProjectModelView(
+            this.project,
+            this.members,
+            [],
+            []
+          )
+        })
+        it('should not emit trackChangesState', function() {
+          expect(this.result.trackChangesState).to.not.exist
+        })
+      })
+
+      describe('when the owner has got the trackChanges feature', function() {
+        beforeEach(function() {
+          this.owner.features = {
+            trackChanges: true
+          }
+        })
+
+        function genCase([dbEntry, expected]) {
+          describe(`when track_changes is ${JSON.stringify(
+            dbEntry
+          )}`, function() {
+            beforeEach(function() {
+              this.project.track_changes = dbEntry
+              this.result = this.handler.buildProjectModelView(
+                this.project,
+                this.members,
+                [],
+                []
+              )
+            })
+            it(`should set trackChangesState=${expected}`, function() {
+              expect(this.result.trackChangesState).to.deep.equal(expected)
+            })
+          })
+        }
+
+        const CASES = [
+          [null, false],
+          [false, false],
+          [true, true],
+          [{ someId: true }, { someId: true }]
+        ]
+        CASES.map(genCase)
+      })
+    })
   })
 
   describe('buildOwnerAndMembersViews', function() {