feat: Update UI for admin interface #627
Conversation
…ion-editor-into-dedicated-route
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 97edfa2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces a new admin sections management feature for web apps, including new routes, UI components, and form logic for creating and editing admin sections. It adds an advanced asynchronous combobox field to the UI library, with supporting hooks and Storybook stories. Several files are deleted or refactored to move admin section configuration into the new route structure. New utility hooks and UI primitives are also added. Changes
Sequence Diagram(s)Admin Section Creation FlowsequenceDiagram
participant User
participant NewAdminSectionDialog
participant ProjectDefinitionContext
participant Router
User->>NewAdminSectionDialog: Open dialog and submit form
NewAdminSectionDialog->>ProjectDefinitionContext: Update project definition with new section
ProjectDefinitionContext-->>NewAdminSectionDialog: Confirmation
NewAdminSectionDialog->>Router: Navigate to edit page for new section
Async Combobox Option LoadingsequenceDiagram
participant User
participant AsyncComboboxField
participant API
User->>AsyncComboboxField: Type in search input
AsyncComboboxField->>AsyncComboboxField: Debounce input
AsyncComboboxField->>API: loadOptions(query)
API-->>AsyncComboboxField: Return options
AsyncComboboxField->>User: Display options in dropdown
Estimated code review effort🎯 5 (Critical) | ⏱️ ~90 minutes Possibly related PRs
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (8)
packages/ui-components/src/hooks/use-debounce.ts (1)
6-20: Add explicit return type annotation.The function is missing an explicit return type annotation as required by the coding guidelines for TypeScript files.
-export function useDebounce<T>(value: T, delay: number): T { +export function useDebounce<T>(value: T, delay: number): T {Actually, the return type is already present. The implementation looks good - proper generic typing, correct useEffect dependencies, and proper cleanup.
packages/project-builder-web/src/routes/apps/edit.$key/web/admin.tsx (1)
36-36: Add explicit return type annotationThe function should include an explicit return type annotation as per the coding guidelines.
-function WebAdminPage(): React.JSX.Element { +function WebAdminPage(): React.ReactElement {packages/project-builder-web/src/routes/admin-sections.$appKey/edit.$sectionKey.tsx (1)
64-64: Add explicit return type annotationThe function should include an explicit return type annotation as per the coding guidelines.
-function EditAdminSectionPage(): React.JSX.Element { +function EditAdminSectionPage(): React.ReactElement {packages/project-builder-web/src/routes/admin-sections.$appKey/-components/react-icon-combobox.tsx (2)
78-88: Use consistent return type annotation.The controller uses
React.JSX.Elementwhile the standalone component usesReact.ReactElement. For consistency, consider usingReact.ReactElementthroughout.>): React.JSX.Element { >): React.ReactElement {
106-107: Consider exporting the standalone component as well.Only the controller variant is exported. If the standalone
ReactIconComboboxcomponent might be useful independently, consider exporting it too.+export { ReactIconCombobox, ReactIconComboboxController }; -export { ReactIconComboboxController };packages/project-builder-web/src/routes/admin-sections.$appKey/-components/new-admin-section-dialog.tsx (1)
147-153: Consider using the ReactIconComboboxController for better UX.The icon field currently uses a basic
InputFieldControllerrequiring users to manually type icon names. SinceReactIconComboboxControlleris available in the same directory, consider using it for better user experience with searchable icon selection.+import { ReactIconComboboxController } from './react-icon-combobox.js'; - <InputFieldController - label="Icon" - control={control} - name="icon" - placeholder="e.g. MdPeople, MdArticle" - description="React icon component name (optional)" - /> + <ReactIconComboboxController + label="Icon" + control={control} + name="icon" + description="Select an icon for this section (optional)" + />packages/project-builder-web/src/routes/admin-sections.$appKey/-components/admin-crud-section-form.tsx (2)
41-42: Consider addressing or documenting the TODO comments.The TODO comments reference React Hook Form issues. Consider either:
- Implementing solutions for these known issues
- Adding more detailed documentation about the limitations
- Creating tracking issues if these need future attention
Would you like me to help research solutions for the React Hook Form discussion mentioned in the TODO, or create tracking issues for these items?
Also applies to: 52-52
87-87: Type casting suggests potential type compatibility issues.The type assertions (
as unknown as Control<...>andas unknown as UseFormReturn<...>) indicate that the form types may not be perfectly aligned. Consider:
- Ensuring type definitions are properly aligned between components
- Using more specific typing to avoid the need for type assertions
- Adding comments explaining why the casting is necessary
If the type mismatches are due to schema differences, consider creating wrapper types or adjusting the component interfaces to avoid runtime type assertions.
Also applies to: 102-103
packages/project-builder-web/src/routes/admin-sections.$appKey/edit.$sectionKey.tsx
Show resolved
Hide resolved
packages/project-builder-web/src/routes/admin-sections.$appKey/edit.$sectionKey.tsx
Show resolved
Hide resolved
packages/ui-components/src/components/ui/async-combobox-field/async-combobox-field.tsx
Show resolved
Hide resolved
kingston
deleted the
kingston/eng-834-improve-admin-ui-split-section-editor-into-dedicated-route
branch
Summary by CodeRabbit
New Features
AsyncComboboxFieldwith debounced search, configurable loading delays, persistent selections, and comprehensive error handling.Improvements
Bug Fixes
Documentation
Chores