feat(FR-2889): auto-select default resource group in deployment modals

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<
+  // `BAIProjectResourceGroupSelect` will auto-select the "default" group
+  // (or the first available group) via `autoSelectDefault` once resource
+  // groups load, calling our `onChange` with the chosen value — so this
+  // state simply mirrors the selection without a derived fallback.
+  const [selectedResourceGroup, setSelectedResourceGroup] = useState<
     string | undefined
   >(undefined);
-  const effectiveResourceGroup =
-    userSelectedResourceGroup ?? resourceGroups[0]?.name;
 
   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;
+      : selectedResourceGroup;
 
     if (!presetId || !resourceGroup) return Promise.resolve();
 
@@ -274,8 +276,9 @@ const ModelCardDeployModalContent: React.FC<
         >
           <BAIProjectResourceGroupSelect
             projectName={projectName ?? ''}
-            value={effectiveResourceGroup}
-            onChange={(value: string) => setUserSelectedResourceGroup(value)}
+            value={selectedResourceGroup}
+            onChange={(value: string) => setSelectedResourceGroup(value)}
+            autoSelectDefault
             style={{ width: '100%' }}
           />
         </Form.Item>
@@ -301,7 +304,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,26 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
     userSelectedPresetId ??
     (availablePresets[0]?.id ? toLocalId(availablePresets[0].id) : undefined);
 
-  const [userSelectedResourceGroup, setUserSelectedResourceGroup] = useState<
+  // `BAIProjectResourceGroupSelect` will auto-select the "default" group
+  // (or the first available group) via `autoSelectDefault` once resource
+  // groups load, calling our `onChange` with the chosen value — so this
+  // state simply mirrors the selection without a derived fallback.
+  const [selectedResourceGroup, setSelectedResourceGroup] = useState<
     string | undefined
   >(undefined);
-  const effectiveResourceGroup =
-    userSelectedResourceGroup ?? resourceGroups[0]?.name;
 
   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 `selectedResourceGroup`. Fall
+    // back to the sole resource group here — same pattern as
+    // `ModelCardDeployModal`.
+    const resourceGroup = isAutoDeployScenario
+      ? resourceGroups[0]?.name
+      : selectedResourceGroup;
 
     if (!presetId || !resourceGroup) return Promise.resolve();
 
@@ -307,8 +316,9 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
         >
           <BAIProjectResourceGroupSelect
             projectName={projectName ?? ''}
-            value={effectiveResourceGroup}
-            onChange={(value: string) => setUserSelectedResourceGroup(value)}
+            value={selectedResourceGroup}
+            onChange={(value: string) => setSelectedResourceGroup(value)}
+            autoSelectDefault
             style={{ width: '100%' }}
           />
         </Form.Item>
@@ -339,7 +349,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
               !vfolderId ||
               !projectId ||
               !effectivePresetId ||
-              !effectiveResourceGroup ||
+              !selectedResourceGroup ||
               hasNoPresets
             }
           >
@@ -353,7 +363,7 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
               !vfolderId ||
               !projectId ||
               !effectivePresetId ||
-              !effectiveResourceGroup ||
+              !selectedResourceGroup ||
               hasNoPresets
             }
           >