diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug index c6cafa1c33..37eac4a124 100644 --- a/services/web/app/views/project/editor.pug +++ b/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 diff --git a/services/web/frontend/js/features/source-editor/components/legacy-editor-warning.tsx b/services/web/frontend/js/features/source-editor/components/legacy-editor-warning.tsx new file mode 100644 index 0000000000..9c3741669a --- /dev/null +++ b/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 ( +
+ +
+
We're retiring our Source (legacy) editor in late May 2023.
+
+ + Read the blog post + {' '} + to learn more and find out how to report any problems. +
+
+
+ ) +}) diff --git a/services/web/frontend/js/features/source-editor/controllers/legacy-editor-warning-controller.js b/services/web/frontend/js/features/source-editor/controllers/legacy-editor-warning-controller.js new file mode 100644 index 0000000000..2da0e248bd --- /dev/null +++ b/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']) +) diff --git a/services/web/frontend/js/ide.js b/services/web/frontend/js/ide.js index de0c7b1b23..a25ac1d171 100644 --- a/services/web/frontend/js/ide.js +++ b/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' diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less index f4f91cd7d5..e7b638d292 100644 --- a/services/web/frontend/stylesheets/app/editor.less +++ b/services/web/frontend/stylesheets/app/editor.less @@ -817,7 +817,8 @@ CodeMirror } } -.grammarly-warning { +.grammarly-warning, +.legacy-editor-warning { width: 500px; &.alert.alert-info {