chore(dashboard): sms, push, chat editors show empty preview on valid…

…ation error (#7341)
novuhq · Dec 20, 2024 · 24db592 · 24db592
1 parent 49e63cd
commit 24db592
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 43 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/steps/base/base-body.tsx b/apps/dashboard/src/components/workflow-editor/steps/base/base-body.tsx
@@ -47,7 +47,7 @@ export const BaseBody = () => {
               />
             </InputField>
           </FormControl>
-          <FormMessage>{`This supports markdown and variables, type { for more.`}</FormMessage>
+          <FormMessage>{`This supports markdown and variables, type {{ for more.`}</FormMessage>
         </FormItem>
       )}
     />

diff --git a/apps/dashboard/src/components/workflow-editor/steps/chat/chat-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/chat/chat-preview.tsx
@@ -16,6 +16,7 @@ export const ChatPreview = ({
 }) => {
   const isValidChatPreview =
     previewData?.result.type === ChannelTypeEnum.CHAT && previewData?.result.preview.body.length > 0;
+  const body = isValidChatPreview ? ((previewData?.result.preview as ChatRenderOutput)?.body ?? '') : '';
 
   return (
     <div className="relative w-full rounded-xl border border-dashed border-[#E1E4EA] p-3">
@@ -34,14 +35,14 @@ export const ChatPreview = ({
             </div>
             {isPreviewPending ? (
               <Skeleton className="h-4 w-1/2" />
-            ) : !isValidChatPreview ? (
-              <span className="text-destructive text-xs font-normal">Preview not available</span>
             ) : (
               <span
-                className={cn('text-foreground-950 text-xs font-normal', { 'line-clamp-3': variant === 'mini' })}
-                title={variant === 'mini' ? (previewData?.result.preview as ChatRenderOutput).body : undefined}
+                className={cn('text-foreground-950 min-h-4 text-xs font-normal', {
+                  'line-clamp-3': variant === 'mini',
+                })}
+                title={variant === 'mini' ? body : undefined}
               >
-                {(previewData?.result.preview as ChatRenderOutput).body}
+                {body}
               </span>
             )}
           </div>

diff --git a/apps/dashboard/src/components/workflow-editor/steps/push/push-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/push/push-preview.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { HTMLMotionProps, motion } from 'motion/react';
-import { ChannelTypeEnum, GeneratePreviewResponseDto } from '@novu/shared';
+import { ChannelTypeEnum, GeneratePreviewResponseDto, PushRenderOutput } from '@novu/shared';
 import { Skeleton } from '@/components/primitives/skeleton';
 import { cn } from '@/utils/ui';
 
@@ -11,6 +11,10 @@ export function PushPreview({
   isPreviewPending: boolean;
   previewData?: GeneratePreviewResponseDto;
 }) {
+  const isValidPushPreview = previewData?.result.type === ChannelTypeEnum.PUSH;
+  const subject = isValidPushPreview ? ((previewData?.result.preview as PushRenderOutput)?.subject ?? '') : '';
+  const body = isValidPushPreview ? ((previewData?.result.preview as PushRenderOutput)?.body ?? '') : '';
+
   if (isPreviewPending) {
     return (
       <PushBackgroundWithPhone>
@@ -24,28 +28,12 @@ export function PushPreview({
     );
   }
 
-  if (previewData?.result.type !== ChannelTypeEnum.PUSH) {
-    return (
-      <PushBackgroundWithPhone>
-        <PushNotificationContainer>
-          <PushContentContainerPreview className="border-destructive/40 relative z-10 h-10 justify-center border border-dashed">
-            <PushBodyPreview
-              body="No preview available"
-              isPending={isPreviewPending}
-              className="w-full justify-center"
-            />
-          </PushContentContainerPreview>
-        </PushNotificationContainer>
-      </PushBackgroundWithPhone>
-    );
-  }
-
   return (
     <PushBackgroundWithPhone>
       <PushNotificationContainer>
         <PushContentContainerPreview className="relative z-10">
-          <PushSubjectPreview subject={previewData.result.preview.subject} isPending={isPreviewPending} />
-          <PushBodyPreview body={previewData.result.preview.body} isPending={isPreviewPending} />
+          <PushSubjectPreview subject={subject} isPending={isPreviewPending} />
+          <PushBodyPreview body={body} isPending={isPreviewPending} />
         </PushContentContainerPreview>
         <PushContentContainerPreview className="-mt-5 h-6 scale-95" />
         <PushContentContainerPreview className="-mt-5 h-6 scale-90" />
@@ -66,7 +54,7 @@ export const PushSubjectPreview = ({ subject, isPending, className, ...rest }: P
   return (
     <div className={cn('flex items-center gap-1.5', className)} {...rest}>
       <div className="flex-1">
-        <span className="line-clamp-1 text-xs font-medium">{subject}</span>
+        <span className="line-clamp-1 min-h-4 text-xs font-medium">{subject}</span>
       </div>
       <span className="text-2xs text-neutral-500">now</span>
     </div>
@@ -89,7 +77,7 @@ export const PushBodyPreview = ({ body, isPending, className, ...rest }: PushBod
 
   return (
     <div className={cn('flex items-center', className)} {...rest}>
-      <span className="text-2xs line-clamp-3">{body}</span>
+      <span className="text-2xs line-clamp-3 min-h-3.5">{body}</span>
     </div>
   );
 };

diff --git a/apps/dashboard/src/components/workflow-editor/steps/sms/sms-phone.tsx b/apps/dashboard/src/components/workflow-editor/steps/sms/sms-phone.tsx
@@ -7,7 +7,7 @@ const SmsChatBubble = ({ children }: { children: React.ReactNode }) => (
     transition={{ duration: 0.3, ease: 'easeOut' }}
     className="relative my-1 inline-block max-w-[90%] rounded-2xl bg-[#e9ecef] px-4 py-2 text-sm text-[#2b2b33] before:absolute before:bottom-0 before:left-[-7px] before:h-5 before:w-5 before:rounded-br-[15px] before:bg-[#e9ecef] before:content-[''] after:absolute after:bottom-0 after:left-[-10px] after:h-5 after:w-[10px] after:rounded-br-[10px] after:bg-white after:content-['']"
   >
-    <div className="line-clamp-4 overflow-hidden break-words text-xs">{children}</div>
+    <div className="line-clamp-4 min-h-4 overflow-hidden break-words text-xs">{children}</div>
   </motion.div>
 );
 

diff --git a/apps/dashboard/src/components/workflow-editor/steps/sms/sms-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/sms/sms-preview.tsx
@@ -1,5 +1,5 @@
 import { SmsPhone } from '@/components/workflow-editor/steps/sms/sms-phone';
-import { ChannelTypeEnum, type GeneratePreviewResponseDto } from '@novu/shared';
+import { ChannelTypeEnum, SmsRenderOutput, type GeneratePreviewResponseDto } from '@novu/shared';
 import { ReactNode } from 'react';
 
 const SmsPreviewContainer = ({ children }: { children: ReactNode }) => {
@@ -14,31 +14,21 @@ export const SmsPreview = ({
   previewData?: GeneratePreviewResponseDto;
 }) => {
   const previewResult = previewData?.result;
-
-  if (isPreviewPending || previewData === undefined) {
-    return (
-      <SmsPreviewContainer>
-        <SmsPhone smsBody="" isLoading={isPreviewPending} />
-      </SmsPreviewContainer>
-    );
-  }
-
   const isValidSmsPreview =
     previewResult && previewResult.type === ChannelTypeEnum.SMS && previewResult.preview.body.length > 0;
+  const body = isValidSmsPreview ? ((previewData?.result.preview as SmsRenderOutput)?.body ?? '') : '';
 
-  if (!isValidSmsPreview) {
+  if (isPreviewPending || previewData === undefined) {
     return (
       <SmsPreviewContainer>
-        <SmsPhone smsBody="Preview not available" error={!isValidSmsPreview} />
+        <SmsPhone smsBody="" isLoading={isPreviewPending} />
       </SmsPreviewContainer>
     );
   }
 
-  const smsBody = previewResult.preview.body;
-
   return (
     <SmsPreviewContainer>
-      <SmsPhone smsBody={smsBody} />
+      <SmsPhone smsBody={body} />
     </SmsPreviewContainer>
   );
 };