feat(FR-1859): Create a BAIUserSelect (#5055)

resolves #4931 (FR-1859)

This PR improves the Relay Infinite Scroll Select skill documentation and implementation by:

1. Introducing a clearer decision tree based on dynamic query parameter needs
2. Adding a new Pattern B (Dynamic) that provides full control over query parameters
3. Implementing `BAIUserSelect` component as a reference for email-based selection with dynamic parameters
4. Adding dynamic `first` parameter to ensure all selected values are fetched efficiently
5. Updating `BAIVFolderSelect` to use dynamic `first` parameter for better data completeness
6. Providing detailed comparison between Simple and Dynamic patterns
7. Adding comprehensive examples and best practices for both patterns

The key innovation is the dynamic `first` parameter that calculates exactly how many items to fetch based on selection count, preventing both over-fetching and under-fetching of data.

**Checklist:**

- [x] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: nowgnuesLee

.claude/skills/relay-infinite-scroll-select/SKILL.md

@@ -31,7 +31,7 @@ import TotalFooter from '../TotalFooter';
 import { Skeleton } from 'antd';
 import { GetRef } from 'antd/lib';
 import _ from 'lodash';
-import { useRef } from 'react';
+import { useOptimistic, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePaginationFragment } from 'react-relay';
 import { graphql } from 'relay-runtime';
@@ -48,6 +48,9 @@ const BAIAdminResourceGroupSelect = ({
 }: BAIAdminResourceGroupSelectProps) => {
   const { t } = useTranslation();
   const selectRef = useRef<GetRef<typeof BAISelect>>(null);
+  const [searchStr, setSearchStr] = useState<string>();
+  const [optimisticSearchStr, setOptimisticSearchStr] =
+    useOptimistic(searchStr);
 
   const { data, loadNext, isLoadingNext, refetch, hasNext } =
     usePaginationFragment<
@@ -86,14 +89,24 @@ const BAIAdminResourceGroupSelect = ({
     <BAISelect
       ref={selectRef}
       placeholder={t('comp:BAIAdminResourceGroupSelect.PlaceHolder')}
-      showSearch={{
-        autoClearSearchValue: true,
-        filterOption: false,
-      }}
+      showSearch={
+        selectPropsWithoutLoading.showSearch === false
+          ? false
+          : {
+              searchValue: optimisticSearchStr,
+              autoClearSearchValue: true,
+              filterOption: false,
+              ...(_.isObject(selectPropsWithoutLoading.showSearch)
+                ? _.omit(selectPropsWithoutLoading.showSearch, ['searchValue'])
+                : {}),
+            }
+      }
       loading={loading}
       options={selectOptions}
       {...selectPropsWithoutLoading}
       searchAction={async (value) => {
+        setOptimisticSearchStr(value);
+        setSearchStr(value);
         selectRef.current?.scrollTo(0);
         refetch({
           filter: value
@@ -171,8 +184,35 @@ const selectOptions = _.map(data.allScalingGroupsV2.edges, (item) => ({
 Simple mapping from edges to options. **No labelInValue needed** since value and label are the same.
 
 ### 3. Search Implementation
+
+**State Management:**
+```typescript
+const [searchStr, setSearchStr] = useState<string>();
+const [optimisticSearchStr, setOptimisticSearchStr] =
+  useOptimistic(searchStr);
+```
+
+**showSearch Configuration:**
+```typescript
+showSearch={
+  selectPropsWithoutLoading.showSearch === false
+    ? false
+    : {
+        searchValue: optimisticSearchStr,
+        autoClearSearchValue: true,
+        filterOption: false,
+        ...(_.isObject(selectPropsWithoutLoading.showSearch)
+          ? _.omit(selectPropsWithoutLoading.showSearch, ['searchValue'])
+          : {}),
+      }
+}
+```
+
+**searchAction:**
 ```typescript
 searchAction={async (value) => {
+  setOptimisticSearchStr(value);  // Immediate UI feedback
+  setSearchStr(value);             // Actual state for query
   selectRef.current?.scrollTo(0);  // Reset scroll position
   refetch({
     filter: value
@@ -187,9 +227,13 @@ searchAction={async (value) => {
 }}
 ```
 
-- Scroll to top on search for better UX
-- Use `refetch` to reload data with new filter
-- Filter structure matches GraphQL schema
+**Key Points:**
+- ✅ `useOptimistic` for immediate search input feedback
+- ✅ Conditional `showSearch` allows disabling with `showSearch={false}`
+- ✅ Merge user-provided `showSearch` config (except `searchValue`)
+- ✅ Scroll to top on search for better UX
+- ✅ Use `refetch` to reload data with new filter
+- ✅ Filter structure matches GraphQL schema
 
 ### 4. Infinite Scroll
 ```typescript