feat: SDK general page design revamp by rohanchkrabrty · Pull Request #1480 · raystack/frontier

rohanchkrabrty · 2026-03-26T20:36:19Z

Summary

Revamp the General settings page UI under views-new/general/ using @raystack/apsara-v1 components
- @raystack/apsara-v1 is just an alias for the @raystack/apsara@v1.0.0.rc.1. This is needed temporarily to not break existing pages.
Add reusable components: ViewContainer (page layout wrapper), ViewHeader (page title/description), ImageUpload (avatar/image upload with crop dialog)
Add DeleteOrganizationDialog with self-contained delete logic (form, mutation, validation)
Add client-demo Settings page (/:orgId/settings) with Apsara Sidebar and nested routes
Add "NEW UI" link per organization on the Home page

vercel · 2026-03-26T20:36:24Z

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

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Apr 2, 2026 6:24am

coderabbitai · 2026-03-26T20:36:36Z

📝 Walkthrough

Summary by CodeRabbit

New Features
- Added organization Settings area with a nested General page and route
- Added image upload (avatar) UI with client-side cropping and save
- Added organization deletion flow with confirmation dialog
Chores
- Upgraded React ecosystem to v19 and aligned type packages
- Updated design system imports and global normalization/styles

Walkthrough

Upgrades React to v19 in the client-demo, adds global styles and a Settings nested route, introduces SDK UI components (ImageUpload, ViewContainer, ViewHeader, GeneralView, DeleteOrganizationDialog) with CSS modules and exports, adjusts SDK package/tsup config, and removes the SheetFooter external CSS prop.

Changes

Cohort / File(s)	Summary
React Version Upgrade `web/apps/client-demo/package.json`	Bumped `react`/`react-dom` to `^19.2.1`; updated `@types/react`/`@types/react-dom` to v19 typings.
Client-Demo App Integration `web/apps/client-demo/src/App.tsx`, `web/apps/client-demo/src/Router.tsx`, `web/apps/client-demo/src/styles.css`	Added global stylesheet imports, body margin/padding reset, and nested `/\:orgId/settings` route with `Settings` and `General` pages.
Client-Demo Pages `web/apps/client-demo/src/pages/Home.tsx`, `web/apps/client-demo/src/pages/Settings.tsx`, `web/apps/client-demo/src/pages/settings/General.tsx`	Home: added `slug` and new "Open (NEW UI)" navigation button to settings; added `Settings` page that resolves org by id/name and redirects to `/settings/general`; added `General` page wiring `GeneralView`.
SDK Package Configuration `web/sdk/package.json`, `web/sdk/tsup.config.ts`	Updated peers to require React ^19, added `@raystack/apsara-v1` and `@base-ui/react`, removed some dev deps, and marked `react-dom` external in tsup build.
SDK Image Upload Component `web/sdk/react/components/image-upload/*`	Added `ImageUpload` component + CSS module with file input, cropping dialog, canvas export to JPEG, and public exports.
SDK View Container Component `web/sdk/react/components/view-container/*`	Added `ViewContainer` component, props type, CSS module, and re-exports.
SDK View Header Component `web/sdk/react/components/view-header/*`	Added `ViewHeader` component and props type with re-export.
SDK General Settings View `web/sdk/react/views-new/general/*`	Added `GeneralView`, validation, update/delete mutations, permission gating, `DeleteOrganizationDialog`, and related CSS modules and index export.
SDK Export Updates & Styles `web/sdk/react/index.ts`	Imported additional apsara-v1 styles and exported ImageUpload, ViewContainer, ViewHeader, and GeneralView.
Existing Component Modification `web/sdk/admin/components/SheetFooter.tsx`	Removed `css?: CSS` prop and external style merging; set inline footer style to `styles.footer`; changed `borderTop` token to CSS variable.
Small Assets `web/sdk/react/components/image-upload/index.ts`, `web/sdk/react/components/view-container/index.ts`, `web/sdk/react/views-new/general/index.ts`	Added index re-exports to expose new components and types from directory entry points.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Possibly related PRs

feat: move sdk projects #1421: Adds/renames and exports General view components and delete flow in SDK React views (overlaps GeneralView/DeleteOrganizationDialog surface).
feat: move sdk security #1422: Modifies SDK General settings UI and exports; touches the same view/component files.
feat: move sdk general #1414: Adds standalone General view and delete dialog, updating exports and routing similar to these changes.

Suggested reviewers

rsbh
rohilsurana

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.}

coderabbitai

Actionable comments posted: 7

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d4a8fab5-aa99-40ce-bd99-938852a3637f

📥 Commits

Reviewing files that changed from the base of the PR and between d05d9e5 and b6b1082.

⛔ Files ignored due to path filters (1)

web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (24)

