Move Zapier link from connections list to user menu (SaaS only) and l… #1537
Conversation
…azy-load SDK (#1536) - Remove Zapier link and SVG logos from connections list - Add Zapier menu item to both desktop dropdown and mobile sidebar menus, gated behind isSaas - Remove global Zapier SDK script/CSS from index.html and index.saas.html - Dynamically load Zapier SDK in ZapierComponent on init - Migrate Zapier component to signals and @if template syntax Co-Authored-By: Claude Opus 4.5 <[email protected]>
There was a problem hiding this comment.
Pull request overview
This PR refactors Zapier integration by moving the Zapier link from the connections list to the user menu (SaaS only) and implementing lazy-loading for the Zapier SDK. The change improves the UX by relocating Zapier to a more appropriate location in the navigation and optimizes initial page load by deferring SDK loading until needed.
Changes:
- Removed Zapier link and SVG logos from the connections list interface
- Added Zapier menu items to both mobile sidebar and desktop dropdown menus with isSaas gating
- Migrated Zapier component to use Angular signals and modern @if template syntax
- Implemented dynamic loading of Zapier SDK scripts and stylesheets instead of global loading
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/index.html | Removed global Zapier SDK script and CSS link tags |
| frontend/src/index.saas.html | Removed global Zapier SDK script and CSS link tags |
| frontend/src/app/components/zapier/zapier.component.ts | Migrated to signals with toSignal(), added dynamic SDK loading logic, removed unused Sentry import |
| frontend/src/app/components/zapier/zapier.component.html | Updated to use @if syntax for conditional rendering based on signal |
| frontend/src/app/components/connections-list/own-connections/own-connections.component.html | Removed Zapier link button with SVG logos |
| frontend/src/app/components/connections-list/own-connections/own-connections.component.css | Removed Zapier-related styles and reformatted with consistent indentation |
| frontend/src/app/app.component.html | Added Zapier menu items to mobile sidebar and desktop dropdown with isSaas conditional |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| private _loadZapierElements(): void { | ||
| const cdnBase = 'https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements'; | ||
|
|
||
| if (!document.querySelector(`script[src="${cdnBase}/zapier-elements.esm.js"]`)) { | ||
| const script = document.createElement('script'); | ||
| script.type = 'module'; | ||
| script.src = `${cdnBase}/zapier-elements.esm.js`; | ||
| document.head.appendChild(script); | ||
| } | ||
|
|
||
| if (!document.querySelector(`link[href="${cdnBase}/zapier-elements.css"]`)) { | ||
| const link = document.createElement('link'); | ||
| link.rel = 'stylesheet'; | ||
| link.href = `${cdnBase}/zapier-elements.css`; | ||
| document.head.appendChild(link); | ||
| } |
There was a problem hiding this comment.
The dynamic script loading introduces a potential race condition where the zapier-workflow custom element may render before the Zapier SDK script has finished loading. While modern custom elements typically handle late registration by upgrading elements retroactively, the previous implementation loaded these scripts globally to ensure they were always available before component initialization. Consider adding a loading state that conditionally renders the zapier-workflow element only after confirming the script has loaded, or verify that the Zapier SDK handles late element registration gracefully.
Replace hardcoded dark-mode hex values with centralized --ra-* CSS custom properties and update the Material palette to blue/teal branding. Co-Authored-By: Claude Opus 4.5 <[email protected]>
…azy-load SDK (#1536)