feat(FR-1700): implement automatic fallback to auto agent when invalid (#4673)

Resolves #4672 ([FR-1700](https://lablup.atlassian.net/browse/FR-1700))

This PR adds a new `fallbackToAuto` prop to the AgentSelect component, replacing the previous `autoSelectDefault` prop. When enabled, this feature automatically switches to "Auto" selection when the current agent value becomes invalid (e.g., when the agent is no longer available in the options list).

The implementation includes:
- Adding a new effect hook that monitors changes to the value and available agent options
- Using `useEffectEvent` to handle the fallback logic
- Enabling this feature in ResourceAllocationFormItems by setting `fallbackToAuto` prop

**Checklist:**

- [ ] 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

[FR-1700]: https://lablup.atlassian.net/browse/FR-1700?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yomybaby

react/src/components/AgentSelect.tsx

@@ -5,19 +5,25 @@ import { useControllableValue } from 'ahooks';
 import { Select, SelectProps, theme } from 'antd';
 import { filterOutEmpty, BAIFlex, mergeFilterValues } from 'backend.ai-ui';
 import _ from 'lodash';
-import React, { useDeferredValue, useState } from 'react';
+import React, {
+  useDeferredValue,
+  useEffect,
+  useEffectEvent,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 
 interface Props extends Omit<SelectProps, 'options'> {
-  autoSelectDefault?: boolean;
+  fallbackToAuto?: boolean;
   fetchKey?: string;
   resourceGroup?: string | null;
 }
 
 const AgentSelect: React.FC<Props> = ({
   fetchKey,
   resourceGroup,
+  fallbackToAuto,
   ...selectProps
 }) => {
   const { t } = useTranslation();
@@ -93,6 +99,7 @@ const AgentSelect: React.FC<Props> = ({
         }
       })
       .value();
+
     return {
       label: (
         <BAIFlex
@@ -127,6 +134,24 @@ const AgentSelect: React.FC<Props> = ({
     .includes(deferredSearchStr?.toLowerCase() ?? '')
     ? { label: t('session.launcher.AutoSelect'), value: 'auto' }
     : undefined;
+
+  const changeToAutoWhenInvalidValueEffectEvent = useEffectEvent(() => {
+    if (fallbackToAuto && value) {
+      const valueArray = _.castArray(value);
+      const validValues = agentOptions.map((option) => option.value);
+      const newValue = valueArray.filter((v) =>
+        validValues.includes(v as string),
+      );
+      if (!_.isEqual(valueArray, newValue)) {
+        setValue('auto');
+      }
+    }
+  });
+
+  useEffect(() => {
+    changeToAutoWhenInvalidValueEffectEvent();
+  }, [value, agentOptions]);
+
   return (
     <Select
       loading={searchStr !== deferredSearchStr}

react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx

@@ -1243,6 +1243,7 @@ const ResourceAllocationFormItems: React.FC<
                   resourceGroup={currentResourceGroupInForm}
                   fetchKey={agentFetchKey}
                   mode={supportMultiAgents ? 'multiple' : undefined}
+                  fallbackToAuto
                   labelRender={
                     supportMultiAgents
                       ? ({ label, value }) => {