fix(FR-764): increase agent select page size and add search functionality (#3455)

Resolves #3454 (FR-764)

# Add search functionality to AgentSelect component

This PR enhances the AgentSelect component by adding search functionality that allows users to filter agents by ID. The implementation:

- Adds a search box to the agent selection dropdown
- Implements search filtering using the `ilike` operator to match agent IDs
- Uses React's `useTransition` hook to handle search state updates without blocking the UI
- Increases the default page size from 20 to 50 agents
- Disables the default filtering option in favor of the custom search implementation

Author: yomybaby

react/src/components/AgentSelect.tsx

@@ -1,12 +1,14 @@
+import { filterEmptyItem } from '../helper';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
+import { mergeFilterValues } from './BAIPropertyFilter';
 import Flex from './Flex';
 import ResourceNumber from './ResourceNumber';
 import { AgentSelectQuery } from './__generated__/AgentSelectQuery.graphql';
 import { useControllableValue } from 'ahooks';
 import { Select, SelectProps } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
-import React from 'react';
+import React, { useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
 
@@ -23,10 +25,12 @@ const AgentSelect: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const [value, setValue] = useControllableValue(selectProps);
+  const [searchStr, setSearchStr] = useState<string | undefined>(undefined);
+  const deferredSearchStr = useDeferredValue(searchStr);
 
   const { baiPaginationOption } = useBAIPaginationOptionState({
     current: 1,
-    pageSize: 20,
+    pageSize: 50,
   });
 
   const { agent_summary_list } = useLazyLoadQuery<AgentSelectQuery>(
@@ -61,7 +65,10 @@ const AgentSelect: React.FC<Props> = ({
       limit: baiPaginationOption.limit,
       offset: baiPaginationOption.offset,
       status: 'ALIVE',
-      filter: 'schedulable is true', // true, false, null
+      filter: mergeFilterValues([
+        'schedulable is true',
+        deferredSearchStr ? `id ilike "%${deferredSearchStr}%"` : null,
+      ]),
       scaling_group: resourceGroup,
     },
     {
@@ -111,17 +118,26 @@ const AgentSelect: React.FC<Props> = ({
     };
   });
 
+  const autoSelectIfMatch = t('session.launcher.AutoSelect')
+    .toLowerCase()
+    .includes(deferredSearchStr?.toLowerCase() ?? '')
+    ? { label: t('session.launcher.AutoSelect'), value: 'auto' }
+    : undefined;
   return (
     <Select
       onChange={(value, option) => {
         setValue(value, option);
       }}
+      loading={searchStr !== deferredSearchStr}
+      filterOption={false}
+      showSearch
+      searchValue={searchStr}
+      onSearch={(v) => {
+        setSearchStr(v);
+      }}
       {...selectProps}
       value={value}
-      options={[
-        { label: t('session.launcher.AutoSelect'), value: 'auto' },
-        ...agentOptions,
-      ]}
+      options={filterEmptyItem([autoSelectIfMatch, ...agentOptions])}
     />
   );
 };