From 956aaaa8b8ce4e7a1eb80913a894a3d98a381ced Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Tue, 27 Jan 2026 14:35:49 +0000 Subject: [PATCH] Move Zapier link from connections list to user menu (SaaS only) and lazy-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 --- frontend/src/app/app.component.html | 12 + .../own-connections.component.css | 354 ++++++++---------- .../own-connections.component.html | 19 - .../components/zapier/zapier.component.html | 18 +- .../app/components/zapier/zapier.component.ts | 30 +- frontend/src/index.html | 4 - frontend/src/index.saas.html | 5 - 7 files changed, 205 insertions(+), 237 deletions(-) diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index d70645d72..9b22bfe22 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -42,6 +42,12 @@
Secrets
+ + + electric_bolt + +
Zapier
+ help_outlined
Help center
@@ -182,6 +188,12 @@ Secrets + + + electric_bolt + + Zapier + help_outlined Help center diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css index a485049ab..b57cc6bbc 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.css +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.css @@ -1,210 +1,172 @@ :host { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .empty-state { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .empty-state_bottom { - margin-top: auto; + margin-top: auto; } @media (prefers-color-scheme: light) { - .empty-state_bottom { - color: rgba(0, 0, 0, 0.64) - } + .empty-state_bottom { + color: rgba(0, 0, 0, 0.64); + } } @media (prefers-color-scheme: dark) { - .empty-state_bottom { - color: rgba(255, 255, 255, 0.64) - } + .empty-state_bottom { + color: rgba(255, 255, 255, 0.64); + } } .empty-state__text { - font-size: 12px !important; - font-weight: 500 !important; - margin-bottom: 0 !important; - text-align: center; - text-transform: uppercase; + font-size: 12px !important; + font-weight: 500 !important; + margin-bottom: 0 !important; + text-align: center; + text-transform: uppercase; } .supportedDatabases { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); - align-items: stretch; - grid-gap: 20px; - margin-top: 24px; - width: 77%; + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); + align-items: stretch; + grid-gap: 20px; + margin-top: 24px; + width: 77%; } @media (width <= 600px) { - .supportedDatabases { - width: 100%; - } + .supportedDatabases { + width: 100%; + } } .addConnectionLink { - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; - border-radius: 4px; - box-shadow: - 0px 1px 3px 0px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.12), - 0px 0px 2px 0px rgba(0, 0, 0, 0.14); - color: inherit; - font-weight: 600; - padding: 12px; - text-decoration: none; - height: 100%; - transition: box-shadow 200ms, background 200ms, border 200ms; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + border-radius: 4px; + box-shadow: + 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.12), + 0px 0px 2px 0px rgba(0, 0, 0, 0.14); + color: inherit; + font-weight: 600; + padding: 12px; + text-decoration: none; + height: 100%; + transition: + box-shadow 200ms, + background 200ms, + border 200ms; } .addConnectionLink:hover { - box-shadow: - 0px 1px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); + box-shadow: + 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 4px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); } @media (prefers-color-scheme: dark) { - .addConnectionLink { - background: #404040; - border: 1px solid #404040; - } + .addConnectionLink { + background: #404040; + border: 1px solid #404040; + } - .addConnectionLink:hover { - background: #212121; - border: 1px solid rgba(255, 255, 255, 0.75); - box-shadow: - 0px 1px 3px 0px rgba(255, 255, 255, 0.1), - 0px 2px 2px 0px rgba(255, 255, 255, 0.08), - 0px 0px 2px 0px rgba(255, 255, 255, 0.12); - } + .addConnectionLink:hover { + background: #212121; + border: 1px solid rgba(255, 255, 255, 0.75); + box-shadow: + 0px 1px 3px 0px rgba(255, 255, 255, 0.1), + 0px 2px 2px 0px rgba(255, 255, 255, 0.08), + 0px 0px 2px 0px rgba(255, 255, 255, 0.12); + } } .addConnectionLink__iconBox { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: #fff; - border-radius: 4px; - height: 40px; - width: 40px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border-radius: 4px; + height: 40px; + width: 40px; } .addConnectionLink__icon { - flex-shrink: 0; - height: 30px; - width: 30px; + flex-shrink: 0; + height: 30px; + width: 30px; } .addConnectionLink__label { - text-align: center; + text-align: center; } .showAllButton { - margin-top: 20px; - margin-bottom: -56px; + margin-top: 20px; + margin-bottom: -56px; } @media (width <= 600px) { - .showAllButton { - margin-bottom: 0; - } + .showAllButton { + margin-bottom: 0; + } } .addButton { - margin-top: -44px; - height: 40px; + margin-top: -44px; + height: 40px; } .fabActions { - display: flex; - align-items: center; - gap: 12px; - align-self: flex-end; - margin-top: 20px; -} - -.zapier-link { - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 24px; - box-shadow: - 0px 1px 10px 0px rgba(0, 0, 0, 0.08), - 0px 4px 5px 0px rgba(0, 0, 0, 0.05), - 0px 2px 4px 0px rgba(0, 0, 0, 0.06); - color: var(--color-accentedPalette-500); - text-decoration: none; - height: 48px; - padding: 8px; - width: 140px; -} - -@media (prefers-color-scheme: dark) { - .zapier-link { - background: #212121; - } -} - -.zapier-link__caption { - font-size: 12px; -} - -.zapier-link__logo { - border-radius: 8px; - height: 32px; - width: 32px; -} - -.zapier-link__icon { - color: var(--mat-sidenav-content-text-color); - font-size: 16px; - height: 16px; - width: 16px; + display: flex; + align-items: center; + gap: 12px; + align-self: flex-end; + margin-top: 20px; } .fabAddButton { - border-radius: 24px; - box-shadow: - 0px 1px 10px 0px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.12), - 0px 2px 4px 0px rgba(0, 0, 0, 0.14); - height: 48px !important; - width: 178px; + border-radius: 24px; + box-shadow: + 0px 1px 10px 0px rgba(0, 0, 0, 0.2), + 0px 4px 5px 0px rgba(0, 0, 0, 0.12), + 0px 2px 4px 0px rgba(0, 0, 0, 0.14); + height: 48px !important; + width: 178px; } @media (width <= 600px) { - .fabAddButton { - position: fixed; - bottom: max(64px, 10vw); - z-index: 1; - } + .fabAddButton { + position: fixed; + bottom: max(64px, 10vw); + z-index: 1; + } } .connections { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, calc(33.33% - 14px))); - justify-content: center; - gap: 20px; - margin-top: 24px; - width: 100%; + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, calc(33.33% - 14px))); + justify-content: center; + gap: 20px; + margin-top: 24px; + width: 100%; } /* @media (width <= 600px) { @@ -227,76 +189,80 @@ } */ .connection { - display: flex; - flex-direction: column; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - color: inherit; - padding: 12px; - text-decoration: none; - width: 100%; - transition: border 200ms, box-shadow 200ms; + display: flex; + flex-direction: column; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 4px; + color: inherit; + padding: 12px; + text-decoration: none; + width: 100%; + transition: + border 200ms, + box-shadow 200ms; } @media (prefers-color-scheme: dark) { - .connection { - background-color: #000; - border: 1px solid #313131; - } + .connection { + background-color: #000; + border: 1px solid #313131; + } } .connection:hover { - border: 1px solid var(--color-primaryPalette-500); - box-shadow: - 0px 4px 5px 0px rgba(0, 0, 0, 0.2), - 0px 3px 14px 0px rgba(0, 0, 0, 0.12), - 0px 8px 10px 0px rgba(0, 0, 0, 0.14); + border: 1px solid var(--color-primaryPalette-500); + box-shadow: + 0px 4px 5px 0px rgba(0, 0, 0, 0.2), + 0px 3px 14px 0px rgba(0, 0, 0, 0.12), + 0px 8px 10px 0px rgba(0, 0, 0, 0.14); } @media (prefers-color-scheme: dark) { - .connection:hover { - border: 1px solid #636363; - } + .connection:hover { + border: 1px solid #636363; + } } .connectionLogoPreview { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 12px; - background-color: var(--color-primaryPalette-500); - border-radius: 2px; - color: #fff; - font-size: 20px; - font-weight: 900; - height: 72px; - overflow: hidden; - padding: 8px; + flex-shrink: 0; + display: flex; + align-items: center; + gap: 12px; + background-color: var(--color-primaryPalette-500); + border-radius: 2px; + color: #fff; + font-size: 20px; + font-weight: 900; + height: 72px; + overflow: hidden; + padding: 8px; } .connectionLogoPreview__logo { - height: 85%; - object-fit: contain; + height: 85%; + object-fit: contain; } .connectionInfo { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .connectionInfo .connectionInfo__connectionTitle { - margin-top: -4px; - margin-bottom: -2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; + margin-top: -4px; + margin-bottom: -2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; } .connection__goIcon { - grid-row: 1 / span 2; - grid-column: 2; - margin-left: auto; - opacity: 0.65; - transition: opacity 200ms, color 200ms; -} \ No newline at end of file + grid-row: 1 / span 2; + grid-column: 2; + margin-left: auto; + opacity: 0.65; + transition: + opacity 200ms, + color 200ms; +} diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html index 132db5c24..994b9c215 100644 --- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html +++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html @@ -55,25 +55,6 @@

{{ connectionItem.displayTitle }}
- - - keyboard_double_arrow_right - - - open_in_new Docs - + @if (currentUser()) { + + }
diff --git a/frontend/src/app/components/zapier/zapier.component.ts b/frontend/src/app/components/zapier/zapier.component.ts index 6540565cc..074639c91 100644 --- a/frontend/src/app/components/zapier/zapier.component.ts +++ b/frontend/src/app/components/zapier/zapier.component.ts @@ -1,8 +1,8 @@ -import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; -import { User } from '@sentry/angular'; import { UserService } from 'src/app/services/user.service'; @Component({ @@ -12,12 +12,28 @@ import { UserService } from 'src/app/services/user.service'; styleUrl: './zapier.component.css', schemas: [CUSTOM_ELEMENTS_SCHEMA], }) -export class ZapierComponent { - public currentUser: User; - - constructor(private _userService: UserService) {} +export class ZapierComponent implements OnInit { + currentUser = toSignal(inject(UserService).cast); ngOnInit(): void { - this._userService.cast.subscribe((user) => (this.currentUser = user)); + this._loadZapierElements(); + } + + 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); + } } } diff --git a/frontend/src/index.html b/frontend/src/index.html index d3d9c99af..5b89d897a 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -14,10 +14,6 @@ - - - - diff --git a/frontend/src/index.saas.html b/frontend/src/index.saas.html index 294c7f2d0..fe2a9a2e5 100644 --- a/frontend/src/index.saas.html +++ b/frontend/src/index.saas.html @@ -94,11 +94,6 @@ /> - - - - -