feat: add a priority UI selector cookie for react rollout QA (#3894)

* feat: Add a priority UI selector cookie for QA

* fix: update ReactMigrationConfig

* chore: use an enum to document cookie values

* fix: Use CamelCase for enum keys

* feat: log qaCoookie in the reactMigration block

src/app/config/schema.ts

@@ -315,6 +315,12 @@ export const optionalVarsSchema: Schema<IOptionalVarsSchema> = {
       default: 'v2-admin-ui',
       env: 'REACT_MIGRATION_ADMIN_COOKIE_NAME',
     },
+    qaCookieName: {
+      doc: 'Priority cookie to select react/angular during QA.',
+      format: String,
+      default: 'v2-qa-ui',
+      env: 'REACT_MIGRATION_QA_COOKIE_NAME',
+    },
   },
 }
 

src/app/loaders/express/logging.ts

@@ -17,6 +17,7 @@ type LogMeta = {
   reactMigration?: {
     respRolloutAuth: number
     respRolloutNoAuth: number
+    qaCookie: string | undefined
     adminCookie: string | undefined
     respCookie: string | undefined
   }
@@ -71,11 +72,13 @@ const loggingMiddleware = () => {
       // Temporary: cookies are blacklisted, but we to track the state of the rollout for this particular request
       if (
         req.cookies?.[config.reactMigration.adminCookieName] ||
-        req.cookies?.[config.reactMigration.respondentCookieName]
+        req.cookies?.[config.reactMigration.respondentCookieName] ||
+        req.cookies?.[config.reactMigration.qaCookieName]
       ) {
         meta.reactMigration = {
           respRolloutAuth: config.reactMigration.respondentRolloutAuth,
           respRolloutNoAuth: config.reactMigration.respondentRolloutNoAuth,
+          qaCookie: req.cookies?.[config.reactMigration.qaCookieName],
           adminCookie: req.cookies?.[config.reactMigration.adminCookieName],
           respCookie: req.cookies?.[config.reactMigration.respondentCookieName],
         }

src/app/modules/react-migration/react-migration.controller.ts

@@ -9,8 +9,13 @@ import * as PublicFormController from '../form/public-form/public-form.controlle
 import { RedirectParams } from '../form/public-form/public-form.types'
 import * as HomeController from '../home/home.controller'
 
+export enum UiCookieValues {
+  React = 'react',
+  Angular = 'angular',
+}
+
 export type SetEnvironmentParams = {
-  ui: 'react' | 'angular'
+  ui: UiCookieValues
 }
 
 export const RESPONDENT_COOKIE_OPTIONS = {
@@ -74,21 +79,27 @@ export const serveForm: ControllerHandler<
     ? config.reactMigration.respondentRolloutAuth
     : config.reactMigration.respondentRolloutNoAuth
 
-  if (threshold <= 0) {
+  if (config.reactMigration.qaCookieName in req.cookies) {
+    showReact =
+      req.cookies[config.reactMigration.qaCookieName] === UiCookieValues.React
+  } else if (threshold <= 0) {
     // Check the rollout value first, if it's 0, react is DISABLED
     // And we ignore cookies entirely!
     showReact = false
   } else if (req.cookies) {
     if (config.reactMigration.adminCookieName in req.cookies) {
       // Admins are dogfooders, the choice they made for the admin environment
       // also applies to the forms they need to fill themselves
-      showReact = req.cookies[config.reactMigration.adminCookieName] === 'react'
+      showReact =
+        req.cookies[config.reactMigration.adminCookieName] ===
+        UiCookieValues.React
     } else if (config.reactMigration.respondentCookieName in req.cookies) {
       // Note: the respondent cookie is for the whole session, not for a specific form.
       // That means that within a session, a respondent will see the same environment
       // for all the forms he/she fills.
       showReact =
-        req.cookies[config.reactMigration.respondentCookieName] === 'react'
+        req.cookies[config.reactMigration.respondentCookieName] ===
+        UiCookieValues.React
     }
   }
 
@@ -109,7 +120,7 @@ export const serveForm: ControllerHandler<
 
     res.cookie(
       config.reactMigration.respondentCookieName,
-      showReact ? 'react' : 'angular',
+      showReact ? UiCookieValues.React : UiCookieValues.Angular,
       RESPONDENT_COOKIE_OPTIONS,
     )
   }
@@ -134,7 +145,10 @@ export const serveForm: ControllerHandler<
 
 export const serveDefault: ControllerHandler = (req, res, next) => {
   // only admin who chose react should see react, everybody else is plain angular
-  if (req.cookies?.[config.reactMigration.adminCookieName] === 'react') {
+  if (
+    req.cookies?.[config.reactMigration.adminCookieName] ===
+    UiCookieValues.React
+  ) {
     // react
     return serveFormReact(req, res, next)
   } else {
@@ -150,7 +164,10 @@ export const adminChooseEnvironment: ControllerHandler<
   unknown,
   Record<string, string>
 > = (req, res) => {
-  const ui = req.params.ui === 'react' ? 'react' : 'angular'
+  const ui =
+    req.params.ui === UiCookieValues.React
+      ? UiCookieValues.React
+      : UiCookieValues.Angular
   res.cookie(config.reactMigration.adminCookieName, ui, ADMIN_COOKIE_OPTIONS)
   return res.json({ ui })
 }

src/types/config.ts

@@ -57,6 +57,7 @@ export type ReactMigrationConfig = {
   respondentRolloutAuth: number
   respondentCookieName: string
   adminCookieName: string
+  qaCookieName: string
 }
 
 export type Config = {
@@ -161,6 +162,7 @@ export interface IOptionalVarsSchema {
     respondentRolloutAuth: number
     respondentCookieName: string
     adminCookieName: string
+    qaCookieName: string
   }
 }