From 25725bd79f399ae2d364b5ee4b83a707ac6fede4 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Thu, 1 Sep 2022 09:44:47 +0100 Subject: [PATCH] Add Rich Text survey message in PDF preview pane (#9423) GitOrigin-RevId: e190ae569d5e2390e8bcf52672757cc7f269ea56 --- .../components/compile-time-warning.tsx | 2 +- .../components/pdf-preview-messages.tsx | 5 ++ .../components/pdf-preview-pane.js | 9 ++- .../components/rich-text-survey-inner.tsx | 36 +++++++++++ .../components/rich-text-survey.tsx | 59 +++++++++++++++++++ .../stories/pdf-preview-messages.stories.js | 49 +++++++++++++++ .../web/frontend/stylesheets/app/editor.less | 23 +++++--- 7 files changed, 172 insertions(+), 11 deletions(-) create mode 100644 services/web/frontend/js/features/pdf-preview/components/pdf-preview-messages.tsx create mode 100644 services/web/frontend/js/features/pdf-preview/components/rich-text-survey-inner.tsx create mode 100644 services/web/frontend/js/features/pdf-preview/components/rich-text-survey.tsx create mode 100644 services/web/frontend/stories/pdf-preview-messages.stories.js diff --git a/services/web/frontend/js/features/pdf-preview/components/compile-time-warning.tsx b/services/web/frontend/js/features/pdf-preview/components/compile-time-warning.tsx index 85b3f3331f..9a9befd845 100644 --- a/services/web/frontend/js/features/pdf-preview/components/compile-time-warning.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/compile-time-warning.tsx @@ -67,7 +67,7 @@ function CompileTimeWarning() { > -
+
{ + return
{children}
+} diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js index f4834ce105..0d1d0e83a8 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js +++ b/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 (
- + + + + }>
diff --git a/services/web/frontend/js/features/pdf-preview/components/rich-text-survey-inner.tsx b/services/web/frontend/js/features/pdf-preview/components/rich-text-survey-inner.tsx new file mode 100644 index 0000000000..4018ea7cd7 --- /dev/null +++ b/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 +
+
+
Have you used Rich Text mode?
+
+ Please participate in our short survey. +
+
+
+ +
+
+
+) diff --git a/services/web/frontend/js/features/pdf-preview/components/rich-text-survey.tsx b/services/web/frontend/js/features/pdf-preview/components/rich-text-survey.tsx new file mode 100644 index 0000000000..5553c69613 --- /dev/null +++ b/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 ( + + ) +} + +export default memo(RichTextSurvey) diff --git a/services/web/frontend/stories/pdf-preview-messages.stories.js b/services/web/frontend/stories/pdf-preview-messages.stories.js new file mode 100644 index 0000000000..59debc7a2f --- /dev/null +++ b/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 ( +
+ + + + +
+ ) +} + +export const Inner = args => { + return ( +
+ +
+ ) +} +Inner.argTypes = { + handleDismiss: { action: 'dismiss' }, + openSurvey: { action: 'open survey' }, +} diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less index 5317e98141..215b0d05eb 100644 --- a/services/web/frontend/stylesheets/app/editor.less +++ b/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 {