Codebridge: separate page not found and preview empty views #70015
Conversation
There was a problem hiding this comment.
Pull request overview
This PR separates the 404 "Page not found" state from the generic "Nothing to preview" empty state in Codebridge's HTML preview panel. Previously, both scenarios used the same component; now they display distinct messages and images based on whether the project has files.
- Created a new
PreviewEmptyStatecomponent for when projects have no files - Updated
PageNotFoundto use a new image and different messaging for actual 404 errors - Added logic to conditionally render the appropriate empty state based on project file count
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
apps/src/codebridge/images/page-not-found.png |
Adds new 404 error image asset |
apps/src/codebridge/components/CodebridgeEmptyState.module.scss |
Adds Safari-specific fix for image rendering |
apps/src/codebridge/FilePreview/styles/page-not-found.module.scss |
Removes old dedicated stylesheet (styles moved to shared location) |
apps/src/codebridge/FilePreview/styles/inner-html-preview.module.scss |
Consolidates placeholder container styles for both empty states |
apps/src/codebridge/FilePreview/PreviewEmptyState.tsx |
Creates new component for empty project state |
apps/src/codebridge/FilePreview/PageNotFound.tsx |
Updates to use new 404 image and messaging |
apps/src/codebridge/FilePreview/InnerHTMLPreview.tsx |
Adds conditional logic to render appropriate empty state |
apps/src/codebridge/FileBrowser/styles/filebrowser.module.scss |
Ensures consistent background color for child elements |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
fisher-alice
left a comment
There was a problem hiding this comment.
Looks great! Just had a question about InnerHTMLPreview2.
| updateLinksToNonHtmlFiles, | ||
| } from './htmlParsingHelpers'; | ||
| import PageNotFound from './PageNotFound'; | ||
| import PreviewEmptyState from './PreviewEmptyState'; |
There was a problem hiding this comment.
Do we need to implement this for InnerHTMLPreview2 as well? #69422 - or will that be done in a follow-up?
There was a problem hiding this comment.
I'm not sure, @molly-moen does this need to be added here too?
There was a problem hiding this comment.
Yeah we'll have to handle it for the new preview too. It will be handled differently though. The 404 page should stay the same, and maybe in HTMLPreview instead of trying to show the preview if we have no sources we can show the empty state instead.
There was a problem hiding this comment.
We can do that separately though/wait for the new preview to be the default.
fisher-alice
left a comment
There was a problem hiding this comment.
Left a couple small comments/questions. thanks for following up on my previous question about InnerHTMLPreview2!
| if (event.data.type === IframeMessageType.IFRAME_READY) { | ||
| setIsIframeLoaded(true); | ||
| // Send the source immediately when iframe is ready | ||
| if (debouncedSource) { |
There was a problem hiding this comment.
Curious why you added this since I see there's already a useEffect below (line 306) which sends the source to the iframe when isIframeLoaded is set to true.
There was a problem hiding this comment.
The iframe in InnerHTMLPreview was showing the PageNotFound view when a file is added after being empty (see video). This reloads the source right away so the iframe loads the preview.
Screen.Recording.2025-12-15.at.9.30.02.AM.mov
There was a problem hiding this comment.
Thanks for the explanation!
There was a problem hiding this comment.
Was it showing a flash of page not found or would it never show the new file? I'm curious why it would never update 🤔
There was a problem hiding this comment.
It would never show the new file. It would reload the preview if another file was added or you make a change on the file.
There was a problem hiding this comment.
👍 Sounds good. As we move to the new preview we may be able to clean this up, but I think it's good for now!
| state.lab2Project.projectSources?.source as MultiFileSource | undefined | ||
| ); | ||
|
|
||
| const emptyProject = |
There was a problem hiding this comment.
Nit - could rename toisEmptyProject
| box-sizing: border-box; | ||
| } | ||
|
|
||
| // Styles for the PageNotFound and PreviewEmptyState components |
There was a problem hiding this comment.
Nit: the PreviewEmptyState is not always used in the inner html previews.
...and code loading states
| if (event.data.type === IframeMessageType.IFRAME_READY) { | ||
| setIsIframeLoaded(true); | ||
| // Send the source immediately when iframe is ready | ||
| if (debouncedSource) { |
There was a problem hiding this comment.
Was it showing a flash of page not found or would it never show the new file? I'm curious why it would never update 🤔
Separates the page not found 404 and preview empty states in the preview panel in Codebridge.
Links
Jira ticket: AFL-351
Related PR comment: #69348 (comment)
Testing story
Tested locally across browsers
Web Lab 2
Screen.Recording.2025-12-12.at.1.19.02.PM.mov
Local 404