From 92235157058cc4d1900398d8a793bfba6fcb1c6c Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Mon, 26 Jan 2026 11:27:22 +0000 Subject: [PATCH] Merge pull request #30908 from overleaf/mj-remove-opt-out [web] Tear down editor-redesign-opt-out GitOrigin-RevId: c826691f3fdd4ad31403abae8adb353bd8c34897 --- .../Features/Project/ProjectController.mjs | 1 - .../web/frontend/extracted-translations.json | 4 - .../editor-tour/editor-tour-got-questions.tsx | 38 ++++++ .../editor-tour-switch-back-tooltip.tsx | 63 ---------- .../error-logs/log-entry-header.tsx | 6 +- .../ide-redesign/components/rail/rail.tsx | 4 +- .../editor-settings/new-editor-setting.tsx | 45 ------- .../contexts/new-editor-tour-context.tsx | 6 +- .../contexts/settings-modal-context.tsx | 9 +- .../ide-redesign/utils/new-editor-utils.ts | 13 +- services/web/locales/en.json | 4 - .../pdf-preview/pdf-logs-entries.spec.tsx | 35 ++++-- .../pdf-preview/pdf-preview.spec.tsx | 111 ++++++++++-------- .../layout-dropdown-button.test.tsx | 1 + .../components/file-tree-folder.spec.tsx | 9 +- .../file-tree-item-inner.spec.tsx | 7 +- .../file-tree-item-name.spec.tsx | 79 +------------ .../file-tree/flows/context-menu.spec.tsx | 16 +-- .../file-tree/flows/create-folder.spec.tsx | 6 +- .../file-tree/flows/delete-entity.spec.tsx | 4 +- .../file-tree/flows/rename-entity.spec.tsx | 4 +- .../review-panel/review-panel.spec.tsx | 4 +- 22 files changed, 166 insertions(+), 303 deletions(-) create mode 100644 services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-got-questions.tsx delete mode 100644 services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-switch-back-tooltip.tsx delete mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/new-editor-setting.tsx diff --git a/services/web/app/src/Features/Project/ProjectController.mjs b/services/web/app/src/Features/Project/ProjectController.mjs index f76f1a6a33..af107f4db2 100644 --- a/services/web/app/src/Features/Project/ProjectController.mjs +++ b/services/web/app/src/Features/Project/ProjectController.mjs @@ -461,7 +461,6 @@ const _ProjectController = { 'writefull-encourage-prompt-for-paraphrase', 'editor-context-menu', 'email-notifications', - 'editor-redesign-no-opt-out', ].filter(Boolean) const getUserValues = async userId => diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 84e61631ef..9779b7c81f 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1194,7 +1194,6 @@ "not_a_student": "", "not_managed": "", "not_now": "", - "not_sure_about_switching_yet": "", "notification": "", "notification_personal_and_group_subscriptions": "", "notification_project_invite_accepted_message": "", @@ -1430,7 +1429,6 @@ "reactivating": "", "read_lines_from_path": "", "read_more": "", - "read_more_about_the_new_editor": "", "read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks": "", "read_only_dropbox_sync_message": "", "read_only_token": "", @@ -1661,7 +1659,6 @@ "setup_another_account_under_a_personal_email_address": "", "share": "", "share_feedback": "", - "share_feedback_on_the_new_editor": "", "share_project": "", "shared_with_you": "", "sharelatex_beta_program": "", @@ -1892,7 +1889,6 @@ "the_home_of_research_writing": "", "the_latex_engine_used_for_compiling": "", "the_new_and_improved_overleaf_editor_design": "", - "the_new_overleaf_editor_info": "", "the_next_payment_will_be_collected_on": "", "the_original_text_has_changed": "", "the_overleaf_color_scheme": "", diff --git a/services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-got-questions.tsx b/services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-got-questions.tsx new file mode 100644 index 0000000000..fb5a9b742d --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-got-questions.tsx @@ -0,0 +1,38 @@ +import { Trans, useTranslation } from 'react-i18next' +import EditorTourTooltip from './editor-tour-tooltip' + +export default function EditorTourGotQuestionsTooltip({ + target, +}: { + target: HTMLElement | null +}) { + const { t } = useTranslation() + return ( + + , + /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */ + , + ]} + /> + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-switch-back-tooltip.tsx b/services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-switch-back-tooltip.tsx deleted file mode 100644 index f60c0fea88..0000000000 --- a/services/web/frontend/js/features/ide-redesign/components/editor-tour/editor-tour-switch-back-tooltip.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Trans, useTranslation } from 'react-i18next' -import EditorTourTooltip from './editor-tour-tooltip' -import { useFeatureFlag } from '@/shared/context/split-test-context' - -export default function EditorTourSwitchBackTooltip({ - target, -}: { - target: HTMLElement | null -}) { - const { t } = useTranslation() - // NOTE: This should really be a different component, but to reduce - // complexity of the tour code, let's just change the content here. - // The feature flag can be torn down soon, and the component renamed. - const noOptOut = useFeatureFlag('editor-redesign-no-opt-out') - const canSwitchBack = !noOptOut - - return ( - - {canSwitchBack ? ( - , - , - ]} - /> - ) : ( - , - /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */ - , - ]} - /> - )} - - ) -} diff --git a/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx b/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx index 4100d35474..6c22234bba 100644 --- a/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx @@ -6,6 +6,7 @@ import { ElementType, useCallback, KeyboardEventHandler, + useMemo, } from 'react' import { useTranslation } from 'react-i18next' import OLTooltip from '@/shared/components/ol/ol-tooltip' @@ -106,7 +107,10 @@ function LogEntryHeader({ ) : null const headerTitleText = logType ? `${logType} ${headerTitle}` : headerTitle - const fileData = file && findEntityByPath(file) + const fileData = useMemo( + () => file && findEntityByPath(file), + [file, findEntityByPath] + ) const showGoToCodeButton = showSourceLocationLink && !!fileData && diff --git a/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx index b23fceb346..9a7add4e42 100644 --- a/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/rail/rail.tsx @@ -29,7 +29,7 @@ import useRailOverflow from '../../hooks/use-rail-overflow' import EditorTourRailTooltip from '../editor-tour/editor-tour-rail-tooltip' import importOverleafModules from '../../../../../macros/import-overleaf-module.macro' import EditorTourThemeTooltip from '../editor-tour/editor-tour-theme-tooltip' -import EditorTourSwitchBackTooltip from '../editor-tour/editor-tour-switch-back-tooltip' +import EditorTourGotQuestionsTooltip from '../editor-tour/editor-tour-got-questions' import { shouldIncludeElement } from '../../utils/rail-utils' import { useEditorContext } from '@/shared/context/editor-context' @@ -280,7 +280,7 @@ export const RailLayout = () => { - + {moduleRailPopovers .filter(shouldIncludeElement) .map(({ key, Component, ref }) => ( diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/new-editor-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/new-editor-setting.tsx deleted file mode 100644 index c2042d16be..0000000000 --- a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/new-editor-setting.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import ToggleSetting from '../toggle-setting' -import { useTranslation } from 'react-i18next' -import { useSwitchEnableNewEditorState } from '@/features/ide-redesign/hooks/use-switch-enable-new-editor-state' -import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' -import { useCallback } from 'react' -import { useLayoutContext } from '@/shared/context/layout-context' -import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics' -import getMeta from '@/utils/meta' - -export default function NewEditorSetting() { - const { isOverleaf } = getMeta('ol-ExposedSettings') - const { t } = useTranslation() - const { setEditorRedesignStatus } = useSwitchEnableNewEditorState() - const { setLeftMenuShown } = useLayoutContext() - const enabled = useIsNewEditorEnabled() - const { sendEvent } = useEditorAnalytics() - - const handleToggle = useCallback(() => { - sendEvent('switch-to-old-editor', { location: 'settings-modal' }) - setEditorRedesignStatus(!enabled).then(() => setLeftMenuShown(false)) - }, [enabled, setEditorRedesignStatus, setLeftMenuShown, sendEvent]) - - return ( - -
{t('the_new_overleaf_editor_info')}
- {isOverleaf && ( - - {t('share_feedback_on_the_new_editor')} - - )} - - } - checked={enabled} - onChange={handleToggle} - /> - ) -} diff --git a/services/web/frontend/js/features/ide-redesign/contexts/new-editor-tour-context.tsx b/services/web/frontend/js/features/ide-redesign/contexts/new-editor-tour-context.tsx index 205b1062fb..4ff84d613b 100644 --- a/services/web/frontend/js/features/ide-redesign/contexts/new-editor-tour-context.tsx +++ b/services/web/frontend/js/features/ide-redesign/contexts/new-editor-tour-context.tsx @@ -8,7 +8,7 @@ import { useState, } from 'react' -export type NewEditorTourStage = 'rail' | 'logs' | 'theme' | 'switch-back' +export type NewEditorTourStage = 'rail' | 'logs' | 'theme' | 'got-questions' const NewEditorTourContext = createContext< | { @@ -25,11 +25,11 @@ const NewEditorTourContext = createContext< | undefined >(undefined) -const STAGES: NewEditorTourStage[] = ['rail', 'logs', 'theme', 'switch-back'] +const STAGES: NewEditorTourStage[] = ['rail', 'logs', 'theme', 'got-questions'] const EDITOR_ONLY_STAGES: NewEditorTourStage[] = [ 'rail', 'theme', - 'switch-back', + 'got-questions', ] export const NewEditorTourProvider: FC = ({ diff --git a/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx b/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx index 56f0d4e30f..af84cd2fd6 100644 --- a/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx +++ b/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx @@ -24,7 +24,6 @@ import LineHeightSetting from '../components/settings/appearance-settings/line-h import FontFamilySetting from '../components/settings/appearance-settings/font-family-setting' import { AvailableUnfilledIcon } from '@/shared/components/material-icon' import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' -import NewEditorSetting from '../components/settings/editor-settings/new-editor-setting' import DarkModePdfSetting from '../components/settings/appearance-settings/dark-mode-pdf-setting' import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' import { useFeatureFlag } from '@/shared/context/split-test-context' @@ -88,7 +87,6 @@ export const SettingsModalProvider: FC = ({ const { leftMenuShown, setLeftMenuShown } = useLayoutContext() const hasEmailNotifications = useFeatureFlag('email-notifications') - const noNewEditorOptOut = useFeatureFlag('editor-redesign-no-opt-out') const allSettingsTabs: SettingsEntry[] = useMemo( () => [ @@ -226,11 +224,6 @@ export const SettingsModalProvider: FC = ({ key: 'lineHeight', component: , }, - { - key: 'newEditor', - component: , - hidden: noNewEditorOptOut, - }, ], }, ], @@ -267,7 +260,7 @@ export const SettingsModalProvider: FC = ({ href: '/user/subscription', }, ], - [t, overallTheme, hasEmailNotifications, noNewEditorOptOut] + [t, overallTheme, hasEmailNotifications] ) const settingsTabs = useMemo( diff --git a/services/web/frontend/js/features/ide-redesign/utils/new-editor-utils.ts b/services/web/frontend/js/features/ide-redesign/utils/new-editor-utils.ts index e43e269bba..e442e33a25 100644 --- a/services/web/frontend/js/features/ide-redesign/utils/new-editor-utils.ts +++ b/services/web/frontend/js/features/ide-redesign/utils/new-editor-utils.ts @@ -1,4 +1,3 @@ -import { useFeatureFlag } from '@/shared/context/split-test-context' import { useUserSettingsContext } from '@/shared/context/user-settings-context' // For e2e tests purposes, allow overriding to old editor @@ -11,17 +10,7 @@ export const canUseNewEditor = () => { } export const useIsNewEditorEnabled = () => { - const { userSettings } = useUserSettingsContext() - const noOptOut = useFeatureFlag('editor-redesign-no-opt-out') - const hasAccess = canUseNewEditor() - if (!hasAccess) { - return false - } - const enabled = userSettings.enableNewEditor - if (noOptOut) { - return true - } - return enabled + return canUseNewEditor() } export const useIsNewToNewEditor = () => { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 66ed776eb6..331cf93f11 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1540,7 +1540,6 @@ "not_managed": "Not managed", "not_now": "Not now", "not_registered": "Not registered", - "not_sure_about_switching_yet": "Not sure about switching yet?", "note_features_under_development": "<0>Please note that features in this program are still being tested and actively developed. This means that they might <0>change, be <0>removed or <0>become part of a premium plan", "notification": "Notification", "notification_features_upgraded_by_affiliation": "Good news! Your affiliated organization __institutionName__ has an Overleaf subscription, and you now have access to all of Overleaf’s Professional features.", @@ -1847,7 +1846,6 @@ "reactivating": "Reactivating", "read_lines_from_path": "Read lines from __path__", "read_more": "Read more", - "read_more_about_the_new_editor": "<0>Read more about the new editor design, or temporarily switch back to the old editor using the <1>Appearance settings.", "read_more_about_the_new_editor_or_explore_our_documentation_for_tips_and_tricks": "<0>Read more about the new editor, or <1>explore our documentation for tips and tricks.", "read_only_dropbox_sync_message": "As a read-only viewer you can sync the current project version to Dropbox, but changes made in Dropbox will <0>not sync back to Overleaf.", "read_only_token": "Read-Only Token", @@ -2132,7 +2130,6 @@ "setup_another_account_under_a_personal_email_address": "Set up another Overleaf account under a personal email address.", "share": "Share", "share_feedback": "Share feedback", - "share_feedback_on_the_new_editor": "Share feedback on the new editor look.", "share_project": "Share Project", "shared_with_you": "Shared with you", "sharelatex_beta_program": "__appName__ beta program", @@ -2408,7 +2405,6 @@ "the_home_of_research_writing": "The home of research writing.", "the_latex_engine_used_for_compiling": "The LaTeX engine used for compiling", "the_new_and_improved_overleaf_editor_design": "The new and improved __appName__ editor design brings you a cleaner, less cluttered interface to help you focus on what matters—your work.", - "the_new_overleaf_editor_info": "__appName__’s new look is here. Disabling this option will switch you back to the old editor design.", "the_next_payment_will_be_collected_on": "The next payment will be collected on __date__.", "the_original_text_has_changed": "The original text has changed, so this suggestion can’t be applied", "the_overleaf_color_scheme": "The __appName__ color scheme", diff --git a/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx b/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx index a3067b566e..ac217269d6 100644 --- a/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx +++ b/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx @@ -3,7 +3,7 @@ import PdfLogsEntries from '../../../../frontend/js/features/pdf-preview/compone import { detachChannel, testDetachChannel } from '../../helpers/detach-channel' import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path' import { FindResult } from '@/features/file-tree/util/path' -import { FC } from 'react' +import { FC, ReactElement } from 'react' import { EditorManager, EditorManagerContext, @@ -62,6 +62,14 @@ describe('', function () { ) } + // TODO: ide-redesign-cleanup: Remove this wrapper when the styles are no + // longer nested in .ide-redesign-main .error-logs + const LogsPanel = ({ children }: { children: ReactElement }) => ( +
+
{children}
+
+ ) + const logEntries: LogEntry[] = [ { file: 'main.tex', @@ -84,7 +92,9 @@ describe('', function () { it('displays human readable hint', function () { cy.mount( - + + + ) @@ -100,15 +110,17 @@ describe('', function () { EditorViewProvider, }} > - + + + ) cy.findByRole('button', { - name: 'Navigate to log position in source code: main.tex, 9', + name: 'Go to code location', }).click() - cy.get('@findEntityByPath').should('have.been.calledOnceWith', 'main.tex') + cy.get('@findEntityByPath').should('have.been.calledWith', 'main.tex') cy.get('@openDocWithId').should( 'have.been.calledOnceWith', fakeFindEntityResult.entity._id, @@ -133,7 +145,9 @@ describe('', function () { EditorViewProvider, }} > - + + + ).then(() => { testDetachChannel.postMessage({ @@ -151,7 +165,7 @@ describe('', function () { }) }) - cy.get('@findEntityByPath').should('have.been.calledOnce') + cy.get('@findEntityByPath').should('have.been.called') cy.get('@openDocWithId').should( 'have.been.calledOnceWith', fakeFindEntityResult.entity._id, @@ -176,17 +190,18 @@ describe('', function () { EditorViewProvider, }} > - + + + ) cy.spy(detachChannel, 'postMessage').as('postDetachMessage') cy.findByRole('button', { - name: 'Navigate to log position in source code: main.tex, 9', + name: 'Go to code location', }).click() - cy.get('@findEntityByPath').should('not.have.been.called') cy.get('@openDocWithId').should('not.have.been.called') cy.get('@postDetachMessage').should('have.been.calledWith', { role: 'detached', diff --git a/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx b/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx index b138c1de22..c109082b4d 100644 --- a/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx +++ b/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx @@ -7,7 +7,7 @@ import { IdeView, useLayoutContext, } from '../../../../frontend/js/shared/context/layout-context' -import { FC, PropsWithChildren, useEffect } from 'react' +import { FC, PropsWithChildren, ReactElement, useEffect } from 'react' import { useLocalCompileContext } from '@/shared/context/local-compile-context' import { ProjectCompiler } from '../../../../types/project-settings' @@ -29,6 +29,16 @@ const Layout: FC<{ layout: IdeLayout; view?: IdeView }> = ({ return null } +const PdfViewer = ({ children }: { children: ReactElement }) => { + return ( + // TODO: ide-redesign-cleanup: Remove the .ide-redesign-main wrapper when + // the styles are no longer nested in that. +
+
{children}
+
+ ) +} + describe('', function () { let projectId: string beforeEach(function () { @@ -63,9 +73,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -87,9 +97,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -111,9 +121,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -162,9 +172,9 @@ describe('', function () { const scope = mockScope() cy.mount( -
+ -
+ ) @@ -272,9 +282,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -292,9 +302,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -314,9 +324,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -338,9 +348,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -372,9 +382,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -395,9 +405,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -429,9 +439,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -470,9 +480,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -498,7 +508,9 @@ describe('', function () { // NOTE: difficult to assert that a request hasn't been sent cy.findByRole('button', { name: 'Recompile' }) - cy.findByText('Code check failed') + cy.findByText( + 'Your code has errors that need to be fixed before the auto-compile can run' + ) }) it('does not run a compile on doc change if the PDF preview is not open', function () { @@ -509,9 +521,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -570,9 +582,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -590,9 +602,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -601,9 +613,10 @@ describe('', function () { cy.findByRole('button', { name: 'View logs' }).click() cy.findByRole('button', { name: 'View PDF' }) - - cy.findByRole('button', { name: 'Expand' }).click() - cy.findByRole('button', { name: 'Collapse' }).click() + cy.findByLabelText('Raw logs from the LaTeX compiler').within(() => { + cy.findByRole('button', { name: 'Expand' }).click() + cy.findByRole('button', { name: 'Collapse' }).click() + }) }) it('displays error messages if there were validation problems', function () { @@ -638,9 +651,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -660,9 +673,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -705,9 +718,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -768,9 +781,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -796,9 +809,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -826,9 +839,9 @@ describe('', function () { cy.mount( -
+ -
+ ) @@ -859,9 +872,9 @@ describe('', function () { cy.mount( -
+ -
+ ) diff --git a/services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.tsx b/services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.tsx index c3bd08ed89..5711827a5f 100644 --- a/services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.tsx +++ b/services/web/test/frontend/features/editor-navigation-toolbar/components/layout-dropdown-button.test.tsx @@ -224,6 +224,7 @@ describe('', function () { layout: 'flat', view: 'editor', page: '/detacher', + 'editor-redesign': 'enabled', }) }) diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-folder.spec.tsx b/services/web/test/frontend/features/file-tree/components/file-tree-folder.spec.tsx index e371bee72f..486fc6fb40 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-folder.spec.tsx +++ b/services/web/test/frontend/features/file-tree/components/file-tree-folder.spec.tsx @@ -19,12 +19,11 @@ describe('', function () { ) - cy.findByRole('treeitem', { selected: false }) cy.findByRole('tree').should('not.exist') }) - it('renders selected', function () { + it('expands when selected', function () { const rootFolder = [ { _id: 'root-folder-id', @@ -51,7 +50,7 @@ describe('', function () { cy.findByRole('treeitem', { selected: false }).click() cy.findByRole('treeitem', { selected: true }) - cy.findByRole('tree').should('not.exist') + cy.findByRole('tree').should('exist') }) it('expands', function () { @@ -80,7 +79,7 @@ describe('', function () { ) cy.findByRole('treeitem') - cy.findByRole('button', { name: 'Expand' }).click() + cy.findByLabelText('Expand').click() cy.findByRole('tree') }) @@ -110,7 +109,7 @@ describe('', function () { ) cy.findByRole('tree').should('not.exist') - cy.findByRole('button', { name: 'Expand' }).click() + cy.findByLabelText('Expand').click() cy.findByRole('tree') cy.then(() => ReactDom.unmountComponentAtNode(getContainerEl())) diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-inner.spec.tsx b/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-inner.spec.tsx index 388cbf96de..50c92350d2 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-inner.spec.tsx +++ b/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-inner.spec.tsx @@ -66,7 +66,7 @@ describe('', function () { cy.findByRole('menu') // close the context menu - cy.get('div.entity').click() + cy.get('div.entity').click({ force: true }) cy.findByRole('menu').should('not.exist') }) }) @@ -86,7 +86,8 @@ describe('', function () { ) - cy.findByRole('button', { name: 'bar.tex' }) + // TODO: ide-redesign-cleanup: Can we add a better selector here? + cy.findByText('bar.tex') cy.findByRole('textbox').should('not.exist') }) @@ -117,7 +118,7 @@ describe('', function () { cy.findByRole('button', { name: 'Open bar.tex action menu' }).click() cy.findByRole('menuitem', { name: 'Rename' }).click() - cy.findByRole('button', { name: 'bar.tex' }).should('not.exist') + cy.findByRole('treeitem', { name: 'bar.tex' }).should('not.exist') cy.findByRole('textbox') }) }) diff --git a/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-name.spec.tsx b/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-name.spec.tsx index c699e07468..6dbfd8ede4 100644 --- a/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-name.spec.tsx +++ b/services/web/test/frontend/features/file-tree/components/file-tree-item/file-tree-item-name.spec.tsx @@ -3,7 +3,7 @@ import { EditorProviders } from '../../../../helpers/editor-providers' import { FileTreeProvider } from '../../helpers/file-tree-provider' describe('', function () { - it('renders name as button', function () { + it('renders name', function () { cy.mount( @@ -16,93 +16,22 @@ describe('', function () { ) - cy.findByRole('button', { name: 'foo.tex' }) - cy.findByRole('textbox').should('not.exist') + cy.findByText('foo.tex') }) - it("doesn't start renaming on unselected component", function () { - cy.mount( - - - - - - ) - - cy.findByRole('button').click() - cy.findByRole('button').click() - cy.findByRole('button').dblclick() - cy.findByRole('textbox').should('not.exist') - }) - - it('start renaming on double-click', function () { + it('does not render name as a button', function () { cy.mount( ) - cy.findByRole('button').click() - cy.findByRole('button').click() - cy.findByRole('button').dblclick() - cy.findByRole('textbox') cy.findByRole('button').should('not.exist') - cy.get('@setIsDraggable').should('have.been.calledWith', false) - }) - - it('cannot start renaming in read-only', function () { - cy.mount( - - - - - - ) - - cy.findByRole('button').click() - cy.findByRole('button').click() - cy.findByRole('button').dblclick() - - cy.findByRole('textbox').should('not.exist') - }) - - describe('stop renaming', function () { - it('on Escape', function () { - cy.mount( - - - - - - ) - - cy.findByRole('button').click() - cy.findByRole('button').click() - cy.findByRole('button').dblclick() - - cy.findByRole('textbox').clear() - cy.findByRole('textbox').type('bar.tex{esc}') - - cy.findByRole('button', { name: 'foo.tex' }) - cy.get('@setIsDraggable').should('have.been.calledWith', true) - }) }) }) diff --git a/services/web/test/frontend/features/file-tree/flows/context-menu.spec.tsx b/services/web/test/frontend/features/file-tree/flows/context-menu.spec.tsx index 102aca7ecb..1e6b0d27a1 100644 --- a/services/web/test/frontend/features/file-tree/flows/context-menu.spec.tsx +++ b/services/web/test/frontend/features/file-tree/flows/context-menu.spec.tsx @@ -37,7 +37,7 @@ describe('FileTree Context Menu Flow', function () { ) cy.findByRole('menu').should('not.exist') - cy.findByRole('button', { name: 'main.tex' }).trigger('contextmenu') + cy.findByRole('treeitem', { name: 'main.tex' }).trigger('contextmenu') cy.findByRole('menu') }) @@ -73,9 +73,9 @@ describe('FileTree Context Menu Flow', function () { ) cy.findByRole('menu').should('not.exist') - cy.findByRole('button', { name: 'main.tex' }).trigger('contextmenu') + cy.findByRole('treeitem', { name: 'main.tex' }).trigger('contextmenu') cy.findByRole('menu') - cy.findAllByRole('button', { name: 'foo.tex' }).click() + cy.findAllByRole('treeitem', { name: 'foo.tex' }).click() cy.findByRole('menu').should('not.exist') }) @@ -108,7 +108,7 @@ describe('FileTree Context Menu Flow', function () { ) - cy.findAllByRole('button', { name: 'main.tex' }).trigger('contextmenu') + cy.findAllByRole('treeitem', { name: 'main.tex' }).trigger('contextmenu') cy.findByRole('menu').should('not.exist') }) @@ -146,14 +146,14 @@ describe('FileTree Context Menu Flow', function () { cy.findByRole('menu').should('not.exist') // main.tex is already the main document - cy.findByRole('button', { name: 'main.tex' }).trigger('contextmenu') + cy.findByRole('treeitem', { name: 'main.tex' }).trigger('contextmenu') cy.findByRole('menu') .findByRole('menuitem', { name: 'Set as main document' }) .should('not.exist') // set other.tex as the main document - cy.findByRole('button', { name: 'other.tex' }).click({ force: true }) - cy.findByRole('button', { name: 'other.tex' }).trigger('contextmenu') + cy.findByRole('treeitem', { name: 'other.tex' }).click({ force: true }) + cy.findByRole('treeitem', { name: 'other.tex' }).trigger('contextmenu') cy.intercept('POST', '/project/123abc/settings', { statusCode: 204 }).as( 'update-settings' @@ -168,7 +168,7 @@ describe('FileTree Context Menu Flow', function () { .should('eq', 'other-doc') // main.tex is now not the main document - cy.findByRole('button', { name: 'main.tex' }).trigger('contextmenu') + cy.findByRole('treeitem', { name: 'main.tex' }).trigger('contextmenu') cy.findByRole('menu').findByRole('menuitem', { name: 'Set as main document', }) diff --git a/services/web/test/frontend/features/file-tree/flows/create-folder.spec.tsx b/services/web/test/frontend/features/file-tree/flows/create-folder.spec.tsx index 553757a1f1..37d6833ca9 100644 --- a/services/web/test/frontend/features/file-tree/flows/create-folder.spec.tsx +++ b/services/web/test/frontend/features/file-tree/flows/create-folder.spec.tsx @@ -109,7 +109,7 @@ describe('FileTree Create Folder Flow', function () { ) - cy.findByRole('button', { name: 'Expand' }).click() + cy.findByLabelText('Expand').click() const name = 'Foo Bar In thefolder' @@ -144,7 +144,7 @@ describe('FileTree Create Folder Flow', function () { cy.findByRole('treeitem', { name }) // collapse the parent folder; created folder should not be rendered anymore - cy.findByRole('button', { name: 'Collapse' }).click() + cy.findByLabelText('Collapse').click() cy.findByRole('treeitem', { name }).should('not.exist') }) @@ -218,7 +218,7 @@ describe('FileTree Create Folder Flow', function () { cy.findByRole('treeitem', { name }) // collapse the parent folder; created folder should not be rendered anymore - cy.findByRole('button', { name: 'Collapse' }).click() + cy.findByLabelText('Collapse').click() cy.findByRole('treeitem', { name }).should('not.exist') }) diff --git a/services/web/test/frontend/features/file-tree/flows/delete-entity.spec.tsx b/services/web/test/frontend/features/file-tree/flows/delete-entity.spec.tsx index 22de945454..804b72883f 100644 --- a/services/web/test/frontend/features/file-tree/flows/delete-entity.spec.tsx +++ b/services/web/test/frontend/features/file-tree/flows/delete-entity.spec.tsx @@ -177,7 +177,7 @@ describe('FileTree Delete Entity Flow', function () { ) - cy.findByRole('button', { name: 'Expand' }).click() + cy.findByLabelText('Expand').click() cy.findByRole('treeitem', { name: 'main.tex' }).click() cy.findByRole('treeitem', { name: 'my.bib' }).click({ ctrlKey: true, @@ -248,7 +248,7 @@ describe('FileTree Delete Entity Flow', function () { }) // open the context menu - cy.findByRole('button', { name: 'my.bib' }).trigger('contextmenu') + cy.findByRole('treeitem', { name: 'my.bib' }).trigger('contextmenu') // make sure the menu has opened, with only a "Delete" item (as multiple files are selected) cy.findByRole('menu') diff --git a/services/web/test/frontend/features/file-tree/flows/rename-entity.spec.tsx b/services/web/test/frontend/features/file-tree/flows/rename-entity.spec.tsx index 0d6e8771d4..06154ab53f 100644 --- a/services/web/test/frontend/features/file-tree/flows/rename-entity.spec.tsx +++ b/services/web/test/frontend/features/file-tree/flows/rename-entity.spec.tsx @@ -85,7 +85,7 @@ describe('FileTree Rename Entity Flow', function () { 'renameFile' ) - cy.findByRole('button', { name: 'Expand' }).click() + cy.findByLabelText('Expand').click() renameItem('c.tex', 'd.tex') @@ -122,7 +122,7 @@ describe('FileTree Rename Entity Flow', function () { }) it('shows error modal on duplicate filename in subfolder', function () { - cy.findByRole('button', { name: 'Expand' }).click() + cy.findByLabelText('Expand').click() renameItem('c.tex', 'e.tex') diff --git a/services/web/test/frontend/features/review-panel/review-panel.spec.tsx b/services/web/test/frontend/features/review-panel/review-panel.spec.tsx index aadefbe8b3..9a29df52da 100644 --- a/services/web/test/frontend/features/review-panel/review-panel.spec.tsx +++ b/services/web/test/frontend/features/review-panel/review-panel.spec.tsx @@ -274,9 +274,7 @@ describe('', function () { describe('toggler', function () { it('should close panel when pressing close button', function () { - cy.get('@review-panel').within(() => { - cy.findByLabelText('Close').click({ scrollBehavior: false }) - }) + cy.findByLabelText('Close').click({ scrollBehavior: false }) // We should collapse to the mini state cy.get('.review-panel-mini').should('exist') })