[Enhancements] [Bryce] - Publish Modal #2454
Conversation
Minor updates to the UI in the publish modal: Updated error states, hover states on "fix w/ AI button", implementing divider lines correctly.
|
@BJP-GU is attempting to deploy a commit to the Onlook Team on Vercel. A member of the Team first needs to authorize it. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const demoNonDomainError = true; // or false to disable the demo | ||
|
|
||
| return ( |
There was a problem hiding this comment.
It appears that the functions 'renderDomain', 'renderNoDomain', and 'renderActionSection' are defined but not used in the final return. Remove unused code to keep the component clean.
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const renderActionSection = () => { | ||
| if (!domain?.url) { | ||
| console.warn('No domain URL found:', domain); |
There was a problem hiding this comment.
Remove or disable debug logging (console.log and console.warn) before production deployment to avoid exposing internal state.
| console.warn('No domain URL found:', domain); |
| @@ -18,8 +18,13 @@ export const EditorEngineProvider = ({ children, projectId }: { | |||
| const editorEngine = useMemo(() => new EditorEngine(projectId), [projectId]); | |||
|
|
|||
| useEffect(() => { | |||
| // Expose editor engine to window for debugging purposes | |||
| (window as any).editorEngine = editorEngine; | |||
There was a problem hiding this comment.
Exposing 'editorEngine' to the window is useful for debugging, but ensure to remove or restrict this in production to avoid potential security risks.
| (window as any).editorEngine = editorEngine; | |
| if (process.env.NODE_ENV !== "production") (window as any).editorEngine = editorEngine; |
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const demoNonDomainError = true; // or false to disable the demo |
There was a problem hiding this comment.
The hardcoded flag demoNonDomainError = true will force error states to display in all environments including production. This appears to be intended for UI demonstration purposes only. For production deployment, this should either be:
- Set to
falseby default - Replaced with actual error detection logic
- Made configurable via environment variables
- Removed entirely if no longer needed for demonstration
Without this change, users will always see error states regardless of actual publishing status.
| const demoNonDomainError = true; // or false to disable the demo | |
| const demoNonDomainError = false; // Set to true to demonstrate error states |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
|
Description
Updated UI/UX for the Publish Modal: Reduced cognitive load for initial publish action, refined error state experience, added new buttons to address publish errors, simplified UI for "Add custom domain" button.
Related Issues
Type of Change
Testing
Compared updated results in localhost against my Figma mockups.
Screenshots from localhost:
Publish Update:
Error State Updates:
Important
Enhances Publish Modal UI/UX with improved error handling, domain linking, and debugging features.
PublishDropdowninindex.tsxto includePreviewDomainSectionandCustomDomainSectionwith separators.AdvancedSettingsSectionandView Sitebutton inindex.tsx.UrlSectioninurl.tsxto handle invalid URLs and display error messages.CustomDomainSectionandPreviewDomainSectionto handle error states and retry logic.preview-domain-section.tsxandcustom-domain-section.tsx.demoNonDomainErrorflag for demo purposes inpreview-domain-section.tsxandcustom-domain-section.tsx.editorEngineto the window for debugging ineditor/index.tsx.preview.tsto useHOSTING_DOMAINconstant for domain creation..husky/pre-committo use absolute paths forbuncommands.This description was created by
for b21486e. You can customize this summary. It will automatically update as commits are pushed.