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

e2e/tests/consumer_groups.list.spec.ts

@@ -47,6 +47,7 @@ const consumerGroups: APISIXType['ConsumerGroupPut'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllConsumerGroups(e2eReq);
     await Promise.all(

e2e/tests/consumers.list.spec.ts

@@ -49,6 +49,7 @@ const consumers: APISIXType['ConsumerPut'][] = Array.from({ length: 11 }, (_, i)
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllConsumers(e2eReq);
     await Promise.all(consumers.map((d) => putConsumerReq(e2eReq, d)));

e2e/tests/hot-path.upstream-service-route.spec.ts

@@ -61,6 +61,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
     scheme: 'https',
     nodes: [{ host: 'httpbin.org', port: 443 }],
   };
+
   await test.step('create upstream', async () => {
     // Navigate to the upstream list page
     await upstreamsPom.toIndex(page);
@@ -158,6 +159,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
       },
     },
   } satisfies Partial<APISIXType['Service']>;
+
   await test.step('create service', async () => {
     // upstream id should be set
     expect(service.upstream_id).not.toBeUndefined();
@@ -275,6 +277,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
       },
     },
   };
+
   await test.step('create route', async () => {
     // service id should be set
     expect(route.service_id).not.toBeUndefined();

e2e/tests/plugin_configs.list.spec.ts

@@ -67,6 +67,7 @@ const pluginConfigs: APISIXType['PluginConfigPut'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllPluginConfigs(e2eReq);
     await Promise.all(pluginConfigs.map((d) => putPluginConfigReq(e2eReq, d)));

e2e/tests/protos.list.spec.ts

@@ -55,6 +55,7 @@ message TestMessage${i + 1} {
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     // Delete all existing protos
     const existingProtos = await e2eReq

e2e/tests/routes.list.spec.ts

@@ -63,6 +63,7 @@ const routes: APISIXType['Route'][] = Array.from({ length: 11 }, (_, i) => ({
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllRoutes(e2eReq);
     await Promise.all(routes.map((d) => putRouteReq(e2eReq, d)));

e2e/tests/services.crud-required-fields.spec.ts

@@ -41,6 +41,7 @@ test('should CRUD service with required fields', async ({ page }) => {
 
   await servicesPom.getAddServiceBtn(page).click();
   await servicesPom.isAddPage(page);
+
   await test.step('submit with required fields', async () => {
     await uiFillServiceRequiredFields(page, {
       name: serviceName,

e2e/tests/services.list.spec.ts

@@ -55,6 +55,7 @@ const services: APISIXType['Service'][] = Array.from({ length: 11 }, (_, i) => (
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllServices(e2eReq);
     await Promise.all(

e2e/tests/stream_routes.list.spec.ts

@@ -58,6 +58,7 @@ const streamRoutes: APISIXType['StreamRoute'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllStreamRoutes(e2eReq);
     await Promise.all(

e2e/tests/upstreams.list.spec.ts

@@ -60,6 +60,7 @@ const upstreams: APISIXType['Upstream'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllUpstreams(e2eReq);
     await Promise.all(upstreams.map((d) => putUpstreamReq(e2eReq, d)));

src/apis/routes.ts

@@ -48,6 +48,12 @@ export const putRouteReq = (req: AxiosInstance, data: APISIXType['Route']) => {
 export const postRouteReq = (req: AxiosInstance, data: RoutePostType) =>
   req.post<unknown, APISIXType['RespRouteDetail']>(API_ROUTES, data);
 
+// Raw JSON POST for JSON View - accepts APISIX format directly
+export const postRouteRawReq = (
+  req: AxiosInstance,
+  data: Omit<APISIXType['Route'], 'id' | 'create_time' | 'update_time'>
+) => req.post<unknown, APISIXType['RespRouteDetail']>(API_ROUTES, data);
+
 export const deleteAllRoutes = async (req: AxiosInstance) => {
   const totalRes = await getRouteListReq(req, {
     page: 1,

src/components/form-slice/FormPartBasic.tsx

@@ -61,6 +61,7 @@ export type FormPartBasicProps = Omit<FormSectionProps, 'form'> &
     showName?: boolean;
     showDesc?: boolean;
     showLabels?: boolean;
+    namePlaceholder?: string;
   };
 
 export const FormPartBasic = (props: FormPartBasicProps) => {
@@ -71,6 +72,7 @@ export const FormPartBasic = (props: FormPartBasicProps) => {
     showName = true,
     showDesc = true,
     showLabels = true,
+    namePlaceholder,
     ...restProps
   } = props;
   const { control } = useFormContext<APISIXType['Basic']>();
@@ -84,17 +86,26 @@ export const FormPartBasic = (props: FormPartBasicProps) => {
         <FormItemTextInput
           name={np('name')}
           label={t('form.basic.name')}
+          description={t('form.basic.nameDesc')}
+          placeholder={namePlaceholder ?? t('form.basic.namePlaceholder')}
           control={control}
         />
       )}
       {showDesc && (
         <FormItemTextarea
           name={np('desc')}
           label={t('form.basic.desc')}
+          placeholder={t('form.basic.descPlaceholder')}
           control={control}
         />
       )}
-      {showLabels && <FormItemLabels name={np('labels')} control={control} />}
+      {showLabels && (
+        <FormItemLabels
+          name={np('labels')}
+          control={control}
+          description={t('form.basic.labels.desc')}
+        />
+      )}
       {showStatus && <FormItemStatus />}
       {children}
     </FormSection>

src/components/form-slice/FormPartRoute/index.tsx

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Divider, InputWrapper } from '@mantine/core';
+import { Divider, InputWrapper, Text } from '@mantine/core';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -39,11 +39,12 @@ const FormPartBasicWithPriority = () => {
   const { t } = useTranslation();
   const { control } = useFormContext<RoutePostType>();
   return (
-    <FormPartBasic showStatus>
+    <FormPartBasic showStatus namePlaceholder="my-route-name">
       <FormItemNumberInput
         control={control}
         name="priority"
         label={t('form.routes.priority')}
+        description={t('form.routes.priorityDesc')}
         defaultValue={zGetDefault(APISIX.Route).priority!}
       />
     </FormPartBasic>
@@ -55,55 +56,75 @@ const FormSectionMatchRules = () => {
   const { control } = useFormContext<RoutePostType>();
   return (
     <FormSection legend={t('form.routes.matchRules')}>
+      <Text size="sm" c="dimmed" mb="md">
+        {t('form.routes.matchRulesDesc')}
+      </Text>
       <FormItemTagsInput
         control={control}
         name="methods"
         label={t('form.routes.methods')}
+        description={t('form.routes.methodsDesc')}
         data={APISIX.HttpMethod.options.map((v) => v.value)}
         searchValue=""
       />
-      <InputWrapper label={t('form.routes.enableWebsocket')}>
+      <InputWrapper
+        label={t('form.routes.enableWebsocket')}
+        description={t('form.routes.enableWebsocketDesc')}
+      >
         <FormItemSwitch control={control} name="enable_websocket" />
       </InputWrapper>
       <FormItemTextInput
         control={control}
         name="uri"
         label={t('form.routes.uri')}
+        description={t('form.routes.uriDesc')}
+        placeholder={t('form.routes.uriPlaceholder')}
+        withAsterisk
       />
       <FormItemTagsInput
         control={control}
         name="uris"
         label={t('form.routes.uris')}
+        description={t('form.routes.urisDesc')}
       />
       <FormItemTextInput
         control={control}
         name="host"
         label={t('form.routes.host')}
+        description={t('form.routes.hostDesc')}
+        placeholder={t('form.routes.hostPlaceholder')}
       />
       <FormItemTagsInput
         control={control}
         name="hosts"
         label={t('form.routes.hosts')}
+        description={t('form.routes.hostsDesc')}
       />
       <FormItemTextInput
         control={control}
         name="remote_addr"
         label={t('form.routes.remoteAddr')}
+        description={t('form.routes.remoteAddrDesc')}
+        placeholder={t('form.routes.remoteAddrPlaceholder')}
       />
       <FormItemTagsInput
         control={control}
         name="remote_addrs"
         label={t('form.routes.remoteAddrs')}
+        description={t('form.routes.remoteAddrsDesc')}
       />
       <FormItemEditor
         control={control}
         name="vars"
         label={t('form.routes.vars')}
+        description={t('form.routes.varsDesc')}
       />
       <FormItemTextarea
         control={control}
         name="filter_func"
         label={t('form.routes.filterFunc')}
+        description={t('form.routes.filterFuncDesc')}
+        placeholder={t('form.routes.filterFuncPlaceholder')}
       />
     </FormSection>
   );
@@ -113,7 +134,10 @@ export const FormSectionUpstream = () => {
   const { t } = useTranslation();
   const { control } = useFormContext<RoutePostType>();
   return (
-    <FormSection legend={t('form.upstreams.title')}>
+    <FormSection legend={t('form.upstreams.title')} withAsterisk>
+      <Text size="sm" c="dimmed" mb="md">
+        {t('form.upstreams.requiredDesc')}
+      </Text>
       <FormSection legend={t('form.upstreams.upstreamId')}>
         <FormItemTextInput control={control} name="upstream_id" />
       </FormSection>
@@ -150,6 +174,9 @@ export const FormSectionService = () => {
       legend={t('form.routes.service')}
       disabled={readOnlyFields.includes('service_id')}
     >
+      <Text size="sm" c="dimmed" mb="md">
+        {t('form.routes.serviceDesc')}
+      </Text>
       <FormItemTextInput
         control={control}
         name="service_id"

src/components/form-slice/FormPartService/index.tsx

@@ -63,7 +63,7 @@ const FormSectionSettings = () => {
 export const FormPartService = () => {
   return (
     <>
-      <FormPartBasic />
+      <FormPartBasic namePlaceholder="my-service-name" />
       <FormSectionSettings />
       <FormSectionUpstream />
       <FormSectionPlugins />