Remove Grammarly warning (#14423)

GitOrigin-RevId: 623ecffabdce9fc15dfb62361822afb75bd1cfa8

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

@@ -67,7 +67,6 @@ block content
 					.system-message-content
 						| {{htmlContent}}
 
-			grammarly-warning(delay=10000)
 			if hasFeature('saas')
 				legacy-editor-warning(delay=10000)
 

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

@@ -1,75 +0,0 @@
-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'
-
-type GrammarlyWarningProps = {
-  delay: number
-}
-
-export default function GrammarlyWarning({ delay }: GrammarlyWarningProps) {
-  const [show, setShow] = useState(false)
-  const [newSourceEditor] = useScopeValue('editor.newSourceEditor')
-  const grammarly = grammarlyExtensionPresent()
-  const hasDismissedGrammarlyWarning = customLocalStorage.getItem(
-    'editor.has_dismissed_grammarly_warning'
-  )
-
-  useEffect(() => {
-    const showGrammarlyWarning =
-      !hasDismissedGrammarlyWarning && grammarly && newSourceEditor
-
-    let timeoutID: Nullable<number>
-
-    if (showGrammarlyWarning) {
-      const timeout = window.setTimeout(() => {
-        setShow(true)
-        timeoutID = null
-      }, delay)
-
-      timeoutID = timeout
-    }
-
-    return () => {
-      if (timeoutID) {
-        clearTimeout(timeoutID)
-      }
-    }
-  }, [grammarly, hasDismissedGrammarlyWarning, newSourceEditor, delay])
-
-  const handleClose = useCallback(() => {
-    setShow(false)
-    customLocalStorage.setItem('editor.has_dismissed_grammarly_warning', true)
-  }, [])
-
-  if (!show) {
-    return null
-  }
-
-  return (
-    <div className="alert alert-info grammarly-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">
-        A browser extension, for example Grammarly, may be slowing down
-        Overleaf.{' '}
-        <a
-          className="warning-link"
-          href="/learn/how-to/Use_Grammarly_with_Overleaf#Performance_issues"
-          target="_blank"
-        >
-          Find out how to avoid this
-        </a>
-      </div>
-    </div>
-  )
-}

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

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

services/web/frontend/js/ide.js

@@ -65,7 +65,6 @@ import './features/pdf-preview/controllers/pdf-preview-controller'
 import './features/share-project-modal/controllers/react-share-project-modal-controller'
 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/history/controllers/history-controller'

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

@@ -823,7 +823,6 @@ CodeMirror
   }
 }
 
-.grammarly-warning,
 .legacy-editor-warning {
   width: 500px;
 

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

@@ -1,142 +0,0 @@
-import sinon from 'sinon'
-import fetchMock from 'fetch-mock'
-import { expect } from 'chai'
-import { fireEvent, screen, waitFor } from '@testing-library/react'
-import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import GrammarlyWarning from '../../../../../frontend/js/features/source-editor/components/grammarly-warning'
-import * as grammarlyModule from '../../../../../frontend/js/shared/utils/grammarly'
-import localStorage from '../../../../../frontend/js/infrastructure/local-storage'
-
-describe('<GrammarlyWarning />', function () {
-  let grammarlyStub
-
-  before(function () {
-    window.metaAttributesCache = new Map()
-  })
-
-  beforeEach(function () {
-    grammarlyStub = sinon.stub(grammarlyModule, 'default')
-  })
-
-  afterEach(function () {
-    window.metaAttributesCache = new Map()
-    grammarlyStub.restore()
-    fetchMock.reset()
-    localStorage.clear()
-  })
-
-  it('shows warning when grammarly is available', async function () {
-    grammarlyStub.returns(true)
-
-    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
-      scope: {
-        editor: {
-          newSourceEditor: true,
-        },
-      },
-    })
-
-    await screen.findByText(
-      'A browser extension, for example Grammarly, may be slowing down Overleaf.'
-    )
-    await screen.findByRole('button', { name: 'Close' })
-    await screen.findByRole('link', { name: 'Find out how to avoid this' })
-  })
-
-  it('does not show warning when grammarly is not available', async function () {
-    grammarlyStub.returns(false)
-
-    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
-      scope: {
-        editor: {
-          newSourceEditor: true,
-        },
-      },
-    })
-
-    await waitFor(() => {
-      expect(
-        screen.queryByText(
-          'A browser extension, for example Grammarly, may be slowing down Overleaf.'
-        )
-      ).to.not.exist
-    })
-  })
-
-  it('does not show warning when user has dismissed the warning', async function () {
-    grammarlyStub.returns(true)
-    localStorage.setItem('editor.has_dismissed_grammarly_warning', true)
-
-    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
-      scope: {
-        editor: {
-          newSourceEditor: true,
-        },
-      },
-    })
-
-    await waitFor(() => {
-      expect(
-        screen.queryByText(
-          'A browser extension, for example Grammarly, may be slowing down Overleaf.'
-        )
-      ).to.not.exist
-    })
-  })
-
-  it('does not show warning when user have ace as their preference', async function () {
-    grammarlyStub.returns(true)
-
-    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
-      scope: {
-        editor: {
-          newSourceEditor: false,
-        },
-      },
-    })
-
-    await waitFor(() => {
-      expect(
-        screen.queryByText(
-          'A browser extension, for example Grammarly, may be slowing down Overleaf.'
-        )
-      ).to.not.exist
-    })
-  })
-
-  it('hides warning if close button is pressed', async function () {
-    grammarlyStub.returns(true)
-
-    renderWithEditorContext(<GrammarlyWarning delay={100} />, {
-      scope: {
-        editor: {
-          newSourceEditor: true,
-        },
-      },
-    })
-
-    const warningText =
-      'A browser extension, for example Grammarly, may be slowing down Overleaf.'
-
-    await screen.findByText(warningText)
-
-    const hasDismissedGrammarlyWarning = localStorage.getItem(
-      'editor.has_dismissed_grammarly_warning'
-    )
-
-    expect(hasDismissedGrammarlyWarning).to.equal(null)
-
-    const closeButton = screen.getByRole('button', { name: 'Close' })
-    fireEvent.click(closeButton)
-
-    expect(screen.queryByText(warningText)).to.not.exist
-
-    await waitFor(() => {
-      const hasDismissedGrammarlyWarning = localStorage.getItem(
-        'editor.has_dismissed_grammarly_warning'
-      )
-
-      expect(hasDismissedGrammarlyWarning).to.equal(true)
-    })
-  })
-})