diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 4ee3ba3812..c269736b82 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -205,6 +205,7 @@ "back_to_subscription": "", "back_to_your_projects": "", "basic_compile_time": "", + "been_offline_changes_saved_in_browser": "", "before_you_use_error_assistant": "", "beta_program_already_participating": "", "beta_program_benefits": "", @@ -585,6 +586,7 @@ "editing": "", "editing_captions": "", "editing_mode": "", + "editing_paused": "", "editor": "", "editor_disconected_click_to_reconnect": "", "editor_font_family": "", diff --git a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 index f0e81debcd..0c1bed5eb3 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 f905407cbd..cd75514c59 100644 --- a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs +++ b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs @@ -53,6 +53,7 @@ export default /** @type {const} */ ([ 'notifications', 'open_in_new', 'password', + 'pause_circle', 'person', 'person_edit', 'picture_as_pdf', diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx index a358f2c821..c96151d547 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx +++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx @@ -5,6 +5,7 @@ import PdfPreview from '@/features/pdf-preview/components/pdf-preview' import { RailLayout } from '../rail/rail' import { Toolbar } from '../toolbar/toolbar' import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler' +import { EditingPausedBanner } from '../toolbar/editing-paused-banner' import { useTranslation } from 'react-i18next' import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane' import { useLayoutContext } from '@/shared/context/layout-context' @@ -46,6 +47,7 @@ export default function MainLayout() { return (
+
{ + const { t } = useTranslation() + const intermittentConnectionImprovementsEnabled = useFeatureFlag( + 'intermittent-connection-improvements' + ) + const { outOfSync } = useIdeReactContext() + const { isLocked } = useUnsavedDocsContext() + + if (!intermittentConnectionImprovementsEnabled || (!isLocked && !outOfSync)) { + return null + } + + return ( +
+ + + {t('editing_paused')}{' '} + {t('been_offline_changes_saved_in_browser')} + +
+ ) +} diff --git a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx index ffc00091d4..a46026645f 100644 --- a/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx +++ b/services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx @@ -35,6 +35,7 @@ import { useDebugDiffTracker } from '../hooks/use-debug-diff-tracker' import { convertFileRefToBinaryFile } from '@/features/ide-react/util/file-view' import { useEditorOpenDocContext } from '@/features/ide-react/context/editor-open-doc-context' import { useEditorPropertiesContext } from '@/features/ide-react/context/editor-properties-context' +import { useFeatureFlag } from '@/shared/context/split-test-context' export interface GotoOffsetOptions { gotoOffset: number @@ -118,6 +119,9 @@ export const EditorManagerProvider: FC = ({ projectId, currentDocument ) + const improvedFlakyConnections = useFeatureFlag( + 'intermittent-connection-improvements' + ) const [globalEditorWatchdogManager] = useState( () => @@ -573,7 +577,9 @@ export const EditorManagerProvider: FC = ({ // Ensure that the editor is locked setOutOfSync(true) // Display the "out of sync" modal - showOutOfSyncModal(editorContent || '') + if (!improvedFlakyConnections) { + showOutOfSyncModal(editorContent || '') + } // Do not forceReopen the document. return @@ -601,6 +607,7 @@ export const EditorManagerProvider: FC = ({ showOutOfSyncModal, setOutOfSync, t, + improvedFlakyConnections, ]) useEventListener( diff --git a/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss b/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss index cc863ee359..8d22b44f15 100644 --- a/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss +++ b/services/web/frontend/stylesheets/pages/editor/ide-redesign.scss @@ -3,6 +3,7 @@ --ide-redesign-color: var(--content-primary-dark); --ide-redesign-resizing-background: var(--bg-dark-primary); --ide-redesign-color-scheme: dark; + --editing-paused-banner-background: var(--bg-dark-tertiary); } @include theme('light') { @@ -10,6 +11,7 @@ --ide-redesign-color: var(--content-primary); --ide-redesign-resizing-background: var(--white); --ide-redesign-color-scheme: light; + --editing-paused-banner-background: var(--blue-10); } .ide-redesign-body { @@ -32,6 +34,19 @@ } } +.editing-paused-banner { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-04); + padding: var(--spacing-04) 0; + background-color: var(--editing-paused-banner-background); + color: var(--content-primary-themed); + border-bottom: 1px solid var(--redesign-toolbar-border-divider); + font-size: var(--font-size-03); + line-height: var(--line-height-03); +} + .ide-skeleton-block { border: 1px solid grey; background-color: white; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index a8e3df9086..9db1426e86 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -268,6 +268,7 @@ "basic_compile_time": "Basic compile time", "basic_compile_timeout": "Basic compile timeout", "basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers", + "been_offline_changes_saved_in_browser": "You’ve been offline for a while. Your changes are saved in the browser.", "before_you_use_error_assistant": "Before you use Error Assist", "best_for_individuals_and_teams_collaborating_on_complex_projects": "Best for individuals and teams collaborating on complex projects.", "beta": "Beta", @@ -755,6 +756,7 @@ "editing_and_collaboration": "Editing and collaboration", "editing_captions": "Editing captions", "editing_mode": "Editing mode", + "editing_paused": "Editing paused", "editor": "Editor", "editor_disconected_click_to_reconnect": "Editor disconnected, click anywhere to reconnect.", "editor_font_family": "Editor font family",