Merge pull request #24878 from overleaf/mj-editor-redesign-experiment

[web] Move editor redesign to labs experiment

GitOrigin-RevId: 5f11ff29a6c392ff6e448a16450e2e65a2574097

services/web/frontend/extracted-translations.json

@@ -46,6 +46,7 @@
   "access_denied": "",
   "access_edit_your_projects": "",
   "access_levels_changed": "",
+  "access_your_favourite_features_faster_with_our_new_streamlined_editor": "",
   "account_billed_manually": "",
   "account_has_been_link_to_institution_account": "",
   "account_has_past_due_invoice_change_plan_warning": "",
@@ -1048,6 +1049,7 @@
   "new_look_and_placement_of_the_settings": "",
   "new_name": "",
   "new_navigation_introducing_left_hand_side_rail_and_top_menus": "",
+  "new_overleaf_editor": "",
   "new_password": "",
   "new_project": "",
   "new_subscription_will_be_billed_immediately": "",

services/web/frontend/js/features/ide-redesign/components/labs-widget.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import LabsExperimentWidget from '../../../shared/components/labs/labs-experiments-widget'
+import { isInExperiment } from '@/utils/labs-utils'
+import { useTranslation } from 'react-i18next'
+import labsIcon from '../images/labs-icon.svg'
+
+const EditorRedesignLabsWidget = ({
+  labsProgram,
+  setErrorMessage,
+}: {
+  labsProgram: boolean
+  setErrorMessage: (err: string) => void
+}) => {
+  const { t } = useTranslation()
+  const [optedIn, setOptedIn] = useState(isInExperiment('editor-redesign'))
+  return (
+    <LabsExperimentWidget
+      description={t(
+        'access_your_favourite_features_faster_with_our_new_streamlined_editor'
+      )}
+      experimentName="editor-redesign"
+      logo={<img src={labsIcon} alt="" aria-hidden="true" />}
+      labsEnabled={labsProgram}
+      setErrorMessage={setErrorMessage}
+      optedIn={optedIn}
+      setOptedIn={setOptedIn}
+      title={t('new_overleaf_editor')}
+    />
+  )
+}
+
+export default EditorRedesignLabsWidget

services/web/frontend/js/features/ide-redesign/images/labs-icon.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H28C32.4183 0 36 3.58172 36 8V28C36 32.4183 32.4183 36 28 36H8C3.58172 36 0 32.4183 0 28V8Z" fill="#EAF6EF"/>
+<path d="M14.8 16.95L16.95 14.775L15.55 13.35L15.15 13.75C14.9667 13.9333 14.7333 14.0333 14.45 14.05C14.1833 14.05 13.95 13.95 13.75 13.75C13.55 13.55 13.45 13.3167 13.45 13.05C13.45 12.7667 13.55 12.525 13.75 12.325L14.125 11.95L13 10.825L10.825 13L14.8 16.95ZM23 25.175L25.175 23L24.05 21.875L23.65 22.25C23.45 22.45 23.2167 22.55 22.95 22.55C22.6833 22.55 22.45 22.45 22.25 22.25C22.05 22.05 21.95 21.8167 21.95 21.55C21.95 21.2833 22.05 21.05 22.25 20.85L22.625 20.45L21.2 19.05L19.05 21.2L23 25.175ZM22.225 12.425L23.625 13.825L25.025 12.425L23.6 11L22.225 12.425ZM10 27C9.71667 27 9.475 26.9083 9.275 26.725C9.09167 26.525 9 26.2833 9 26V23.175C9 23.0417 9.025 22.9167 9.075 22.8C9.125 22.6667 9.2 22.55 9.3 22.45L13.375 18.375L9.05 14.05C8.76667 13.7667 8.625 13.4167 8.625 13C8.625 12.5833 8.76667 12.2333 9.05 11.95L11.95 9.05C12.2333 8.76667 12.5833 8.63333 13 8.65C13.4167 8.65 13.7667 8.79167 14.05 9.075L18.4 13.4L22.175 9.6C22.375 9.4 22.6 9.25 22.85 9.15C23.1 9.05 23.3583 9 23.625 9C23.8917 9 24.15 9.05 24.4 9.15C24.65 9.25 24.875 9.4 25.075 9.6L26.4 10.95C26.6 11.15 26.75 11.375 26.85 11.625C26.95 11.875 27 12.1333 27 12.4C27 12.6667 26.95 12.925 26.85 13.175C26.75 13.4083 26.6 13.625 26.4 13.825L22.625 17.625L26.95 21.95C27.2333 22.2333 27.375 22.5833 27.375 23C27.375 23.4167 27.2333 23.7667 26.95 24.05L24.05 26.95C23.7667 27.2333 23.4167 27.375 23 27.375C22.5833 27.375 22.2333 27.2333 21.95 26.95L17.625 22.625L13.55 26.7C13.45 26.8 13.3333 26.875 13.2 26.925C13.0833 26.975 12.9583 27 12.825 27H10Z" fill="#195936"/>
+</svg>

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

@@ -1,9 +1,7 @@
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
-import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import { isInExperiment } from '@/utils/labs-utils'
 
-// TODO: For now we're using the feature flag, but eventually we'll read this
-// from labs.
-export const canUseNewEditor = () => isSplitTestEnabled('editor-redesign')
+export const canUseNewEditor = () => isInExperiment('editor-redesign')
 
 export const useIsNewEditorEnabled = () => {
   const { userSettings } = useUserSettingsContext()

services/web/frontend/js/utils/labs-utils.ts

@@ -2,7 +2,7 @@ import getMeta from './meta'
 
 // Should be `never` when no experiments are active. Otherwise it should be a
 // union of active experiment names e.g. `'experiment1' | 'experiment2'`
-export type ActiveExperiment = never
+export type ActiveExperiment = 'editor-redesign'
 
 export const isInExperiment = (experiment: ActiveExperiment): boolean => {
   const experiments = getMeta('ol-labsExperiments')

services/web/locales/en.json

@@ -52,6 +52,7 @@
   "access_denied": "Access Denied",
   "access_edit_your_projects": "Access and edit your projects",
   "access_levels_changed": "Access levels changed",
+  "access_your_favourite_features_faster_with_our_new_streamlined_editor": "Access your favourite features faster with our new, streamlined editor.",
   "account": "Account",
   "account_already_managed": "Your account is already managed.",
   "account_billed_manually": "Account billed manually",
@@ -1376,6 +1377,7 @@
   "new_look_and_placement_of_the_settings": "New look and placement of the settings",
   "new_name": "New Name",
   "new_navigation_introducing_left_hand_side_rail_and_top_menus": "New navigation - introducing left-hand side rail and top menus",
+  "new_overleaf_editor": "New Overleaf editor",
   "new_password": "New password",
   "new_project": "New Project",
   "new_snippet_project": "Untitled",