chore(dashboard): in-app editor polished inbox preview #7027
Conversation
✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -35,7 +35,7 @@ const AccordionTrigger = React.forwardRef<React.ElementRef<typeof AccordionPrimi | |||
| > | |||
| {children} | |||
| {withChevron && ( | |||
| <ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" /> | |||
| <RiArrowDownSLine className="text-foreground-400 h-4 w-4 shrink-0 transition-transform duration-200" /> | |||
There was a problem hiding this comment.
updated accordion chevron
| {isLoading && !data && ( | ||
| <div className="bg-neutral-alpha-50 z-20 mt-2 rounded-lg px-2 py-2"> | ||
| <div className="mb-2 flex items-center gap-2"> | ||
| <Skeleton className="h-5 min-w-5 rounded-full" /> | ||
| <Skeleton className="h-5 w-full" /> | ||
| </div> | ||
| <Skeleton className="h-5 w-full" /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
added skeleton loading
| <Link to="https://docs.novu.co/sdks/framework/typescript/steps/inApp" reloadDocument className="text-xs"> | ||
| <span>Help?</span> | ||
| <> | ||
| <Separator /> |
There was a problem hiding this comment.
moved separator down, because we had two
| <Code2 className="size-5" /> | ||
| Configure preview | ||
| </div> | ||
| <InAppPreview data={previewData} isLoading={isPreviewLoading} /> |
There was a problem hiding this comment.
moved preview up like it is in the designs
There was a problem hiding this comment.
but I think it will be less jumpy if we will keep it under the payload, because the preview content height changes between the loading state and response
| setPayloadError(String(e)); | ||
| } | ||
| }} | ||
| <Accordion type="single" collapsible value={accordionValue} > |
There was a problem hiding this comment.
used the accordion with nice animation
| useEffect(() => { | ||
| setTimeout(() => { | ||
| if (contentRef.current) { | ||
| const rect = contentRef.current.getBoundingClientRect(); | ||
| setHeight(rect.height); | ||
| } | ||
| }, 0); | ||
| }, [value]); |
There was a problem hiding this comment.
have to calculate accordion height because the CodeMirror editor with height: auto works weird and updates the height after first render
|
I am merging this so that it's ready for the bug bashing session. |
What changed? Why was the change needed?
In-App Editor polished Inbox preview component.
The designs between Inbox preview in the Configure Step Sidebar and the In-App Editor were not consistent, so I had to take a decision on a few things:
Did also additional improvements:
Screenshots
Screen.Recording.2024-11-16.at.00.37.54.mov
Screen.Recording.2024-11-16.at.00.22.57.mov