From 3f18c86842ab5c942945f35812d970e415a4c00f Mon Sep 17 00:00:00 2001
From: lizable <46954439+lizable@users.noreply.github.com>
Date: Mon, 25 Nov 2024 09:28:48 +0000
Subject: [PATCH] add:  option to show/hide agent select option by launcher
 (#2870)

This PR resolves [#2837](https://github.com/lablup/backend.ai-webui/issues/2837)

**Changes:**
Makes agent selection in resource allocation form configurable via a new `enableAgentSelect` prop, defaulting to false. The agent selection field will only display when both `enableAgentSelect` is true and `baiClient._config.hideAgents` is false.

**Implementation:**
- Added `enableAgentSelect` prop to ResourceAllocationFormItems component
- Set `enableAgentSelect` to true in SessionLauncherPage to maintain existing behavior
- Agent selection field visibility now requires both configuration flags to be properly set

**Testing Steps:**
> Prerequisites:
> - Create model type vfolder
> - Create model-definition.yaml file and upload it to the vfolder you just created in step 1, according to the link [here](https://webui.docs.backend.ai/en/latest/model_serving/model_serving.html#guide-to-steps-for-using-model-service)
1. Set `hideAgents` in config.general to false.
2. Go to Session launcher page and check AgentSelect section is visible.
3. Check whether you can select agent and create a session which is located to the agent you just selected.
4. Go to Service launcher page by clicking `Start Service` button in Serving page and check AgentSelect section is invisible.
5. Check whether service is successfully created

**Checklist:**
- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minimum required manager version
- [ ] Specific setting for review
- [ ] Minimum requirements to check during review
- [x] Test case(s) to demonstrate the difference of before/after
---
 .../ResourceAllocationFormItems.tsx           | 32 +++++++++----------
 react/src/pages/SessionLauncherPage.tsx       |  4 +++
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/react/src/components/ResourceAllocationFormItems.tsx b/react/src/components/ResourceAllocationFormItems.tsx
index ccdd2293b..f979574be 100644
--- a/react/src/components/ResourceAllocationFormItems.tsx
+++ b/react/src/components/ResourceAllocationFormItems.tsx
@@ -84,6 +84,7 @@ type MergedResourceAllocationFormValue = ResourceAllocationFormValue &
   ImageEnvironmentFormInput;
 
 interface ResourceAllocationFormItemsProps {
+  enableAgentSelect?: boolean;
   enableNumOfSessions?: boolean;
   enableResourcePresets?: boolean;
   showRemainingWarning?: boolean;
@@ -93,6 +94,7 @@ interface ResourceAllocationFormItemsProps {
 const ResourceAllocationFormItems: React.FC<
   ResourceAllocationFormItemsProps
 > = ({
+  enableAgentSelect = false,
   enableNumOfSessions,
   enableResourcePresets,
   forceImageMinValues = false,
@@ -1206,7 +1208,7 @@ const ResourceAllocationFormItems: React.FC<
         </Card>
       ) : null}
       {/* TODO: Support cluster mode */}
-      {!baiClient._config.hideAgents && (
+      {enableAgentSelect && (
         <Form.Item
           label={t('session.launcher.SelectAgent')}
           required
@@ -1215,21 +1217,19 @@ const ResourceAllocationFormItems: React.FC<
           <Flex gap={'xs'}>
             <Suspense>
               <Form.Item required noStyle style={{ flex: 1 }} name="agent">
-                {baiClient.supports('agent-select') && (
-                  <AgentSelect
-                    resourceGroup={currentResourceGroup}
-                    fetchKey={agentFetchKey}
-                    onChange={(value, option) => {
-                      if (value !== 'auto') {
-                        form.setFieldsValue({
-                          cluster_mode: 'single-node',
-                          cluster_size: 1,
-                        });
-                      }
-                      // TODO: set cluster mode to single node and cluster size to 1 when agent value is not "auto"
-                    }}
-                  ></AgentSelect>
-                )}
+                <AgentSelect
+                  resourceGroup={currentResourceGroup}
+                  fetchKey={agentFetchKey}
+                  onChange={(value, option) => {
+                    if (value !== 'auto') {
+                      form.setFieldsValue({
+                        cluster_mode: 'single-node',
+                        cluster_size: 1,
+                      });
+                    }
+                    // TODO: set cluster mode to single node and cluster size to 1 when agent value is not "auto"
+                  }}
+                ></AgentSelect>
               </Form.Item>
             </Suspense>
             <Form.Item noStyle>
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
index 1d2d7f39b..fda492d49 100644
--- a/react/src/pages/SessionLauncherPage.tsx
+++ b/react/src/pages/SessionLauncherPage.tsx
@@ -1233,6 +1233,10 @@ const SessionLauncherPage = () => {
                   }}
                 >
                   <ResourceAllocationFormItems
+                    enableAgentSelect={
+                      !baiClient._config.hideAgents &&
+                      baiClient.supports('agent-select')
+                    }
                     enableNumOfSessions
                     enableResourcePresets
                     showRemainingWarning