From d023f721b735c8202b857754cfd76ffc5c9ccfce Mon Sep 17 00:00:00 2001 From: Davinder Singh Date: Thu, 5 Mar 2026 09:49:01 +0000 Subject: [PATCH] Merge pull request #31924 from overleaf/ds-removing-useIsNewEditorEnabled-4 [Part 4] Removing the usage of `useIsNewEditorEnabled` for editor tear down GitOrigin-RevId: 4c1194bb011630f83ecf7334f9ad0deb6ab52580 --- .../web/frontend/extracted-translations.json | 1 - .../pdf-preview/components/pdf-log-entry.tsx | 77 +++-------- .../components/pdf-preview-error.tsx | 3 - .../components/preview-log-entry-header.tsx | 123 ------------------ .../components/review-panel-current-file.tsx | 7 +- .../review-panel/components/review-panel.tsx | 5 - .../hooks/use-review-panel-layout.ts | 26 +--- .../review-panel/utils/position-items.ts | 26 +--- .../stylesheets/pages/editor/logs.scss | 86 ------------ services/web/locales/en.json | 1 - 10 files changed, 31 insertions(+), 324 deletions(-) delete mode 100644 services/web/frontend/js/features/preview/components/preview-log-entry-header.tsx diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index b0ada0c532..84bb71a7e7 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1147,7 +1147,6 @@ "n_more_updates_below_plural": "", "name": "", "name_usage_explanation": "", - "navigate_log_source": "", "navigation": "", "need_anything_contact_us_at": "", "need_contact_group_admin_to_make_changes": "", diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx index 524026b0b4..bbe36dc848 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry.tsx @@ -1,18 +1,13 @@ import { memo } from 'react' -import PreviewLogEntryHeader from '../../preview/components/preview-log-entry-header' -import PdfLogEntryContent from './pdf-log-entry-content' import HumanReadableLogsHints from '../../../ide/human-readable-logs/HumanReadableLogsHints' -import getMeta from '@/utils/meta' import { ErrorLevel, LogEntry, SourceLocation } from '../util/types' import NewLogEntry from '@/features/pdf-preview/components/log-entry' -import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' import useHandleLogEntryClick from '../hooks/use-handle-log-entry-click' function PdfLogEntry({ autoExpand, ruleId, headerTitle, - headerIcon, rawContent, logType, formattedContent, @@ -31,7 +26,6 @@ function PdfLogEntry({ level: ErrorLevel autoExpand?: boolean ruleId?: string - headerIcon?: React.ReactElement rawContent?: string logType?: string formattedContent?: React.ReactNode @@ -45,8 +39,6 @@ function PdfLogEntry({ logEntry?: LogEntry id?: string }) { - const showAiErrorAssistant = getMeta('ol-showAiFeatures') - if (ruleId && HumanReadableLogsHints[ruleId]) { const hint = HumanReadableLogsHints[ruleId] formattedContent = hint.formattedContent(contentDetails) @@ -60,58 +52,25 @@ function PdfLogEntry({ onSourceLocationClick, }) - const newEditor = useIsNewEditorEnabled() - - if (newEditor) { - return ( - - ) - } - return ( -
- - - {(rawContent || formattedContent || showAiErrorAssistant) && ( - - )} -
+ ) } diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx index 4cdd478f18..cb6be2f36f 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx @@ -256,12 +256,10 @@ export default memo(PdfPreviewError) function ErrorLogEntry({ autoExpand = true, title, - headerIcon, children, }: { autoExpand?: boolean title: string - headerIcon?: React.ReactElement children: React.ReactNode }) { const { t } = useTranslation() @@ -270,7 +268,6 @@ function ErrorLogEntry({ -}) { - const { t } = useTranslation() - const logLocationSpanRef = useRef(null) - const [locationSpanOverflown, setLocationSpanOverflown] = useState(false) - - useResizeObserver( - logLocationSpanRef, - locationSpanOverflown, - checkLocationSpanOverflow - ) - - const file = sourceLocation ? sourceLocation.file : null - const line = sourceLocation ? sourceLocation.line : null - const logEntryHeaderClasses = classNames('log-entry-header', { - 'log-entry-header-error': level === 'error', - 'log-entry-header-warning': level === 'warning', - 'log-entry-header-info': level === 'info', - 'log-entry-header-typesetting': level === 'typesetting', - 'log-entry-header-raw': level === 'raw', - 'log-entry-header-success': level === 'success', - }) - const logEntryLocationBtnClasses = classNames('log-entry-header-link', { - 'log-entry-header-link-error': level === 'error', - 'log-entry-header-link-warning': level === 'warning', - 'log-entry-header-link-typesetting': level === 'typesetting', - 'log-entry-header-link-raw': level === 'raw', - 'log-entry-header-link-info': level === 'info', - 'log-entry-header-link-success': level === 'success', - }) - const headerLogLocationTitle = t('navigate_log_source', { - location: file + (line ? `, ${line}` : ''), - }) - - function checkLocationSpanOverflow(observedElement: ResizeObserverEntry) { - const spanEl = observedElement.target - const isOverflowing = spanEl.scrollWidth > spanEl.clientWidth - setLocationSpanOverflown(isOverflowing) - } - - const locationLinkText = - showSourceLocationLink && file ? `${file}${line ? `, ${line}` : ''}` : null - - // Because we want an ellipsis on the left-hand side (e.g. "...longfilename.tex"), the - // `log-entry-header-link-location` class has text laid out from right-to-left using the CSS - // rule `direction: rtl;`. - // This works most of the times, except when the first character of the filename is considered - // a punctuation mark, like `/` (e.g. `/foo/bar/baz.sty`). In this case, because of - // right-to-left writing rules, the punctuation mark is moved to the right-side of the string, - // resulting in `...bar/baz.sty/` instead of `...bar/baz.sty`. - // To avoid this edge-case, we wrap the `logLocationLinkText` in two directional formatting - // characters: - // * \u202A LEFT-TO-RIGHT EMBEDDING Treat the following text as embedded left-to-right. - // * \u202C POP DIRECTIONAL FORMATTING End the scope of the last LRE, RLE, RLO, or LRO. - // This essentially tells the browser that, althought the text is laid out from right-to-left, - // the wrapped portion of text should follow left-to-right writing rules. - const locationLink = locationLinkText ? ( - - - - {`\u202A${locationLinkText}\u202C`} - - - ) : null - - const headerTitleText = logType ? `${logType} ${headerTitle}` : headerTitle - - return ( -
- {headerIcon ? ( -
{headerIcon}
- ) : null} -

{headerTitleText}

- {locationSpanOverflown && locationLinkText && locationLink ? ( - - {locationLink} - - ) : ( - locationLink - )} -
- ) -} - -export default PreviewLogEntryHeader diff --git a/services/web/frontend/js/features/review-panel/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel/components/review-panel-current-file.tsx index 8edccf6084..d1a75e2a1a 100644 --- a/services/web/frontend/js/features/review-panel/components/review-panel-current-file.tsx +++ b/services/web/frontend/js/features/review-panel/components/review-panel-current-file.tsx @@ -33,7 +33,6 @@ import ReviewPanelMoreCommentsButton from './review-panel-more-comments-button' import useMoreCommments from '../hooks/use-more-comments' import { Decoration } from '@codemirror/view' import { debounce } from 'lodash' -import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' type AggregatedRanges = { changes: Change[] @@ -47,7 +46,6 @@ const ReviewPanelCurrentFile: FC = () => { const threads = useThreadsContext() const state = useCodeMirrorStateContext() const [hoveredEntry, setHoveredEntry] = useState(null) - const newEditor = useIsNewEditorEnabled() const hoverTimeout = useRef(0) const handleEntryEnter = useCallback((id: string) => { @@ -248,8 +246,7 @@ const ReviewPanelCurrentFile: FC = () => { const positioningRes = positionItems( containerRef.current, previousFocusedItem.current.get(docId), - docId, - newEditor + docId ) onEntriesPositioned() @@ -261,7 +258,7 @@ const ReviewPanelCurrentFile: FC = () => { ) } } - }, [ranges?.docId, onEntriesPositioned, newEditor]) + }, [ranges?.docId, onEntriesPositioned]) useEffect(() => { const timer = window.setTimeout(() => { diff --git a/services/web/frontend/js/features/review-panel/components/review-panel.tsx b/services/web/frontend/js/features/review-panel/components/review-panel.tsx index 33f1c99417..81ff8da1af 100644 --- a/services/web/frontend/js/features/review-panel/components/review-panel.tsx +++ b/services/web/frontend/js/features/review-panel/components/review-panel.tsx @@ -1,16 +1,13 @@ import { FC, memo, useMemo } from 'react' import ReviewPanelTabs from './review-panel-tabs' -import ReviewPanelHeader from './review-panel-header' import ReviewPanelCurrentFile from './review-panel-current-file' import { ReviewPanelOverview } from './review-panel-overview' import classnames from 'classnames' import { useReviewPanelStyles } from '@/features/review-panel/hooks/use-review-panel-styles' import { useReviewPanelViewContext } from '../context/review-panel-view-context' -import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' const ReviewPanel: FC<{ mini?: boolean }> = ({ mini = false }) => { const choosenSubView = useReviewPanelViewContext() - const newEditor = useIsNewEditorEnabled() const activeSubView = useMemo( () => (mini ? 'cur_file' : choosenSubView), @@ -27,8 +24,6 @@ const ReviewPanel: FC<{ mini?: boolean }> = ({ mini = false }) => { return (
- {!newEditor && !mini && } - {activeSubView === 'cur_file' && } {activeSubView === 'overview' && } diff --git a/services/web/frontend/js/features/review-panel/hooks/use-review-panel-layout.ts b/services/web/frontend/js/features/review-panel/hooks/use-review-panel-layout.ts index 04ed9d43c3..9813a3f349 100644 --- a/services/web/frontend/js/features/review-panel/hooks/use-review-panel-layout.ts +++ b/services/web/frontend/js/features/review-panel/hooks/use-review-panel-layout.ts @@ -1,9 +1,7 @@ -import { useLayoutContext } from '@/shared/context/layout-context' import { useRangesContext } from '../context/ranges-context' import { useThreadsContext } from '@/features/review-panel/context/threads-context' import { hasActiveRange } from '@/features/review-panel/utils/has-active-range' import { useRailContext } from '@/features/ide-react/context/rail-context' -import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' import { useCallback } from 'react' export default function useReviewPanelLayout(): { @@ -21,30 +19,16 @@ export default function useReviewPanelLayout(): { openTab: openRailTab, setIsOpen: setRailIsOpen, } = useRailContext() - const { reviewPanelOpen: reviewPanelOpenOldEditor, setReviewPanelOpen } = - useLayoutContext() - const newEditor = useIsNewEditorEnabled() - - const reviewPanelOpen = newEditor - ? selectedRailTab === 'review-panel' && railIsOpen - : reviewPanelOpenOldEditor + const reviewPanelOpen = selectedRailTab === 'review-panel' && railIsOpen const openReviewPanel = useCallback(() => { - if (newEditor) { - openRailTab('review-panel') - } else { - setReviewPanelOpen(true) - } - }, [newEditor, setReviewPanelOpen, openRailTab]) + openRailTab('review-panel') + }, [openRailTab]) const closeReviewPanel = useCallback(() => { - if (newEditor) { - setRailIsOpen(false) - } else { - setReviewPanelOpen(false) - } - }, [newEditor, setReviewPanelOpen, setRailIsOpen]) + setRailIsOpen(false) + }, [setRailIsOpen]) const hasCommentOrChange = hasActiveRange(ranges, threads) const showPanel = reviewPanelOpen || !!hasCommentOrChange diff --git a/services/web/frontend/js/features/review-panel/utils/position-items.ts b/services/web/frontend/js/features/review-panel/utils/position-items.ts index e38e663ab0..e237b4b7b2 100644 --- a/services/web/frontend/js/features/review-panel/utils/position-items.ts +++ b/services/web/frontend/js/features/review-panel/utils/position-items.ts @@ -1,15 +1,13 @@ import { debounce } from 'lodash' export const OFFSET_FOR_ENTRIES_ABOVE = 70 -const COLLAPSED_HEADER_HEIGHT = 42 const GAP_BETWEEN_ENTRIES = 4 export const positionItems = debounce( ( element: HTMLDivElement, previousFocusedItemIndex: number | undefined, - docId: string, - newEditor: boolean + docId: string ) => { const items = Array.from( element.querySelectorAll('.review-panel-entry') @@ -42,11 +40,7 @@ export const positionItems = debounce( return } - const activeItemTop = getTopPosition( - activeItem, - activeItemIndex === 0, - newEditor - ) + const activeItemTop = getTopPosition(activeItem, activeItemIndex === 0) const positions: [HTMLElement, number][] = [] positions.push([activeItem, activeItemTop]) @@ -56,7 +50,7 @@ export const positionItems = debounce( for (let i = activeItemIndex - 1; i >= 0; i--) { const item = items[i] const height = item.offsetHeight - let top = getTopPosition(item, i === 0, newEditor) + let top = getTopPosition(item, i === 0) const bottom = top + height if (bottom > topLimit) { top = topLimit - height - GAP_BETWEEN_ENTRIES @@ -70,7 +64,7 @@ export const positionItems = debounce( for (let i = activeItemIndex + 1; i < items.length; i++) { const item = items[i] const height = item.offsetHeight - let top = getTopPosition(item, false, newEditor) + let top = getTopPosition(item, false) if (top < bottomLimit) { top = bottomLimit + GAP_BETWEEN_ENTRIES } @@ -92,16 +86,8 @@ export const positionItems = debounce( { leading: false, trailing: true, maxWait: 1000 } ) -function getTopPosition( - item: HTMLDivElement, - isFirstEntry: boolean, - newEditor: boolean -) { +function getTopPosition(item: HTMLDivElement, isFirstEntry: boolean) { const offset = isFirstEntry ? 0 : OFFSET_FOR_ENTRIES_ABOVE - if (newEditor) { - return Math.max(offset, Number(item.dataset.top)) - } - - return Math.max(COLLAPSED_HEADER_HEIGHT + offset, Number(item.dataset.top)) + return Math.max(offset, Number(item.dataset.top)) } diff --git a/services/web/frontend/stylesheets/pages/editor/logs.scss b/services/web/frontend/stylesheets/pages/editor/logs.scss index d7890cf53d..2612b00399 100644 --- a/services/web/frontend/stylesheets/pages/editor/logs.scss +++ b/services/web/frontend/stylesheets/pages/editor/logs.scss @@ -253,77 +253,6 @@ } } - .log-entry-header-error { - background-color: var(--content-danger); - } - - .log-entry-header-link-error { - @include ol-button-variant( - $color: var(--content-primary-dark), - $background: var(--bg-danger-02), - $hover-background: var(--red-70) - ); - } - - .log-entry-header-warning { - background-color: var(--content-warning-dark); - } - - .log-entry-header-link-warning { - @include ol-button-variant( - $color: var(--content-primary-dark), - $background: var(--bg-warning-01), - $hover-background: var(--bg-warning-02) - ); - } - - .log-entry-header-typesetting { - background-color: var(--blue-50); - } - - .log-entry-header-link-typesetting { - @include ol-button-variant( - $color: var(--content-primary-dark), - $background: var(--blue-60), - $hover-background: var(--blue-70) - ); - } - - .log-entry-header-raw, - .log-entry-header-info { - background-color: var(--bg-dark-tertiary); - } - - .log-entry-header-link-raw, - .log-entry-header-link-info { - @include ol-button-variant( - $color: var(--content-primary-dark), - $background: var(--bg-dark-secondary), - $hover-background: var(--bg-dark-primary) - ); - } - - .log-entry-header-success { - background-color: var(--green-50); - } - - .log-entry-header-link-success { - @include ol-button-variant( - $color: var(--content-primary-dark), - $background: var(--green-60), - $hover-background: var(--green-70) - ); - } - - .log-entry-header-title { - @include body-base; - - flex-grow: 1; - font-weight: bold; - margin: 0; - color: var(--content-primary-dark); - } - .log-entry-header-link { color: var(--content-primary-dark); border-width: 0; @@ -470,19 +399,4 @@ display: flex; justify-content: flex-end; } - - .log-entry-header-error { - background-color: var(--red-10); - - .log-entry-header-title { - @include heading-sm; - - color: var(--red-50); - } - } - - .log-entry-header-raw { - background-color: var(--neutral-60); - padding: var(--spacing-04) var(--spacing-06); - } } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 39f1565ddb..5294b97f4e 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1477,7 +1477,6 @@ "name": "Name", "name_usage_explanation": "Your name will be displayed to your collaborators (so they know who they’re working with).", "native": "Native", - "navigate_log_source": "Navigate to log position in source code: __location__", "navigation": "Navigation", "nearly_activated": "You’re one step away from activating your __appName__ account!", "need_20_plus_users_discount": "20+ users? <0>Contact sales to get the best discounts.",