Merge pull request #3484 from overleaf/jpa-hide-ui-below-out-of-sync

[frontend] hide ui elements below the out-of-sync modal

GitOrigin-RevId: 4e48b402522531524f347c784c58f4589b753997

services/web/app/views/project/editor.pug

@@ -20,7 +20,7 @@ block content
 			p.loading-screen-error(ng-if="state.error").ng-cloak
 				span(ng-bind-html="state.error")
 
-		.global-alerts(ng-cloak)
+		.global-alerts(ng-cloak ng-hide="editor.error_state")
 			.alert.alert-danger.small(ng-if="connection.forced_disconnect")
 				strong #{translate("disconnected")}
 				|  #{translate("please_refresh")}

services/web/app/views/project/editor/editor.pug

@@ -27,7 +27,7 @@ div.full-size(
 		}"
 	)
 		.loading-panel(
-			ng-show="!editor.sharejs_doc || editor.opening",
+			ng-show="(!editor.sharejs_doc || editor.opening) && !editor.error_state",
 			style=showRichText ? "top: 32px" : "",
 		)
 			span(ng-show="editor.open_doc_id")
@@ -51,7 +51,7 @@ div.full-size(
 		#editor(
 			ace-editor="editor",
 			ng-if="!editor.showRichText",
-			ng-show="!!editor.sharejs_doc && !editor.opening && multiSelectedCount === 0",
+			ng-show="!!editor.sharejs_doc && !editor.opening && multiSelectedCount === 0 && !editor.error_state",
 			theme="settings.editorTheme",
 			keybindings="settings.mode",
 			font-size="settings.fontSize",

services/web/frontend/js/ide/editor/EditorManager.js

@@ -319,6 +319,9 @@ export default (EditorManager = (function() {
 
           this.ide.socket.disconnect()
           this.ide.reportError(error, meta)
+
+          // Tell the user about the error state.
+          this.$scope.editor.error_state = true
           this.ide.showOutOfSyncModal(
             'Out of sync',
             "Sorry, this file has gone out of sync and we need to do a full refresh. <br> <a href='/learn/Kb/Editor_out_of_sync_problems'>Please see this help guide for more information</a>",