feat: enhance UI/UX with JSON editing, improved forms, and better table views #3292
Conversation
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
- Add Form/JSON mode toggle for all Add pages via ?mode=json search param - Add Form/JSON mode toggle for all Detail pages with edit capability - Add TableActionMenu component with kebab dropdown for list pages - Add FormEditDrawer and JSONEditDrawer for inline editing from lists - Add PreviewJSONButton to preview JSON output in Form mode - Simplify JSON templates to contain only required fields - Improve button layout: Preview JSON on left, Cancel/Save on right - Add resource-specific name placeholders (my-route-name, my-service-name, etc.) New components: - FormEditDrawer, JSONEditDrawer, JSONEditorView - PreviewJSONModal, SafeTabSwitch, TableActionMenu
- Add toolbar search with debounced input across all list pages - Enable ProTable options (reload, density, column settings) - Add new columns: Methods, Hosts, Status for Routes; Type, Expiration for SSLs; Group ID, Plugins for Consumers; Type, Nodes for Upstreams - Add ellipsis for long text columns to prevent overflow - Fix tooltip overflow causing layout shift via CSS - Reduce PageHeader spacing for tighter layout - Extract RouteList and StreamRouteList as reusable components - Add useTableSearch custom hook for code reuse - Fix RespStreamRouteItem type referencing wrong schema - Add validity_start/validity_end to SSL schema - Add id, uri search params to pageSearchSchema - Improve detail page button layout (Preview JSON left, Cancel/Save right) - Add translations for table.methods, table.hosts in all locales
The onSuccess callback from page components returns a Promise from queryClient.invalidateQueries(). Without awaiting it, the drawer closes before the list query invalidation completes, causing the table to not refresh after saving.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR significantly enhances the APISIX Dashboard's UI/UX by introducing dual-mode editing (Form/JSON), inline table editing via drawers, improved search functionality, and better table views with additional informative columns. The changes affect list pages, add pages, and introduce several reusable components and hooks for consistent behavior across resources.
Changes:
- Added JSON editing mode for all resource pages alongside the traditional form view
- Introduced inline editing drawers (Form and JSON) accessible from table action menus for quick modifications
- Enhanced table views with search, additional columns (methods, hosts, status, plugins, etc.), and better visual indicators
- Created reusable components and hooks for consistent state management and UI patterns
Reviewed changes
Copilot reviewed 82 out of 82 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/route-transformer.ts | Route data transformation utilities for API/Form/JSON conversions |
| src/utils/json-transformer.ts | Generic JSON transformation utilities |
| src/hooks/useDirtyState.ts | Hook for tracking unsaved changes with deep comparison |
| src/hooks/useTableSearch.ts | Reusable table search with debouncing |
| src/hooks/useUnifiedRouteState.ts | Route-specific unified state management |
| src/components/page/FormEditDrawer.tsx | Form editing in side drawer |
| src/components/page/JSONEditDrawer.tsx | JSON editing in side drawer |
| src/components/page/JSONEditorView.tsx | Monaco-based JSON editor component |
| src/components/page/PreviewJSONModal.tsx | JSON preview modal for form data |
| src/components/page/SafeTabSwitch.tsx | Tab switching with unsaved changes warning |
| src/components/page/TableActionMenu.tsx | Kebab menu for table row actions |
| src/components/page/RouteList.tsx | Reusable route list component |
| src/components/page/StreamRouteList.tsx | Reusable stream route list component |
| src/components/page/ToAddPageBtn.tsx | Enhanced with dropdown for Form/JSON selection |
| src/routes/**/*.tsx | Multiple routes updated with Form/JSON mode support and inline editing |
| src/types/schema/*.ts | Schema updates for SSL expiration, StreamRoute type fix, pageSearch extensions |
| src/locales/**/common.json | Translation additions for new UI features |
| src/styles/global.css | CSS fixes for tooltips and editor styling |
| src/components/form-slice/**/*.tsx | Form improvements with descriptions and better styling |
| e2e/tests/**/*.spec.ts | Minor formatting improvements |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Set sensible defaults for upstream node: port=80, weight=1 - Remove placeholder from Service ID field Co-Authored-By: Claude Opus 4.5 <[email protected]>
Previously, upstream nodes were only synced to react-hook-form when clicking outside the table (useClickOutside). This caused data loss when users edited nodes and clicked Save without clicking elsewhere.
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.
Why submit this pull request?
What changes will this PR take into?
This PR enhances the dashboard's UI/UX for better operator experience.
Screenshots
1. JSON View for Advanced Users
2. Form View Improvements
3. Table View Improvements
New Components
FormEditDrawerJSONEditDrawerJSONEditorViewPreviewJSONModalSafeTabSwitchTableActionMenuRouteListStreamRouteListToAddPageBtnNew Hooks
useDirtyStateuseTableSearchuseUnifiedResourceStateuseUnifiedRouteStateNew Utils
json-transformer.tsroute-transformer.tsRelated issues
N/A (improvement based on user experience)
Checklist: