calycekr opened a new pull request, #3292: URL: https://github.com/apache/apisix-dashboard/pull/3292
**Why submit this pull request?** - [ ] Bugfix - [x] New feature provided - [x] Improve performance - [ ] Backport patches **What changes will this PR take into?** This PR enhances the dashboard's UI/UX for better operator experience. ### Screenshots <img width="1818" height="887" alt="image" src="https://github.com/user-attachments/assets/2d59abf2-4b1f-4733-a70d-1b3260491a4b"; /> <img width="1812" height="1164" alt="image" src="https://github.com/user-attachments/assets/d2e24eab-21e3-4046-96ac-7623175d4aaf"; /> <img width="1803" height="1006" alt="image" src="https://github.com/user-attachments/assets/1d1c87eb-fb7d-4462-94a3-2a9a362216c8"; /> ### 1. JSON View for Advanced Users - Add JSON editing mode for all Add and Detail pages - Direct JSON editing for power users who prefer raw configuration - Toggle between Form View and JSON View with unsaved changes warning - Preview JSON output while in Form mode ### 2. Form View Improvements - Inline editing from list pages via action menu (no page navigation needed) - Form/JSON edit drawers for quick modifications - Improved button layout and form sections - Better field descriptions and placeholders ### 3. Table View Improvements - Add search functionality with debounced input - Enable table options: reload, density toggle, column visibility - Add informative columns: - Routes: Methods, Hosts, Status - SSLs: Type, Expiration (with color-coded badges) - Consumers: Group ID, Plugins - Upstreams: Type, Nodes count - Fix tooltip overflow causing layout shift ### New Components | Component | Description | |-----------|-------------| | `FormEditDrawer` | Form editing in side drawer | | `JSONEditDrawer` | JSON editing in side drawer | | `JSONEditorView` | JSON editor with Monaco | | `PreviewJSONModal` | Preview JSON output from form | | `SafeTabSwitch` | Tab switch with unsaved changes warning | | `TableActionMenu` | Kebab menu for table row actions | | `RouteList` | Reusable route list component | | `StreamRouteList` | Reusable stream route list component | | `ToAddPageBtn` | Add button with Form/JSON dropdown | ### New Hooks | Hook | Description | |------|-------------| | `useDirtyState` | Track form dirty/unsaved state | | `useTableSearch` | Reusable table search logic | | `useUnifiedResourceState` | Unified state management for resources | | `useUnifiedRouteState` | Route-specific state management | ### New Utils | Utility | Description | |---------|-------------| | `json-transformer.ts` | JSON transformation utilities | | `route-transformer.ts` | Route data transformation | **Related issues** N/A (improvement based on user experience) **Checklist:** - [x] Did you explain what problem does this PR solve? Or what new features have been added? - [ ] Have you added corresponding test cases? - [ ] Have you modified the corresponding document? - [x] Is this PR backward compatible? -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
