[web] Add split test for testing editor switch naming (#12596)

Co-authored-by: Ieva Vaiginyte <95856891+ievaoverleaf@users.noreply.github.com>
GitOrigin-RevId: dafe07bda841dad962ebf2894718750fafe86373

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

@@ -46,6 +46,8 @@ const SurveyHandler = require('../Survey/SurveyHandler')
 const ProjectAuditLogHandler = require('./ProjectAuditLogHandler')
 const PublicAccessLevels = require('../Authorization/PublicAccessLevels')
 
+const VISUAL_EDITOR_NAMING_SPLIT_TEST_MIN_SIGNUP_DATE = new Date('2023-04-17')
+
 /**
  * @typedef {import("./types").GetProjectsRequest} GetProjectsRequest
  * @typedef {import("./types").GetProjectsResponse} GetProjectsResponse
@@ -903,21 +905,60 @@ const ProjectController = {
             }
           )
         },
-        legacySourceEditorAssignment(cb) {
-          SplitTestHandler.getAssignment(
-            req,
-            res,
-            'source-editor-legacy',
-            (error, assignment) => {
-              // do not fail editor load if assignment fails
-              if (error) {
-                cb(null, { variant: 'default' })
-              } else {
-                cb(null, assignment)
-              }
+        participatingInVisualEditorNamingTest: [
+          'user',
+          (results, cb) => {
+            const isNewUser =
+              results.user.signUpDate >=
+              VISUAL_EDITOR_NAMING_SPLIT_TEST_MIN_SIGNUP_DATE
+            cb(null, isNewUser)
+          },
+        ],
+        visualEditorNameAssignment: [
+          'participatingInVisualEditorNamingTest',
+          (results, cb) => {
+            if (!results.participatingInVisualEditorNamingTest) {
+              cb(null, { variant: 'default' })
+            } else {
+              SplitTestHandler.getAssignment(
+                req,
+                res,
+                'visual-editor-name',
+                (error, assignment) => {
+                  if (error) {
+                    cb(null, { variant: 'default' })
+                  } else {
+                    cb(null, assignment)
+                  }
+                }
+              )
             }
-          )
-        },
+          },
+        ],
+        legacySourceEditorAssignment: [
+          'participatingInVisualEditorNamingTest',
+          'visualEditorNameAssignment',
+          (results, cb) => {
+            // Hide Ace for people in the Rich Text naming test
+            if (results.participatingInVisualEditorNamingTest) {
+              cb(null, { variant: 'true' })
+            } else {
+              SplitTestHandler.getAssignment(
+                req,
+                res,
+                'source-editor-legacy',
+                (error, assignment) => {
+                  // do not fail editor load if assignment fails
+                  if (error) {
+                    cb(null, { variant: 'default' })
+                  } else {
+                    cb(null, assignment)
+                  }
+                }
+              )
+            }
+          },
+        ],
         pdfjsAssignment(cb) {
           SplitTestHandler.getAssignment(
             req,
@@ -1148,6 +1189,8 @@ const ProjectController = {
           isTokenMember,
           isInvitedMember,
           brandVariation,
+          visualEditorNameAssignment,
+          participatingInVisualEditorNamingTest,
           legacySourceEditorAssignment,
           pdfjsAssignment,
           editorLeftMenuAssignment,
@@ -1271,6 +1314,11 @@ const ProjectController = {
               detachRole === 'detached'
                 ? 'project/editor_detached'
                 : 'project/editor'
+
+            const isParticipatingInVisualEditorNamingTest =
+              Features.hasFeature('saas') &&
+              participatingInVisualEditorNamingTest
+
             res.render(template, {
               title: project.name,
               priority_title: true,
@@ -1336,6 +1384,8 @@ const ProjectController = {
               ),
               pdfjsVariant: pdfjsAssignment.variant,
               debugPdfDetach,
+              isParticipatingInVisualEditorNamingTest,
+              visualEditorNameVariant: visualEditorNameAssignment.variant,
               showLegacySourceEditor,
               showSymbolPalette,
               galileoEnabled,

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

@@ -23,6 +23,8 @@ meta(name="ol-wsRetryHandshake" data-type="json" content=settings.wsRetryHandsha
 meta(name="ol-pdfjsVariant" content=pdfjsVariant)
 meta(name="ol-debugPdfDetach" data-type="boolean" content=debugPdfDetach)
 meta(name="ol-showLegacySourceEditor", data-type="boolean" content=showLegacySourceEditor)
+meta(name="ol-visualEditorNameVariant", data-type="string" content=visualEditorNameVariant)
+meta(name="ol-isParticipatingInVisualEditorNamingTest", data-type="boolean" content=isParticipatingInVisualEditorNamingTest)
 meta(name="ol-showSymbolPalette" data-type="boolean" content=showSymbolPalette)
 meta(name="ol-galileoEnabled" data-type="string" content=galileoEnabled)
 meta(name="ol-galileoPromptWords" data-type="string" content=galileoPromptWords)

services/web/frontend/js/features/source-editor/components/editor-switch.tsx

@@ -41,12 +41,22 @@ function Badge() {
 }
 
 const showLegacySourceEditor: boolean = getMeta('ol-showLegacySourceEditor')
+const visualEditorNameVariant: string = getMeta('ol-visualEditorNameVariant')
+const isParticipatingInVisualEditorNamingTest: boolean = getMeta(
+  'ol-isParticipatingInVisualEditorNamingTest'
+)
 
 function EditorSwitch() {
   const [newSourceEditor, setNewSourceEditor] = useScopeValue(
     'editor.newSourceEditor'
   )
   const [richText, setRichText] = useScopeValue('editor.showRichText')
+  const sourceName =
+    visualEditorNameVariant === 'code-visual'
+      ? 'Code Editor'
+      : visualEditorNameVariant === 'source-visual'
+      ? 'Source Editor'
+      : 'Source'
 
   const [visual, setVisual] = useScopeValue('editor.showVisual')
 
@@ -106,7 +116,7 @@ function EditorSwitch() {
           onChange={handleChange}
         />
         <label htmlFor="editor-switch-cm6" className="toggle-switch-label">
-          <span>Source</span>
+          <span>{sourceName}</span>
         </label>
 
         {showLegacySourceEditor ? (
@@ -133,7 +143,7 @@ function EditorSwitch() {
         />
       </fieldset>
 
-      {!!richTextOrVisual && (
+      {!!richTextOrVisual && !isParticipatingInVisualEditorNamingTest && (
         <SplitTestBadge splitTestName="rich-text" displayOnVariants={['cm6']} />
       )}
     </div>
@@ -147,6 +157,9 @@ const RichTextToggle: FC<{
 }> = ({ checked, disabled, handleChange }) => {
   const { t } = useTranslation()
 
+  const richTextName =
+    visualEditorNameVariant === 'default' ? 'Rich Text' : 'Visual Editor'
+
   const toggle = (
     <span>
       <input
@@ -160,7 +173,7 @@ const RichTextToggle: FC<{
         disabled={disabled}
       />
       <label htmlFor="editor-switch-rich-text" className="toggle-switch-label">
-        <span>Rich Text</span>
+        <span>{richTextName}</span>
       </label>
     </span>
   )