Add Storybook stories for compile timeout messages (#15371)

GitOrigin-RevId: 91206fcfea0dc0ef18d435e2f58284e5837d4b4d

services/web/frontend/js/features/pdf-preview/components/compile-timeout-changing-soon.tsx

@@ -0,0 +1,109 @@
+import Notification from '@/shared/components/notification'
+import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
+import { Trans, useTranslation } from 'react-i18next'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import { FC } from 'react'
+
+const sendInfoClickEvent = () => {
+  eventTracking.sendMB('paywall-info-click', {
+    'paywall-type': 'compile-time-warning',
+    content: 'blog',
+  })
+}
+
+export const CompileTimeoutChangingSoon: FC<{
+  isProjectOwner?: boolean
+  handleDismissChangingSoon: () => void
+}> = ({ isProjectOwner = false, handleDismissChangingSoon }) => {
+  const { t } = useTranslation()
+
+  const compileTimeoutBlogLinks = [
+    /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+    <a
+      aria-label={t('read_more_about_free_compile_timeouts_servers')}
+      href="/blog/changes-to-free-compile-timeouts-and-servers"
+      key="compileTimeoutBlogLink1"
+      rel="noopener noreferrer"
+      target="_blank"
+      onClick={sendInfoClickEvent}
+    />,
+    /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+    <a
+      aria-label={t('read_more_about_fix_prevent_timeout')}
+      href="/learn/how-to/Fixing_and_preventing_compile_timeouts"
+      key="compileTimeoutBlogLink2"
+      target="_blank"
+      rel="noopener noreferrer"
+    />,
+  ]
+
+  if (isProjectOwner) {
+    return (
+      <Notification
+        action={
+          <StartFreeTrialButton
+            variant="new-changing"
+            source="compile-time-warning"
+            buttonProps={{
+              className: 'btn-secondary-compile-timeout-override',
+            }}
+          >
+            {t('start_free_trial_without_exclamation')}
+          </StartFreeTrialButton>
+        }
+        ariaLive="polite"
+        content={
+          <div>
+            <p>
+              <Trans
+                i18nKey="compile_timeout_will_be_reduced_project_exceeds_limit_speed_up_compile"
+                components={compileTimeoutBlogLinks}
+                values={{ date: 'October 27 2023' }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+              />{' '}
+              <Trans
+                i18nKey="and_you_can_upgrade_for_plenty_more_compile_time"
+                components={{ strong: <strong /> }}
+              />
+            </p>
+          </div>
+        }
+        title={t('your_project_compiled_but_soon_might_not')}
+        type="warning"
+        isActionBelowContent
+        isDismissible
+        onDismiss={handleDismissChangingSoon}
+      />
+    )
+  }
+
+  return (
+    <Notification
+      ariaLive="polite"
+      content={
+        <div>
+          <p>
+            <Trans
+              i18nKey="compile_timeout_will_be_reduced_project_exceeds_limit_speed_up_compile"
+              components={compileTimeoutBlogLinks}
+              values={{ date: 'October 27 2023' }}
+              shouldUnescape
+              tOptions={{ interpolation: { escapeValue: true } }}
+            />
+          </p>
+          <p className="row-spaced">
+            <Trans
+              i18nKey="tell_the_project_owner_to_upgrade_plan_for_more_compile_time"
+              components={{ strong: <strong /> }}
+            />
+          </p>
+        </div>
+      }
+      title={t('this_project_compiled_but_soon_might_not')}
+      type="warning"
+      isDismissible
+      onDismiss={handleDismissChangingSoon}
+    />
+  )
+}

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

@@ -1,10 +1,9 @@
-import { memo, useCallback, useEffect, useState, useMemo } from 'react'
-import * as eventTracking from '../../../infrastructure/event-tracking'
-import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
-import usePersistedState from '../../../shared/hooks/use-persisted-state'
-import Notification from '../../../shared/components/notification'
-import { Trans, useTranslation } from 'react-i18next'
-import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
+import usePersistedState from '@/shared/hooks/use-persisted-state'
+import { CompileTimeoutWarning } from '@/features/pdf-preview/components/compile-timeout-warning'
+import { CompileTimeoutChangingSoon } from '@/features/pdf-preview/components/compile-timeout-changing-soon'
 
 function CompileTimeoutMessages() {
   const {
@@ -16,8 +15,6 @@ function CompileTimeoutMessages() {
     error,
   } = useDetachCompileContext()
 
-  const { t } = useTranslation()
-
   const [showWarning, setShowWarning] = useState(false)
   const [showChangingSoon, setShowChangingSoon] = useState(false)
   const [dismissedUntilWarning, setDismissedUntilWarning] = usePersistedState<
@@ -105,140 +102,23 @@ function CompileTimeoutMessages() {
     return null
   }
 
-  function sendInfoClickEvent() {
-    eventTracking.sendMB('paywall-info-click', {
-      'paywall-type': 'compile-time-warning',
-      content: 'blog',
-    })
-  }
-
-  const compileTimeoutBlogLinks = [
-    /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-    <a
-      aria-label={t('read_more_about_free_compile_timeouts_servers')}
-      href="/blog/changes-to-free-compile-timeouts-and-servers"
-      key="compileTimeoutBlogLink1"
-      rel="noopener noreferrer"
-      target="_blank"
-      onClick={sendInfoClickEvent}
-    />,
-    /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-    <a
-      aria-label={t('read_more_about_fix_prevent_timeout')}
-      href="/learn/how-to/Fixing_and_preventing_compile_timeouts"
-      key="compileTimeoutBlogLink2"
-      target="_blank"
-      rel="noopener noreferrer"
-    />,
-  ]
-
   // if showWarning is true then the 10s warning is shown
   // and if showChangingSoon is true then the 20s-60s should show
 
   return (
     <div>
       {showWarning && isProjectOwner && (
-        <Notification
-          action={
-            <StartFreeTrialButton
-              variant="new-10s"
-              source="compile-time-warning"
-              buttonProps={{
-                className: 'btn-secondary-compile-timeout-override',
-              }}
-            >
-              {t('start_free_trial_without_exclamation')}
-            </StartFreeTrialButton>
-          }
-          ariaLive="polite"
-          content={
-            <div>
-              <div>
-                <span>{t('your_project_near_compile_timeout_limit')}</span>
-              </div>
-              {showNewCompileTimeoutUI === 'active' ? (
-                <>
-                  <strong>{t('upgrade_for_12x_more_compile_time')}</strong>
-                  {'. '}
-                </>
-              ) : (
-                <strong>{t('upgrade_for_plenty_more_compile_time')}</strong>
-              )}
-            </div>
-          }
-          type="warning"
-          title={t('took_a_while')}
-          isActionBelowContent
-          isDismissible
-          onDismiss={handleDismissWarning}
+        <CompileTimeoutWarning
+          showNewCompileTimeoutUI={showNewCompileTimeoutUI}
+          handleDismissWarning={handleDismissWarning}
+        />
+      )}
+      {showChangingSoon && (
+        <CompileTimeoutChangingSoon
+          isProjectOwner={isProjectOwner}
+          handleDismissChangingSoon={handleDismissChangingSoon}
         />
       )}
-      {showChangingSoon &&
-        (isProjectOwner ? (
-          <Notification
-            action={
-              <StartFreeTrialButton
-                variant="new-changing"
-                source="compile-time-warning"
-                buttonProps={{
-                  className: 'btn-secondary-compile-timeout-override',
-                }}
-              >
-                {t('start_free_trial_without_exclamation')}
-              </StartFreeTrialButton>
-            }
-            ariaLive="polite"
-            content={
-              <div>
-                <p>
-                  <Trans
-                    i18nKey="compile_timeout_will_be_reduced_project_exceeds_limit_speed_up_compile"
-                    components={compileTimeoutBlogLinks}
-                    values={{ date: 'October 27 2023' }}
-                    shouldUnescape
-                    tOptions={{ interpolation: { escapeValue: true } }}
-                  />{' '}
-                  <Trans
-                    i18nKey="and_you_can_upgrade_for_plenty_more_compile_time"
-                    components={{ strong: <strong /> }}
-                  />
-                </p>
-              </div>
-            }
-            title={t('your_project_compiled_but_soon_might_not')}
-            type="warning"
-            isActionBelowContent
-            isDismissible
-            onDismiss={handleDismissChangingSoon}
-          />
-        ) : (
-          <Notification
-            ariaLive="polite"
-            content={
-              <div>
-                <p>
-                  <Trans
-                    i18nKey="compile_timeout_will_be_reduced_project_exceeds_limit_speed_up_compile"
-                    components={compileTimeoutBlogLinks}
-                    values={{ date: 'October 27 2023' }}
-                    shouldUnescape
-                    tOptions={{ interpolation: { escapeValue: true } }}
-                  />
-                </p>
-                <p className="row-spaced">
-                  <Trans
-                    i18nKey="tell_the_project_owner_to_upgrade_plan_for_more_compile_time"
-                    components={{ strong: <strong /> }}
-                  />
-                </p>
-              </div>
-            }
-            title={t('this_project_compiled_but_soon_might_not')}
-            type="warning"
-            isDismissible
-            onDismiss={handleDismissChangingSoon}
-          />
-        ))}
     </div>
   )
 }

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

@@ -0,0 +1,48 @@
+import Notification from '@/shared/components/notification'
+import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
+import { useTranslation } from 'react-i18next'
+import { FC } from 'react'
+
+export const CompileTimeoutWarning: FC<{
+  handleDismissWarning: () => void
+  showNewCompileTimeoutUI: string
+}> = ({ handleDismissWarning, showNewCompileTimeoutUI }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Notification
+      action={
+        <StartFreeTrialButton
+          variant="new-10s"
+          source="compile-time-warning"
+          buttonProps={{
+            className: 'btn-secondary-compile-timeout-override',
+          }}
+        >
+          {t('start_free_trial_without_exclamation')}
+        </StartFreeTrialButton>
+      }
+      ariaLive="polite"
+      content={
+        <div>
+          <div>
+            <span>{t('your_project_near_compile_timeout_limit')}</span>
+          </div>
+          {showNewCompileTimeoutUI === 'active' ? (
+            <>
+              <strong>{t('upgrade_for_12x_more_compile_time')}</strong>
+              {'. '}
+            </>
+          ) : (
+            <strong>{t('upgrade_for_plenty_more_compile_time')}</strong>
+          )}
+        </div>
+      }
+      type="warning"
+      title={t('took_a_while')}
+      isActionBelowContent
+      isDismissible
+      onDismiss={handleDismissWarning}
+    />
+  )
+}

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

@@ -0,0 +1,60 @@
+import { useEffect } from 'react'
+import { ScopeDecorator } from './decorators/scope'
+import { useLocalCompileContext } from '@/shared/context/local-compile-context'
+import { PdfPreviewMessages } from '@/features/pdf-preview/components/pdf-preview-messages'
+import CompileTimeWarning from '@/features/pdf-preview/components/compile-time-warning'
+import { CompileTimeoutChangingSoon } from '@/features/pdf-preview/components/compile-timeout-changing-soon'
+import { CompileTimeoutWarning } from '@/features/pdf-preview/components/compile-timeout-warning'
+
+export default {
+  title: 'Editor / PDF Preview / Messages',
+  component: PdfPreviewMessages,
+  decorators: [
+    ScopeDecorator,
+    (Story: any) => (
+      <div style={{ width: 800, position: 'relative' }}>
+        <PdfPreviewMessages>
+          <Story />
+        </PdfPreviewMessages>
+      </div>
+    ),
+  ],
+}
+
+export const CompileTime = () => {
+  const { setShowCompileTimeWarning } = useLocalCompileContext()
+
+  useEffect(() => {
+    setShowCompileTimeWarning(true)
+  }, [setShowCompileTimeWarning])
+
+  return <CompileTimeWarning />
+}
+
+export const CompileTimeoutChangingSoonNotProjectOwner = (args: any) => {
+  return <CompileTimeoutChangingSoon {...args} />
+}
+CompileTimeoutChangingSoonNotProjectOwner.argTypes = {
+  handleDismissChangingSoon: { action: 'dismiss changing soon' },
+}
+
+export const CompileTimeoutChangingSoonProjectOwner = (args: any) => {
+  return <CompileTimeoutChangingSoon {...args} isProjectOwner />
+}
+CompileTimeoutChangingSoonProjectOwner.argTypes = {
+  handleDismissChangingSoon: { action: 'dismiss changing soon' },
+}
+
+export const CompileTimeoutWarningActive = (args: any) => {
+  return <CompileTimeoutWarning {...args} showNewCompileTimeoutUI="active" />
+}
+CompileTimeoutWarningActive.argTypes = {
+  handleDismissWarning: { action: 'dismiss warning' },
+}
+
+export const CompileTimeoutWarningChanging = (args: any) => {
+  return <CompileTimeoutWarning {...args} showNewCompileTimeoutUI="changing" />
+}
+CompileTimeoutWarningChanging.argTypes = {
+  handleDismissWarning: { action: 'dismiss warning' },
+}