From f523358d089eecaeba1c1e77a7544c8f0d21dc5f Mon Sep 17 00:00:00 2001 From: David <33458145+davidmcpowell@users.noreply.github.com> Date: Wed, 29 Jan 2025 11:41:47 +0000 Subject: [PATCH] Merge pull request #23182 from overleaf/dp-pdf-error-state Add pdf error state for new ide GitOrigin-RevId: 35fe07744996375db9cb3b860bdc128b509ee438 --- .../web/frontend/extracted-translations.json | 7 ++ ...alSymbolsRoundedUnfilledPartialSlice.woff2 | Bin 3596 -> 3636 bytes .../material-symbols/unfilled-symbols.mjs | 1 + .../ide-react/context/react-context-root.tsx | 6 +- .../{ => pdf-preview}/pdf-compile-button.tsx | 2 +- .../pdf-preview/pdf-error-state.tsx | 58 +++++++++++++ .../pdf-preview-hybrid-toolbar.jsx | 2 - .../features/ide-redesign/components/rail.tsx | 21 ++--- .../contexts/rail-tab-context.tsx | 52 ++++++++++++ .../components/pdf-preview-pane.tsx | 5 +- .../stylesheets/bootstrap-5/pages/all.scss | 1 + .../pages/editor/pdf-error-state.scss | 76 ++++++++++++++++++ services/web/locales/en.json | 7 ++ 13 files changed, 222 insertions(+), 16 deletions(-) rename services/web/frontend/js/features/ide-redesign/components/{ => pdf-preview}/pdf-compile-button.tsx (95%) create mode 100644 services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx rename services/web/frontend/js/features/ide-redesign/components/{ => pdf-preview}/pdf-preview-hybrid-toolbar.jsx (86%) create mode 100644 services/web/frontend/js/features/ide-redesign/contexts/rail-tab-context.tsx create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 991fb56d52..6c72050227 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -232,6 +232,7 @@ "changing_the_position_of_your_table": "", "chat": "", "chat_error": "", + "check_logs": "", "checking_dropbox_status": "", "checking_project_github_status": "", "choose_a_custom_color": "", @@ -1115,6 +1116,7 @@ "pdf_compile_in_progress_error": "", "pdf_compile_rate_limit_hit": "", "pdf_compile_try_again": "", + "pdf_couldnt_compile": "", "pdf_in_separate_tab": "", "pdf_only_hide_editor": "", "pdf_preview_error": "", @@ -1621,6 +1623,7 @@ "thanks_for_subscribing_you_help_sl": "", "thanks_settings_updated": "", "the_add_on_will_remain_active_until": "", + "the_document_environment_contains_no_content": "", "the_following_files_already_exist_in_this_project": "", "the_following_files_and_folders_already_exist_in_this_project": "", "the_following_folder_already_exists_in_this_project": "", @@ -1633,6 +1636,7 @@ "then_x_price_per_month": "", "then_x_price_per_year": "", "there_are_lots_of_options_to_edit_and_customize_your_figures": "", + "there_is_an_unrecoverable_latex_error": "", "there_was_a_problem_restoring_the_project_please_try_again_in_a_few_moments_or_contact_us": "", "they_lose_access_to_account": "", "this_action_cannot_be_reversed": "", @@ -1645,6 +1649,7 @@ "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": "", + "this_project_contains_a_file_called_output": "", "this_project_exceeded_compile_timeout_limit_on_free_plan": "", "this_project_exceeded_editor_limit": "", "this_project_has_more_than_max_collabs": "", @@ -1893,6 +1898,7 @@ "visual_editor_is_only_available_for_tex_files": "", "want_change_to_apply_before_plan_end": "", "we_are_testing_a_new_reference_search": "", + "we_are_unable_to_generate_the_pdf_at_this_time": "", "we_are_unable_to_opt_you_into_this_experiment": "", "we_cant_find_any_sections_or_subsections_in_this_file": "", "we_do_not_share_personal_information": "", @@ -1919,6 +1925,7 @@ "what_should_we_call_you": "", "when_you_tick_the_include_caption_box": "", "why_latex": "", + "why_might_this_happen": "", "why_not_pause_instead": "", "wide": "", "will_lose_edit_access_on_date": "", diff --git a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 index 0bfc703101a2f380e803e1d424809784d94923e8..b0b89fa3322db8d10eb9e86f1205151047c67370 100644 GIT binary patch delta 3629 zcmV+|4$|?A9JCyNcTYw#00961000g&01f~E000|2000f!00961000000000000000 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 literal 3596 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 S>#KFoepyT|y`ZcG0000|!_IsF diff --git a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs index 193da5d796..7ed8321b44 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} */ ([ 'forum', 'help', 'image', + 'info', 'integration_instructions', 'picture_as_pdf', 'rate_review', 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 d6483a6b3f..22b10384b4 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 @@ -17,6 +17,7 @@ import { OnlineUsersProvider } from '@/features/ide-react/context/online-users-c import { OutlineProvider } from '@/features/ide-react/context/outline-context' import { PermissionsProvider } from '@/features/ide-react/context/permissions-context' import { ProjectProvider } from '@/shared/context/project-context' +import { RailTabProvider } from '@/features/ide-redesign/contexts/rail-tab-context' import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' import { ReferencesProvider } from '@/features/ide-react/context/references-context' import { SnapshotProvider } from '@/features/ide-react/context/snapshot-context' @@ -48,6 +49,7 @@ export const ReactContextRoot: FC<{ providers?: Record }> = ({ PermissionsProvider, ProjectProvider, ProjectSettingsProvider, + RailTabProvider, ReferencesProvider, SnapshotProvider, SplitTestProvider, @@ -81,7 +83,9 @@ export const ReactContextRoot: FC<{ providers?: Record }> = ({ - {children} + + {children} + diff --git a/services/web/frontend/js/features/ide-redesign/components/pdf-compile-button.tsx b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-compile-button.tsx similarity index 95% rename from services/web/frontend/js/features/ide-redesign/components/pdf-compile-button.tsx rename to services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-compile-button.tsx index e0fa76828b..6ca848f7a3 100644 --- a/services/web/frontend/js/features/ide-redesign/components/pdf-compile-button.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-compile-button.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next' import { memo } from 'react' -import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context' +import { useDetachCompileContext as useCompileContext } from '../../../../shared/context/detach-compile-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' 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 new file mode 100644 index 0000000000..329aab1ba6 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-error-state.tsx @@ -0,0 +1,58 @@ +import OLButton from '@/features/ui/components/ol/ol-button' +import MaterialIcon from '@/shared/components/material-icon' +import { useTranslation } from 'react-i18next' +import { useRailTabContext } from '../../contexts/rail-tab-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' + +function PdfErrorState() { + const { loadingError } = usePdfPreviewContext() + // TODO ide-redesign-cleanup: rename showLogs to something else and check usages + const { showLogs } = useCompileContext() + const { t } = useTranslation() + const { setSelectedTab: setSelectedRailTab } = useRailTabContext() + const newEditor = useFeatureFlag('editor-redesign') + + if (!newEditor || (!loadingError && !showLogs)) { + return null + } + + return ( +
+
+
+ +
+
+

