diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 8ff63d2593..0c6a28d57d 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/services/web/app/src/Features/Project/ProjectController.js @@ -847,6 +847,7 @@ const _ProjectController = { overallTheme: user.ace.overallTheme, mathPreview: user.ace.mathPreview, referencesSearchMode: user.ace.referencesSearchMode, + enableNewEditor: user.ace.enableNewEditor ?? true, }, privilegeLevel, anonymous, diff --git a/services/web/app/src/Features/User/UserController.js b/services/web/app/src/Features/User/UserController.js index d4257f7912..e4186d39a8 100644 --- a/services/web/app/src/Features/User/UserController.js +++ b/services/web/app/src/Features/User/UserController.js @@ -392,6 +392,9 @@ async function updateUserSettings(req, res, next) { req.body.referencesSearchMode === 'simple' ? 'simple' : 'advanced' user.ace.referencesSearchMode = mode } + if (req.body.enableNewEditor != null) { + user.ace.enableNewEditor = Boolean(req.body.enableNewEditor) + } await user.save() const newEmail = req.body.email?.trim().toLowerCase() diff --git a/services/web/app/src/models/User.js b/services/web/app/src/models/User.js index 41e502c4d8..73506f161c 100644 --- a/services/web/app/src/models/User.js +++ b/services/web/app/src/models/User.js @@ -98,6 +98,7 @@ const UserSchema = new Schema( lineHeight: { type: String }, mathPreview: { type: Boolean, default: true }, referencesSearchMode: { type: String, default: 'advanced' }, // 'advanced' or 'simple' + enableNewEditor: { type: Boolean }, }, features: { collaborators: { diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 431bf83252..c8864d8b2a 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -352,6 +352,7 @@ "customize_your_group_subscription": "", "customizing_figures": "", "customizing_tables": "", + "dark_mode": "", "date_and_owner": "", "dealing_with_errors": "", "delete": "", @@ -694,6 +695,7 @@ "help_articles_matching": "", "help_improve_overleaf_fill_out_this_survey": "", "help_improve_screen_reader_fill_out_this_survey": "", + "help_shape_the_future_of_overleaf": "", "hide": "", "hide_configuration": "", "hide_deleted_user": "", @@ -852,6 +854,7 @@ "knowledge_base": "", "labels_help_you_to_easily_reference_your_figures": "", "labels_help_you_to_reference_your_tables": "", + "labs": "", "language": "", "language_suggestions_for_texts_in_any_language": "", "large_or_high-resolution_images_taking_too_long": "", @@ -1395,6 +1398,7 @@ "reverse_x_sort_order": "", "revert_pending_plan_change": "", "review": "", + "review_panel_comments_and_track_changes": "", "review_your_peers_work": "", "reviewer": "", "reviewing": "", @@ -1503,6 +1507,7 @@ "set_up_single_sign_on": "", "set_up_sso": "", "settings": "", + "settings_for_git_github_and_dropbox_integrations": "", "setup_another_account_under_a_personal_email_address": "", "share": "", "share_project": "", @@ -1644,6 +1649,8 @@ "switch_back_to_monthly_pay_20_more": "", "switch_plan": "", "switch_to_editor": "", + "switch_to_new_editor": "", + "switch_to_old_editor": "", "switch_to_pdf": "", "switch_to_standard_plan": "", "symbol_palette": "", @@ -1682,6 +1689,7 @@ "texgpt_for_help_writing_latex": "", "thank_you_exclamation": "", "thank_you_for_your_feedback": "", + "thanks_for_being_part_of_this_labs_experiment_your_feedback_will_help_us_make_the_new_editor_the_best_yet": "", "thanks_for_confirming_your_email_address": "", "thanks_for_getting_in_touch": "", "thanks_for_subscribing": "", @@ -1695,6 +1703,7 @@ "the_following_files_and_folders_already_exist_in_this_project": "", "the_following_folder_already_exists_in_this_project": "", "the_following_folder_already_exists_in_this_project_plural": "", + "the_new_overleaf_editor": "", "the_next_payment_will_be_collected_on": "", "the_original_text_has_changed": "", "the_target_folder_could_not_be_found": "", @@ -1713,6 +1722,7 @@ "this_experiment_isnt_accepting_new_participants": "", "this_field_is_required": "", "this_grants_access_to_features_2": "", + "this_is_a_labs_experiment_for_the_new_overleaf_editor_some_features_are_still_in_progress": "", "this_is_a_new_feature": "", "this_is_the_file_that_references_pulled_from_your_reference_manager_will_be_added_to": "", "this_project_already_has_maximum_editors": "", @@ -1843,6 +1853,7 @@ "try_premium_for_free": "", "try_recompile_project_or_troubleshoot": "", "try_relinking_provider": "", + "try_the_new_editor": "", "try_to_compile_despite_errors": "", "turn_off": "", "turn_off_link_sharing": "", @@ -1992,6 +2003,7 @@ "well_be_here_when_youre_ready": "", "were_making_some_changes_to_project_sharing_this_means_you_will_be_visible": "", "were_performing_maintenance": "", + "were_redesigning_our_editor_to_make_it_easier_to_use": "", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project": "", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project": "", "what_do_you_need_help_with": "", @@ -1999,6 +2011,8 @@ "what_does_this_mean_for_you": "", "what_happens_when_sso_is_enabled": "", "what_should_we_call_you": "", + "whats_new": "", + "whats_next": "", "when_you_tick_the_include_caption_box": "", "why_latex": "", "why_might_this_happen": "", @@ -2039,6 +2053,7 @@ "you_are_on_x_plan_as_member_of_group_subscription_y_administered_by_z": "", "you_can_also_choose_to_view_anonymously_or_leave_the_project": "", "you_can_buy_this_plan_but_not_as_a_trial": "", + "you_can_leave_the_experiment_from_your_account_settings_at_any_time": "", "you_can_manage_your_reference_manager_integrations_from_your_account_settings_page": "", "you_can_now_enable_sso": "", "you_can_now_log_in_sso": "", @@ -2109,6 +2124,7 @@ "youre_about_to_enable_single_sign_on_sso_only": "", "youre_adding_x_users_to_your_plan_giving_you_a_total_of_y_users": "", "youre_already_setup_for_sso": "", + "youre_helping_us_shape_the_future_of_overleaf": "", "youre_joining": "", "youre_on_free_trial_which_ends_on": "", "youre_signed_in_as_logout": "", diff --git a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 index ade3a5b5df..14a5ef1e2b 100644 Binary files a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 and b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 differ diff --git a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs index 57bef6ea11..eca63fa035 100644 --- a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs +++ b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs @@ -9,6 +9,7 @@ export default /** @type {const} */ ([ 'code', 'create_new_folder', 'description', + 'experiment', 'forum', 'help', 'image', diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx index d7947f1894..97bfa763cc 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.jsx @@ -16,6 +16,8 @@ import importOverleafModules from '../../../../macros/import-overleaf-module.mac import BackToEditorButton from './back-to-editor-button' import getMeta from '@/utils/meta' import { isSplitTestEnabled } from '@/utils/splitTestUtils' +import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils' +import TryNewEditorButton from '../try-new-editor-button' const [publishModalModules] = importOverleafModules('publishModal') const PublishButton = publishModalModules?.import.default @@ -87,6 +89,8 @@ const ToolbarHeader = React.memo(function ToolbarHeader({ />
+ {canUseNewEditor() && } + {historyIsOpen ? ( diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx b/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx new file mode 100644 index 0000000000..91cc150ff6 --- /dev/null +++ b/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx @@ -0,0 +1,28 @@ +import { useCallback } from 'react' +import OLButton from '../ui/components/ol/ol-button' +import { useIdeRedesignSwitcherContext } from '../ide-react/context/ide-redesign-switcher-context' +import MaterialIcon from '@/shared/components/material-icon' +import { useTranslation } from 'react-i18next' + +const TryNewEditorButton = () => { + const { t } = useTranslation() + const { setShowSwitcherModal } = useIdeRedesignSwitcherContext() + const onClick = useCallback(() => { + setShowSwitcherModal(true) + }, [setShowSwitcherModal]) + return ( +
+ } + variant="info" + > + {t('try_the_new_editor')} + +
+ ) +} + +export default TryNewEditorButton diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-folder-icons.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-folder-icons.tsx index 0248a3fe85..45099e69fe 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-folder-icons.tsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-folder-icons.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next' import MaterialIcon from '@/shared/components/material-icon' -import { useFeatureFlag } from '@/shared/context/split-test-context' +import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' function FileTreeFolderIcons({ expanded, @@ -10,8 +10,7 @@ function FileTreeFolderIcons({ onExpandCollapseClick: () => void }) { const { t } = useTranslation() - - const newEditor = useFeatureFlag('editor-redesign') + const newEditor = useIsNewEditorEnabled() if (newEditor) { return ( diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-icon.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-icon.tsx index 483c84301d..907bfdc44b 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-icon.tsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-icon.tsx @@ -4,7 +4,7 @@ import iconTypeFromName, { } from '../util/icon-type-from-name' import classnames from 'classnames' import MaterialIcon from '@/shared/components/material-icon' -import { useFeatureFlag } from '@/shared/context/split-test-context' +import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' function FileTreeIcon({ isLinkedFile, @@ -19,7 +19,7 @@ function FileTreeIcon({ 'linked-file-icon': isLinkedFile, }) - const newEditor = useFeatureFlag('editor-redesign') + const newEditor = useIsNewEditorEnabled() if (newEditor) { return ( diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-root.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-root.tsx index 24db6255f9..561e1b5e1d 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-root.tsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-root.tsx @@ -19,7 +19,7 @@ import FileTreeInner from './file-tree-inner' import { useDragLayer } from 'react-dnd' import classnames from 'classnames' import { pathInFolder } from '@/features/file-tree/util/path' -import { useFeatureFlag } from '@/shared/context/split-test-context' +import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' const FileTreeRoot = React.memo<{ onSelect: () => void @@ -43,7 +43,7 @@ const FileTreeRoot = React.memo<{ const { _id: projectId } = useProjectContext() const { fileTreeData } = useFileTreeData() const isReady = Boolean(projectId && fileTreeData) - const newEditor = useFeatureFlag('editor-redesign') + const newEditor = useIsNewEditorEnabled() useEffect(() => { if (fileTreeContainer) { diff --git a/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx b/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx index 22f9fc0da4..fa235560e8 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx +++ b/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx @@ -10,7 +10,7 @@ import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-e import { Modals } from '@/features/ide-react/components/modals/modals' import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts-context' import { GlobalToasts } from '../global-toasts' -import { useFeatureFlag } from '@/shared/context/split-test-context' +import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' const MainLayoutNew = lazy( () => import('@/features/ide-redesign/components/main-layout') @@ -26,7 +26,7 @@ export default function IdePage() { useRegisterUserActivity() // record activity and ensure connection when user is active useHasLintingError() // pass editor:lint hasLintingError to the compiler - const newEditor = useFeatureFlag('editor-redesign') + const newEditor = useIsNewEditorEnabled() return ( diff --git a/services/web/frontend/js/features/ide-react/components/modals/modals.tsx b/services/web/frontend/js/features/ide-react/components/modals/modals.tsx index ed031dcf1d..eff07ae89a 100644 --- a/services/web/frontend/js/features/ide-react/components/modals/modals.tsx +++ b/services/web/frontend/js/features/ide-react/components/modals/modals.tsx @@ -2,6 +2,7 @@ import { memo } from 'react' import ForceDisconnected from '@/features/ide-react/components/modals/force-disconnected' import { UnsavedDocs } from '@/features/ide-react/components/unsaved-docs/unsaved-docs' import SystemMessages from '@/shared/components/system-messages' +import { IdeRedesignSwitcherModal } from '@/features/ide-redesign/components/switcher-modal/modal' export const Modals = memo(() => { return ( @@ -9,6 +10,7 @@ export const Modals = memo(() => { + ) }) diff --git a/services/web/frontend/js/features/ide-react/context/ide-redesign-switcher-context.tsx b/services/web/frontend/js/features/ide-react/context/ide-redesign-switcher-context.tsx new file mode 100644 index 0000000000..464812d663 --- /dev/null +++ b/services/web/frontend/js/features/ide-react/context/ide-redesign-switcher-context.tsx @@ -0,0 +1,39 @@ +import { + createContext, + Dispatch, + FC, + SetStateAction, + useContext, + useState, +} from 'react' + +type IdeRedesignSwitcherContextValue = { + showSwitcherModal: boolean + setShowSwitcherModal: Dispatch> +} + +export const IdeRedesignSwitcherContext = createContext< + IdeRedesignSwitcherContextValue | undefined +>(undefined) + +export const IdeRedesignSwitcherProvider: FC = ({ children }) => { + const [showSwitcherModal, setShowSwitcherModal] = useState(false) + + return ( + + {children} + + ) +} + +export const useIdeRedesignSwitcherContext = () => { + const context = useContext(IdeRedesignSwitcherContext) + if (!context) { + throw new Error( + 'useIdeRedesignSwitcherContext is only available inside IdeRedesignSwitcherProvider' + ) + } + return context +} diff --git a/services/web/frontend/js/features/ide-react/context/react-context-root.tsx b/services/web/frontend/js/features/ide-react/context/react-context-root.tsx index 9ec848dbf6..9551777813 100644 --- a/services/web/frontend/js/features/ide-react/context/react-context-root.tsx +++ b/services/web/frontend/js/features/ide-react/context/react-context-root.tsx @@ -24,6 +24,7 @@ import { SnapshotProvider } from '@/features/ide-react/context/snapshot-context' import { SplitTestProvider } from '@/shared/context/split-test-context' import { UserProvider } from '@/shared/context/user-context' import { UserSettingsProvider } from '@/shared/context/user-settings-context' +import { IdeRedesignSwitcherProvider } from './ide-redesign-switcher-context' export const ReactContextRoot: FC<{ providers?: Record }> = ({ children, @@ -55,6 +56,7 @@ export const ReactContextRoot: FC<{ providers?: Record }> = ({ SplitTestProvider, UserProvider, UserSettingsProvider, + IdeRedesignSwitcherProvider, ...providers, } @@ -84,7 +86,9 @@ export const ReactContextRoot: FC<{ providers?: Record }> = ({ - {children} + + {children} + diff --git a/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx index cb87774945..2de51dc11e 100644 --- a/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next' import { useRailContext } from '../../contexts/rail-context' import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider' import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context' -import { useFeatureFlag } from '@/shared/context/split-test-context' +import { useIsNewEditorEnabled } from '../../utils/new-editor-utils' function PdfErrorState() { const { loadingError } = usePdfPreviewContext() @@ -12,7 +12,7 @@ function PdfErrorState() { const { showLogs } = useCompileContext() const { t } = useTranslation() const { setSelectedTab: setSelectedRailTab } = useRailContext() - const newEditor = useFeatureFlag('editor-redesign') + const newEditor = useIsNewEditorEnabled() if (!newEditor || (!loadingError && !showLogs)) { return null diff --git a/services/web/frontend/js/features/ide-redesign/components/switcher-modal/modal.tsx b/services/web/frontend/js/features/ide-redesign/components/switcher-modal/modal.tsx new file mode 100644 index 0000000000..11807e1a53 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/switcher-modal/modal.tsx @@ -0,0 +1,178 @@ +import { useIdeRedesignSwitcherContext } from '@/features/ide-react/context/ide-redesign-switcher-context' +import OLButton from '@/features/ui/components/ol/ol-button' +import OLModal, { + OLModalBody, + OLModalFooter, + OLModalHeader, + OLModalTitle, +} from '@/features/ui/components/ol/ol-modal' +import { FC, useCallback } from 'react' +import { + canUseNewEditor, + useIsNewEditorEnabled, +} from '../../utils/new-editor-utils' +import Notification from '@/shared/components/notification' +import { useSwitchEnableNewEditorState } from '../../hooks/use-switch-enable-new-editor-state' +import { Trans, useTranslation } from 'react-i18next' + +export const IdeRedesignSwitcherModal = () => { + const { t } = useTranslation() + const { showSwitcherModal, setShowSwitcherModal } = + useIdeRedesignSwitcherContext() + const onHide = useCallback( + () => setShowSwitcherModal(false), + [setShowSwitcherModal] + ) + const { loading, error, setEditorRedesignStatus } = + useSwitchEnableNewEditorState() + const enabled = useIsNewEditorEnabled() + const hasAccess = canUseNewEditor() + if (!hasAccess) { + return null + } + + const Content = enabled + ? SwitcherModalContentEnabled + : SwitcherModalContentDisabled + + return ( + + + {t('the_new_overleaf_editor')} + + {error && } + + + ) +} + +type ModalContentProps = { + setEditorRedesignStatus: (enabled: boolean) => Promise + hide: () => void + loading: boolean +} + +const SwitcherModalContentEnabled: FC = ({ + setEditorRedesignStatus, + hide, + loading, +}) => { + const { t } = useTranslation() + const disable = useCallback(() => { + setEditorRedesignStatus(false) + .then(hide) + .catch(() => { + // do nothing, we're already showing the error + }) + }, [setEditorRedesignStatus, hide]) + return ( + <> + +

{t('youre_helping_us_shape_the_future_of_overleaf')}

+

+ {t( + 'thanks_for_being_part_of_this_labs_experiment_your_feedback_will_help_us_make_the_new_editor_the_best_yet' + )} +

+ + + + + + {t('switch_to_old_editor')} + + + {t('cancel')} + + + {t('give_feedback')} + + + + ) +} + +const SwitcherModalContentDisabled: FC = ({ + setEditorRedesignStatus, + hide, + loading, +}) => { + const { t } = useTranslation() + const enable = useCallback(() => { + setEditorRedesignStatus(true) + .then(hide) + .catch(() => { + // do nothing, we're already showing the error + }) + }, [setEditorRedesignStatus, hide]) + return ( + <> + +

{t('help_shape_the_future_of_overleaf')}

+

{t('were_redesigning_our_editor_to_make_it_easier_to_use')}

+ + + + + + {t('cancel')} + + + {t('switch_to_new_editor')} + + + + ) +} + +const SwitcherWhatsNew = () => { + const { t } = useTranslation() + return ( +
+

{t('whats_new')}

+
    +
  • {t('chat')}
    • +
  • {t('settings_for_git_github_and_dropbox_integrations')}
    • +
  • {t('dark_mode')}
    • +
+
+

{t('whats_next')}

+
    +
  • {t('history')}
    • +
  • {t('review_panel_comments_and_track_changes')}
    • +
+
+ ) +} + +const LeavingNote = () => { + return ( +

+ ]} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + /> +

+ ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx new file mode 100644 index 0000000000..735c0cfd27 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx @@ -0,0 +1,47 @@ +import { useIdeRedesignSwitcherContext } from '@/features/ide-react/context/ide-redesign-switcher-context' +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 { useTranslation } from 'react-i18next' + +export const LabsActions = () => { + const { t } = useTranslation() + const { setShowSwitcherModal } = useIdeRedesignSwitcherContext() + const openEditorRedesignSwitcherModal = useCallback(() => { + setShowSwitcherModal(true) + }, [setShowSwitcherModal]) + return ( + <> +
+ + } + > + {t('labs')} + + +
+ + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx index 472dcf8baf..e28fcc34a7 100644 --- a/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx @@ -10,9 +10,18 @@ import { import { MenuBarOption } from '@/shared/components/menu-bar/menu-bar-option' import { useTranslation } from 'react-i18next' import ChangeLayoutOptions from './change-layout-options' +import { MouseEventHandler, useCallback } from 'react' +import { useIdeRedesignSwitcherContext } from '@/features/ide-react/context/ide-redesign-switcher-context' +import { useSwitchEnableNewEditorState } from '../../hooks/use-switch-enable-new-editor-state' +import MaterialIcon from '@/shared/components/material-icon' +import OLSpinner from '@/features/ui/components/ol/ol-spinner' export const ToolbarMenuBar = () => { const { t } = useTranslation() + const { setShowSwitcherModal } = useIdeRedesignSwitcherContext() + const openEditorRedesignSwitcherModal = useCallback(() => { + setShowSwitcherModal(true) + }, [setShowSwitcherModal]) return ( { + + + ) } + +const SwitchToOldEditorMenuBarOption = () => { + const { loading, error, setEditorRedesignStatus } = + useSwitchEnableNewEditorState() + + const disable: MouseEventHandler = useCallback( + event => { + // Don't close the dropdown + event.stopPropagation() + setEditorRedesignStatus(false) + }, + [setEditorRedesignStatus] + ) + let icon = null + if (loading) { + icon = + } else if (error) { + icon = + } + return ( + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx index 86f948038b..e9c05cbffc 100644 --- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx @@ -6,6 +6,7 @@ import { OnlineUsers } from './online-users' import ShareProjectButton from './share-project-button' import ChangeLayoutButton from './change-layout-button' import ShowHistoryButton from './show-history-button' +import { LabsActions } from './labs-actions' export const Toolbar = () => { return ( @@ -35,6 +36,7 @@ const ToolbarMenus = () => { const ToolbarButtons = () => { return (
+ diff --git a/services/web/frontend/js/features/ide-redesign/hooks/use-switch-enable-new-editor-state.ts b/services/web/frontend/js/features/ide-redesign/hooks/use-switch-enable-new-editor-state.ts new file mode 100644 index 0000000000..c32578591f --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/hooks/use-switch-enable-new-editor-state.ts @@ -0,0 +1,34 @@ +import { postJSON } from '@/infrastructure/fetch-json' +import { useUserSettingsContext } from '@/shared/context/user-settings-context' +import { useCallback, useState } from 'react' + +export const useSwitchEnableNewEditorState = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState('') + const { setUserSettings } = useUserSettingsContext() + const setEditorRedesignStatus = useCallback( + (status: boolean): Promise => { + setLoading(true) + setError('') + return new Promise((resolve, reject) => { + postJSON('/user/settings', { body: { enableNewEditor: status } }) + .then(() => { + setUserSettings(current => ({ + ...current, + enableNewEditor: status, + })) + resolve() + }) + .catch(e => { + setError('Failed to update settings') + reject(e) + }) + .finally(() => { + setLoading(false) + }) + }) + }, + [setUserSettings] + ) + return { loading, error, setEditorRedesignStatus } +} 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 new file mode 100644 index 0000000000..5dbffab7d5 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/utils/new-editor-utils.ts @@ -0,0 +1,13 @@ +import { useUserSettingsContext } from '@/shared/context/user-settings-context' +import { isSplitTestEnabled } from '@/utils/splitTestUtils' + +// TODO: For now we're using the feature flag, but eventually we'll read this +// from labs. +export const canUseNewEditor = () => isSplitTestEnabled('editor-redesign') + +export const useIsNewEditorEnabled = () => { + const { userSettings } = useUserSettingsContext() + const hasAccess = canUseNewEditor() + const enabled = userSettings.enableNewEditor + return hasAccess && enabled +} diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx index a1d23c5e6f..8133ff31ee 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx @@ -8,16 +8,16 @@ import { useDetachCompileContext as useCompileContext } from '../../../shared/co import { PdfPreviewMessages } from './pdf-preview-messages' import CompileTimeWarningUpgradePrompt from './compile-time-warning-upgrade-prompt' import { PdfPreviewProvider } from './pdf-preview-provider' -import { useFeatureFlag } from '@/shared/context/split-test-context' import PdfPreviewHybridToolbarNew from '@/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar' import PdfErrorState from '@/features/ide-redesign/components/pdf-preview/pdf-error-state' +import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils' function PdfPreviewPane() { const { pdfUrl, hasShortCompileTimeout } = useCompileContext() const classes = classNames('pdf', 'full-size', { 'pdf-empty': !pdfUrl, }) - const newEditor = useFeatureFlag('editor-redesign') + const newEditor = useIsNewEditorEnabled() return (
diff --git a/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx b/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx index 916dd79f80..20cca2135b 100644 --- a/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx +++ b/services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx @@ -1,17 +1,30 @@ import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu' import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown' +import { MouseEventHandler, ReactNode } from 'react' type MenuBarOptionProps = { title: string - onClick?: () => void + onClick?: MouseEventHandler + disabled?: boolean + trailingIcon?: ReactNode } -export const MenuBarOption = ({ title, onClick }: MenuBarOptionProps) => { +export const MenuBarOption = ({ + title, + onClick, + disabled, + trailingIcon, +}: MenuBarOptionProps) => { const { setSelected } = useNestableDropdown() return ( - setSelected(null)} onClick={onClick}> + setSelected(null)} + onClick={onClick} + disabled={disabled} + trailingIcon={trailingIcon} + > {title} diff --git a/services/web/frontend/js/shared/context/user-settings-context.tsx b/services/web/frontend/js/shared/context/user-settings-context.tsx index 6a069f470e..b9b6f22ad1 100644 --- a/services/web/frontend/js/shared/context/user-settings-context.tsx +++ b/services/web/frontend/js/shared/context/user-settings-context.tsx @@ -27,6 +27,7 @@ const defaultSettings: UserSettings = { lineHeight: 'normal', mathPreview: true, referencesSearchMode: 'advanced', + enableNewEditor: true, } type UserSettingsContextValue = { diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index 87c34f04fa..9b3ec278dc 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -7,6 +7,7 @@ @import 'sidebar-v2-dash-pane'; @import 'editor/ide'; @import 'editor/ide-redesign'; +@import 'editor/ide-redesign-switcher-modal'; @import 'editor/rail'; @import 'editor/settings'; @import 'editor/toolbar'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign-switcher-modal.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign-switcher-modal.scss new file mode 100644 index 0000000000..ba2f2aa49d --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign-switcher-modal.scss @@ -0,0 +1,24 @@ +.ide-redesign-switcher-modal .modal-content { + color: var(--content-primary); + font-size: var(--font-size-03); + line-height: var(--line-height-03); + + p { + margin-bottom: 0; + } + + .ide-redesign-switcher-modal-whats-new { + background-color: var(--bg-light-secondary); + border: 1px solid var(--border-divider); + padding: var(--spacing-05); + margin: var(--spacing-05) 0; + } + + .ide-redesign-switcher-modal-leave-text { + color: var(--content-secondary); + + a { + color: var(--link-ui); + } + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss index 9a9a7e271d..87185ab3ed 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss @@ -8,6 +8,7 @@ --redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-white.svg'); --redesign-subdued-button-color: var(--content-primary-dark); --redesign-subdued-button-hover-background: var(--bg-dark-tertiary); + --redesign-toolbar-feedback-link-color: var(--link-ui-dark); } @include theme('light') { @@ -18,6 +19,7 @@ --redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-dark.svg'); --redesign-subdued-button-color: var(--content-primary); --redesign-subdued-button-hover-background: var(--bg-light-tertiary); + --redesign-toolbar-feedback-link-color: var(--link-ui); } .ide-redesign-toolbar { @@ -149,3 +151,22 @@ max-width: 400px; margin: var(--spacing-02) 0; } + +.ide-redesign-toolbar-labs-feedback-link { + &, + &:hover, + &:visited { + color: var(--redesign-toolbar-feedback-link-color); + } +} + +.ide-redesign-labs-button.btn.btn-info { + @include ol-button-variant( + var(--content-positive), + var(--bg-accent-03), + var(--green-40), + var(--bg-accent-03), + var(--green-40), + false + ); +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss index 0e7aaaeca9..70b5dac91c 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss @@ -94,7 +94,7 @@ .toolbar-right, .toolbar-left { - button:not(.back-to-editor-btn) { + button:not(.back-to-editor-btn, .toolbar-experiment-button) { background: transparent; box-shadow: none; } @@ -120,7 +120,7 @@ .toolbar-left > a:not(.btn), .toolbar-left > button, .toolbar-right > a:not(.btn), - .toolbar-right > button:not(.back-to-editor-btn) { + .toolbar-right > button:not(.back-to-editor-btn, .toolbar-experiment-button) { display: inline-block; color: var(--toolbar-btn-color); background-color: transparent; @@ -502,3 +502,19 @@ .formatting-btn-icon:last-of-type { border-right: 1px solid var(--formatting-btn-border); } + +.toolbar-experiment-button.btn.btn-info { + @include ol-button-variant( + var(--content-positive), + var(--bg-accent-03), + var(--green-40), + var(--bg-accent-03), + var(--green-40), + false + ); + + max-height: 39px; + font-size: var(--font-size-01); + line-height: var(--line-height-01); + margin-right: var(--spacing-04); +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index c293511896..dd743ad959 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -467,6 +467,7 @@ "customizing_figures": "Customizing figures", "customizing_tables": "Customizing tables", "da": "Danish", + "dark_mode": "Dark mode", "date": "Date", "date_and_owner": "Date and owner", "de": "German", @@ -916,6 +917,7 @@ "help_articles_matching": "Help articles matching your subject", "help_improve_overleaf_fill_out_this_survey": "If you would like to help us improve Overleaf, please take a moment to fill out <0>this survey.", "help_improve_screen_reader_fill_out_this_survey": "Help us improve your experience using a screen reader with __appName__ by filling out this quick survey.", + "help_shape_the_future_of_overleaf": "Help shape the future of Overleaf", "hide": "Hide", "hide_configuration": "Hide configuration", "hide_deleted_user": "Hide deleted users", @@ -1118,6 +1120,7 @@ "ko": "Korean", "labels_help_you_to_easily_reference_your_figures": "Labels help you to easily reference your figures throughout your document. To reference a figure within the text, reference the label using the <0>\\ref{...} command. This makes it easy to reference figures without needing to manually remember the figure numbering. <1>Learn more", "labels_help_you_to_reference_your_tables": "Labels help you to reference your tables throughout your document easily. To reference a table within the text, reference the label using the <0>\\ref{...} command. This makes it easy to reference tables without manually remembering the table numbering. <1>Read about labels and cross-references.", + "labs": "Labs", "labs_program_benefits": "By signing up for Overleaf Labs you can get your hands on in-development features and try them out as much as you like. All we ask in return is your honest feedback to help us develop and improve. It’s important to note that features available in this program are still being tested and actively developed. This means they could change, be removed, or become part of a premium plan.", "language": "Language", "language_suggestions_for_texts_in_any_language": "Language suggestions for texts in any language", @@ -1847,6 +1850,7 @@ "reverse_x_sort_order": "Reverse __x__ sort order", "revert_pending_plan_change": "Revert scheduled plan change", "review": "Review", + "review_panel_comments_and_track_changes": "Review panel – Comments & track changes", "review_your_peers_work": "Review your peers’ work", "reviewer": "Reviewer", "reviewing": "Reviewing", @@ -1973,6 +1977,7 @@ "set_up_single_sign_on": "Set up single sign-on (SSO)", "set_up_sso": "Set up SSO", "settings": "Settings", + "settings_for_git_github_and_dropbox_integrations": "Settings for Git, Github & Dropbox integrations", "setup_another_account_under_a_personal_email_address": "Set up another Overleaf account under a personal email address.", "share": "Share", "share_project": "Share Project", @@ -2140,6 +2145,8 @@ "switch_back_to_monthly_pay_20_more": "Switch back to monthly (20% more)", "switch_plan": "Switch plan", "switch_to_editor": "Switch to editor", + "switch_to_new_editor": "Switch to new editor", + "switch_to_old_editor": "Switch to old editor", "switch_to_pdf": "Switch to PDF", "switch_to_standard_plan": "Switch to Standard plan", "symbol_palette": "Symbol palette", @@ -2195,6 +2202,7 @@ "thank_you_for_being_part_of_our_beta_program": "Thank you for being part of our Beta Program, where you can have <0>early access to new features and help us understand your needs better", "thank_you_for_your_feedback": "Thank you for your feedback!", "thanks": "Thanks", + "thanks_for_being_part_of_this_labs_experiment_your_feedback_will_help_us_make_the_new_editor_the_best_yet": "Thanks for being part of this Labs experiment. Your feedback and support will help us make the new editor the best yet! Some features are still in progress, so if you need something that’s missing, you can switch back to the old editor.", "thanks_for_confirming_your_email_address": "Thanks for confirming your email address", "thanks_for_getting_in_touch": "Thanks for getting in touch. Our team will get back to you by email as soon as possible.", "thanks_for_subscribing": "Thanks for subscribing!", @@ -2209,6 +2217,7 @@ "the_following_files_and_folders_already_exist_in_this_project": "The following files and folders already exist in this project:", "the_following_folder_already_exists_in_this_project": "The following folder already exists in this project:", "the_following_folder_already_exists_in_this_project_plural": "The following folders already exist in this project:", + "the_new_overleaf_editor": "The new Overleaf editor", "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_project_that_contains_this_file_is_not_shared_with_you": "The project that contains this file is not shared with you", @@ -2236,6 +2245,7 @@ "this_experiment_isnt_accepting_new_participants": "This experiment isn’t accepting new participants.", "this_field_is_required": "This field is required", "this_grants_access_to_features_2": "This grants you access to <0>__appName__ <0>__featureType__ features.", + "this_is_a_labs_experiment_for_the_new_overleaf_editor_some_features_are_still_in_progress": "This is a Labs experiment for the new Overleaf editor. Some features are still in progress, so if you need something that’s missing, you can switch back to the old editor at any time.", "this_is_a_new_feature": "This is a new feature", "this_is_the_file_that_references_pulled_from_your_reference_manager_will_be_added_to": "This is the file that references pulled from your reference manager will be added to.", "this_is_your_template": "This is your template from your project", @@ -2371,6 +2381,7 @@ "try_premium_for_free": "Try Premium for free", "try_recompile_project_or_troubleshoot": "Please try recompiling the project from scratch, and if that doesn’t help, follow our <0>troubleshooting guide.", "try_relinking_provider": "It looks like you need to re-link your __provider__ account.", + "try_the_new_editor": "Try the new editor", "try_to_compile_despite_errors": "Try to compile despite errors", "turn_off": "Turn off", "turn_off_link_sharing": "Turn off link sharing", @@ -2539,6 +2550,7 @@ "well_be_here_when_youre_ready": "We’ll be here when you’re ready to dive back in! 🦆", "were_making_some_changes_to_project_sharing_this_means_you_will_be_visible": "We’re making some <0>changes to project sharing. This means, as someone with edit access, your name and email address will be visible to the project owner and other editors.", "were_performing_maintenance": "We’re performing maintenance on Overleaf and you need to wait a moment. Sorry for any inconvenience. The editor will refresh automatically in __seconds__ seconds.", + "were_redesigning_our_editor_to_make_it_easier_to_use": "We’re redesigning our editor to make it easier to use and ensure it’s future ready. Try it out and give us your feedback to help us get this right. (Some features are still in the works, so you can switch back at any time.)", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_this_project": "We’ve recently <0>reduced the compile timeout limit on our free plan, which may have affected this project.", "weve_recently_reduced_the_compile_timeout_limit_which_may_have_affected_your_project": "We’ve recently <0>reduced the compile timeout limit on our free plan, which may have affected your project.", "what_do_you_need": "What do you need?", @@ -2547,6 +2559,8 @@ "what_does_this_mean_for_you": "This means:", "what_happens_when_sso_is_enabled": "What happens when SSO is enabled?", "what_should_we_call_you": "What should we call you?", + "whats_new": "What’s new?", + "whats_next": "What’s next?", "when_you_join_labs": "When you join Labs, you can choose which experiments you want to be part of. Once you’ve done that, you can use Overleaf as normal, but you’ll see any labs features marked with this badge:", "when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.", "why_latex": "Why LaTeX?", @@ -2595,6 +2609,7 @@ "you_are_on_x_plan_as_member_of_group_subscription_y_administered_by_z": "You are on our <0>__planName__ plan as a <1>member of the group subscription <1>__groupName__ administered by <1>__adminEmail__", "you_can_also_choose_to_view_anonymously_or_leave_the_project": "You can also choose to <0>view anonymously (you will lose edit access) or <1>leave the project.", "you_can_buy_this_plan_but_not_as_a_trial": "You can buy this plan but not as a trial, as you’ve completed a trial recently.", + "you_can_leave_the_experiment_from_your_account_settings_at_any_time": "You can leave the experiment from your <0>account settings at any time.", "you_can_manage_your_reference_manager_integrations_from_your_account_settings_page": "You can manage your reference manager integrations from your <0>account settings page.", "you_can_now_enable_sso": "You can now enable SSO on your Group settings page.", "you_can_now_log_in_sso": "You can now log in through your institution and if eligible you will receive <0>__appName__ Professional features.", @@ -2672,6 +2687,7 @@ "youre_about_to_enable_single_sign_on_sso_only": "You’re about to enable single sign-on (SSO). Before you do this, you should ensure you’re confident the SSO configuration is correct.", "youre_adding_x_users_to_your_plan_giving_you_a_total_of_y_users": "You’re adding <0>__adding__ users to your plan giving you a total of <1>__total__ users.", "youre_already_setup_for_sso": "You’re already set up for SSO", + "youre_helping_us_shape_the_future_of_overleaf": "You’re helping us shape the future of Overleaf", "youre_joining": "You’re joining", "youre_on_free_trial_which_ends_on": "You’re on a free trial which ends on <0>__date__.", "youre_signed_in_as_logout": "You’re signed in as <0>__email__. <1>Log out.", diff --git a/services/web/test/unit/src/User/UserControllerTests.js b/services/web/test/unit/src/User/UserControllerTests.js index 98ae8db73e..8dc8f034b7 100644 --- a/services/web/test/unit/src/User/UserControllerTests.js +++ b/services/web/test/unit/src/User/UserControllerTests.js @@ -452,6 +452,33 @@ describe('UserController', function () { this.UserController.updateUserSettings(this.req, this.res) }) + it('should set enableNewEditor to true', function (done) { + this.req.body = { enableNewEditor: true } + this.res.sendStatus = code => { + this.user.ace.enableNewEditor.should.equal(true) + done() + } + this.UserController.updateUserSettings(this.req, this.res) + }) + + it('should set enableNewEditor to false', function (done) { + this.req.body = { enableNewEditor: false } + this.res.sendStatus = code => { + this.user.ace.enableNewEditor.should.equal(false) + done() + } + this.UserController.updateUserSettings(this.req, this.res) + }) + + it('should keep enableNewEditor a boolean', function (done) { + this.req.body = { enableNewEditor: 'foobar' } + this.res.sendStatus = code => { + this.user.ace.enableNewEditor.should.equal(true) + done() + } + this.UserController.updateUserSettings(this.req, this.res) + }) + it('should send an error if the email is 0 len', function (done) { this.req.body.email = '' this.res.sendStatus = function (code) { diff --git a/services/web/types/user-settings.ts b/services/web/types/user-settings.ts index 2753e09777..3e748d937e 100644 --- a/services/web/types/user-settings.ts +++ b/services/web/types/user-settings.ts @@ -16,4 +16,5 @@ export type UserSettings = { lineHeight: LineHeight mathPreview: boolean referencesSearchMode: 'advanced' | 'simple' + enableNewEditor: boolean }