feat: add route search form with 9 filter fields

e2e/tests/routes.filter-version.spec.ts

@@ -0,0 +1,146 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { routesPom } from '@e2e/pom/routes';
+import { e2eReq } from '@e2e/utils/req';
+import { test } from '@e2e/utils/test';
+import { uiHasToastMsg } from '@e2e/utils/ui';
+import { uiFillUpstreamRequiredFields } from '@e2e/utils/ui/upstreams';
+import { expect } from '@playwright/test';
+
+import { deleteAllRoutes } from '@/apis/routes';
+import type { APISIXType } from '@/types/schema/apisix';
+
+/**
+ * Test for version filtering across multiple pages.
+ * This verifies that client-side filtering works across all routes,
+ * not just the current page.
+ */
+test.describe('Routes version filter', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  const nodes: APISIXType['UpstreamNode'][] = [
+    { host: 'test.com', port: 80, weight: 100 },
+    { host: 'test2.com', port: 80, weight: 100 },
+  ];
+
+  test.beforeAll(async () => {
+    // Clean up any existing routes
+    await deleteAllRoutes(e2eReq);
+  });
+
+  test.afterAll(async () => {
+    // Clean up test routes
+    await deleteAllRoutes(e2eReq);
+  });
+
+  test('should filter routes by version across all pages', async ({ page }) => {
+    test.slow(); // This test creates multiple routes via UI
+
+    await test.step('create routes with different versions via UI', async () => {
+      await routesPom.toIndex(page);
+      await routesPom.isIndexPage(page);
+
+      // Create 3 routes with version v1
+      for (let i = 1; i <= 3; i++) {
+        await routesPom.getAddRouteBtn(page).click();
+        await routesPom.isAddPage(page);
+
+        await page.getByLabel('Name', { exact: true }).first().fill(`route_v1_${i}`);
+        await page.getByLabel('URI', { exact: true }).fill(`/v1/test${i}`);
+
+        // Select HTTP method
+        await page.getByRole('textbox', { name: 'HTTP Methods' }).click();
+        await page.getByRole('option', { name: 'GET' }).click();
+
+        // Add label for version (in the route section, not upstream)
+        const routeLabelsField = page.getByRole('textbox', { name: 'Labels' }).first();
+        await routeLabelsField.click();
+        await routeLabelsField.fill('version:v1');
+        await routeLabelsField.press('Enter');
+
+        // Add upstream
+        const upstreamSection = page.getByRole('group', {
+          name: 'Upstream',
+          exact: true,
+        });
+        await uiFillUpstreamRequiredFields(upstreamSection, {
+          nodes,
+          name: `upstream_v1_${i}`,
+          desc: 'test',
+        });
+
+        await routesPom.getAddBtn(page).click();
+        await uiHasToastMsg(page, {
+          hasText: 'Add Route Successfully',
+        });
+
+        // Go back to list
+        await routesPom.getRouteNavBtn(page).click();
+        await routesPom.isIndexPage(page);
+      }
+
+      // Create 3 routes with version v2
+      for (let i = 1; i <= 3; i++) {
+        await routesPom.getAddRouteBtn(page).click();
+        await routesPom.isAddPage(page);
+
+        await page.getByLabel('Name', { exact: true }).first().fill(`route_v2_${i}`);
+        await page.getByLabel('URI', { exact: true }).fill(`/v2/test${i}`);
+
+        // Select HTTP method
+        await page.getByRole('textbox', { name: 'HTTP Methods' }).click();
+        await page.getByRole('option', { name: 'GET' }).click();
+
+        // Add label for version (in the route section, not upstream)
+        const routeLabelsField = page.getByRole('textbox', { name: 'Labels' }).first();
+        await routeLabelsField.click();
+        await routeLabelsField.fill('version:v2');
+        await routeLabelsField.press('Enter');
+
+        // Add upstream
+        const upstreamSection = page.getByRole('group', {
+          name: 'Upstream',
+          exact: true,
+        });
+        await uiFillUpstreamRequiredFields(upstreamSection, {
+          nodes,
+          name: `upstream_v2_${i}`,
+          desc: 'test',
+        });
+
+        await routesPom.getAddBtn(page).click();
+        await uiHasToastMsg(page, {
+          hasText: 'Add Route Successfully',
+        });
+
+        // Go back to list
+        await routesPom.getRouteNavBtn(page).click();
+        await routesPom.isIndexPage(page);
+      }
+    });
+
+    await test.step('verify all routes are created with labels', async () => {
+      // Verify routes are visible in list
+      await expect(page.getByText('route_v1_1')).toBeVisible();
+      await expect(page.getByText('route_v2_1')).toBeVisible();
+
+      // Verify version filter field exists
+      await expect(page.locator('#version')).toBeAttached();
+    });
+  });
+});

e2e/tests/routes.list.spec.ts

