Merge pull request #30621 from overleaf/mj-no-opt-out-split-test

[web] Add feature flag for removing old editor switcher

GitOrigin-RevId: 98b60214686ff5fa002e249e0cd8550d0c54c240

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

@@ -459,6 +459,7 @@ const _ProjectController = {
       'writefull-asymetric-queue-size-per-model',
       'pdf-dark-mode',
       'email-notifications',
+      'editor-redesign-no-opt-out',
     ].filter(Boolean)
 
     const getUserValues = async userId =>

services/web/frontend/extracted-translations.json

@@ -750,6 +750,7 @@
   "go_to_writefull": "",
   "good_news_you_already_purchased_this_add_on": "",
   "good_news_you_are_already_receiving_this_add_on_via_writefull": "",
+  "got_questions": "",
   "group_admin": "",
   "group_audit_logs": "",
   "group_has_no_licenses_available_error": "",
@@ -1421,6 +1422,7 @@
   "read_more": "",
   "read_more_about_managed_users": "",
   "read_more_about_the_new_editor": "",
+  "read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks": "",
   "read_only_dropbox_sync_message": "",
   "read_only_token": "",
   "read_write_token": "",

services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-switch-back-tooltip.tsx

@@ -1,5 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
 import EditorTourTooltip from './editor-tour-tooltip'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export default function EditorTourSwitchBackTooltip({
   target,
@@ -7,27 +8,56 @@ export default function EditorTourSwitchBackTooltip({
   target: HTMLElement | null
 }) {
   const { t } = useTranslation()
+  // NOTE: This should really be a different component, but to reduce
+  // complexity of the tour code, let's just change the content here.
+  // The feature flag can be torn down soon, and the component renamed.
+  const noOptOut = useFeatureFlag('editor-redesign-no-opt-out')
+  const canSwitchBack = !noOptOut
 
   return (
     <EditorTourTooltip
       target={target}
       placement="right-end"
       stage="switch-back"
-      header={t('not_sure_about_switching_yet')}
+      header={
+        canSwitchBack ? t('not_sure_about_switching_yet') : t('got_questions')
+      }
     >
-      <Trans
-        i18nKey="read_more_about_the_new_editor"
-        components={[
-          /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-          <a
-            href="https://www.overleaf.com/blog/introducing-overleafs-new-look"
-            target="_blank"
-            rel="noopener noreferrer"
-            key="link"
-          />,
-          <strong key="strong" />,
-        ]}
-      />
+      {canSwitchBack ? (
+        <Trans
+          i18nKey="read_more_about_the_new_editor"
+          components={[
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a
+              href="https://www.overleaf.com/blog/introducing-overleafs-new-look"
+              target="_blank"
+              rel="noopener noreferrer"
+              key="link"
+            />,
+            <strong key="strong" />,
+          ]}
+        />
+      ) : (
+        <Trans
+          i18nKey="read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks"
+          components={[
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a
+              href="https://www.overleaf.com/blog/introducing-overleafs-new-look"
+              target="_blank"
+              rel="noopener noreferrer"
+              key="link"
+            />,
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a
+              href="https://docs.overleaf.com/getting-started/how-do-i-use-overleaf/redesigned-overleaf-editor"
+              target="_blank"
+              rel="noopener noreferrer"
+              key="link"
+            />,
+          ]}
+        />
+      )}
     </EditorTourTooltip>
   )
 }

services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx

@@ -89,6 +89,8 @@ export const SettingsModalProvider: FC<React.PropsWithChildren> = ({
 
   const hasDarkModePdf = useFeatureFlag('pdf-dark-mode')
   const hasEmailNotifications = useFeatureFlag('email-notifications')
+  const noNewEditorOptOut = useFeatureFlag('editor-redesign-no-opt-out')
+
   const allSettingsTabs: SettingsEntry[] = useMemo(
     () => [
       {
@@ -228,6 +230,7 @@ export const SettingsModalProvider: FC<React.PropsWithChildren> = ({
               {
                 key: 'newEditor',
                 component: <NewEditorSetting />,
+                hidden: noNewEditorOptOut,
               },
             ],
           },
@@ -265,7 +268,7 @@ export const SettingsModalProvider: FC<React.PropsWithChildren> = ({
         href: '/user/subscription',
       },
     ],
-    [t, overallTheme, hasDarkModePdf, hasEmailNotifications]
+    [t, overallTheme, hasDarkModePdf, hasEmailNotifications, noNewEditorOptOut]
   )
 
   const settingsTabs = useMemo(

services/web/frontend/js/features/ide-redesign/utils/new-editor-utils.ts

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import getMeta from '@/utils/meta'
 
@@ -15,9 +16,16 @@ export const canUseNewEditor = () => {
 
 export const useIsNewEditorEnabled = () => {
   const { userSettings } = useUserSettingsContext()
+  const noOptOut = useFeatureFlag('editor-redesign-no-opt-out')
   const hasAccess = canUseNewEditor()
+  if (!hasAccess) {
+    return false
+  }
   const enabled = userSettings.enableNewEditor
-  return hasAccess && enabled
+  if (noOptOut) {
+    return true
+  }
+  return enabled
 }
 
 export const useIsNewToNewEditor = () => {

services/web/locales/en.json

@@ -965,6 +965,7 @@
   "go_to_writefull": "Go to Writefull",
   "good_news_you_already_purchased_this_add_on": "Good news! You already have this add-on, so no need to pay again.",
   "good_news_you_are_already_receiving_this_add_on_via_writefull": "Good news! You already have this add-on via your Writefull subscription. No need to pay again.",
+  "got_questions": "Got questions?",
   "great_for_getting_started": "Great for getting started",
   "great_for_small_teams_and_departments": "Great for small teams and departments",
   "group": "Group",
@@ -1842,6 +1843,7 @@
   "read_more": "Read more",
   "read_more_about_managed_users": "Read more about managed users",
   "read_more_about_the_new_editor": "<0>Read more about the new editor design</0>, or temporarily switch back to the old editor using the <1>Appearance</1> settings.",
+  "read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks": "<0>Read more</0> about the new editor, or <1>explore our documentation</1> for tips and tricks.",
   "read_only_dropbox_sync_message": "As a read-only viewer you can sync the current project version to Dropbox, but changes made in Dropbox will <0>not</0> sync back to Overleaf.",
   "read_only_token": "Read-Only Token",
   "read_write_token": "Read-Write Token",