From 3f123ff04b8b6edf59127e1ae58bdb735db44678 Mon Sep 17 00:00:00 2001
From: Sujin Kim <kimsujin@lablup.com>
Date: Thu, 30 Apr 2026 23:31:35 +0900
Subject: [PATCH] feat(FR-2762): add deployment preset detail button to
 VFolderDeployModal

---
 .../components/ServiceLauncherPageContent.tsx |  4 +-
 react/src/components/VFolderDeployModal.tsx   | 77 +++++++++++++------
 2 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx
index 6fa5192837..30b75acf87 100644
--- a/react/src/components/ServiceLauncherPageContent.tsx
+++ b/react/src/components/ServiceLauncherPageContent.tsx
@@ -905,7 +905,7 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
           deploymentRevisionPresets(limit: 100) {
             edges {
               node {
-                rowId
+                id
                 name
               }
             }
@@ -1716,7 +1716,7 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                                 options={
                                   deploymentRevisionPresets?.edges?.map(
                                     (edge) => ({
-                                      value: edge.node.rowId,
+                                      value: edge.node.id,
                                       label: edge.node.name,
                                     }),
                                   ) ?? []
diff --git a/react/src/components/VFolderDeployModal.tsx b/react/src/components/VFolderDeployModal.tsx
index bf51bbc8db..0e76dc0ee8 100644
--- a/react/src/components/VFolderDeployModal.tsx
+++ b/react/src/components/VFolderDeployModal.tsx
@@ -9,8 +9,18 @@ import { useWebUINavigate } from '../hooks';
 import { useSetBAINotification } from '../hooks/useBAINotification';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import useDeploymentLauncher from '../hooks/useDeploymentLauncher';
-import { EllipsisOutlined } from '@ant-design/icons';
-import { App, Dropdown, Form, Space, Typography, theme } from 'antd';
+import DeploymentPresetDetailModal from './DeploymentPresetDetailModal';
+import { EllipsisOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import {
+  App,
+  Button,
+  Dropdown,
+  Form,
+  Space,
+  Tooltip,
+  Typography,
+  theme,
+} from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
 import {
   BAIButton,
@@ -268,6 +278,9 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
   const [userSelectedPresetId, setUserSelectedPresetId] = useState<
     string | undefined
   >(undefined);
+  const [presetDetailId, setPresetDetailId] = useState<string | undefined>(
+    undefined,
+  );
   const effectivePresetId =
     userSelectedPresetId ??
     (availablePresets[0]?.id ? toLocalId(availablePresets[0].id) : undefined);
@@ -365,29 +378,43 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
           tooltip={t('modelStore.PresetTooltip')}
           required
         >
-          <BAISelect
-            value={effectivePresetId}
-            onChange={(value: string) => setUserSelectedPresetId(value)}
-            options={presetOptions}
-            disabled={hasNoPresets}
-            placeholder={
-              hasNoPresets ? t('modelStore.NoCompatiblePresets') : undefined
-            }
-            optionRender={(option) => (
-              <BAIFlex direction="column" align="start">
-                {option.label}
-                {option.data.description && (
-                  <Typography.Text
-                    type="secondary"
-                    style={{ fontSize: token.fontSizeSM }}
-                    ellipsis
-                  >
-                    {option.data.description}
-                  </Typography.Text>
-                )}
-              </BAIFlex>
-            )}
-            style={{ width: '100%' }}
+          <Space.Compact style={{ width: '100%' }}>
+            <BAISelect
+              value={effectivePresetId}
+              onChange={(value: string) => setUserSelectedPresetId(value)}
+              options={presetOptions}
+              disabled={hasNoPresets}
+              placeholder={
+                hasNoPresets ? t('modelStore.NoCompatiblePresets') : undefined
+              }
+              optionRender={(option) => (
+                <BAIFlex direction="column" align="start">
+                  {option.label}
+                  {option.data.description && (
+                    <Typography.Text
+                      type="secondary"
+                      style={{ fontSize: token.fontSizeSM }}
+                      ellipsis
+                    >
+                      {option.data.description}
+                    </Typography.Text>
+                  )}
+                </BAIFlex>
+              )}
+              style={{ flex: 1 }}
+            />
+            <Tooltip title={t('modelService.DeploymentPresetDetail')}>
+              <Button
+                icon={<InfoCircleOutlined />}
+                disabled={!effectivePresetId}
+                onClick={() => setPresetDetailId(effectivePresetId)}
+              />
+            </Tooltip>
+          </Space.Compact>
+          <DeploymentPresetDetailModal
+            open={!!presetDetailId}
+            presetId={presetDetailId}
+            onRequestClose={() => setPresetDetailId(undefined)}
           />
         </Form.Item>
         <Form.Item