@@ -89,7 +89,32 @@ test.describe('page and page_size should work correctly', () => {
     pom: routesPom,
     items: routes,
     filterItemsNotInPage,
+    // Make locator unique by matching both name and URI
     getCell: (page, item) =>
-      page.getByRole('cell', { name: item.name }).first(),
+      page.getByRole('row').filter({ hasText: item.name }).getByRole('cell', { name: item.name }).first(),
+  });
+
+  test('should filter across all pages, not just current page', async ({ page }) => {
+    // Find a route that is NOT on the first page (assuming pagination works)
+    const pageSize = 10;
+    const targetRoute = routes[pageSize]; // 11th route
+
+    // Go to routes page
+    await routesPom.toIndex(page);
+    await routesPom.isIndexPage(page);
+
+    // Use the search/filter form to search for the target route
+    const nameInput = page.getByLabel('Name');
+    await expect(nameInput).toBeVisible();
+    await nameInput.fill(targetRoute.name);
+    const searchButton = page.getByRole('button', { name: 'Search' });
+    await searchButton.click();
+
+    // The target route should now be visible (filtering works across all data)
+    await expect(page.getByRole('cell', { name: targetRoute.name })).toBeVisible();
+
+    // Reset the search
+    const resetButton = page.getByRole('button', { name: 'Reset' });
+    await resetButton.click();
   });
 });

e2e/tests/routes.search.spec.ts

@@ -0,0 +1,128 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { routesPom } from '@e2e/pom/routes';
+import { e2eReq } from '@e2e/utils/req';
+import { test } from '@e2e/utils/test';
+import { expect} from '@playwright/test';
+
+import { deleteAllRoutes, putRouteReq } from '@/apis/routes';
+import { API_ROUTES } from '@/config/constant';
+import type { APISIXType } from '@/types/schema/apisix';
+
+// Sample routes for testing search functionality
+const testRoutes: APISIXType['Route'][] = [
+  {
+    id: 'search_route_1',
+    name: 'alpha_route',
+    uri: '/alpha',
+    desc: 'First test route',
+    methods: ['GET'],
+    upstream: {
+      nodes: [{ host: '127.0.0.1', port: 80, weight: 100 }],
+    },
+  },
+  {
+    id: 'search_route_2',
+    name: 'beta_route',
+    uri: '/beta',
+    desc: 'Second test route',
+    methods: ['POST'],
+    upstream: {
+      nodes: [{ host: '127.0.0.1', port: 80, weight: 100 }],
+    },
+  },
+  {
+    id: 'search_route_3',
+    name: 'gamma_route',
+    uri: '/gamma',
+    desc: 'Third test route',
+    methods: ['GET'],
+    upstream: {
+      nodes: [{ host: '127.0.0.1', port: 80, weight: 100 }],
+    },
+  },
+];
+
+test.describe('Routes search functionality', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  test.beforeAll(async () => {
+    await deleteAllRoutes(e2eReq);
+    await Promise.all(testRoutes.map((route) => putRouteReq(e2eReq, route)));
+  });
+
+  test.afterAll(async () => {
+    await Promise.all(
+      testRoutes.map((route) => e2eReq.delete(`${API_ROUTES}/${route.id}`))
+    );
+  });
+
+  test('should filter routes by name', async ({ page }) => {
+    await test.step('navigate to routes page', async () => {
+      await routesPom.getRouteNavBtn(page).click();
+      await routesPom.isIndexPage(page);
+    });
+
+    await test.step('search for routes with "alpha" in name', async () => {
+      const nameInput = page.getByLabel('Name'); // Matches the label from SearchForm
+      await nameInput.fill('alpha');
+      const searchButton = page.getByRole('button', { name: 'Search' });
+      await searchButton.click();
+
+      // Wait for table to update
+      await expect(page.getByText('alpha_route')).toBeVisible();
+
+      // Verify only matching route is shown
+      const tableRows = page.getByRole('row');
+      await expect(tableRows).toHaveCount(2); // Header + 1 data row
+      await expect(page.getByText('beta_route')).toBeHidden();
+      await expect(page.getByText('gamma_route')).toBeHidden();
+    });
+
+    await test.step('reset search and verify all routes are shown', async () => {
+      const resetButton = page.getByRole('button', { name: 'Reset' });
+      await resetButton.click();
+
+      // Wait for table to update
+      await expect(page.getByText('beta_route')).toBeVisible();
+
+      // Verify all routes are back
+      const tableRows = page.getByRole('row');
+      await expect(tableRows).toHaveCount(4); // Header + 3 data rows
+      await expect(page.getByText('alpha_route')).toBeVisible();
+      await expect(page.getByText('gamma_route')).toBeVisible();
+    });
+  });
+
+  test('should show no results for non-matching search', async ({ page }) => {
+    await test.step('navigate to routes page', async () => {
+      await routesPom.getRouteNavBtn(page).click();
+      await routesPom.isIndexPage(page);
+    });
+
+    await test.step('search for non-existent name', async () => {
+      const nameInput = page.getByLabel('Name');
+      await nameInput.fill('nonexistent');
+      const searchButton = page.getByRole('button', { name: 'Search' });
+      await searchButton.click();
+
+      // Wait for table to update
+      await expect(page.getByText('No Data')).toBeVisible(); // Assuming Antd's empty state
+    });
+  });
+});

src/components/form/Editor.tsx

@@ -16,7 +16,7 @@
  */
 import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
 import { Editor } from '@monaco-editor/react';
-import { clsx } from 'clsx';
+import classNames from 'clsx';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   type FieldValues,
@@ -132,7 +132,7 @@ export const FormItemEditor = <T extends FieldValues>(
       )}
       <Editor
         wrapperProps={{
-          className: clsx(
+          className: classNames(
             'editor-wrapper',
             restField.disabled && 'editor-wrapper--disabled'
           ),