Profile structure ux#1592
Conversation
… gate - Add current plan banner to subscription page with payment settings link - Show upgrade message for SAML SSO when not on Enterprise plan - Rename Pricing tab to Subscription in sidebar Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Remove subscription section from Company page (moved to Subscription) - Add white-label upgrade gate on Branding page for free plan users - Improve dark theme text colors on subscription banner - Add top margin to create secret dialog input Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
|
There was a problem hiding this comment.
Pull request overview
This PR adjusts the Profile-area UX by renaming “Pricing” to “Subscription”, moving plan/payment UI into the Upgrade page, and gating certain enterprise/team-only features (SSO, white-label) with upgrade prompts.
Changes:
- Renamed the profile sidebar tab/key from
pricingtosubscriptionand updated navigation labels/activation. - Enhanced the Upgrade page UI (current plan banner, payment settings link) and restricted upgrade/downgrade actions to admins.
- Added plan-based gating for SAML SSO and white-label UI, showing upgrade-required messaging when not eligible.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/environments/environment.dev.ts | Toggles saas flag for dev environment (affects feature gating/routes). |
| frontend/src/app/components/upgrade/upgrade.component.ts | Adds current plan name, portal link, admin detection via UserService. |
| frontend/src/app/components/upgrade/upgrade.component.html | Updates sidebar tab, adds current plan banner and admin-only actions. |
| frontend/src/app/components/upgrade/upgrade.component.css | Styles the new current-plan banner and payment settings button. |
| frontend/src/app/components/sso/sso.component.ts | Computes hasEnterprisePlan and conditionally fetches SAML config. |
| frontend/src/app/components/sso/sso.component.html | Shows upgrade-required UI when not on Enterprise. |
| frontend/src/app/components/sso/sso.component.css | Styles the new upgrade-required UI on SSO page. |
| frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css | Adds minor spacing adjustment for first full-width field. |
| frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.ts | Updates activeTab union to include subscription instead of pricing. |
| frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html | Renames “Pricing” to “Subscription” and gates SAML nav item by isSaas. |
| frontend/src/app/components/company/company.component.html | Removes the company plan/payment banner from the Company page. |
| frontend/src/app/components/company/company.component.css | Removes styles for the deleted company plan/payment banner. |
| frontend/src/app/components/branding/branding.component.html | Tightens role-based editability and adds upgrade-required UI for free plan. |
| frontend/src/app/components/branding/branding.component.css | Styles the new upgrade-required UI on Branding page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @media (prefers-color-scheme: dark) { | ||
| .current-plan-label { | ||
| color: rgba(255, 255, 255, 0.64); | ||
| } | ||
| } | ||
|
|
||
| .current-plan-name { | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| color: var(--color-primaryPalette-700); | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| .current-plan-label { | ||
| color: rgba(255, 255, 255, 0.7); | ||
| } | ||
|
|
There was a problem hiding this comment.
In the dark-scheme styles, .current-plan-label is defined twice with different colors (0.64 vs 0.7 alpha). This duplicate selector is redundant and makes it unclear which value is intended; keep a single definition for the dark mode label color.
| production: false, | ||
| saas: false, | ||
| saas: true, | ||
| apiRoot: 'https://app.rocketadmin.com/api', |
There was a problem hiding this comment.
environment.dev.ts is used by the standard development build configuration (separate from the existing saas build). Flipping saas to true will make local/dev builds behave like SaaS (feature gating, sidebar links, custom-domain detection), which is likely unintended and can break self-hosted/local dev flows. Consider reverting this to false (and rely on the saas configuration for SaaS dev), or adjust the Angular build configurations accordingly.
| ngOnInit(): void { | ||
| this.getCompanyPaln(); | ||
| this._userService.cast.subscribe((user) => { | ||
| this.isAdmin = user.role === CompanyMemberRole.CAO; | ||
| }); |
There was a problem hiding this comment.
UpgradeComponent subscribes to this._userService.cast but never unsubscribes. Unlike some other components (e.g., BrandingComponent) this can leave a live subscription after navigation and cause unnecessary change detection / memory retention. Consider using takeUntilDestroyed(inject(DestroyRef)) (Angular 16+) or implementing OnDestroy and unsubscribing.
| <a *ngIf="portalLink" | ||
| mat-stroked-button | ||
| [href]="portalLink" target="_blank" | ||
| class="payment-settings-button"> | ||
| <mat-icon>credit_card</mat-icon> | ||
| Payment settings | ||
| </a> |
There was a problem hiding this comment.
The payment-portal link opens in a new tab (target="_blank") but is missing rel="noopener noreferrer", which can allow tab-nabbing. Add the rel attribute to this anchor.
3 participants
No description provided.