Add Rich Text survey message in PDF preview pane (#9423)

GitOrigin-RevId: e190ae569d5e2390e8bcf52672757cc7f269ea56

services/web/frontend/js/features/pdf-preview/components/compile-time-warning.tsx

@@ -67,7 +67,7 @@ function CompileTimeWarning() {
       >
         <span aria-hidden="true">&times;</span>
       </Button>
-      <div>
+      <div className="warning-content">
         <div className="warning-text">
           <Trans
             i18nKey="approaching_compile_timeout_limit_upgrade_for_more_compile_time"

services/web/frontend/js/features/pdf-preview/components/pdf-preview-messages.tsx

@@ -0,0 +1,5 @@
+import { FC } from 'react'
+
+export const PdfPreviewMessages: FC = ({ children }) => {
+  return <div className="pdf-preview-messages">{children}</div>
+}

services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js

@@ -1,12 +1,14 @@
 import { memo, Suspense } from 'react'
 import classNames from 'classnames'
-import CompileTimeWarning from './compile-time-warning'
 import PdfLogsViewer from './pdf-logs-viewer'
 import PdfViewer from './pdf-viewer'
 import LoadingSpinner from '../../../shared/components/loading-spinner'
 import PdfHybridPreviewToolbar from './pdf-preview-hybrid-toolbar'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
 import FasterCompilesFeedback from './faster-compiles-feedback'
+import { PdfPreviewMessages } from './pdf-preview-messages'
+import CompileTimeWarning from './compile-time-warning'
+import RichTextSurvey from './rich-text-survey'
 
 function PdfPreviewPane() {
   const { pdfUrl } = useCompileContext()
@@ -16,7 +18,10 @@ function PdfPreviewPane() {
   return (
     <div className={classes}>
       <PdfHybridPreviewToolbar />
-      <CompileTimeWarning />
+      <PdfPreviewMessages>
+        <CompileTimeWarning />
+        <RichTextSurvey />
+      </PdfPreviewMessages>
       <Suspense fallback={<LoadingPreview />}>
         <div className="pdf-viewer">
           <PdfViewer />

services/web/frontend/js/features/pdf-preview/components/rich-text-survey-inner.tsx

@@ -0,0 +1,36 @@
+import { Button } from 'react-bootstrap'
+import { FC, MouseEventHandler } from 'react'
+
+export const RichTextSurveyInner: FC<{
+  handleDismiss: MouseEventHandler<Button>
+  openSurvey: () => void
+}> = ({ handleDismiss, openSurvey }) => (
+  <div className="alert alert-success rich-text-survey-warning" role="alert">
+    <Button
+      className="close"
+      data-dismiss="alert"
+      aria-label="Close"
+      onClick={handleDismiss}
+    >
+      <span aria-hidden="true">&times;</span>
+    </Button>
+    <div className="warning-content">
+      <div>
+        <div className="warning-text">Have you used Rich Text mode?</div>
+        <div className="warning-text">
+          Please participate in our short survey.
+        </div>
+      </div>
+      <div className="upgrade-prompt">
+        <Button
+          type="button"
+          bsSize="sm"
+          bsStyle="primary"
+          onClick={openSurvey}
+        >
+          Take survey
+        </Button>
+      </div>
+    </div>
+  </div>
+)

services/web/frontend/js/features/pdf-preview/components/rich-text-survey.tsx

@@ -0,0 +1,59 @@
+import { FC, memo, useCallback, useEffect, useState } from 'react'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+import { RichTextSurveyInner } from './rich-text-survey-inner'
+
+const SURVEY_URL = 'https://forms.gle/sS4BsUz38GMc81it5'
+const DEFAULT_DELAY = 10 * 1000 // 10 seconds
+
+const RichTextSurvey: FC<{ delay?: number }> = ({ delay = DEFAULT_DELAY }) => {
+  const [dismissed, setDismissed] = usePersistedState(
+    'rich-text-survey-dismissed',
+    false,
+    true
+  )
+
+  const [display, setDisplay] = useState(false)
+
+  const [showRichText] = useScopeValue('editor.showRichText')
+
+  useEffect(() => {
+    let timer: number | undefined
+
+    if (showRichText) {
+      timer = window.setTimeout(() => {
+        setDisplay(true)
+      }, delay)
+    }
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [showRichText, delay])
+
+  const handleDismiss = useCallback(
+    event => {
+      event.preventDefault()
+      setDismissed(true)
+    },
+    [setDismissed]
+  )
+
+  const openSurvey = useCallback(() => {
+    window.open(SURVEY_URL, '_blank')
+    setDismissed(true)
+  }, [setDismissed])
+
+  if (dismissed || !display) {
+    return null
+  }
+
+  return (
+    <RichTextSurveyInner
+      handleDismiss={handleDismiss}
+      openSurvey={openSurvey}
+    />
+  )
+}
+
+export default memo(RichTextSurvey)

services/web/frontend/stories/pdf-preview-messages.stories.js

@@ -0,0 +1,49 @@
+import { ScopeDecorator } from './decorators/scope'
+import { useLocalCompileContext } from '../js/shared/context/local-compile-context'
+import { useEffect } from 'react'
+import { PdfPreviewMessages } from '../js/features/pdf-preview/components/pdf-preview-messages'
+import { useScope } from './hooks/use-scope'
+import { RichTextSurveyInner } from '../js/features/pdf-preview/components/rich-text-survey-inner'
+import CompileTimeWarning from '../js/features/pdf-preview/components/compile-time-warning'
+import RichTextSurvey from '../js/features/pdf-preview/components/rich-text-survey'
+
+export default {
+  title: 'Editor / PDF Preview / Messages',
+  component: PdfPreviewMessages,
+  decorators: [ScopeDecorator],
+}
+
+export const Dismissible = () => {
+  const { setShowCompileTimeWarning } = useLocalCompileContext()
+
+  useEffect(() => {
+    setShowCompileTimeWarning(true)
+  }, [setShowCompileTimeWarning])
+
+  useScope({
+    editor: {
+      showRichText: true,
+    },
+  })
+
+  return (
+    <div style={{ width: 800, position: 'relative' }}>
+      <PdfPreviewMessages>
+        <CompileTimeWarning />
+        <RichTextSurvey delay={10} />
+      </PdfPreviewMessages>
+    </div>
+  )
+}
+
+export const Inner = args => {
+  return (
+    <div style={{ width: 800, position: 'relative' }}>
+      <RichTextSurveyInner {...args} />
+    </div>
+  )
+}
+Inner.argTypes = {
+  handleDismiss: { action: 'dismiss' },
+  openSurvey: { action: 'open survey' },
+}

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

@@ -746,16 +746,27 @@ CodeMirror
   overflow: visible !important;
 }
 
-.compile-time-warning {
+.pdf-preview-messages {
   position: absolute;
   right: @margin-sm;
   top: @margin-xl;
+  z-index: @zindex-popover;
+}
+
+.compile-time-warning,
+.rich-text-survey-warning {
   padding: @padding-sm;
   background-color: @ol-green;
-  width: 400px;
-  z-index: @zindex-popover;
+  width: 420px;
   box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
 
+  .warning-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: 32px;
+  }
+
   .warning-text {
     max-width: 300px;
     padding-right: @alert-padding;
@@ -763,11 +774,7 @@ CodeMirror
     font-size: @font-size-small;
   }
   .upgrade-prompt {
-    display: inline-block;
-    position: absolute;
-    height: 100%;
-    top: @margin-lg;
-    right: 32px;
+    display: inline-flex;
   }
 
   button.btn {