feat: Add search limit alert to tables and refactor clsx import.

Author: DSingh0304

src/components/form/Editor.tsx

@@ -16,7 +16,7 @@
  */
 import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
 import { Editor } from '@monaco-editor/react';
-import classNames from 'clsx';
+import { clsx } 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: classNames(
+          className: clsx(
             'editor-wrapper',
             restField.disabled && 'editor-wrapper--disabled'
           ),

src/locales/en/common.json

@@ -387,9 +387,10 @@
   "table": {
     "actions": "Actions",
     "disabled": "Disabled",
-    "enabled": "Enabled"
+    "enabled": "Enabled",
+    "searchLimit": "Search only allows searching in the first {{count}} records."
   },
   "upstreams": {
     "singular": "Upstream"
   }
-}
+}

src/routes/routes/index.tsx

@@ -129,7 +129,7 @@ export const RouteList = (props: RouteListProps) => {
         totalCount: paginated.total,
       };
     }
-    
+
     // Otherwise, use paginated data from backend
     return {
       filteredData: data?.list || [],
@@ -151,14 +151,14 @@ export const RouteList = (props: RouteListProps) => {
   const versionOptions = useMemo(() => {
     const dataSource = needsAllData && allData?.list ? allData.list : data?.list || [];
     const versions = new Set<string>();
-    
+
     dataSource.forEach((route) => {
       const versionLabel = route.value.labels?.version;
       if (versionLabel) {
         versions.add(versionLabel);
       }
     });
-    
+
     return Array.from(versions)
       .sort()
       .map((version) => ({
@@ -250,6 +250,18 @@ export const RouteList = (props: RouteListProps) => {
             ],
           },
         }}
+        tableAlertRender={
+          needsAllData
+            ? () => (
+              <span style={{ color: '#faad14' }}>
+                {t('table.searchLimit', {
+                  defaultValue: `Search only allows searching in the first ${PAGE_SIZE_MAX} records.`,
+                  count: PAGE_SIZE_MAX,
+                })}
+              </span>
+            )
+            : undefined
+        }
       />
     </AntdConfigProvider>
   );