"default-visual-for-beginners" split test tear down (#24759)

GitOrigin-RevId: cdd6c8d3ffb60b9ae3e972f2267f1838cf720c83

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

@@ -1,102 +0,0 @@
-import { ReactElement, useCallback, useEffect, useState } from 'react'
-import Close from '@/shared/components/close'
-import { useEditorContext } from '@/shared/context/editor-context'
-import useTutorial from '@/shared/hooks/promotions/use-tutorial'
-import { useUserContext } from '@/shared/context/user-context'
-import useScopeValue from '@/shared/hooks/use-scope-value'
-import { useTranslation } from 'react-i18next'
-import getMeta from '@/utils/meta'
-import OLPopover from '@/features/ui/components/ol/ol-popover'
-import OLOverlay from '@/features/ui/components/ol/ol-overlay'
-
-const CODE_EDITOR_POPOVER_TIMEOUT = 1000
-export const codeEditorModePrompt = 'code-editor-mode-prompt'
-
-export const EditorSwitchBeginnerPopover = ({
-  children,
-  targetRef,
-}: {
-  children: ReactElement
-  targetRef: React.RefObject<HTMLElement>
-}) => {
-  const user = useUserContext()
-  const { inactiveTutorials } = useEditorContext()
-  const { t } = useTranslation()
-  const [codeEditorOpened] = useScopeValue('editor.codeEditorOpened')
-  const { completeTutorial } = useTutorial(codeEditorModePrompt, {
-    location: 'logs',
-    name: codeEditorModePrompt,
-  })
-  const [popoverShown, setPopoverShown] = useState(false)
-
-  const shouldShowCodeEditorPopover = useCallback(() => {
-    if (inactiveTutorials.includes(codeEditorModePrompt)) {
-      return false
-    }
-
-    if (getMeta('ol-usedLatex') !== 'never') {
-      // only show popover to the users that never used LaTeX (submitted in onboarding data collection)
-      return false
-    }
-
-    if (codeEditorOpened) {
-      // dont show popover if code editor was opened at some point
-      return false
-    }
-
-    const msSinceSignedUp =
-      user.signUpDate && Date.now() - new Date(user.signUpDate).getTime()
-
-    if (msSinceSignedUp && msSinceSignedUp < 24 * 60 * 60 * 1000) {
-      // dont show popover if user has signed up is less than 24 hours
-      return false
-    }
-
-    return true
-  }, [codeEditorOpened, inactiveTutorials, user.signUpDate])
-
-  useEffect(() => {
-    if (popoverShown && codeEditorOpened) {
-      setPopoverShown(false)
-    }
-  }, [codeEditorOpened, popoverShown])
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (shouldShowCodeEditorPopover()) {
-        setPopoverShown(true)
-      }
-    }, CODE_EDITOR_POPOVER_TIMEOUT)
-
-    return () => clearTimeout(timeout)
-  }, [shouldShowCodeEditorPopover])
-
-  return (
-    <>
-      {children}
-      <OLOverlay
-        placement="bottom"
-        show={popoverShown}
-        rootClose
-        onHide={() => setPopoverShown(false)}
-        target={targetRef.current}
-      >
-        <OLPopover id="editor-switch-popover">
-          <div>
-            <Close
-              variant="dark"
-              onDismiss={() => {
-                setPopoverShown(false)
-                completeTutorial({ event: 'promo-click', action: 'complete' })
-              }}
-            />
-            <div className="tooltip-title">
-              {t('code_editor_tooltip_title')}
-            </div>
-            <div>{t('code_editor_tooltip_message')}</div>
-          </div>
-        </OLPopover>
-      </OLOverlay>
-    </>
-  )
-}

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

@@ -1,29 +1,17 @@
-import { ChangeEvent, FC, memo, useCallback, useRef } from 'react'
+import { ChangeEvent, FC, memo, useCallback } from 'react'
 import useScopeValue from '@/shared/hooks/use-scope-value'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { sendMB } from '../../../infrastructure/event-tracking'
 import { isValidTeXFile } from '../../../main/is-valid-tex-file'
 import { useTranslation } from 'react-i18next'
-import {
-  EditorSwitchBeginnerPopover,
-  codeEditorModePrompt,
-} from './editor-switch-beginner-popover'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 
 function EditorSwitch() {
   const { t } = useTranslation()
   const [visual, setVisual] = useScopeValue('editor.showVisual')
-  const [codeEditorOpened] = useScopeValue('editor.codeEditorOpened')
   const { openDocName } = useEditorManagerContext()
 
-  const codeEditorRef = useRef<HTMLLabelElement>(null)
-
   const richTextAvailable = openDocName ? isValidTeXFile(openDocName) : false
-  const { completeTutorial } = useTutorial(codeEditorModePrompt, {
-    location: 'logs',
-    name: codeEditorModePrompt,
-  })
 
   const handleChange = useCallback(
     event => {
@@ -32,9 +20,6 @@ function EditorSwitch() {
       switch (editorType) {
         case 'cm6':
           setVisual(false)
-          if (!codeEditorOpened) {
-            completeTutorial({ event: 'promo-click', action: 'complete' })
-          }
           break
 
         case 'rich-text':
@@ -44,7 +29,7 @@ function EditorSwitch() {
 
       sendMB('editor-switch-change', { editorType })
     },
-    [codeEditorOpened, completeTutorial, setVisual]
+    [setVisual]
   )
 
   return (
@@ -64,15 +49,9 @@ function EditorSwitch() {
           checked={!richTextAvailable || !visual}
           onChange={handleChange}
         />
-        <EditorSwitchBeginnerPopover targetRef={codeEditorRef}>
-          <label
-            ref={codeEditorRef}
-            htmlFor="editor-switch-cm6"
-            className="toggle-switch-label"
-          >
-            <span>{t('code_editor')}</span>
-          </label>
-        </EditorSwitchBeginnerPopover>
+        <label htmlFor="editor-switch-cm6" className="toggle-switch-label">
+          <span>{t('code_editor')}</span>
+        </label>
 
         <RichTextToggle
           checked={richTextAvailable && visual}