Show usage and billing for self-hosted instances #3290
Conversation
WalkthroughThe changes update both backend and frontend functionalities related to billing and licensing. In the backend, a new TypeScript file defines constants for billing plan configurations, and the license service has been enhanced with additional data access layers and logic to handle various instance types. The service now distinguishes between cloud and self-hosted instances by adjusting member counting and table generation processes accordingly. In the server routes, the license service initialization has been updated to include the new dependencies. On the frontend, conditional checks based on the window’s origin have been removed from the sidebar components, ensuring the “Usage & Billing” link is always displayed. Additionally, billing components have been updated to conditionally modify the behavior and labeling of upgrade buttons and tabs based on the instance type. Suggested reviewers
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx (1)
19-26: Conditionally filter tabs based on instance type.The implementation correctly identifies cloud instances and filters tabs accordingly. For self-hosted instances, only the relevant "Infisical Self-Hosted" tab is shown.
There's a minor inconsistency in the key naming. When
isCloudInstanceis false, you're usingkey: "tab-infisical-cloud"for the "Infisical Self-Hosted" tab. Consider updating this to use the correct key:- : [{ name: "Infisical Self-Hosted", key: "tab-infisical-cloud" }]; + : [{ name: "Infisical Self-Hosted", key: "tab-infisical-self-hosted" }];frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx (2)
53-57: Consider externalizing environment checks.
Hardcoding domain checks inisCloudInstancecan be fragile if the deployment origin changes. Consider storing or inferring this information from environment variables or configuration to avoid potential mismatches in the future.
159-176: Consider adding error handling when opening portal session.
IfcreateCustomerPortalSession.mutateAsyncfails, there is no user feedback. You might wrap this in a try/catch to show an error message for a better user experience.+ try { const { url } = await createCustomerPortalSession.mutateAsync(currentOrg.id); window.location.href = url; + } catch (error) { + console.error(error); + // Optionally display UI notification + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
backend/src/ee/services/license/licence-enums.ts(1 hunks)backend/src/ee/services/license/license-service.ts(7 hunks)backend/src/server/routes/index.ts(1 hunks)frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx(1 hunks)frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx(1 hunks)frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx(5 hunks)frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx(1 hunks)
🧰 Additional context used
🧬 Code Definitions (3)
backend/src/server/routes/index.ts (1)
backend/src/ee/services/license/license-service.ts (1) (1)
licenseServiceFactory(62-667)
frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx (1)
frontend/src/components/v2/Dropdown/Dropdown.tsx (1) (1)
DropdownMenuItem(82-106)
backend/src/ee/services/license/license-service.ts (1)
backend/src/ee/services/license/licence-enums.ts (2) (2)
BillingPlanRows(1-19)BillingPlanTableHead(21-24)
🪛 Biome (1.9.4)
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
[error] 32-32: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Check Frontend Type and Lint check
- GitHub Check: Run integration test
- GitHub Check: Check TS and Lint
🔇 Additional comments (22)
frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx (1)
15-21: Accessibility improvement to display Usage & Billing for all instances.The code change makes the "Usage & Billing" navigation link unconditionally visible in the DefaultSideBar component, aligning with the PR objective to show usage and billing for self-hosted instances.
backend/src/ee/services/license/licence-enums.ts (2)
1-19: Well-structured billing plan configuration constants.The
BillingPlanRowsconstant provides a clear definition of all the features that can be tracked for billing purposes. This aligns perfectly with the PR objective of showing usage metrics for self-hosted instances.
21-24: Good definition of table headers for usage display.The
BillingPlanTableHeadconstant defines a simple and clear structure for displaying the "Allowed" and "Used" columns in the billing UI, which will be essential for showing usage metrics.frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx (1)
373-377: Accessibility improvement to display Usage & Billing for all instances.The code change makes the "Usage & Billing" navigation link unconditionally visible in the MinimizedOrgSidebar component, consistent with the change in DefaultSideBar and aligning with the PR objective to show usage and billing for self-hosted instances.
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx (1)
38-50: Conditionally render tab panels for cloud instances.This change correctly implements conditional rendering for cloud-specific tab panels, ensuring they're only displayed when appropriate. The approach helps maintain a clean user interface for self-hosted instances.
backend/src/server/routes/index.ts (1)
416-423: New dependencies in license service look correct.
The newly addedidentityOrgMembershipDALandprojectDALare logically consistent with the enhanced billing and licensing features. Ensure tests cover these integrations to confirm that they properly support any additional logic.frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx (4)
62-66: Fallback behavior for self-hosted is clear.
The condition correctly opens the pricing page for self-hosted instances. No concerns here.
84-95: Upgrade label logic is clear.
ThegetUpgradePlanLabelfunction correctly distinguishes between cloud vs. self-hosted instances and trial usage. This is concise and easy to maintain.
123-123: Upgrade label usage confirmed.
UsinggetUpgradePlanLabel()directly within the button is concise and maintains a clear separation of presentation from logic.
189-189: Graceful fallback for missing date.
Displaying a dash instead of a date is a clear and user-friendly approach ifcurrentPeriodEndis not set.backend/src/ee/services/license/license-service.ts (12)
15-15: Import for identity org DAL.
The import statement forTIdentityOrgDALFactoryis aligned with newly introduced logic.
17-17: Import for project DAL.
Similarly, this import integrates well with the extended project-based licensing logic.
21-21: ImportingBillingPlanRowsandBillingPlanTableHead.
Using these constants centralizes plan configuration data and helps keep your feature table consistent.
34-35: Offline license type imports.
The references toTOfflineLicenseandTOfflineLicenseContentsare properly declared.
46-52: Updated service factory dependency type.
The addition ofidentityOrgMembershipDALandprojectDALtoTLicenseServiceFactoryDepis well-organized. The use ofPickfor minimal exposure of methods is a good practice.
66-66: InjectingkeyStoreinto the factory.
No issues. The injection is consistent with the rest of the service’s design.
68-69: InjectingidentityOrgMembershipDALandprojectDAL.
Properly passes in new dependencies for membership and project-based usage calculations.
73-74: IntroducingselfHostedLicensevariable.
The newselfHostedLicensereference will store offline license details. This is straightforward and clear.
138-138: AssigningselfHostedLicense.
Storing the offline license post-verification is correct. Consider logging license metadata for debugging if needed.
362-366: Billing data fetch for non-on-prem.
The short-circuit logic to retrieve cloud-plan billing info is clean. The fallback for self-hosted flows is handled below.
390-394: Plan table retrieval for cloud instances.
This block parallels the billing retrieval logic above. The usage of early return ensures on-prem logic is bypassed.
397-417: Mapping plan rows for on-prem usage.
Iterating overBillingPlanRowsand populatingusedcounts fromorgDAL,projectDAL, andidentityOrgMembershipDALis both extensible and uniform.
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
Show resolved
Hide resolved
carlosmonastyrski
requested review from
akhilmhdh and
sheensantoscapadngan
and removed request for
scott-ray-wilson and
akhilmhdh
frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx
Outdated
Show resolved
Hide resolved
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx (1)
27-29:⚠️ Potential issueAdd missing key prop to mapped Tab elements.
React requires a unique key prop for elements in an iterable to help with rendering optimization.
Apply this diff to fix the issue:
- {tabsFiltered.map((tab) => ( - <Tab value={tab.key}>{tab.name}</Tab> - ))} + {tabsFiltered.map((tab) => ( + <Tab key={tab.key} value={tab.key}>{tab.name}</Tab> + ))}🧰 Tools
🪛 Biome (1.9.4)
[error] 28-28: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/helpers/platform.ts(1 hunks)frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx(6 hunks)frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx(2 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx (1)
frontend/src/helpers/platform.ts (1)
isInfisicalCloud(1-5)
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx (1)
frontend/src/helpers/platform.ts (1)
isInfisicalCloud(1-5)
🪛 Biome (1.9.4)
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
[error] 28-28: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Run integration test
🔇 Additional comments (8)
frontend/src/helpers/platform.ts (1)
4-5: Function enhancement with an additional URL check.The addition of "https://gamma.infisical.com" to the list of cloud URLs expands the function's capability to recognize all Infisical cloud environments, which aligns with the PR objective of showing usage and billing for self-hosted instances.
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx (2)
20-22: Improved conditional rendering based on environment.The code now intelligently filters tabs based on whether the application is running in an Infisical cloud environment, showing only relevant tabs to self-hosted users.
34-46: Conditional rendering for tab panels enhances UI relevance.The conditional rendering ensures that tab panels for cloud-specific features are only shown in cloud environments, which provides a cleaner, more relevant UI for self-hosted users.
frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx (5)
51-53: Added null check for better error handling.This defensive check prevents potential rendering errors when the plan slug is undefined or null.
61-64: Enhanced upgrade button behavior for self-hosted instances.The button now intelligently redirects self-hosted users to the Infisical pricing page, which aligns with the PR objective of directing users to the appropriate upgrade path based on their environment.
83-94: New function for contextual upgrade button labels.The
getUpgradePlanLabelfunction elegantly determines the appropriate button label based on the environment and trial status, improving UI context and user experience.
158-175: Conditionally rendered management options for cloud instances.The "Manage plan" button is now only shown in cloud environments, which is appropriate as self-hosted instances don't have the same plan management workflow.
188-188: Added null check for date formatting.This defensive check prevents rendering errors when the renewal date is unavailable, which improves the robustness of the component.
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
Show resolved
Hide resolved
Description 📣
On self-hosted instances, the "Usage & Billing" tab will now be visible. Initially, only the first tab will be displayed, showing available features, their usage (currently calculating the first three features, similar to the license server), and providing a redirect to Infisical’s pricing page when the upgrade button is clicked.
Type ✨
Tests 🛠️
# Here's some code block to paste some code snippetsSummary by CodeRabbit