feat: enhance UI/UX with JSON editing, improved forms, and better table views by calycekr · Pull Request #3292 · apache/apisix-dashboard

calycekr · 2026-01-29T18:00:46Z

Why submit this pull request?

Bugfix
New feature provided
Improve performance
Backport patches

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

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:

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?
Is this PR backward compatible?

- 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.

Copilot

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 <noreply@anthropic.com>

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.

Copilot

Pull request overview

Copilot reviewed 83 out of 83 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-13T03:26:40Z

src/utils/json-transformer.ts

+/**
+ * Validate JSON syntax without parsing
+ *
+ * @param jsonString - The JSON string to validate
+ * @returns Object with isValid flag and optional error message
+ */
+export const validateJSONSyntax = (
+  jsonString: string
+): { isValid: boolean; error?: string } => {
+  try {
+    JSON.parse(jsonString);
+    return { isValid: true };


The comment says “Validate JSON syntax without parsing”, but the implementation uses JSON.parse, which does parse the JSON. Either adjust the comment (e.g., “validate by attempting to parse”) or switch to a true syntax-only validator if that’s the intent.

Copilot · 2026-02-13T03:26:41Z

src/hooks/useDirtyState.ts

+  // Update original when initialOriginal changes (e.g., after data fetch)
+  if (initialOriginal !== undefined && !initializedRef.current) {
+    initializedRef.current = true;
+    setOriginal(initialOriginal);
+    setCurrent(initialOriginal);
+  }


useDirtyState is calling setOriginal/setCurrent during render when initialOriginal arrives. This can trigger React warnings (“Cannot update a component while rendering…”) and can lead to render loops. Move this initialization into a useEffect that runs when initialOriginal changes (and reset initializedRef appropriately if you need to handle refetches).

Copilot · 2026-02-13T03:26:41Z

src/utils/route-transformer.ts

+  // Parse vars string back to array
+  if (cloned.vars && typeof cloned.vars === 'string') {
+    try {
+      cloned.vars = JSON.parse(cloned.vars as string);
+    } catch {
+      // Keep as-is if parse fails (will be caught by validation)
+      cloned.vars = [];
+    }


On JSON parse failure for vars, this silently sets vars to an empty array. Because the form schema defines vars as an optional string (no JSON validation), invalid user input will be dropped and an empty vars will be saved without any error. Prefer surfacing the parse error (e.g., keep the original string and let validation fail, or throw/return an error so the UI can block save and show feedback).

Copilot · 2026-02-13T03:26:41Z

src/components/page/TableActionMenu.tsx

+        req
+          .delete(deleteApi)
+          .then(() => onDeleteSuccess?.())
+          .then(() => {
+            notifications.show({
+              message: t('info.delete.success', { name: resourceName }),
+              color: 'green',
+            });
+            queryClient.invalidateQueries();
+          }),


queryClient.invalidateQueries() without a queryKey will invalidate all queries after every delete, which can cause unnecessary refetching and UI churn. Consider scoping invalidation to the relevant resource/list query keys (or accept a queryKey/invalidateKeys prop) and rely on onDeleteSuccess for the local list refresh.

Copilot · 2026-02-13T03:26:41Z

src/components/page/ToAddPageBtn.tsx

+    <Menu shadow="md" width={200}>
+      <Menu.Target>
+        <Button
+          leftSection={<IconPlus />}
+          rightSection={<IconChevronDown />}
+          size="compact-sm"
+          variant="gradient"
+        >
+          {label}
+        </Button>
+      </Menu.Target>


The new add button requires two clicks to reach the default (form) flow because clicking the button only opens the menu. This is a behavior change from the previous single-click navigation and is likely to break existing e2e flows and user muscle memory. Consider a split-button approach (primary click navigates to form; chevron opens the menu) or make the main button click default to form and keep JSON as the secondary menu option.

Copilot · 2026-02-13T03:26:42Z

src/components/page/ToAddPageBtn.tsx

+          {t('form.view.editWithForm')}
+        </Menu.Item>
+        <Menu.Item leftSection={<IconCode />} onClick={handleJsonClick}>
+          {t('form.view.editWithJSON')}


ToAddPageDropdown/ToDetailPageDropdown use i18n keys like form.view.createWithForm, createWithJSON, editWithForm, and editWithJSON. These keys were added in en/common.json but are currently missing from other locale files updated in this PR (e.g., de, es, tr, zh), which will cause raw key strings to show in those languages. Add the missing translations (or provide a fallback strategy).

Suggested change

{t('form.view.editWithForm')}

</Menu.Item>

<Menu.Item leftSection={<IconCode />} onClick={handleJsonClick}>

{t('form.view.editWithJSON')}

{t('form.view.editWithForm', 'Edit with form')}

</Menu.Item>

<Menu.Item leftSection={<IconCode />} onClick={handleJsonClick}>

{t('form.view.editWithJSON', 'Edit with JSON')}

calycekr added 3 commits January 29, 2026 21:36

Copilot AI review requested due to automatic review settings January 29, 2026 18:00

Copilot started reviewing on behalf of calycekr January 29, 2026 18:01 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

calycekr and others added 2 commits January 30, 2026 03:19

fix: improve form default values and remove unnecessary placeholder

7359dcc

- Set sensible defaults for upstream node: port=80, weight=1 - Remove placeholder from Service ID field Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix: sync upstream nodes to form immediately on change

e680b22

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.

Baoyuantop requested a review from Copilot February 13, 2026 03:21

Copilot started reviewing on behalf of Baoyuantop February 13, 2026 03:22 View session

Copilot AI reviewed Feb 13, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: enhance UI/UX with JSON editing, improved forms, and better table views#3292

feat: enhance UI/UX with JSON editing, improved forms, and better table views#3292
calycekr wants to merge 5 commits intoapache:masterfrom
calycekr:feat/enhance-ui-ux

calycekr commented Jan 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Copilot AI Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

calycekr commented Jan 29, 2026

Screenshots

1. JSON View for Advanced Users

2. Form View Improvements

3. Table View Improvements

New Components

New Hooks

New Utils

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant