feat(FR-2547): add reset button to runtime parameter form section (#6733)

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

> [!CAUTION]
> The i18n for runtime parameter isn't included. Because it renders dynamically using server data. I'll update it after server supported.

## Changes

- Convert runtime parameter form from card-based layout to collapsible section with "Optional" label
- Add reset button with undo icon that restores all parameters to default values and clears touched state
- Reset button is disabled when no parameters have been modified
- Replace card tabs with standard Ant Design tabs for better visual hierarchy
- Fix useEffect dependency to only reinitialize on runtime variant or groups changes, not on initial value changes
- Update parameter cleanup logic to always strip managed keys during reset operations, ensuring proper cleanup of previously set values
- Switch from BAICard to Collapse component for better space utilization

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

Author: agatha197

react/src/components/RuntimeParameterFormSection.tsx

@@ -12,8 +12,20 @@ import {
   buildEnvPresetKeySet,
 } from '../hooks/useRuntimeParameterSchema';
 import InputNumberWithSlider from './InputNumberWithSlider';
-import { Checkbox, Form, InputNumber, Select, Input, theme, Alert } from 'antd';
-import { BAICard, BAIFlex } from 'backend.ai-ui';
+import { UndoOutlined } from '@ant-design/icons';
+import {
+  Checkbox,
+  Collapse,
+  Form,
+  InputNumber,
+  Select,
+  Input,
+  Tooltip,
+  theme,
+  Alert,
+  Tabs,
+} from 'antd';
+import { BAIButton, BAIFlex } from 'backend.ai-ui';
 import React, { useCallback, useEffect, useEffectEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -141,9 +153,12 @@ const RuntimeParameterFormSection: React.FC<
     }
   });
 
+  // Initialize only when runtimeVariant or groups change — NOT when initialExtraArgs/initialEnvVars
+  // change (e.g., due to Relay store updates after mutation). The initial* props are read inside
+  // initializeValues via useEffectEvent, so they always reflect the latest closure.
   useEffect(() => {
     initializeValues();
-  }, [runtimeVariant, initialExtraArgs, initialEnvVars, groups]);
+  }, [runtimeVariant, groups]);
 
   const handleParamChange = useCallback(
     (key: string, newValue: string) => {
@@ -165,6 +180,14 @@ const RuntimeParameterFormSection: React.FC<
     [onChange, onTouchedKeysChange],
   );
 
+  const handleReset = useCallback(() => {
+    if (!groups) return;
+    const defaults = buildDefaultsMap(groups);
+    setValues(defaults);
+    setTouchedKeys(new Set());
+    onTouchedKeysChange?.(new Set());
+  }, [groups, setValues, onTouchedKeysChange]);
+
   if (!groups) return null;
 
   // Build tab list from available categories (dynamically from API)
@@ -178,32 +201,70 @@ const RuntimeParameterFormSection: React.FC<
   const effectiveActiveTab = availableCategories.includes(activeTab)
     ? activeTab
     : (availableCategories[0] ?? '');
-  const activeGroup = groups.find((g) => g.category === effectiveActiveTab);
 
   return (
-    <Form.Item label={t('modelService.RuntimeParamTitle')}>
-      <BAICard
-        size="small"
-        tabList={tabList}
-        activeTabKey={effectiveActiveTab}
-        onTabChange={(key) => setActiveTab(key)}
-      >
-        <Alert
-          type="warning"
-          showIcon
-          title={t('modelService.RuntimeParamUnchangedHint')}
-          style={{ marginBottom: token.marginSM }}
-        />
-        {activeGroup && (
-          <ParameterGroupContent
-            group={activeGroup}
-            values={values}
-            touchedKeys={touchedKeys}
-            onParamChange={handleParamChange}
-          />
-        )}
-      </BAICard>
-    </Form.Item>
+    <Collapse
+      size="small"
+      defaultActiveKey={['runtime-params']}
+      items={[
+        {
+          key: 'runtime-params',
+          label: (
+            <BAIFlex justify="between" align="center" style={{ flex: 1 }}>
+              <span>
+                {t('modelService.RuntimeParamTitle')}{' '}
+                <span style={{ color: token.colorTextSecondary }}>
+                  ({t('general.Optional')})
+                </span>
+              </span>
+              <Tooltip title={t('button.Reset')}>
+                <BAIButton
+                  type="link"
+                  size="small"
+                  icon={<UndoOutlined />}
+                  aria-label={t('button.Reset')}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleReset();
+                  }}
+                  disabled={touchedKeys.size === 0}
+                />
+              </Tooltip>
+            </BAIFlex>
+          ),
+          children: (
+            <>
+              <Alert
+                type="warning"
+                showIcon
+                title={t('modelService.RuntimeParamUnchangedHint')}
+                style={{ marginBottom: token.marginSM }}
+              />
+              <Tabs
+                size="small"
+                activeKey={effectiveActiveTab}
+                onChange={(key) => setActiveTab(key)}
+                items={tabList.map((tab) => {
+                  const group = groups.find((g) => g.category === tab.key);
+                  return {
+                    key: tab.key,
+                    label: tab.label,
+                    children: group ? (
+                      <ParameterGroupContent
+                        group={group}
+                        values={values}
+                        touchedKeys={touchedKeys}
+                        onParamChange={handleParamChange}
+                      />
+                    ) : null,
+                  };
+                })}
+              />
+            </>
+          ),
+        },
+      ]}
+    />
   );
 };
 

react/src/components/ServiceLauncherPageContent.tsx

@@ -316,31 +316,27 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
         }
       }
 
-      // Strip managed ARGS keys from existing EXTRA_ARGS before merging
-      // Only when there are touched ARGS values to merge
-      if (Object.keys(argsValues).length > 0) {
-        const argsSchemaKeys = buildArgsSchemaKeySet(groups);
-        if (environ[extraArgsEnvVar] && argsSchemaKeys.size > 0) {
-          const { unmappedText } = reverseMapExtraArgs(
-            environ[extraArgsEnvVar],
-            argsSchemaKeys,
-          );
-          if (unmappedText) {
-            environ[extraArgsEnvVar] = unmappedText;
-          } else {
-            delete environ[extraArgsEnvVar];
-          }
+      // Always strip managed ARGS keys from existing EXTRA_ARGS.
+      // This ensures reset (empty touchedKeys) properly cleans up previously set values.
+      const argsSchemaKeys = buildArgsSchemaKeySet(groups);
+      if (environ[extraArgsEnvVar] && argsSchemaKeys.size > 0) {
+        const { unmappedText } = reverseMapExtraArgs(
+          environ[extraArgsEnvVar],
+          argsSchemaKeys,
+        );
+        if (unmappedText) {
+          environ[extraArgsEnvVar] = unmappedText;
+        } else {
+          delete environ[extraArgsEnvVar];
         }
       }
 
-      // Strip only touched ENV-preset keys from environ before re-adding
-      // (prevents erasing user-provided env vars that happen to share preset keys)
-      const touchedEnvKeys = Object.keys(touchedValues).filter((key) => {
-        const preset = presetMap.get(key);
-        return preset?.presetTarget === 'ENV';
-      });
-      for (const envKey of touchedEnvKeys) {
-        delete environ[envKey];
+      // Always strip all ENV-preset keys from environ.
+      // This ensures reset (empty touchedKeys) properly cleans up previously set values.
+      for (const preset of presets) {
+        if (preset.presetTarget === 'ENV') {
+          delete environ[preset.key];
+        }
       }
 
       // Merge ARGS-type values into EXTRA_ARGS env var