Merge pull request #31957 from overleaf/ds-removing-useIsNewEditorEnabled-5

[Part 5] Removing the usage of `useIsNewEditorEnabled` for editor tear down

GitOrigin-RevId: 086183b196a44b393dc0c0f60f7bfbc5738901fc

services/web/frontend/js/features/file-tree/components/file-tree-folder-icons.tsx

@@ -1,49 +1,21 @@
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
-function FileTreeFolderIcons({
+function FileTreeFolderIcons({ expanded }: { expanded: boolean }) {
-  expanded,
-  onExpandCollapseClick,
-}: {
-  expanded: boolean
-  onExpandCollapseClick?: () => void
-}) {
   const { t } = useTranslation()
-  const newEditor = useIsNewEditorEnabled()
-
-  if (newEditor) {
-    return (
-      <>
-        <div
-          // TODO ide-redesign-cleanup: rename the class now its no longer a button
-          className="folder-expand-collapse-button"
-          aria-label={expanded ? t('collapse') : t('expand')}
-        >
-          <MaterialIcon
-            type={expanded ? 'expand_more' : 'chevron_right'}
-            className="file-tree-expand-icon"
-          />
-        </div>
-      </>
-    )
-  }
 
   return (
     <>
-      <button
+      <div
-        onClick={onExpandCollapseClick}
+        // TODO ide-redesign-cleanup: rename the class now its no longer a button
+        className="folder-expand-collapse-button"
         aria-label={expanded ? t('collapse') : t('expand')}
       >
         <MaterialIcon
           type={expanded ? 'expand_more' : 'chevron_right'}
           className="file-tree-expand-icon"
         />
-      </button>
+      </div>
-      <MaterialIcon
-        type={expanded ? 'folder_open' : 'folder'}
-        className="file-tree-folder-icon"
-      />
     </>
   )
 }

services/web/frontend/js/features/file-tree/components/file-tree-folder.tsx

@@ -14,7 +14,6 @@ import { Folder } from '../../../../../types/folder'
 import { Doc } from '../../../../../types/doc'
 import { FileRef } from '../../../../../types/file-ref'
 import FileTreeFolderIcons from './file-tree-folder-icons'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 function FileTreeFolder({
   name,
@@ -29,7 +28,6 @@ function FileTreeFolder({
   docs: Doc[]
   files: FileRef[]
 }) {
-  const newEditor = useIsNewEditorEnabled()
   const { isSelected, props: selectableEntityProps } = useSelectableEntity(
     id,
     'folder'
@@ -53,10 +51,8 @@ function FileTreeFolder({
   }, [setExpanded])
 
   const onClick = useCallback(() => {
-    if (newEditor) {
+    handleExpandCollapseClick()
-      handleExpandCollapseClick()
+  }, [handleExpandCollapseClick])
-    }
-  }, [newEditor, handleExpandCollapseClick])
 
   const { isOver: isOverRoot, dropRef: dropRefRoot } = useDroppable(id)
   const { isOver: isOverList, dropRef: dropRefList } = useDroppable(id)
@@ -82,12 +78,7 @@ function FileTreeFolder({
           type="folder"
           isSelected={isSelected}
           onClick={onClick}
-          icons={
+          icons={<FileTreeFolderIcons expanded={expanded} />}
-            <FileTreeFolderIcons
-              expanded={expanded}
-              onExpandCollapseClick={handleExpandCollapseClick}
-            />
-          }
         />
       </li>
       {expanded ? (

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, RefObject } from 'react'
 import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 function FileTreeItemName({
   name,
@@ -12,8 +11,7 @@ function FileTreeItemName({
   isSelected: boolean
   setIsDraggable: (isDraggable: boolean) => void
 }) {
-  const { isRenaming, startRenaming, finishRenaming, error, cancel } =
+  const { isRenaming, finishRenaming, error, cancel } = useFileTreeActionable()
-    useFileTreeActionable()
 
   const isRenamingEntity = isRenaming && isSelected && !error
 
@@ -30,58 +28,14 @@ function FileTreeItemName({
       />
     )
   }
-  return (
+  return <DisplayName name={name} />
-    <DisplayName
-      name={name}
-      isSelected={isSelected}
-      startRenaming={startRenaming}
-    />
-  )
 }
 
-function DisplayName({
+function DisplayName({ name }: { name: string }) {
-  name,
-  isSelected,
-  startRenaming,
-}: {
-  name: string
-  isSelected: boolean
-  startRenaming: () => void
-}) {
-  const [clicksInSelectedCount, setClicksInSelectedCount] = useState(0)
-  const newEditor = useIsNewEditorEnabled()
-
-  function onClick() {
-    setClicksInSelectedCount(clicksInSelectedCount + 1)
-    if (!isSelected) setClicksInSelectedCount(0)
-  }
-
-  function onDoubleClick() {
-    // only start renaming if the button got two or more clicks while the item
-    // was selected. This is to prevent starting a rename on an unselected item.
-    // When the item is being selected it can trigger a loss of focus which
-    // causes UI problems.
-    if (clicksInSelectedCount < 2) return
-    startRenaming()
-  }
-
-  if (newEditor) {
-    return (
-      // TODO ide-redesign-cleanup: rename the class now its no longer a button
-      <div className="item-name-button">
-        <span>{name}</span>
-      </div>
-    )
-  }
-
   return (
-    <button
+    <div className="item-name">
-      className="item-name-button"
-      onClick={onClick}
-      onDoubleClick={onDoubleClick}
-    >
       <span>{name}</span>
-    </button>
+    </div>
   )
 }
 

services/web/frontend/js/features/ide-react/hooks/use-editing-session-heartbeat.ts

@@ -6,7 +6,6 @@ import { debugConsole } from '@/utils/debugging'
 import { useCallback, useEffect, useRef } from 'react'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import useDomEventListener from '@/shared/hooks/use-dom-event-listener'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import {
   IdeLayout,
   IdeView,
@@ -19,17 +18,15 @@ import {
 
 function createEditingSessionHeartbeatData(
   editorType: EditorType,
-  newEditor: boolean,
   view: IdeView | null,
   layout: IdeLayout,
   railOpen: boolean,
   railTab: RailTabKey,
   hasDetachedPdf: boolean
 ) {
-  const newEditorSegmentation = newEditor ? { railOpen, railTab } : {}
+  const newEditorSegmentation = { railOpen, railTab }
   return {
     editorType,
-    editorRedesign: newEditor,
     editorView: view,
     editorLayout: layout,
     hasDetachedPdf,
@@ -49,7 +46,6 @@ function sendEditingSessionHeartbeat(
 export function useEditingSessionHeartbeat() {
   const { projectId } = useIdeReactContext()
   const { getEditorType } = useEditorManagerContext()
-  const newEditor = useIsNewEditorEnabled()
   const { view, pdfLayout: layout, detachIsLinked } = useLayoutContext()
   const { isOpen: railIsOpen, selectedTab: selectedRailTab } = useRailContext()
 
@@ -80,7 +76,6 @@ export function useEditingSessionHeartbeat() {
 
     const segmentation = createEditingSessionHeartbeatData(
       editorType,
-      newEditor,
       view,
       layout,
       railIsOpen,
@@ -109,7 +104,6 @@ export function useEditingSessionHeartbeat() {
   }, [
     getEditorType,
     projectId,
-    newEditor,
     view,
     layout,
     railIsOpen,

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

@@ -1,16 +1,6 @@
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 
-export const canUseNewEditor = () => {
-  return true
-}
-
-export const useIsNewEditorEnabled = () => {
-  return canUseNewEditor()
-}
-
 export const useIsNewToNewEditor = () => {
   const { userSettings } = useUserSettingsContext()
-  const newEditor = useIsNewEditorEnabled()
+  return !userSettings.enableNewEditorLegacy
-
-  return newEditor && !userSettings.enableNewEditorLegacy
 }

services/web/frontend/js/shared/context/ide-context.tsx

@@ -4,7 +4,6 @@ import { ScopeEventEmitter } from '../../../../types/ide/scope-event-emitter'
 import { Socket } from '@/features/ide-react/connection/types/socket'
 import { useUserSettingsContext } from './user-settings-context'
 import { userStyles } from '../utils/styles'
-import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
 import { useActiveOverallTheme } from '../hooks/use-active-overall-theme'
 
 export type Ide = {
@@ -59,7 +58,7 @@ export const IdeProvider: FC<
       fontFamily,
       lineHeight,
       fontSize: userSettings.fontSize,
-      isNewEditor: canUseNewEditor() && userSettings.enableNewEditor,
+      isNewEditor: true,
     })
   }, [unstableStore, userSettings, activeOverallTheme])
 

services/web/frontend/stylesheets/pages/editor/file-tree.scss

@@ -148,7 +148,7 @@
     gap: var(--spacing-02);
   }
 
-  .item-name-button,
+  .item-name,
   .folder-expand-collapse-button {
     display: flex;
     align-items: center;
@@ -183,7 +183,7 @@
     }
   }
 
-  .item-name-button {
+  .item-name {
     margin-left: var(--spacing-02);
     overflow: hidden;
 
@@ -352,7 +352,7 @@
           border: 0;
           padding: 0;
 
-          &.item-name-button {
+          &.item-name {
             color: inherit;
             width: 100%;
             overflow: hidden;
@@ -423,11 +423,6 @@
           }
         }
 
-        &.file-tree-folder-icon {
-          margin-right: var(--spacing-02);
-          vertical-align: sub;
-        }
-
         &.file-tree-expand-icon {
           margin-left: var(--spacing-04);
           vertical-align: sub;

services/web/frontend/stylesheets/pages/editor/history.scss

@@ -610,11 +610,6 @@ history-root {
           margin-left: var(--spacing-04);
         }
 
-        &.file-tree-folder-icon {
-          margin-right: var(--spacing-02);
-          vertical-align: sub;
-        }
-
         &.file-tree-expand-icon {
           margin-left: var(--spacing-04);
           vertical-align: sub;