feat(playground): improve API Playground navigation and sidebar UX#1587
Merged
Conversation
…gation functions - Introduced PlaygroundSidebar component for improved navigation within the API Playground. - Added utility functions for generating navigation items and groups, enhancing modularity and reusability. - Updated PlaygroundLayoutShell to utilize new navigation functions, streamlining the layout structure. - Enhanced RoutedSectionShell to support optional desktop navigation, improving responsiveness and user experience.
…state management - Introduced isPlaygroundSidebarOpen prop to Sidebar component for better control of sidebar visibility. - Updated LayoutShell to manage playground sidebar state, enhancing user experience and navigation consistency.
- Adjusted text formatting in the API reference for better readability. - Simplified import statements in PlaygroundRunner for cleaner code. - Enhanced button styling and layout in PlaygroundRunner for improved user experience. - Streamlined output display logic in PlaygroundRunner for better clarity.
- Updated the import of FolderInput to FilePlus for improved icon representation in the sidebar. - Enhanced the button for document import to align with the new iconography, improving visual consistency.
|
@AnishSarkar22 is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
AnishSarkar22
changed the title
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (11)
📝 WalkthroughWalkthroughIntroduces a new ChangesPlayground sidebar and layout wiring
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Sidebar
participant LayoutShell
participant PlaygroundSidebar
participant getPlaygroundActiveValue
participant getPlaygroundSelectedLabel
Sidebar->>LayoutShell: onPlaygroundItemClick()
LayoutShell->>LayoutShell: handlePlaygroundSidebarToggle()
LayoutShell->>Sidebar: isPlaygroundSidebarOpen
LayoutShell->>PlaygroundSidebar: render when expanded
PlaygroundSidebar->>getPlaygroundActiveValue: pathname, base, items
getPlaygroundActiveValue-->>PlaygroundSidebar: activeValue
PlaygroundSidebar->>getPlaygroundSelectedLabel: activeValue, items, groups
getPlaygroundSelectedLabel-->>PlaygroundSidebar: selected label
Possibly related PRs
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
PlaygroundSidebarfor clearer API Playground navigation.PlaygroundLayoutShellandRoutedSectionShellto support optional desktop navigation and better responsive behavior.isPlaygroundSidebarOpen.Motivation and Context
FIX #
Screenshots
API Changes
Change Type
Testing Performed
Checklist
High-level PR Summary
This PR introduces a new dedicated sidebar for the API Playground section with collapsible navigation groups, improves responsive design and text wrapping for mobile devices across various playground components, and includes minor UI refinements such as import formatting cleanup and icon changes. The main architectural change involves extracting playground navigation logic into a reusable
PlaygroundSidebarcomponent that integrates with the existing layout shell system.⏱️ Estimated Review Time: 30-90 minutes
💡 Review Order Suggestion
surfsense_web/components/layout/ui/index.tssurfsense_web/components/layout/index.tssurfsense_web/components/layout/ui/playground/PlaygroundSidebar.tsxsurfsense_web/components/layout/ui/RoutedSectionShell.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsxsurfsense_web/components/layout/providers/LayoutDataProvider.tsxsurfsense_web/components/layout/ui/shell/LayoutShell.tsxsurfsense_web/components/layout/ui/sidebar/Sidebar.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/playground-runner.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsxsurfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsxsurfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsxSummary by CodeRabbit
New Features
UI Improvements
Bug Fixes