refactor(FR-1720): update setting components to use onChange instead of setValue for better clarity (#4849)

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

## Refactor SettingItem component to use strongly typed props and improve onChange handling

This PR refactors the `SettingItem` component to use strongly typed props with TypeScript discriminated unions, making the component more type-safe. It also standardizes the API by replacing `setValue` with `onChange` across all usages.

Key changes:
- Replace generic `setValue` prop with a more consistent `onChange` callback
- Create type-specific props interfaces for each setting type (checkbox, select, custom)
- Add proper type annotations to prevent type errors
- Simplify reset logic and dropdown visibility conditions
- Remove unnecessary `onAfterChange` in favor of a single callback pattern

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

Author: yomybaby

react/src/components/ConfigurationsSettingList.tsx

@@ -159,7 +159,8 @@ const ConfigurationsSettingList = () => {
           },
           defaultValue: defaultConfigurationsSettings.image_pulling_behavior,
           value: options.image_pulling_behavior,
-          setValue: (value) => setImagePullingBehavior(value),
+          onChange: (value) =>
+            setImagePullingBehavior(value as ImagePullingBehavior),
         },
         {
           type: 'custom',

react/src/components/SettingItem.tsx

@@ -16,21 +16,46 @@ import { t } from 'i18next';
 import _ from 'lodash';
 import React, { ReactElement, ReactNode, useState } from 'react';
 
-export interface SettingItemProps {
+type BaseSettingItemProps = {
   'data-testid'?: string;
-  type: 'custom' | 'checkbox' | 'select';
   title: string;
   description?: string | ReactElement;
   children?: ReactNode;
-  defaultValue?: any;
-  value?: any;
-  setValue?: (value: any) => void;
   showResetButton?: boolean;
+  onReset?: () => void;
+};
+
+type CheckboxSettingItemProps = BaseSettingItemProps & {
+  type: 'checkbox';
+  defaultValue?: boolean;
+  value?: boolean;
+  onChange?: (value?: boolean) => void;
   checkboxProps?: Omit<CheckboxProps, 'value' | 'onChange' | 'defaultValue'>;
+  selectProps?: never;
+};
+
+type SelectSettingItemProps = BaseSettingItemProps & {
+  type: 'select';
+  defaultValue?: string | number;
+  value?: string | number;
+  onChange?: (value?: string | number) => void;
   selectProps?: Omit<BAISelectProps, 'value' | 'onChange' | 'defaultValue'>;
-  onAfterChange?: (value: any) => void;
-  onReset?: () => void;
-}
+  checkboxProps?: never;
+};
+
+type CustomSettingItemProps = BaseSettingItemProps & {
+  type: 'custom';
+  defaultValue?: any;
+  value?: any;
+  onChange?: (value?: any) => void;
+  selectProps?: never;
+  checkboxProps?: never;
+};
+
+export type SettingItemProps =
+  | CheckboxSettingItemProps
+  | SelectSettingItemProps
+  | CustomSettingItemProps;
 
 const useStyles = createStyles(({ css }) => ({
   baiSettingItemCheckbox: css`
@@ -49,8 +74,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   children,
   defaultValue,
   value,
-  setValue,
-  onAfterChange,
+  onChange,
   onReset,
   selectProps,
   checkboxProps,
@@ -67,13 +91,16 @@ const SettingItem: React.FC<SettingItemProps> = ({
   const resetItem = () => {
     if (onReset) {
       onReset();
-    } else {
-      !selectProps?.disabled &&
-        !checkboxProps?.disabled &&
-        setValue?.(defaultValue);
+    } else if (isEnabled && onChange) {
+      onChange(defaultValue);
     }
   };
 
+  const isEnabled =
+    (type === 'select' && !selectProps?.disabled) ||
+    (type === 'checkbox' && !checkboxProps?.disabled) ||
+    type === 'custom';
+
   return (
     <BAIFlex
       data-testid={dataTestId}
@@ -93,38 +120,37 @@ const SettingItem: React.FC<SettingItemProps> = ({
           >
             {title}
           </Typography.Text>
-          {(!selectProps?.disabled || !checkboxProps?.disabled) &&
+          {isEnabled &&
             value !== undefined &&
             value !== null &&
             defaultValue !== value && <Badge dot status="warning" />}
-          {!selectProps?.disabled &&
-            !checkboxProps?.disabled &&
-            showResetButton && (
-              <Dropdown
-                menu={{
-                  items: [
-                    {
-                      key: 'reset',
-                      label: t('button.Reset'),
-                      onClick: () => setIsOpenResetChangesModal(),
-                      danger: true,
-                    },
-                  ],
+          {isEnabled && showResetButton && (
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: 'reset',
+                    label: t('button.Reset'),
+                    onClick: () => setIsOpenResetChangesModal(),
+                    danger: true,
+                  },
+                ],
+              }}
+              placement="topLeft"
+              onOpenChange={(e) => e && setIsDropdownOpen(true)}
+            >
+              <BAIButton
+                icon={<SettingOutlined />}
+                type="text"
+                style={{
+                  width: 20,
+                  height: 20,
+                  opacity: isDropdownOpen ? 1 : 0,
+                  transition: 'opacity 0.2s ease-in-out',
                 }}
-                onOpenChange={(e) => e && setIsDropdownOpen(true)}
-              >
-                <BAIButton
-                  icon={<SettingOutlined />}
-                  type="text"
-                  style={{
-                    width: 20,
-                    height: 20,
-                    opacity: isDropdownOpen ? 1 : 0,
-                    transition: 'opacity 0.2s ease-in-out',
-                  }}
-                />
-              </Dropdown>
-            )}
+              />
+            </Dropdown>
+          )}
         </BAIFlex>
       </BAIFlex>
       {type === 'custom' && (
@@ -143,8 +169,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
           className={styles.baiSettingItemCheckbox}
           checked={value}
           onChange={(e) => {
-            setValue?.(e.target.checked);
-            onAfterChange?.(e);
+            onChange?.(e.target.checked);
           }}
           {...checkboxProps}
         >
@@ -166,8 +191,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
             value={value}
             popupMatchSelectWidth={false}
             onChange={(value) => {
-              setValue?.(value);
-              onAfterChange?.(value);
+              onChange?.(value);
             }}
             style={{
               marginTop: token.marginXS,

react/src/components/SettingList.tsx

@@ -307,8 +307,7 @@ const resetSettingItems = (settingGroups: SettingGroup[]) => {
     } else {
       !option?.selectProps?.disabled &&
         !option?.checkboxProps?.disabled &&
-        option?.setValue &&
-        option.setValue(option.defaultValue);
+        option?.onChange?.(option.defaultValue);
     }
   });
 };

react/src/pages/UserSettingsPage.tsx

@@ -103,11 +103,11 @@ const UserPreferencesPage = () => {
           description: <Trans i18nKey="userSettings.DescDesktopNotification" />,
           defaultValue: false,
           value: desktopNotification,
-          setValue: setDesktopNotification,
-          onAfterChange: (e: any) => {
+          onChange: (value) => {
+            setDesktopNotification(value);
+
             // Request permission for desktop notifications
-            if (!e.target.checked || Notification.permission === 'granted')
-              return;
+            if (!value || Notification.permission === 'granted') return;
             if (!('Notification' in window)) {
               message.error(t('desktopNotification.NotSupported'));
               setDesktopNotification(false);
@@ -133,7 +133,7 @@ const UserPreferencesPage = () => {
           description: <Trans i18nKey="userSettings.DescUseCompactSidebar" />,
           defaultValue: false,
           value: compactSidebar,
-          setValue: setCompactSidebar,
+          onChange: setCompactSidebar,
         },
         {
           'data-testid': 'items-language-select',
@@ -165,7 +165,7 @@ const UserPreferencesPage = () => {
           },
           defaultValue: defaultLanguage,
           value: selectedLanguage || defaultLanguage,
-          setValue: (value: any) => {
+          onChange: (value: any) => {
             setSelectedLanguage(value);
             setLanguage(value);
             const event = new CustomEvent('language-changed', {
@@ -185,7 +185,7 @@ const UserPreferencesPage = () => {
           ),
           defaultValue: false,
           value: preserveLogin,
-          setValue: setPreserveLogin,
+          onChange: setPreserveLogin,
         },
         {
           'data-testid': 'items-automatic-update-check',
@@ -196,7 +196,7 @@ const UserPreferencesPage = () => {
           ),
           defaultValue: false,
           value: autoAutomaticUpdateCheck,
-          setValue: setAutoAutomaticUpdateCheck,
+          onChange: setAutoAutomaticUpdateCheck,
         },
         {
           'data-testid': 'items-auto-logout',
@@ -205,7 +205,7 @@ const UserPreferencesPage = () => {
           description: t('userSettings.DescAutoLogout'),
           defaultValue: false,
           value: autoLogout,
-          setValue: setAutoLogout,
+          onChange: setAutoLogout,
         },
         {
           'data-testid': 'items-my-keypair-info',
@@ -264,7 +264,7 @@ const UserPreferencesPage = () => {
           },
           defaultValue: 2,
           value: maxConcurrentUpload || 2,
-          setValue: setMaxConcurrentUpload,
+          onChange: (value) => setMaxConcurrentUpload(_.toNumber(value)),
         },
       ]),
     },
@@ -320,7 +320,7 @@ const UserPreferencesPage = () => {
           description: t('general.Enabled'),
           defaultValue: false,
           value: experimentalAIAgents,
-          setValue: setExperimentalAIAgents,
+          onChange: setExperimentalAIAgents,
         },
       ],
     },