[perf] lookup system messages from the project-list route only

The messages are displayed above the project list only.
There is no need to query the system messages from ALL the other routes.

Note: the admin view uses the same variable, but injects an uncached
 value into the template.

Additional context at https://github.com/overleaf/web/pull/699

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

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

@@ -35,6 +35,7 @@ const Features = require('../../infrastructure/Features')
 const BrandVariationsHandler = require('../BrandVariations/BrandVariationsHandler')
 const { getUserAffiliations } = require('../Institutions/InstitutionsAPI')
 const V1Handler = require('../V1/V1Handler')
+const SystemMessageManager = require('../SystemMessages/SystemMessageManager')
 
 const ProjectController = {
   _isInPercentageRollout(rolloutName, objectId, percentage) {
@@ -346,6 +347,9 @@ const ProjectController = {
     let noV1Connection = false
     async.parallel(
       {
+        systemMessages(cb) {
+          SystemMessageManager.getMessages(cb)
+        },
         tags(cb) {
           TagsHandler.getAllTags(userId, cb)
         },
@@ -537,6 +541,7 @@ const ProjectController = {
           const viewModel = {
             title: 'your_projects',
             priority_title: true,
+            systemMessages: results.systemMessages,
             projects,
             tags,
             notifications: notifications || [],

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

@@ -12,7 +12,6 @@ const IS_DEV_ENV = ['development', 'test'].includes(process.env.NODE_ENV)
 const Features = require('./Features')
 const AuthenticationController = require('../Features/Authentication/AuthenticationController')
 const PackageVersions = require('./PackageVersions')
-const SystemMessageManager = require('../Features/SystemMessages/SystemMessageManager')
 const Modules = require('./Modules')
 
 const htmlEncoder = new NodeHtmlEncoder('numerical')
@@ -306,19 +305,6 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
     next()
   })
 
-  webRouter.use((req, res, next) =>
-    SystemMessageManager.getMessages(function(error, messages) {
-      if (error) {
-        return next(error)
-      }
-      if (messages == null) {
-        messages = []
-      }
-      res.locals.systemMessages = messages
-      next()
-    })
-  )
-
   webRouter.use(function(req, res, next) {
     if (Settings.reloadModuleViewsOnEachRequest) {
       Modules.loadViewIncludes()

services/web/app/views/layout.pug

@@ -66,7 +66,6 @@ html(
 				siteUrl: '#{settings.siteUrl}',
 				wsUrl: '#{settings.wsUrl}',
 			};
-			window.systemMessages = !{StringHelper.stringifyJsonForScript(systemMessages)};
 			window.ab = {};
 			window.user_id = '#{getLoggedInUserId()}';
 			window.ExposedSettings = JSON.parse('!{StringHelper.stringifyJsonForScript(ExposedSettings)}');

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

@@ -61,6 +61,9 @@ block content
 		role="main"
 	)
 		- if(typeof(suppressSystemMessages) == "undefined")
+			script.
+				window.systemMessages = !{StringHelper.stringifyJsonForScript(systemMessages)};
+
 			.system-messages(
 				ng-cloak
 				ng-controller="SystemMessagesController"

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

@@ -131,6 +131,10 @@ describe('ProjectController', function() {
       }
     ])
 
+    this.SystemMessageManager = {
+      getMessages: sinon.stub().callsArgWith(0, null, [])
+    }
+
     this.ProjectController = SandboxedModule.require(MODULE_PATH, {
       globals: {
         console: console
@@ -148,6 +152,7 @@ describe('ProjectController', function() {
           inc() {}
         },
         '@overleaf/o-error/http': HttpErrors,
+        '../SystemMessages/SystemMessageManager': this.SystemMessageManager,
         './ProjectDeleter': this.ProjectDeleter,
         './ProjectDuplicator': this.ProjectDuplicator,
         './ProjectCreationHandler': this.ProjectCreationHandler,
@@ -385,6 +390,14 @@ describe('ProjectController', function() {
 
   describe('projectListPage', function() {
     beforeEach(function() {
+      this.systemMessages = [
+        { _id: '42', content: 'Hello from the other side!' },
+        { _id: '1337', content: 'Can you read this?' }
+      ]
+      this.SystemMessageManager.getMessages = sinon
+        .stub()
+        .callsArgWith(0, null, this.systemMessages)
+
       this.tags = [
         { name: 1, project_ids: ['1', '2', '3'] },
         { name: 2, project_ids: ['a', '1'] },
@@ -456,6 +469,14 @@ describe('ProjectController', function() {
       this.ProjectController.projectListPage(this.req, this.res)
     })
 
+    it('should send the systemMessages', function(done) {
+      this.res.render = (pageName, opts) => {
+        opts.systemMessages.should.deep.equal(this.systemMessages)
+        done()
+      }
+      this.ProjectController.projectListPage(this.req, this.res)
+    })
+
     it('should create trigger ip matcher notifications', function(done) {
       this.settings.overleaf = true
       this.res.render = (pageName, opts) => {