Merge pull request #26631 from overleaf/mj-tooltip-labs-new-survey

[web] Editor redesign: Add tooltip for filling out new survey

GitOrigin-RevId: 432201b6fbff085fcc8ccdeb70c3056043b50422

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

@@ -355,6 +355,7 @@ const _ProjectController = {
       'editor-popup-ux-survey',
       'new-editor-error-logs-redesign',
       'ide-redesign-experiment-nudge',
+      'ide-redesign-new-survey-prompt',
     ].filter(Boolean)
 
     const getUserValues = async userId =>

services/web/app/src/Features/Tutorial/TutorialController.mjs

@@ -17,6 +17,7 @@ const VALID_KEYS = [
   'review-mode',
   'new-error-logs-promo',
   'try-redesign-again-nudge-promo',
+  'ide-redesign-new-survey-promo',
 ]
 
 async function completeTutorial(req, res, next) {

services/web/frontend/extracted-translations.json

@@ -541,7 +541,6 @@
   "error": "",
   "error_assist": "",
   "error_log": "",
-  "error_logs_have_had_an_update": "",
   "error_opening_document": "",
   "error_opening_document_detail": "",
   "error_performing_request": "",
@@ -779,6 +778,7 @@
   "hotkey_toggle_track_changes": "",
   "hotkey_undo": "",
   "hotkeys": "",
+  "how_are_you_finding_the_updates_to_the_new_editor": "",
   "how_it_works": "",
   "how_many_licenses_do_you_want_to_buy": "",
   "how_to_create_tables": "",
@@ -1736,6 +1736,7 @@
   "take_short_survey": "",
   "take_survey": "",
   "tell_the_project_owner_and_ask_them_to_upgrade": "",
+  "tell_us_what_you_think": "",
   "template": "",
   "template_description": "",
   "template_title_taken_from_project_title": "",

services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx

@@ -4,7 +4,6 @@ import { useIdeRedesignSwitcherContext } from '../ide-react/context/ide-redesign
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
 import TooltipPromotion from '../ide-redesign/components/tooltip-promo'
-import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 const TUTORIAL_KEY = 'try-redesign-again-nudge-promo'
 const EVENT_DATA = { name: 'try-redesign-again-nudge-promotion' }
@@ -12,7 +11,6 @@ const EVENT_DATA = { name: 'try-redesign-again-nudge-promotion' }
 const TryNewEditorButton = () => {
   const { t } = useTranslation()
   const { setShowSwitcherModal } = useIdeRedesignSwitcherContext()
-  const showNudge = useFeatureFlag('ide-redesign-experiment-nudge')
 
   const switcherButtonRef = useRef(null)
 
@@ -31,18 +29,17 @@ const TryNewEditorButton = () => {
       >
         {t('try_the_new_editor')}
       </OLButton>
-      {showNudge && (
-        <TooltipPromotion
-          target={switcherButtonRef.current}
-          tutorialKey={TUTORIAL_KEY}
-          eventData={EVENT_DATA}
-          className="toolbar-experiment-tooltip"
-          header={t('dont_miss_out_on_the_updated_editor')}
-          content={t(
-            'weve_been_making_changes_and_improvements_why_not_give_it_a_try'
-          )}
-        />
-      )}
+      <TooltipPromotion
+        target={switcherButtonRef.current}
+        splitTestName="ide-redesign-experiment-nudge"
+        tutorialKey={TUTORIAL_KEY}
+        eventData={EVENT_DATA}
+        className="toolbar-experiment-tooltip"
+        header={t('dont_miss_out_on_the_updated_editor')}
+        content={t(
+          'weve_been_making_changes_and_improvements_why_not_give_it_a_try'
+        )}
+      />
     </div>
   )
 }

services/web/frontend/js/features/ide-redesign/components/error-logs/new-error-logs-promo.tsx

@@ -1,27 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import TooltipPromotion from '../tooltip-promo'
-
-const TUTORIAL_KEY = 'new-error-logs-promo'
-const EVENT_DATA = { name: 'new-error-logs-promotion' }
-
-export default function NewErrorLogsPromo({
-  target,
-}: {
-  target: HTMLElement | null
-}) {
-  const { t } = useTranslation()
-  if (!target) {
-    return null
-  }
-
-  return (
-    <TooltipPromotion
-      target={target}
-      tutorialKey={TUTORIAL_KEY}
-      eventData={EVENT_DATA}
-      className="new-error-logs-promo"
-      content={t('error_logs_have_had_an_update')}
-      placement="right"
-    />
-  )
-}

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

@@ -1,11 +1,4 @@
-import {
-  FC,
-  forwardRef,
-  ReactElement,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react'
+import { FC, forwardRef, ReactElement, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Nav, NavLink, Tab, TabContainer } from 'react-bootstrap'
 import MaterialIcon, {
@@ -51,7 +44,6 @@ import { useDetachCompileContext as useCompileContext } from '@/shared/context/d
 import OldErrorPane from './error-logs/old-error-pane'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import { useSurveyUrl } from '../hooks/use-survey-url'
-import NewErrorLogsPromo from './error-logs/new-error-logs-promo'
 import { useProjectContext } from '@/shared/context/project-context'
 
 type RailElement = {
@@ -115,8 +107,6 @@ export const RailLayout = () => {
   const { features } = useProjectContext()
   const errorLogsDisabled = !logEntries
 
-  const errorsTabRef = useRef<HTMLAnchorElement>(null)
-
   const { view, setLeftMenuShown } = useLayoutContext()
 
   const { markMessagesAsRead } = useChatContext()
@@ -243,7 +233,6 @@ export const RailLayout = () => {
             .filter(({ hide }) => !hide)
             .map(({ icon, key, indicator, title, disabled }) => (
               <RailTab
-                ref={key === 'errors' ? errorsTabRef : null}
                 open={isOpen && selectedTab === key}
                 key={key}
                 eventKey={key}
@@ -257,7 +246,6 @@ export const RailLayout = () => {
           {railActions?.map(action => (
             <RailActionElement key={action.key} action={action} />
           ))}
-          {newErrorlogs && <NewErrorLogsPromo target={errorsTabRef.current} />}
         </Nav>
       </div>
       <Panel

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

@@ -2,9 +2,13 @@ import { useIdeRedesignSwitcherContext } from '@/features/ide-react/context/ide-
 import OLButton from '@/features/ui/components/ol/ol-button'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSurveyUrl } from '../../hooks/use-survey-url'
+import TooltipPromotion from '../tooltip-promo'
+
+const TUTORIAL_KEY = 'ide-redesign-new-survey-promo'
+const EVENT_DATA = { name: 'ide-redesign-new-survey-promotion' }
 
 export const LabsActions = () => {
   const { t } = useTranslation()
@@ -13,6 +17,8 @@ export const LabsActions = () => {
     setShowSwitcherModal(true)
   }, [setShowSwitcherModal])
   const surveyURL = useSurveyUrl()
+  const feedbackLinkRef = useRef<HTMLAnchorElement>(null)
+
   return (
     <>
       <div className="ide-redesign-toolbar-button-container">
@@ -36,6 +42,7 @@ export const LabsActions = () => {
       </div>
       <div className="ide-redesign-toolbar-button-container">
         <a
+          ref={feedbackLinkRef}
           href={surveyURL}
           rel="noopener noreferrer"
           target="_blank"
@@ -43,6 +50,15 @@ export const LabsActions = () => {
         >
           {t('give_feedback')}
         </a>
+        <TooltipPromotion
+          target={feedbackLinkRef.current}
+          splitTestName="ide-redesign-new-survey-prompt"
+          content={t('tell_us_what_you_think')}
+          header={t('how_are_you_finding_the_updates_to_the_new_editor')}
+          eventData={EVENT_DATA}
+          tutorialKey={TUTORIAL_KEY}
+          placement="bottom"
+        />
       </div>
     </>
   )

services/web/frontend/js/features/ide-redesign/components/tooltip-promo.tsx

@@ -1,6 +1,7 @@
 import Close from '@/shared/components/close'
 import { useEditorContext } from '@/shared/context/editor-context'
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import classNames from 'classnames'
 import { useCallback, useEffect } from 'react'
 import { Overlay, OverlayProps, Popover } from 'react-bootstrap'
@@ -13,6 +14,7 @@ export default function TooltipPromotion({
   content,
   header,
   placement = 'bottom',
+  splitTestName,
 }: {
   target: HTMLElement | null
   tutorialKey: string
@@ -21,6 +23,7 @@ export default function TooltipPromotion({
   content: string
   header?: string
   placement?: OverlayProps['placement']
+  splitTestName?: string
 }) {
   const { inactiveTutorials } = useEditorContext()
   const { showPopup, tryShowingPopup, hideUntilReload, dismissTutorial } =
@@ -32,11 +35,15 @@ export default function TooltipPromotion({
     }
   }, [tryShowingPopup, inactiveTutorials, tutorialKey])
 
+  const isInSplitTestIfNeeded = splitTestName
+    ? isSplitTestEnabled(splitTestName)
+    : true
+
   const onHide = useCallback(() => {
     hideUntilReload()
   }, [hideUntilReload])
 
-  if (!target) {
+  if (!target || !isInSplitTestIfNeeded) {
     return null
   }
 

services/web/locales/en.json

@@ -698,7 +698,6 @@
   "error": "Error",
   "error_assist": "Error Assist",
   "error_log": "Error log",
-  "error_logs_have_had_an_update": "Error logs have had an update",
   "error_opening_document": "Error opening document",
   "error_opening_document_detail": "Sorry, something went wrong opening this document. Please try again.",
   "error_performing_request": "An error has occurred while performing your request.",
@@ -1003,6 +1002,7 @@
   "hotkey_toggle_track_changes": "Toggle track changes",
   "hotkey_undo": "Undo",
   "hotkeys": "Hotkeys",
+  "how_are_you_finding_the_updates_to_the_new_editor": "How are you finding the updates to the new editor?",
   "how_it_works": "How it works",
   "how_many_licenses_do_you_want_to_buy": "How many licenses do you want to buy?",
   "how_many_users_do_you_need": "How many users do you need?",
@@ -2238,6 +2238,7 @@
   "take_short_survey": "Take a short survey",
   "take_survey": "Take survey",
   "tell_the_project_owner_and_ask_them_to_upgrade": "<0>Tell the project owner</0> and ask them to upgrade their Overleaf plan if you need more compile time.",
+  "tell_us_what_you_think": "Tell us what you think",
   "template": "Template",
   "template_approved_by_publisher": "This template has been approved by the publisher",
   "template_description": "Template Description",