Add 10 seconds delay before showing grammarly warning

GitOrigin-RevId: 11bb3ca5704ef5cc782d14eb6f4f10a1fa2a656e

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

@@ -65,7 +65,7 @@ block content
 						span.sr-only #{translate("close")}
 					.system-message-content(ng-bind-html="htmlContent")
 
-			grammarly-warning()
+			grammarly-warning(delay=10000)
 
 		include ./editor/main
 

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

@@ -1,11 +1,16 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button } from 'react-bootstrap'
+import { Nullable } from '../../../../../types/utils'
 import customLocalStorage from '../../../infrastructure/local-storage'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
 import grammarlyExtensionPresent from '../../../shared/utils/grammarly'
 import getMeta from '../../../utils/meta'
 
-export default function GrammarlyWarning() {
+type GrammarlyWarningProps = {
+  delay: number
+}
+
+export default function GrammarlyWarning({ delay }: GrammarlyWarningProps) {
   const [show, setShow] = useState(false)
   const [newSourceEditor] = useScopeValue('editor.newSourceEditor')
   const [showRichText] = useScopeValue('editor.showRichText')
@@ -21,10 +26,29 @@ export default function GrammarlyWarning() {
       newSourceEditor &&
       !showRichText
 
+    let timeoutID: Nullable<number>
+
     if (showGrammarlyWarning) {
-      setShow(true)
+      const timeout = window.setTimeout(() => {
+        setShow(true)
+        timeoutID = null
+      }, delay)
+
+      timeoutID = timeout
+    }
+
+    return () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID)
+      }
     }
-  }, [grammarly, hasDismissedGrammarlyWarning, newSourceEditor, showRichText])
+  }, [
+    grammarly,
+    hasDismissedGrammarlyWarning,
+    newSourceEditor,
+    showRichText,
+    delay,
+  ])
 
   const handleClose = useCallback(() => {
     setShow(false)

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

@@ -5,5 +5,5 @@ import GrammarlyWarning from '../components/grammarly-warning'
 
 App.component(
   'grammarlyWarning',
-  react2angular(rootContext.use(GrammarlyWarning))
+  react2angular(rootContext.use(GrammarlyWarning), ['delay'])
 )

services/web/test/frontend/features/source-editor/components/grammarly-warning.test.js

@@ -29,7 +29,7 @@ describe('<GrammarlyWarning />', function () {
     grammarlyStub.returns(true)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', true)
 
-    renderWithEditorContext(<GrammarlyWarning />, {
+    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
       scope: {
         editor: {
           newSourceEditor: true,
@@ -48,7 +48,7 @@ describe('<GrammarlyWarning />', function () {
     grammarlyStub.returns(false)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', true)
 
-    renderWithEditorContext(<GrammarlyWarning />, {
+    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
       scope: {
         editor: {
           newSourceEditor: true,
@@ -70,7 +70,7 @@ describe('<GrammarlyWarning />', function () {
     localStorage.setItem('editor.has_dismissed_grammarly_warning', true)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', true)
 
-    renderWithEditorContext(<GrammarlyWarning />, {
+    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
       scope: {
         editor: {
           newSourceEditor: true,
@@ -91,7 +91,7 @@ describe('<GrammarlyWarning />', function () {
     grammarlyStub.returns(true)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', false)
 
-    renderWithEditorContext(<GrammarlyWarning />)
+    renderWithEditorContext(<GrammarlyWarning delay={100} />)
 
     await waitFor(() => {
       expect(
@@ -106,7 +106,7 @@ describe('<GrammarlyWarning />', function () {
     grammarlyStub.returns(true)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', true)
 
-    renderWithEditorContext(<GrammarlyWarning />, {
+    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
       scope: {
         editor: {
           newSourceEditor: false,
@@ -127,7 +127,7 @@ describe('<GrammarlyWarning />', function () {
     grammarlyStub.returns(true)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', true)
 
-    renderWithEditorContext(<GrammarlyWarning />, {
+    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
       scope: {
         editor: {
           newSourceEditor: true,
@@ -149,7 +149,7 @@ describe('<GrammarlyWarning />', function () {
     grammarlyStub.returns(true)
     window.metaAttributesCache.set('ol-showNewSourceEditorOption', true)
 
-    renderWithEditorContext(<GrammarlyWarning />, {
+    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
       scope: {
         editor: {
           newSourceEditor: true,