add 'Ace removal' notification (#12800)

* add 'Ace removal' notification

* prettier

* add memo, window.clearTimeout

* remove warning for server pro

* added tracking events

* useCallback for onClick

* fix: event rename

GitOrigin-RevId: 70bce8b93bae233e7183a941abaf2ec7a70ddfb6

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

@@ -66,6 +66,8 @@ block content
 					.system-message-content(ng-bind-html="htmlContent")
 
 			grammarly-warning(delay=10000)
+			if hasFeature('saas')
+				legacy-editor-warning(delay=10000)
 
 		include ./editor/main
 

services/web/frontend/js/features/source-editor/components/legacy-editor-warning.tsx

@@ -0,0 +1,81 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+import { Button } from 'react-bootstrap'
+import customLocalStorage from '../../../infrastructure/local-storage'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+import * as eventTracking from '../../../infrastructure/event-tracking'
+
+export const LegacyEditorWarning = memo(function LegacyEditorWarning({
+  delay,
+}: {
+  delay: number
+}) {
+  const [show, setShow] = useState(false)
+  const [newSourceEditor] = useScopeValue('editor.newSourceEditor')
+  const hasDismissedLegacyEditor = customLocalStorage.getItem(
+    'editor.has_dismissed_legacy_editor_warning'
+  )
+
+  useEffect(() => {
+    const showLegacyEditor =
+      !hasDismissedLegacyEditor && newSourceEditor === false
+
+    let timeoutId: number | undefined
+
+    if (showLegacyEditor) {
+      timeoutId = window.setTimeout(() => {
+        eventTracking.sendMB('legacy-editor-warning-prompt')
+        setShow(true)
+      }, delay)
+    }
+
+    return () => {
+      window.clearTimeout(timeoutId)
+    }
+  }, [hasDismissedLegacyEditor, newSourceEditor, delay])
+
+  const handleClose = useCallback(() => {
+    setShow(false)
+    customLocalStorage.setItem(
+      'editor.has_dismissed_legacy_editor_warning',
+      true
+    )
+    eventTracking.sendMB('legacy-editor-warning-dismiss')
+  }, [])
+
+  const handleClick = useCallback(() => {
+    eventTracking.sendMB('legacy-editor-warning-link-click')
+  }, [])
+
+  if (!show) {
+    return null
+  }
+
+  return (
+    <div className="alert alert-info legacy-editor-warning" role="alert">
+      <Button
+        className="close"
+        data-dismiss="alert"
+        aria-label="Close"
+        onClick={handleClose}
+        bsStyle={null}
+      >
+        <span aria-hidden="true">&times;</span>
+      </Button>
+      <div className="warning-content">
+        <div>We're retiring our Source (legacy) editor in late May 2023.</div>
+        <div>
+          <a
+            className="warning-link"
+            href="https://www.overleaf.com/blog/were-retiring-our-legacy-source-editor"
+            target="_blank"
+            rel="noreferrer"
+            onClick={handleClick}
+          >
+            Read the blog post
+          </a>{' '}
+          to learn more and find out how to report any problems.
+        </div>
+      </div>
+    </div>
+  )
+})

services/web/frontend/js/features/source-editor/controllers/legacy-editor-warning-controller.js

@@ -0,0 +1,9 @@
+import App from '../../../base'
+import { react2angular } from 'react2angular'
+import { rootContext } from '../../../shared/context/root-context'
+import { LegacyEditorWarning } from '../components/legacy-editor-warning'
+
+App.component(
+  'legacyEditorWarning',
+  react2angular(rootContext.use(LegacyEditorWarning), ['delay'])
+)

services/web/frontend/js/ide.js

@@ -67,6 +67,7 @@ import './features/share-project-modal/controllers/react-share-project-modal-con
 import './features/source-editor/controllers/editor-switch-controller'
 import './features/source-editor/controllers/cm6-switch-away-survey-controller'
 import './features/source-editor/controllers/grammarly-warning-controller'
+import './features/source-editor/controllers/legacy-editor-warning-controller'
 import './features/outline/controllers/documentation-button-controller'
 import './features/onboarding/controllers/onboarding-video-tour-modal-controller'
 import './features/history/controllers/history-controller'

services/web/frontend/stylesheets/app/editor.less

@@ -817,7 +817,8 @@ CodeMirror
   }
 }
 
-.grammarly-warning {
+.grammarly-warning,
+.legacy-editor-warning {
   width: 500px;
 
   &.alert.alert-info {