web/apps/client-demo/package.json
web/apps/client-demo/src/App.tsx
web/apps/client-demo/src/Router.tsx
web/apps/client-demo/src/pages/Home.tsx
web/apps/client-demo/src/pages/Settings.tsx
web/apps/client-demo/src/pages/settings/General.tsx
web/apps/client-demo/src/styles.css
web/sdk/admin/components/SheetFooter.tsx
web/sdk/package.json
web/sdk/react/components/image-upload/image-upload.module.css
web/sdk/react/components/image-upload/image-upload.tsx
web/sdk/react/components/image-upload/index.ts
web/sdk/react/components/view-container/index.ts
web/sdk/react/components/view-container/view-container.module.css
web/sdk/react/components/view-container/view-container.tsx
web/sdk/react/components/view-header/index.ts
web/sdk/react/components/view-header/view-header.tsx
web/sdk/react/index.ts
web/sdk/react/views-new/general/components/delete-organization-dialog.module.css
web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
web/sdk/react/views-new/general/general-view.module.css
web/sdk/react/views-new/general/general-view.tsx
web/sdk/react/views-new/general/index.ts
web/sdk/tsup.config.ts

web/apps/client-demo/src/pages/Home.tsx

web/apps/client-demo/src/pages/Settings.tsx

web/sdk/admin/components/SheetFooter.tsx

web/sdk/react/components/image-upload/image-upload.tsx

web/sdk/react/views-new/general/components/delete-organization-dialog.tsx

web/sdk/react/views-new/general/general-view.tsx

web/apps/client-demo/src/pages/settings/General.tsx

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (2)

web/sdk/package.json (2)
109-109: Inconsistent version pinning for @base-ui/react.

@base-ui/react is pinned to an exact version (1.2.0) while most other dependencies use caret ranges (e.g., ^1.2.0). This prevents automatic minor and patch updates. Consider using ^1.2.0 for consistency unless there's a specific reason for strict pinning.
Suggested fix
-    "@base-ui/react": "1.2.0",
+    "@base-ui/react": "^1.2.0",
150-150: Missing newline at end of file.

Add a trailing newline to comply with POSIX conventions and prevent diff noise in future changes.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 761b58f1-949e-4bbd-9f7d-59c5261c7723

📥 Commits

Reviewing files that changed from the base of the PR and between b6b1082 and a69239f.

⛔ Files ignored due to path filters (1)

web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (4)

web/apps/client-demo/package.json
web/apps/client-demo/src/pages/Home.tsx
web/sdk/package.json
web/sdk/react/index.ts

✅ Files skipped from review due to trivial changes (1)

web/apps/client-demo/package.json

🚧 Files skipped from review as they are similar to previous changes (1)

web/sdk/react/index.ts

web/apps/client-demo/src/pages/Home.tsx

web/sdk/package.json

coveralls · 2026-04-02T06:30:05Z

Pull Request Test Coverage Report for Build 23887122760

Details

0 of 0 changed or added relevant lines in 0 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 41.249%

Totals
Change from base Build 23884402694:	0.0%
Covered Lines:	14910
Relevant Lines:	36146

💛 - Coveralls

rohanchkrabrty added 2 commits March 25, 2026 01:15

chore: use apsara v1 in sdk

66f576d

feat: general page revamp

b6b1082

rohanchkrabrty self-assigned this Mar 26, 2026

rohanchkrabrty requested review from paanSinghCoder and rsbh March 26, 2026 20:37

coderabbitai bot reviewed Mar 26, 2026

View reviewed changes

rohanchkrabrty changed the title ~~feat(sdk): general page design revamp with apsara-v1~~ feat: SDK general page design revamp Mar 27, 2026

paanSinghCoder reviewed Apr 1, 2026

View reviewed changes

web/apps/client-demo/src/pages/settings/General.tsx Show resolved Hide resolved

rohanchkrabrty requested a review from paanSinghCoder April 1, 2026 08:28

paanSinghCoder approved these changes Apr 2, 2026

View reviewed changes

rohanchkrabrty added 2 commits April 2, 2026 11:36

Merge branch 'main' into feat-general-revamp

5cf1c37

fix: client demo for new ui

a69239f

vercel bot deployed to Preview April 2, 2026 06:24 View deployment

rohanchkrabrty enabled auto-merge (squash) April 2, 2026 06:24

coderabbitai bot reviewed Apr 2, 2026

View reviewed changes

web/apps/client-demo/src/pages/Home.tsx Show resolved Hide resolved

web/apps/client-demo/src/pages/Home.tsx Show resolved Hide resolved

web/sdk/package.json Show resolved Hide resolved

rohanchkrabrty disabled auto-merge April 2, 2026 08:59

rohanchkrabrty enabled auto-merge (squash) April 2, 2026 09:00

rohanchkrabrty merged commit 35b31d0 into main Apr 2, 2026
8 checks passed

rohanchkrabrty deleted the feat-general-revamp branch April 2, 2026 09:00

This was referenced Apr 6, 2026

feat: projects pages revamp #1503

Merged

feat: profile page revamp #1484

Merged

fix(sdk): handle connect RPC errors consistently #1499

Merged

feat: tokens page revamp #1517

Open

Conversation

rohanchkrabrty commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

vercel bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coveralls commented Apr 2, 2026

Pull Request Test Coverage Report for Build 23887122760

Details

💛 - Coveralls

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rohanchkrabrty commented Mar 26, 2026 •

edited

Loading

vercel bot commented Mar 26, 2026 •

edited

Loading

coderabbitai bot commented Mar 26, 2026 •

edited

Loading