Portal: Add bridge widget playground links #8575
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughRenames the Bridge Widget integration type from "component" to "react", adds URL-backed default-tab support and URL synchronization for the playground, updates page signature to accept searchParams, adds "Try it out" playground cards in portal docs, and updates the portal sidebar Playground URL to the bridge playground path. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
🔇 Additional comments (4)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
github-actions
bot
added
Playground
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8575 +/- ##
=======================================
Coverage 54.47% 54.47%
=======================================
Files 922 922
Lines 61361 61361
Branches 4149 4149
=======================================
Hits 33425 33425
Misses 27835 27835
Partials 101 101
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/playground-web/src/app/bridge/bridge-widget/page.tsx (1)
23-34: Correct Next.js 15 async searchParams migration.The implementation correctly follows Next.js 15's pattern where
searchParamsis a Promise that must be awaited. The validation logic properly handles both string and string[] cases, with appropriate fallback toundefinedfor invalid values.Optional: Add explicit return type for better IDE support
-export default async function Page(props: { +export default async function Page(props: { searchParams: Promise<{ tab?: string | undefined | string[]; }>; -}) { +}): Promise<JSX.Element> {This addition is purely for documentation and IDE autocomplete—the function is correctly typed without it.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
apps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsx(2 hunks)apps/playground-web/src/app/bridge/bridge-widget/components/code.tsx(2 hunks)apps/playground-web/src/app/bridge/bridge-widget/components/types.ts(1 hunks)apps/playground-web/src/app/bridge/bridge-widget/page.tsx(3 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx(2 hunks)apps/portal/src/app/bridge/bridge-widget/page.mdx(2 hunks)apps/portal/src/app/bridge/bridge-widget/react/page.mdx(2 hunks)apps/portal/src/app/bridge/bridge-widget/script/page.mdx(2 hunks)apps/portal/src/app/bridge/sidebar.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/playground-web/src/app/bridge/bridge-widget/components/types.tsapps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsxapps/playground-web/src/app/bridge/bridge-widget/page.tsxapps/portal/src/app/bridge/sidebar.tsxapps/playground-web/src/app/bridge/bridge-widget/components/code.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/playground-web/src/app/bridge/bridge-widget/components/types.tsapps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsxapps/playground-web/src/app/bridge/bridge-widget/page.tsxapps/playground-web/src/app/bridge/bridge-widget/components/code.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/playground-web/src/app/bridge/bridge-widget/components/types.tsapps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsxapps/playground-web/src/app/bridge/bridge-widget/page.tsxapps/portal/src/app/bridge/sidebar.tsxapps/playground-web/src/app/bridge/bridge-widget/components/code.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/app/bridge/bridge-widget/components/types.tsapps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsxapps/playground-web/src/app/bridge/bridge-widget/page.tsxapps/portal/src/app/bridge/sidebar.tsxapps/playground-web/src/app/bridge/bridge-widget/components/code.tsx
🧬 Code graph analysis (2)
apps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsx (1)
apps/playground-web/src/app/bridge/bridge-widget/components/types.ts (1)
BridgeWidgetPlaygroundOptions(7-28)
apps/playground-web/src/app/bridge/bridge-widget/page.tsx (1)
apps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsx (1)
BridgeWidgetPlayground(22-79)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
apps/portal/src/app/bridge/sidebar.tsx (1)
16-16: LGTM - Playground link now points to bridge-specific path.The updated URL correctly routes to the bridge widget playground, aligning with the new routing structure introduced in this PR.
apps/portal/src/app/bridge/bridge-widget/script/page.mdx (2)
1-9: LGTM - Import organization is clean.Imports are well-organized with ArticleIconCard and PlayIcon added to support the new playground CTA section.
61-68: LGTM - Playground CTA section is consistent with other documentation pages.The "Try it out" section with the playground link follows the same pattern used across other bridge-widget documentation pages, and the
?tab=scriptparameter correctly defaults to the script integration tab.apps/portal/src/app/bridge/bridge-widget/page.mdx (2)
9-9: LGTM - PlayIcon import added for playground CTA.
61-71: LGTM - Playground CTA section added consistently.The playground link appropriately omits a tab parameter since this is an overview page, allowing the playground to use its default tab.
apps/portal/src/app/bridge/bridge-widget/react/page.mdx (2)
1-8: LGTM - Imports consolidated and PlayIcon added.
82-91: LGTM - Playground CTA correctly uses?tab=reactparameter.The tab parameter correctly uses "react" (not "component"), aligning with the type rename in this PR.
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx (2)
1-14: LGTM - Import organization improved.Moving image imports to the top and consolidating related imports improves readability.
50-58: LGTM - Playground CTA section added with correct tab parameter.apps/playground-web/src/app/bridge/bridge-widget/components/bridge-playground.tsx (2)
22-32: LGTM - defaultTab prop cleanly integrates with state initialization.The prop type correctly matches the
BridgeWidgetPlaygroundOptions.integrationTypeunion, and the state initialization properly mergesdefaultTabwithdefaultOptionsusing a functional initializer to avoid re-computation on every render.
63-64: LGTM - React tab correctly uses "react" integration type.Both the
onClickhandler andisActivecheck have been consistently updated from "component" to "react", aligning with the type rename.apps/playground-web/src/app/bridge/bridge-widget/components/code.tsx (2)
28-28: LGTM - Language mapping correctly updated for React integration.The lang prop now correctly maps
"react"integration type to"tsx"syntax highlighting.
39-41: LGTM - Code generation path updated to use "react" integration type.The condition correctly routes to
getCode_ReactComponentwhenintegrationType === "react", consistent with the type rename.apps/playground-web/src/app/bridge/bridge-widget/components/types.ts (1)
8-8: All usages ofintegrationTypecorrectly updated to "react" from "component".The rename has been consistently applied. Verification confirms:
types.tsline 8 definesintegrationType: "iframe" | "script" | "react"bridge-playground.tsxlines 63-64 set and compare against"react"code.tsxlines 28, 39 check forintegrationType === "react"- No remaining "component" string references exist in the bridge-widget directory
- No localStorage or URL parameters rely on the old value
apps/playground-web/src/app/bridge/bridge-widget/page.tsx (2)
11-12: LGTM! Idiomatic TypeScript pattern for deriving union types.The
as constassertion combined with indexed access type creates a type-safe union from the array literal, ensuring a single source of truth for valid tab values.
44-44: LGTM! Proper integration with BridgeWidgetPlayground.The
validTabvalue (of typeValidTabs | undefined) correctly matches thedefaultTabprop signature, enabling URL-driven initial tab selection while falling back to the component's internal default when no valid tab is provided.
MananTank
force-pushed
the
12-18-portal_add_bridge_widget_playground_links
branch
from
b898a88 to
3687b8f
Compare
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on updating the `Bridge Widget` to enhance its integration options and improve user experience by adding a live playground feature. It modifies the integration types, updates the code logic, and introduces new UI components for better functionality.
### Detailed summary
- Changed `href` in `sidebar.tsx` for the Playground link.
- Updated `integrationType` options in `types.ts` to include "react".
- Adjusted code language conditions in `code.tsx` based on `integrationType`.
- Added `PlayIcon` and `ArticleIconCard` components in multiple `.mdx` files.
- Introduced a "Try it out" section in several `.mdx` files for the Playground.
- Modified the `Page` component to accept `searchParams` and determine the valid tab.
- Enhanced `BridgeWidgetPlayground` to manage URL updates based on the selected integration type.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Playground now supports URL parameters to pre-select integration tabs and keeps the browser URL in sync when switching tabs
* React integration tab standardized and labeled consistently with other tabs
* **Documentation**
* Added "Try it out" call-to-action cards throughout docs linking to the live playground
* **Chores**
* Sidebar playground link updated to point to the bridge-specific playground URL
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
12-18-portal_add_bridge_widget_playground_links
branch
from
3687b8f to
9383ccd
Compare
graphite-app
bot
deleted the
12-18-portal_add_bridge_widget_playground_links
branch
PR-Codex overview
This PR focuses on updating the
BridgeWidgetfunctionality and improving the documentation for the Bridge Widget Playground. It modifies integration types, adjusts code handling, and enhances the user experience by adding new features and documentation entries.Detailed summary
hrefinsidebar.tsxto point to the new playground URL.integrationTypeintypes.tsfrom"script" | "component" | "iframe"to"iframe" | "script" | "react".code.tsxbased onintegrationType.getCodefunction.ArticleIconCardcomponents in multiple.mdxfiles for the Bridge Widget Playground.validTabsarray inpage.tsxfor tab validation.Pagecomponent to acceptsearchParamsand handle tab selection.BridgeWidgetPlaygroundcomponent to manage URL updates based on selected tab.Summary by CodeRabbit
New Features
User-facing Changes
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.