Skip to content

feat: update apsara to 1.0.0-rc.5#1594

Open
rohanchkrabrty wants to merge 1 commit intomainfrom
update-sdk-to-apsara-latest
Open

feat: update apsara to 1.0.0-rc.5#1594
rohanchkrabrty wants to merge 1 commit intomainfrom
update-sdk-to-apsara-latest

Conversation

@rohanchkrabrty
Copy link
Copy Markdown
Contributor

Summary

  • Bump @raystack/apsara from 1.0.0-rc.2 to 1.0.0-rc.5 in the SDK package.
  • Migrate InputField usages across views-new (auth, billing, profile, projects, security, members, teams, tokens, PATs, create-organization, general) to the new Field + Input composition exposed by Apsara.
  • Refactor pat-form-dialog's Select.Value render so visible/remaining chip computation lives outside the render prop, matching the updated Select API.
  • Loosen convertFilterValue in transform-query.ts to accept unknown and stringify non-primitive values safely.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontier Ready Ready Preview, Comment May 9, 2026 9:47am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 9, 2026

Review Change Stack

📝 Walkthrough

Summary by CodeRabbit

Release Notes

  • Chores

    • Updated design system library to the latest release candidate version.
    • Refactored form inputs across the application to use updated component architecture for improved consistency and maintainability.
  • Style

    • Adjusted text element rendering and corrected accessibility attributes throughout the interface.

Walkthrough

This PR updates the @raystack/apsara-v1 design system dependency from rc.2 to rc.5 and systematically refactors form inputs across 25+ view components, replacing InputField with a Field + Input composition pattern. It also generalizes a utility function, simplifies Text element rendering in billing views, and fixes an accessibility attribute in PAT chips.

Changes

Apsara v1 Dependency & Component System Migration

Layer / File(s) Summary
Dependency & Type Generalization
web/sdk/package.json, web/sdk/react/utils/transform-query.ts
Bumps @raystack/apsara-v1 from 1.0.0-rc.2 to 1.0.0-rc.5. Generalizes convertFilterValue parameter from string | number | boolean | null | undefined to unknown and adjusts string conversion logic to use String(value) for non-null inputs.
Auth Views: InputField → Field+Input
web/sdk/react/views-new/auth/magic-link/..., web/sdk/react/views-new/auth/magic-link-verify/..., web/sdk/react/views-new/auth/subscribe/...
Migrates email and OTP input controls in authentication views from InputField to Field + Input composition with updated imports. Form registration and error display wiring are preserved.
Organization & Team Management: InputField → Field+Input
web/sdk/react/views-new/create-organization/..., web/sdk/react/views-new/general/..., web/sdk/react/views-new/teams/...
Refactors form inputs across organization creation, general settings, and team dialogs to use Field wrapper with label and error props, nested Input components with register() bindings, and preserved validation error messages.
Project Management: InputField → Field+Input
web/sdk/react/views-new/projects/components/add-project-dialog.tsx, web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
Migrates project dialog inputs from InputField to Field + Input composition while maintaining form registration and error display.
Security & Domain Management: InputField → Field+Input
web/sdk/react/views-new/security/components/add-domain-dialog.tsx, web/sdk/react/views-new/security/components/delete-domain-dialog.tsx, web/sdk/react/views-new/security/components/verify-domain-dialog.tsx
Refactors domain management dialogs to use Field + Input composition with updated imports and preserved validation error routing through Field's error prop.
Service Accounts & Tokens: InputField → Field+Input
web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx, web/sdk/react/views-new/service-accounts/components/add-token-form.tsx, web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx
Migrates service account and token form inputs from InputField to Field + Input with error and description props mapped through Field wrapper. Numeric validation and paste-handling logic in tokens dialog are preserved.
PAT Management: InputField → Field+Input, Logic Refactor & Accessibility
web/sdk/react/views-new/pat/components/pat-created-dialog.tsx, web/sdk/react/views-new/pat/components/pat-form-dialog.tsx, web/sdk/react/views-new/pat/components/pat-project-chips.tsx
Migrates PAT form and token display from InputField to Field + Input composition. Refactors multi-select project render logic by replacing inline IIFE with explicit variable computation for selectedIds, visible, and remaining. Fixes accessibility attribute from ariaLabel to aria-label in expand-chips button.
Profile & Members: InputField → Field+Input
web/sdk/react/views-new/profile/profile-view.tsx, web/sdk/react/views-new/members/components/invite-member-dialog.tsx
Migrates profile view form fields and member invite dialog input from InputField to Field + Input composition with error and validation messaging preserved through Field wrapper.
Billing & Plans UI Text Refinement
web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx, web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx, web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx, web/sdk/react/views-new/members/components/member-columns.tsx
Removes as="span" prop from Text components in billing and plan dialogs (labels for cycle info, plan details, pricing) and member columns (pending invite indicator) while preserving size and weight styling attributes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • raystack/frontier#1518: Billing components revamp; overlaps with billing/cycling UI updates in this PR.
  • raystack/frontier#1533: PAT views introduction; shares pat-created-dialog.tsx, pat-form-dialog.tsx, and pat-project-chips.tsx edits.
  • raystack/frontier#1480: Earlier Apsara v1 dependency and import migration; establishes the InputField → Field+Input pattern this PR extends.

