refactor(SearchForm): remove placeholder text from input fields

feat(RouteList): add RouteDetailButton component and refactor search parameter handling

fix(clientSideFilter): improve filtering logic for plugins and labels

Author: DSingh0304

src/components/form/SearchForm.tsx

@@ -124,20 +124,14 @@ export const SearchForm = (props: SearchFormProps) => {
             label={t('form.searchForm.fields.name')}
             style={{ marginBottom: '16px' }}
           >
-            <Input
-              placeholder={t('form.searchForm.placeholders.name')}
-              allowClear
-            />
+            <Input allowClear />
           </Form.Item>
           <Form.Item<SearchFormValues>
             name="id"
             label={t('form.searchForm.fields.id')}
             style={{ marginBottom: '16px' }}
           >
-            <Input
-              placeholder={t('form.searchForm.placeholders.id')}
-              allowClear
-            />
+            <Input allowClear />
           </Form.Item>
         </Col>
 
@@ -148,21 +142,15 @@ export const SearchForm = (props: SearchFormProps) => {
             label={t('form.searchForm.fields.host')}
             style={{ marginBottom: '16px' }}
           >
-            <Input
-              placeholder={t('form.searchForm.placeholders.host')}
-              allowClear
-            />
+            <Input allowClear />
           </Form.Item>
           {/* Second column - second row */}
           <Form.Item<SearchFormValues>
             name="plugin"
             label={t('form.searchForm.fields.plugin')}
             style={{ marginBottom: '16px' }}
           >
-            <Input
-              placeholder={t('form.searchForm.placeholders.plugin')}
-              allowClear
-            />
+            <Input allowClear />
           </Form.Item>
         </Col>
 
@@ -173,10 +161,7 @@ export const SearchForm = (props: SearchFormProps) => {
             label={t('form.searchForm.fields.path')}
             style={{ marginBottom: '16px' }}
           >
-            <Input
-              placeholder={t('form.searchForm.placeholders.path')}
-              allowClear
-            />
+            <Input allowClear />
           </Form.Item>
           {/* Third column - second row */}
           <Form.Item<SearchFormValues>
@@ -200,10 +185,7 @@ export const SearchForm = (props: SearchFormProps) => {
             label={t('form.searchForm.fields.description')}
             style={{ marginBottom: '16px' }}
           >
-            <Input
-              placeholder={t('form.searchForm.placeholders.description')}
-              allowClear
-            />
+            <Input allowClear />
           </Form.Item>
           {/* Fourth column - second row */}
           <Form.Item<SearchFormValues>

src/locales/en/common.json

@@ -101,12 +101,6 @@
         "status": "Status"
       },
       "placeholders": {
-        "name": "Name",
-        "id": "ID",
-        "host": "Host",
-        "path": "Path",
-        "description": "Description",
-        "plugin": "Plugin",
         "labels": "Select labels",
         "version": "Select version",
         "status": "Select status"

src/routes/routes/index.tsx

@@ -46,6 +46,33 @@ export type RouteListProps = {
   }) => React.ReactNode;
 };
 
+const RouteDetailButton = ({
+  record,
+}: {
+  record: APISIXType['RespRouteItem'];
+}) => (
+  <ToDetailPageBtn
+    key="detail"
+    to="/routes/detail/$id"
+    params={{ id: record.value.id }}
+  />
+);
+
+const SEARCH_PARAM_KEYS: (keyof SearchFormValues)[] = [
+  'name',
+  'id',
+  'host',
+  'path',
+  'description',
+  'plugin',
+  'labels',
+  'version',
+  'status',
+];
+
+const mapSearchParams = (values: Partial<SearchFormValues>) =>
+  Object.fromEntries(SEARCH_PARAM_KEYS.map((key) => [key, values[key]])) as Partial<SearchFormValues>;
+
 export const RouteList = (props: RouteListProps) => {
   const { routeKey, ToDetailBtn, defaultParams } = props;
   const { data, isLoading, refetch, pagination, setParams } = useRouteList(
@@ -59,30 +86,14 @@ export const RouteList = (props: RouteListProps) => {
     // Send name filter to backend, keep others for client-side filtering
     setParams({
       page: 1,
-      name: values.name,
-      id: values.id,
-      host: values.host,
-      path: values.path,
-      description: values.description,
-      plugin: values.plugin,
-      labels: values.labels,
-      version: values.version,
-      status: values.status,
+      ...mapSearchParams(values),
     });
   };
 
   const handleReset = () => {
     setParams({
       page: 1,
-      name: undefined,
-      id: undefined,
-      host: undefined,
-      path: undefined,
-      description: undefined,
-      plugin: undefined,
-      labels: undefined,
-      version: undefined,
-      status: undefined,
+      ...mapSearchParams({}),
     });
   };
 
@@ -187,16 +198,7 @@ function RouteComponent() {
   return (
     <>
       <PageHeader title={t('sources.routes')} />
-      <RouteList
-        routeKey="/routes/"
-        ToDetailBtn={({ record }) => (
-          <ToDetailPageBtn
-            key="detail"
-            to="/routes/detail/$id"
-            params={{ id: record.value.id }}
-          />
-        )}
-      />
+      <RouteList routeKey="/routes/" ToDetailBtn={RouteDetailButton} />
     </>
   );
 }

src/utils/clientSideFilter.ts

@@ -76,14 +76,14 @@ export const filterRoutes = (
       if (!descMatch) return false;
     }
 
-    // Filter by plugin
+    // Filter by plugin: treat the filter text as a substring across all plugin names
     if (filters.plugin && routeData.plugins) {
       const pluginNames = Object.keys(routeData.plugins).join(',').toLowerCase();
       const pluginMatch = pluginNames.includes(filters.plugin.toLowerCase());
       if (!pluginMatch) return false;
     }
 
-    // Filter by labels
+    // Filter by labels: match provided label key:value tokens against route label pairs
     if (filters.labels && filters.labels.length > 0 && routeData.labels) {
       const routeLabels = Object.keys(routeData.labels).map((key) =>
         `${key}:${routeData.labels![key]}`.toLowerCase()