Prepare a staged rollout for the new compile UI (#3639)

GitOrigin-RevId: 9c0ef74514336238ff48d271474ec39eb163236a

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

@@ -56,6 +56,29 @@ const _ssoAvailable = (affiliation, session, linkedInstitutionIds) => {
   return false
 }
 
+function _shouldSeeNewLogsUI(user) {
+  const {
+    _id: userId,
+    alphaProgram: isAlphaUser,
+    betaProgram: isBetaUser
+  } = user
+  if (!userId) {
+    return false
+  }
+
+  const userIdAsPercentile = (ObjectId(userId).getTimestamp() / 1000) % 100
+
+  if (isAlphaUser) {
+    return true
+  } else if (isBetaUser && userIdAsPercentile < Settings.logsUIPercentageBeta) {
+    return true
+  } else if (userIdAsPercentile < Settings.logsUIPercentage) {
+    return true
+  } else {
+    return false
+  }
+}
+
 const ProjectController = {
   _isInPercentageRollout(rolloutName, objectId, percentage) {
     if (Settings.bypassPercentageRollouts === true) {
@@ -806,6 +829,7 @@ const ProjectController = {
               })
             }
 
+            const userShouldSeeNewLogsUI = _shouldSeeNewLogsUI(user)
             const wantsOldLogsUI =
               req.query && req.query.new_logs_ui === 'false'
 
@@ -864,7 +888,7 @@ const ProjectController = {
               gitBridgePublicBaseUrl: Settings.gitBridgePublicBaseUrl,
               wsUrl,
               showSupport: Features.hasFeature('support'),
-              showNewLogsUI: user.alphaProgram && !wantsOldLogsUI,
+              showNewLogsUI: userShouldSeeNewLogsUI && !wantsOldLogsUI,
               showNewNavigationUI:
                 req.query && req.query.new_navigation_ui === 'true',
               showReactFileTree: !wantsOldFileTreeUI

services/web/config/settings.defaults.coffee

@@ -225,6 +225,10 @@ module.exports = settings =
 	wsUrlV2Percentage: parseInt(process.env['WEBSOCKET_URL_V2_PERCENTAGE'] || '0', 10)
 	wsRetryHandshake: parseInt(process.env['WEBSOCKET_RETRY_HANDSHAKE'] || '5', 10)
 
+	# Compile UI rollout percentages
+	logsUIPercentageBeta: parseInt(process.env['LOGS_UI_PERCENTAGE_BETA'] || '0', 10)
+	logsUIPercentage: parseInt(process.env['LOGS_UI_PERCENTAGE'] || '0', 10)
+
 	# cookie domain
 	# use full domain for cookies to only be accessible from that domain,
 	# replace subdomain with dot to have them accessible on all subdomains

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

@@ -1081,6 +1081,85 @@ describe('ProjectController', function() {
       this.ProjectController.loadEditor(this.req, this.res)
     })
 
+    describe('showNewLogsUI staged rollout', function() {
+      function userIdFromTime(time) {
+        return ObjectId.createFromTime(time).toString()
+      }
+
+      function checkNewLogsUI(shouldGetNewLogsUI) {
+        it(`should set showNewLogsUI to ${shouldGetNewLogsUI}`, function(done) {
+          this.res.render = (pageName, opts) => {
+            opts.showNewLogsUI.should.equal(shouldGetNewLogsUI)
+            done()
+          }
+          this.ProjectController.loadEditor(this.req, this.res)
+        })
+      }
+
+      describe('for alpha users', function() {
+        beforeEach(function() {
+          this.user.alphaProgram = true
+        })
+        checkNewLogsUI(true)
+      })
+      describe('for beta users', function() {
+        beforeEach(function() {
+          this.user.betaProgram = true
+        })
+        describe('with a beta rollout percentage of 0', function() {
+          beforeEach(function() {
+            this.settings.logsUIPercentageBeta = 0
+          })
+          checkNewLogsUI(false)
+        })
+        describe('with a beta rollout percentage > 0', function() {
+          const percentileThresold = 50
+          beforeEach(function() {
+            this.settings.logsUIPercentageBeta = percentileThresold
+          })
+          describe('when the user id is higher than the percent threshold', function() {
+            beforeEach(function() {
+              this.user._id = userIdFromTime(percentileThresold + 1)
+            })
+            checkNewLogsUI(false)
+          })
+          describe('when the user id is lower than the percent threshold', function() {
+            beforeEach(function() {
+              this.user._id = userIdFromTime(percentileThresold - 1)
+            })
+            checkNewLogsUI(true)
+          })
+        })
+      })
+
+      describe('for normal users', function() {
+        describe('with a rollout percentage of 0', function() {
+          beforeEach(function() {
+            this.settings.logsUIPercentage = 0
+          })
+          checkNewLogsUI(false)
+        })
+        describe('with a rollout percentage > 0', function() {
+          const percentileThresold = 50
+          beforeEach(function() {
+            this.settings.logsUIPercentage = percentileThresold
+          })
+          describe('when the user id is higher than the percent threshold', function() {
+            beforeEach(function() {
+              this.user._id = userIdFromTime(percentileThresold + 1)
+            })
+            checkNewLogsUI(false)
+          })
+          describe('when the user id is lower than the percent threshold', function() {
+            beforeEach(function() {
+              this.user._id = userIdFromTime(percentileThresold - 1)
+            })
+            checkNewLogsUI(true)
+          })
+        })
+      })
+    })
+
     describe('wsUrl', function() {
       function checkLoadEditorWsMetric(metric) {
         it(`should inc metric ${metric}`, function(done) {