Suggested reviewers

  • rsbh
  • rohilsurana
  • paanSinghCoder
🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx (1)

174-202: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Fix invalid HTML structure: nested <p> elements created by removing as="span".

The code nests Text components without the as prop at lines 174, 191, 196, and 202. Since Apsara's Text component defaults to rendering as a <p> element, these changes produce invalid HTML: <p><p>Label</p></p>.

To fix, either:

  1. Add as="span" back to the inner Text elements (labels), or
  2. Add as="div" to the outer Text elements.

The pattern appears in all four label/value sections (Plan, Next billing, Users, Amount).

🧹 Nitpick comments (1)
web/sdk/react/utils/transform-query.ts (1)

25-25: ⚡ Quick win

Consider documenting the unknown parameter type.

The widening from a specific union to unknown reduces compile-time type safety. Since the function now accepts any value, it would be helpful to document what types are expected in practice and how non-primitive types are handled (converted via String()).

📝 Suggested JSDoc addition
 /**
  * Converts a filter value to the appropriate RQLFilter value format
+ * `@param` value - Filter value of any type; primitives (boolean, number, string) are 
+ *                preserved with type information, while objects/arrays are stringified
  */
 function convertFilterValue(value: unknown): RQLFilter["value"] {

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 43db9027-729f-43c1-8271-d759544e9a0d

📥 Commits

Reviewing files that changed from the base of the PR and between 65953a6 and 8e80753.

⛔ Files ignored due to path filters (1)
  • web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (27)
  • web/sdk/package.json
  • web/sdk/react/utils/transform-query.ts
  • web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx
  • web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx
  • web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx
  • web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
  • web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
  • web/sdk/react/views-new/create-organization/create-organization-view.tsx
  • web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
  • web/sdk/react/views-new/general/general-view.tsx
  • web/sdk/react/views-new/members/components/invite-member-dialog.tsx
  • web/sdk/react/views-new/members/components/member-columns.tsx
  • web/sdk/react/views-new/pat/components/pat-created-dialog.tsx
  • web/sdk/react/views-new/pat/components/pat-form-dialog.tsx
  • web/sdk/react/views-new/pat/components/pat-project-chips.tsx
  • web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
  • web/sdk/react/views-new/profile/profile-view.tsx
  • web/sdk/react/views-new/projects/components/add-project-dialog.tsx
  • web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
  • web/sdk/react/views-new/security/components/add-domain-dialog.tsx
  • web/sdk/react/views-new/security/components/delete-domain-dialog.tsx
  • web/sdk/react/views-new/security/components/verify-domain-dialog.tsx
  • web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
  • web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
  • web/sdk/react/views-new/teams/components/add-team-dialog.tsx
  • web/sdk/react/views-new/teams/components/edit-team-dialog.tsx
  • web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx

Comment thread web/sdk/package.json
"@connectrpc/connect-web": "2.1.1",
"@hookform/resolvers": "^3.10.0",
"@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.2",
"@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.5",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

What are the breaking changes in @raystack/apsara version 1.0.0-rc.3, 1.0.0-rc.4, and 1.0.0-rc.5?

💡 Result:

No specific breaking changes documented for @raystack/apsara versions 1.0.0-rc.3, 1.0.0-rc.4, or 1.0.0-rc.5 in available sources. The latest release found is v1.0.0-rc.2 on 2026-03-30 [1]. Ongoing work includes modernizing to React 19, dropping React 18 support by removing deprecated forwardRef wrappers from 63 components, updating peer deps to react@^19, and removing displayName assignments, noted as a breaking change requiring React upgrade [2]. TypeScript improvements like eliminating any types and @ts-ignore also in progress, potentially breaking for type consumers [3]. npm shows versions up to 0.56.6, no 1.0 rc listings [4]. Check GitHub releases https://github.com/raystack/apsara/releases and issues for latest [1].

Citations:


🏁 Script executed:

# First, let's check the actual package.json file to confirm the version being used
cat web/sdk/package.json | grep -A 2 -B 2 "apsara"

Repository: raystack/frontier

Length of output: 640


🌐 Web query:

@raystack/apsara npm releases rc.3 rc.4 rc.5

💡 Result:

I couldn’t find evidence that @raystack/apsara has npm prerelease versions literally named rc.3, rc.4, and rc.5 (for example, 1.0.0-rc.3 / 1.0.0-rc.4 / 1.0.0-rc.5). What I can confirm from npm’s registry page is that the package has prerelease versions using the “-rc” suffix, and that as of the version-history table it includes a range like “0.55.0-rc.1 - 0.55.0-rc.4” (no rc.5 shown in the snippet I can access) and the latest published version listed there is v0.56.6 [1]. On the GitHub repository page, the “Latest release” shown there is “v1.0.0-rc.2” (prerelease), which again doesn’t demonstrate rc.3/rc.4/rc.5 specifically [2]. If you tell me what version line you mean (e.g., “0.55.x rc.3/rc.4/rc.5” vs “1.0.0-rc.3/rc.4/rc.5”), I can rerun the search with the exact version strings.

Citations:


🏁 Script executed:

# Check if there are any CHANGELOG or release notes in the repo that document version changes
find . -type f -name "CHANGELOG*" -o -name "RELEASES*" -o -name "HISTORY*" | head -20

Repository: raystack/frontier

Length of output: 84


🏁 Script executed:

# Check the CHANGELOG for version history
head -100 web/sdk/CHANGELOG.md

Repository: raystack/frontier

Length of output: 584


🏁 Script executed:

# Search GitHub directly for `@raystack/apsara` releases with rc versions
# Use curl to query GitHub releases API
curl -s "https://api.github.com/repos/raystack/apsara/releases?per_page=100" | jq -r '.[] | select(.prerelease == true) | .tag_name' | grep "1.0.0-rc" | sort -V

Repository: raystack/frontier

Length of output: 133


🏁 Script executed:

# Get detailed release notes for rc.3, rc.4, and rc.5
curl -s "https://api.github.com/repos/raystack/apsara/releases?per_page=100" | jq -r '.[] | select(.tag_name | test("1.0.0-rc.(3|4|5)")) | "Tag: \(.tag_name)\nBody:\n\(.body)\n---"'

Repository: raystack/frontier

Length of output: 5973


Check for breaking changes in rc.3, rc.4, and rc.5.

The PR migrates from rc.2 to rc.5, skipping rc.3 and rc.4. While the InputFieldField + Input migration is already handled, the release notes document additional breaking changes:

  • rc.4: as prop replaced with render prop in Text and Headline components; Command component migrated to Base UI; Textarea size/variant API changes
  • rc.5: Color system migrated from HEX to OKLCH (affecting theme tokens); overlay-base-primary token removed; Input component improvements

Verify that these changes are accounted for in the codebase integrations.

return { case: "stringValue", value };
default:
return { case: "stringValue", value: value ?? "" };
return { case: "stringValue", value: value == null ? "" : String(value) };
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find usages of DataTableQuery filters and test coverage for convertFilterValue

# Check for test files covering this utility
fd -e test.ts -e test.tsx -e spec.ts | xargs rg -l 'convertFilterValue|transformDataTableQueryToRQLRequest' 

# Look for actual filter.value usage patterns in the codebase
rg -n -C3 'filters.*value' --type=ts --type=tsx -g '!node_modules' -g '!dist'

# Check DataTableFilter type definition from Apsara (if locally installed)
rg -n 'export.*DataTableFilter' --type=ts -g '**/apsara*/**'

Repository: raystack/frontier

Length of output: 238


🏁 Script executed:

#!/bin/bash

# Find test files and search for test coverage
echo "=== Test files mentioning transform-query or convertFilterValue ==="
find web -name "*test*" -o -name "*spec*" | head -20

echo "=== Search for tests covering this transformation ==="
rg -n "convertFilterValue|transformDataTableQueryToRQLRequest" web --type ts -g "*.test.ts" -g "*.spec.ts"

echo "=== Look for DataTableFilter type definition ==="
rg -n "interface DataTableFilter|type DataTableFilter|export.*DataTableFilter" web --type ts

echo "=== Check actual filter.value usage patterns ==="
rg -n "filter\.value|filters\[.*\]\.value" web --type ts -A2 -B2

echo "=== Examine the transform-query.ts file to understand context ==="
cat -n web/sdk/react/utils/transform-query.ts | head -50

Repository: raystack/frontier

Length of output: 3731


🏁 Script executed:

#!/bin/bash

echo "=== Check if Apsara is installed and find its types ==="
find web -path "*/node_modules/@raystack/apsara*" -name "*.d.ts" 2>/dev/null | head -5

echo "=== Search for examples of filter creation/usage with specific types ==="
rg -n "DataTableFilter|filters.*:" web --type ts -B2 -A2 | head -60

echo "=== Look for any object or array being passed as filter value ==="
rg -n "value:.*\{|\[.*\]" web --type ts -g "!node_modules" | head -30

echo "=== Check if there are date range or date filters documented ==="
rg -n "dateValue|DateRange|dateRange|date.*filter" web --type ts -i | head -20

echo "=== Search for how filters are actually created in the frontend ==="
fd -e test.ts -e test.tsx | xargs rg -l "filter" 2>/dev/null | head -5

echo "=== Look at the admin app transform-query for more context ==="
head -70 web/apps/admin/src/utils/transform-query.ts

Repository: raystack/frontier

Length of output: 9224


🏁 Script executed:

#!/bin/bash

echo "=== Compare both versions side-by-side ==="
echo "Admin app version (web/apps/admin/src/utils/transform-query.ts lines 24-30):"
sed -n '24,30p' web/apps/admin/src/utils/transform-query.ts

echo ""
echo "React SDK version (web/sdk/react/utils/transform-query.ts lines 25-35):"
sed -n '25,35p' web/sdk/react/utils/transform-query.ts

echo ""
echo "=== Check SDK utils version ==="
sed -n '25,35p' web/sdk/utils/transform-query.ts

echo ""
echo "=== Search for any test files that might test this conversion ==="
find web -name "*.test.ts" -o -name "*.test.tsx" | xargs grep -l "convertFilterValue\|transformDataTableQuery" 2>/dev/null

echo ""
echo "=== Look for usage of filter.value with complex types ==="
rg -n "filter\.value\s*=" web --type ts -B3 -A3

Repository: raystack/frontier

Length of output: 1328


Verify type safety regression in convertFilterValue.

The function's parameter type was changed from string | number | boolean | null | undefined (in web/sdk/utils/ and web/apps/admin/) to unknown, but the default case still uses String() which produces unhelpful results for objects and arrays. This removes type safety that exists in other versions of the same function across the codebase.

Align this with the other implementations by either:

  1. Restoring the explicit parameter type to match web/sdk/utils/transform-query.ts, or
  2. Adding proper handling for non-primitive types if they're legitimately expected (though the other implementations suggest they're not).

@coveralls
Copy link
Copy Markdown

Coverage Report for CI Build 25598071871

Coverage remained the same at 41.963%

Details

  • Coverage remained the same as the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.


Coverage Stats

Coverage Status
Relevant Lines: 37254
Covered Lines: 15633
Line Coverage: 41.96%
Coverage Strength: 11.88 hits per line

💛 - Coveralls

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants