refactor(FR-2889): move resourceGroup selection onto antd Form instance

Author: agatha197

react/src/components/DeploymentAddRevisionCustomContent.tsx

@@ -1125,7 +1125,10 @@ export const DeploymentAddRevisionCustomContent: React.FC<
         stays visible during resource-group re-fetch.
       */}
       <Suspense fallback={<Skeleton active paragraph={{ rows: 4 }} />}>
-        <ResourceAllocationFormItems enableResourcePresets />
+        <ResourceAllocationFormItems
+          enableResourcePresets
+          autoSelectFirstResourceGroup
+        />
       </Suspense>
 
       <Collapse

react/src/components/DeploymentAddRevisionPresetContent.tsx

@@ -264,6 +264,7 @@ export const DeploymentAddRevisionPresetContent: React.FC<
       >
         <BAIProjectResourceGroupSelect
           projectName={projectName ?? ''}
+          autoSelectDefault
           style={{ width: '100%' }}
         />
       </Form.Item>

react/src/components/ModelCardDeployModal.tsx

@@ -105,11 +105,13 @@ const ModelCardDeployModalContent: React.FC<
     userSelectedPresetId ??
     (availablePresets[0]?.id ? toLocalId(availablePresets[0].id) : undefined);
 
-  const [userSelectedResourceGroup, setUserSelectedResourceGroup] = useState<
-    string | undefined
-  >(undefined);
-  const effectiveResourceGroup =
-    userSelectedResourceGroup ?? resourceGroups[0]?.name;
+  // The resource-group selection is held in an antd Form. `Form.useWatch`
+  // subscribes to changes on the `resourceGroup` field so the Deploy button's
+  // `disabled` prop reflects the current selection, and `form.getFieldValue`
+  // reads it at submit time. `BAIProjectResourceGroupSelect` auto-fills the
+  // "default" (or first available) group via its `autoSelectDefault` prop.
+  const [form] = Form.useForm<{ resourceGroup?: string }>();
+  const selectedResourceGroup = Form.useWatch('resourceGroup', form);
 
   const handleDeploy = (): Promise<void> => {
     if (!modelCardRowId || !projectId) return Promise.resolve();
@@ -119,7 +121,7 @@ const ModelCardDeployModalContent: React.FC<
       : effectivePresetId;
     const resourceGroup = isAutoDeployScenario
       ? resourceGroups[0]?.name
-      : effectiveResourceGroup;
+      : form.getFieldValue('resourceGroup');
 
     if (!presetId || !resourceGroup) return Promise.resolve();
 
@@ -225,7 +227,7 @@ const ModelCardDeployModalContent: React.FC<
       footer={null}
       width={480}
     >
-      <Form layout="vertical">
+      <Form form={form} layout="vertical">
         <Form.Item
           label={t('modelStore.Preset')}
           tooltip={t('modelStore.PresetTooltip')}
@@ -268,14 +270,14 @@ const ModelCardDeployModalContent: React.FC<
           </BAIFlex>
         </Form.Item>
         <Form.Item
+          name="resourceGroup"
           label={t('modelStore.ResourceGroup')}
           tooltip={t('modelStore.ResourceGroupTooltip')}
-          required
+          rules={[{ required: true }]}
         >
           <BAIProjectResourceGroupSelect
             projectName={projectName ?? ''}
-            value={effectiveResourceGroup}
-            onChange={(value: string) => setUserSelectedResourceGroup(value)}
+            autoSelectDefault
             style={{ width: '100%' }}
           />
         </Form.Item>
@@ -301,7 +303,7 @@ const ModelCardDeployModalContent: React.FC<
             !modelCardRowId ||
             !projectId ||
             !effectivePresetId ||
-            !effectiveResourceGroup
+            !selectedResourceGroup
           }
         >
           {t('modelStore.Deploy')}

react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx

@@ -88,6 +88,15 @@ interface ResourceAllocationFormItemsProps {
   showRemainingWarning?: boolean;
   forceImageMinValues?: boolean;
   hideClusterFormItems?: boolean;
+  /**
+   * Opt-in: when the form field has no value, auto-select the project's
+   * "default" resource group (or the first available one). Forwarded to
+   * `BAIProjectResourceGroupSelect`'s `autoSelectDefault` prop. Off by
+   * default to preserve existing behavior for shared callers like
+   * `SessionLauncherPage` / `ServiceLauncherPageContent` that pre-fill
+   * the form themselves.
+   */
+  autoSelectFirstResourceGroup?: boolean;
   extraAcceleratorRules?: Array<{
     warningOnly?: boolean;
     validator: (rule: unknown, value: number) => Promise<void>;
@@ -102,6 +111,7 @@ const ResourceAllocationFormItems: React.FC<
   forceImageMinValues = false,
   showRemainingWarning = false,
   hideClusterFormItems = false,
+  autoSelectFirstResourceGroup = false,
   extraAcceleratorRules,
 }) => {
   const form = Form.useFormInstance<MergedResourceAllocationFormValue>();
@@ -534,6 +544,7 @@ const ResourceAllocationFormItems: React.FC<
       >
         <BAIProjectResourceGroupSelect
           projectName={currentProject.name}
+          autoSelectDefault={autoSelectFirstResourceGroup}
           showSearch
         />
       </Form.Item>

react/src/components/VFolderDeployModal.tsx

@@ -148,17 +148,25 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
     userSelectedPresetId ??
     (availablePresets[0]?.id ? toLocalId(availablePresets[0].id) : undefined);
 
-  const [userSelectedResourceGroup, setUserSelectedResourceGroup] = useState<
-    string | undefined
-  >(undefined);
-  const effectiveResourceGroup =
-    userSelectedResourceGroup ?? resourceGroups[0]?.name;
+  // Hold the resource-group selection on the antd Form. `Form.useWatch`
+  // subscribes to changes so the Deploy button's `disabled` prop updates
+  // immediately, and `form.getFieldValue` reads it at submit time.
+  // `BAIProjectResourceGroupSelect` auto-fills the "default" (or first
+  // available) group via its `autoSelectDefault` prop.
+  const [form] = Form.useForm<{ resourceGroup?: string }>();
+  const selectedResourceGroup = Form.useWatch('resourceGroup', form);
 
   const handleDeploy = (): Promise<void> => {
     if (!vfolderId || !projectId) return Promise.resolve();
 
     const presetId = effectivePresetId;
-    const resourceGroup = effectiveResourceGroup;
+    // In `isAutoDeployScenario`, `BAIProjectResourceGroupSelect` is never
+    // mounted (the component returns `null` before reaching the form), so
+    // its `autoSelectDefault` cannot populate the form value. Fall back to
+    // the sole resource group here — same pattern as `ModelCardDeployModal`.
+    const resourceGroup = isAutoDeployScenario
+      ? resourceGroups[0]?.name
+      : form.getFieldValue('resourceGroup');
 
     if (!presetId || !resourceGroup) return Promise.resolve();
 
@@ -266,7 +274,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
       footer={null}
       width={480}
     >
-      <Form layout="vertical">
+      <Form form={form} layout="vertical">
         <Form.Item
           label={t('modelStore.Preset')}
           tooltip={t('modelStore.PresetTooltip')}
@@ -301,14 +309,14 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
           </BAIFlex>
         </Form.Item>
         <Form.Item
+          name="resourceGroup"
           label={t('modelStore.ResourceGroup')}
           tooltip={t('modelStore.ResourceGroupTooltip')}
-          required
+          rules={[{ required: true }]}
         >
           <BAIProjectResourceGroupSelect
             projectName={projectName ?? ''}
-            value={effectiveResourceGroup}
-            onChange={(value: string) => setUserSelectedResourceGroup(value)}
+            autoSelectDefault
             style={{ width: '100%' }}
           />
         </Form.Item>
@@ -339,7 +347,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
               !vfolderId ||
               !projectId ||
               !effectivePresetId ||
-              !effectiveResourceGroup ||
+              !selectedResourceGroup ||
               hasNoPresets
             }
           >
@@ -353,7 +361,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
               !vfolderId ||
               !projectId ||
               !effectivePresetId ||
-              !effectiveResourceGroup ||
+              !selectedResourceGroup ||
               hasNoPresets
             }
           >