{t('pdf_couldnt_compile')}

+

+ {t('we_are_unable_to_generate_the_pdf_at_this_time')} +

+
+ { + setSelectedRailTab('errors') + }} + > + {t('check_logs')} + +
+
+
+ + {t('why_might_this_happen')} +
+
    +
  • {t('there_is_an_unrecoverable_latex_error')}
    • +
  • {t('the_document_environment_contains_no_content')}
    • +
  • {t('this_project_contains_a_file_called_output')}
    • +
+
+
+ ) +} + +export default PdfErrorState diff --git a/services/web/frontend/js/features/ide-redesign/components/pdf-preview-hybrid-toolbar.jsx b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.jsx similarity index 86% rename from services/web/frontend/js/features/ide-redesign/components/pdf-preview-hybrid-toolbar.jsx rename to services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.jsx index 771ebad313..80ca3d5031 100644 --- a/services/web/frontend/js/features/ide-redesign/components/pdf-preview-hybrid-toolbar.jsx +++ b/services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-preview-hybrid-toolbar.jsx @@ -1,7 +1,6 @@ import { memo } from 'react' import OlButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar' import PdfCompileButton from './pdf-compile-button' -import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button' import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button' function PdfPreviewHybridToolbar() { @@ -10,7 +9,6 @@ function PdfPreviewHybridToolbar() {
-
diff --git a/services/web/frontend/js/features/ide-redesign/components/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail.tsx index 8ce34509fe..4a8e3198b4 100644 --- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx +++ b/services/web/frontend/js/features/ide-redesign/components/rail.tsx @@ -1,4 +1,4 @@ -import { ReactElement, useCallback, useMemo, useState } from 'react' +import { ReactElement, useCallback, useMemo } from 'react' import { Nav, NavLink, Tab, TabContainer } from 'react-bootstrap-5' import MaterialIcon, { AvailableUnfilledIcon, @@ -6,11 +6,12 @@ import MaterialIcon, { import { Panel } from 'react-resizable-panels' import { useLayoutContext } from '@/shared/context/layout-context' import { ErrorIndicator, ErrorPane } from './errors' +import { RailTabKey, useRailTabContext } from '../contexts/rail-tab-context' import FileTreeOutlinePanel from './file-tree-outline-panel' type RailElement = { icon: AvailableUnfilledIcon - key: string + key: RailTabKey component: ReactElement indicator?: ReactElement } @@ -24,8 +25,6 @@ type RailActionButton = { type RailAction = RailActionLink | RailActionButton const RAIL_TABS: RailElement[] = [ - // NOTE: The file tree **MUST** be the first (i.e. default) tab in the list - // since the file tree is responsible for opening the initial document. { key: 'file-tree', icon: 'description', @@ -55,9 +54,8 @@ const RAIL_TABS: RailElement[] = [ ] export const RailLayout = () => { - const [selectedTab, setSelectedTab] = useState( - RAIL_TABS[0]?.key - ) + const { selectedTab, setSelectedTab } = useRailTabContext() + const { setLeftMenuShown } = useLayoutContext() const railActions: RailAction[] = useMemo( () => [ @@ -76,13 +74,16 @@ export const RailLayout = () => { mountOnEnter // Only render when necessary (so that we can lazy load tab content) unmountOnExit={false} // TODO: Should we unmount the tabs when they're not used? transition={false} - defaultActiveKey={selectedTab} - onSelect={useCallback(key => setSelectedTab(key ?? undefined), [])} + activeKey={selectedTab} + onSelect={useCallback( + key => setSelectedTab(key ?? undefined), + [setSelectedTab] + )} id="ide-rail-tabs" >
- + {newEditor ? : }
) diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index 30b277a113..159d158394 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -26,6 +26,7 @@ @import 'editor/history'; @import 'subscription'; @import 'editor/pdf'; +@import 'editor/pdf-error-state'; @import 'editor/compile-button'; @import 'editor/publish-modal'; @import 'editor/share'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss new file mode 100644 index 0000000000..db4977588f --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss @@ -0,0 +1,76 @@ +.pdf-error-state { + position: absolute; + inset: var(--toolbar-small-height) 0 0 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--spacing-06); + background-color: var(--pdf-bg); +} + +.pdf-error-state-top-section { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-06); + padding: 0 var(--spacing-09) var(--spacing-09) var(--spacing-09); +} + +.pdf-error-state-warning-icon { + background-color: var(--bg-danger-03); + color: var(--content-danger); + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + + .material-symbols { + font-size: 32px; + } +} + +.pdf-error-state-text { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-02); +} + +.pdf-error-state-label { + font-size: var(--font-size-02); + font-weight: 600; + margin-bottom: 0; +} + +.pdf-error-state-description { + color: var(--content-secondary); + font-size: var(--font-size-02); + margin-bottom: 0; +} + +.pdf-error-state-info-box { + background-color: var(--bg-light-primary); + padding: var(--spacing-06); + border: 1px solid var(--border-divider); + border-radius: var(--border-radius-base); +} + +.pdf-error-state-info-box-title { + font-size: var(--font-size-02); + font-weight: 600; + display: flex; + align-items: center; + gap: var(--spacing-02); + margin-bottom: var(--spacing-04); +} + +.pdf-error-state-info-box-text { + font-size: var(--font-size-02); + display: flex; + flex-direction: column; + gap: var(--spacing-02); + margin-bottom: 0; +} diff --git a/services/web/locales/en.json b/services/web/locales/en.json index ddd48df0f9..41b773d7e4 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -296,6 +296,7 @@ "changing_the_position_of_your_table": "Changing the position of your table", "chat": "Chat", "chat_error": "Could not load chat messages, please try again.", + "check_logs": "Check logs", "check_your_email": "Check your email", "checking": "Checking", "checking_dropbox_status": "Checking Dropbox status", @@ -1503,6 +1504,7 @@ "pdf_compile_in_progress_error": "A previous compile is still running. Please wait a minute and try compiling again.", "pdf_compile_rate_limit_hit": "Compile rate limit hit", "pdf_compile_try_again": "Please wait for your other compile to finish before trying again.", + "pdf_couldnt_compile": "PDF couldn’t compile", "pdf_in_separate_tab": "PDF in separate tab", "pdf_only_hide_editor": "PDF only <0>(hide editor)", "pdf_preview_error": "There was a problem displaying the compilation results for this project.", @@ -2133,6 +2135,7 @@ "thanks_for_subscribing_you_help_sl": "Thank you for subscribing to the __planName__ plan. It’s support from people like yourself that allows __appName__ to continue to grow and improve.", "thanks_settings_updated": "Thanks, your settings have been updated.", "the_add_on_will_remain_active_until": "The add-on will remain active until the end of the current billing period.", + "the_document_environment_contains_no_content": "The document environment contains no content. If it’s empty, please add some content and compile again.", "the_file_supplied_is_of_an_unsupported_type ": "The link to open this content on Overleaf pointed to the wrong kind of file. Valid file types are .tex documents and .zip files. If this keeps happening for links on a particular site, please report this to them.", "the_following_files_already_exist_in_this_project": "The following files already exist in this project:", "the_following_files_and_folders_already_exist_in_this_project": "The following files and folders already exist in this project:", @@ -2153,6 +2156,7 @@ "then_x_price_per_month": "Then __price__ per month", "then_x_price_per_year": "Then __price__ per year", "there_are_lots_of_options_to_edit_and_customize_your_figures": "There are lots of options to edit and customize your figures, such as wrapping text around the figure, rotating the image, or including multiple images in a single figure. You’ll need to edit the LaTeX code to do this. <0>Find out how", + "there_is_an_unrecoverable_latex_error": "There is an unrecoverable LaTeX error. If there are LaTeX errors shown below or in the raw logs, please try to fix them and compile again.", "there_was_a_problem_restoring_the_project_please_try_again_in_a_few_moments_or_contact_us": "There was a problem restoring the project. Please try again in a few moments. Contact us of the problem persists.", "there_was_an_error_opening_your_content": "There was an error creating your project", "thesis": "Thesis", @@ -2168,6 +2172,7 @@ "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", "this_project_already_has_maximum_editors": "This project already has the maximum number of editors permitted on the owner’s plan. This means you can view but not edit the project.", + "this_project_contains_a_file_called_output": "This project contains a file called output.pdf. If that file exists, please rename it and compile again.", "this_project_exceeded_compile_timeout_limit_on_free_plan": "This project exceeded the compile timeout limit on our free plan.", "this_project_exceeded_editor_limit": "This project exceeded the editor limit for your plan. All collaborators now have view-only access.", "this_project_has_more_than_max_collabs": "This project has more than the maximum number of collaborators allowed on the project owner’s Overleaf plan. This means you could lose edit access from __linkSharingDate__.", @@ -2437,6 +2442,7 @@ "want_access_to_overleaf_premium_features_through_your_university": "Want access to __appName__ premium features through your university?", "want_change_to_apply_before_plan_end": "If you wish this change to apply before the end of your current billing period, please contact us.", "we_are_testing_a_new_reference_search": "We are testing a new reference search.", + "we_are_unable_to_generate_the_pdf_at_this_time": "We are unable to generate the pdf at this time.", "we_are_unable_to_opt_you_into_this_experiment": "We are unable to opt you into this experiment at this time, please ensure your organization has allowed this feature, or try again later.", "we_cant_confirm_this_email": "We can’t confirm this email", "we_cant_find_any_sections_or_subsections_in_this_file": "We can’t find any sections or subsections in this file", @@ -2467,6 +2473,7 @@ "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?", + "why_might_this_happen": "Why might this happen?", "why_not_pause_instead": "Pause instead, to pick up where you left off", "wide": "Wide", "will_lose_edit_access_on_date": "Will lose edit access on __date__",