fix(settings): update general settings handling and improve loading/error states

x0sina · x0sina · commit db17e03bafdf · 2026-05-10T02:31:32.000+03:30
diff --git a/dashboard/public/statics/locales/en.json b/dashboard/public/statics/locales/en.json
@@ -142,7 +142,8 @@
       "cancelSuccess": "Changes cancelled and original settings restored",
       "defaultFlow": {
         "title": "Default VLESS Flow",
-        "description": "Autofill the flow field for new VLESS users"
+        "description": "Autofill the flow field for new VLESS users",
+        "none": "None"
       },
       "defaultMethod": {
         "title": "Default Shadowsocks Method",
diff --git a/dashboard/public/statics/locales/fa.json b/dashboard/public/statics/locales/fa.json
@@ -419,7 +419,8 @@
       "cancelSuccess": "تغییرات لغو شد و تنظیمات اصلی بازیابی شد",
       "defaultFlow": {
         "title": "جریان VLESS پیش‌فرض",
-        "description": "پر کردن خودکار فیلد جریان برای کاربران جدید VLESS"
+        "description": "پر کردن خودکار فیلد جریان برای کاربران جدید VLESS",
+        "none": "بدون"
       },
       "defaultMethod": {
         "title": "روش پیش‌فرض Shadowsocks",
diff --git a/dashboard/public/statics/locales/ru.json b/dashboard/public/statics/locales/ru.json
@@ -551,7 +551,8 @@
       "cancelSuccess": "Изменения отменены и исходные настройки восстановлены",
       "defaultFlow": {
         "title": "Поток VLESS по умолчанию",
-        "description": "Автоматически заполнять поле потока для новых пользователей VLESS"
+        "description": "Автоматически заполнять поле потока для новых пользователей VLESS",
+        "none": "Нет"
       },
       "defaultMethod": {
         "title": "Метод Shadowsocks по умолчанию",
diff --git a/dashboard/public/statics/locales/zh.json b/dashboard/public/statics/locales/zh.json
@@ -563,7 +563,8 @@
       "cancelSuccess": "更改已取消，原始设置已恢复",
       "defaultFlow": {
         "title": "默认 VLESS 流",
-        "description": "为新 VLESS 用户自动填写流字段"
+        "description": "为新 VLESS 用户自动填写流字段",
+        "none": "无"
       },
       "defaultMethod": {
         "title": "默认 Shadowsocks 加密方式",
diff --git a/dashboard/src/pages/_dashboard.settings.general.tsx b/dashboard/src/pages/_dashboard.settings.general.tsx
@@ -6,17 +6,20 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Separator } from '@/components/ui/separator'
 import { Skeleton } from '@/components/ui/skeleton'
 import { DEFAULT_SHADOWSOCKS_METHOD } from '@/constants/Proxies'
-import { ShadowsocksMethods, XTLSFlows, useReconnectAllNode } from '@/service/api'
+import { ShadowsocksMethods, XTLSFlows, useGetGeneralSettings, useReconnectAllNode } from '@/service/api'
 import { queryClient } from '@/utils/query-client'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Loader2, RefreshCcw, XIcon } from 'lucide-react'
+import { Loader2, RefreshCcw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { z } from 'zod'
 import { useSettingsContext } from './_dashboard.settings'
 
+/** Radix Select forbids `SelectItem value=""`; map API empty flow to this UI value. */
+const DEFAULT_FLOW_SELECT_NONE = '__pg_default_flow_none__'
+
 // general settings validation schema
 const generalSettingsSchema = z.object({
   default_flow: z.string().default(''),
@@ -27,7 +30,12 @@ type GeneralSettingsFormInput = z.input<typeof generalSettingsSchema>
 
 export default function General() {
   const { t } = useTranslation()
-  const { settings, isLoading, error, updateSettings, isSaving } = useSettingsContext()
+  const { isLoading, error, updateSettings, isSaving } = useSettingsContext()
+  const {
+    data: generalSettings,
+    isLoading: isGeneralLoading,
+    error: generalError,
+  } = useGetGeneralSettings()
   const [isReconnectAllDialogOpen, setIsReconnectAllDialogOpen] = useState(false)
   const reconnectAllNodeMutation = useReconnectAllNode()
 
@@ -40,11 +48,12 @@ export default function General() {
   })
 
   useEffect(() => {
+    if (!generalSettings) return
     form.reset({
-      default_flow: settings?.general?.default_flow || '',
-      default_method: settings?.general?.default_method || DEFAULT_SHADOWSOCKS_METHOD,
+      default_flow: generalSettings.default_flow || '',
+      default_method: generalSettings.default_method || DEFAULT_SHADOWSOCKS_METHOD,
     })
-  }, [settings])
+  }, [generalSettings, form])
 
   const onSubmit = async (data: GeneralSettingsFormInput) => {
     try {
@@ -64,13 +73,12 @@ export default function General() {
   }
 
   const handleCancel = () => {
-    if (settings?.general) {
-      form.reset({
-        default_flow: '',
-        default_method: DEFAULT_SHADOWSOCKS_METHOD,
-      })
-      toast.success(t('settings.general.cancelSuccess'))
-    }
+    if (!generalSettings) return
+    form.reset({
+      default_flow: generalSettings.default_flow ?? '',
+      default_method: generalSettings.default_method || DEFAULT_SHADOWSOCKS_METHOD,
+    })
+    toast.success(t('settings.general.cancelSuccess'))
   }
 
   const handleReconnectAll = async () => {
@@ -103,8 +111,10 @@ export default function General() {
     }
   }
 
+  const loadError = error || generalError
+
   // TODO: skeleton needs to be improved
-  if (isLoading) {
+  if (isLoading || isGeneralLoading) {
     return (
       <div className="w-full p-4 sm:py-6 lg:py-8">
         <div className="space-y-6 sm:space-y-8 lg:space-y-10">
@@ -140,7 +150,7 @@ export default function General() {
     )
   }
 
-  if (error) {
+  if (loadError) {
     return (
       <div className="flex min-h-[400px] items-center justify-center p-4 sm:py-6 lg:py-8">
         <div className="space-y-3 text-center">
@@ -151,14 +161,6 @@ export default function General() {
     )
   }
 
-  const clearField = (field: keyof GeneralSettingsFormInput) => {
-    return (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
-      form.setValue(field, '')
-    }
-  }
-
   return (
     <div className="flex min-h-[calc(100vh-200px)] w-full flex-col">
       <Form {...form}>
@@ -170,28 +172,27 @@ export default function General() {
                 control={form.control}
                 name="default_flow"
                 render={({ field }) => (
-                  <FormItem className="relative space-y-2">
+                  <FormItem className="space-y-2">
                     <FormLabel className="flex items-center gap-2 text-xs font-medium sm:text-sm">{t('settings.general.defaultFlow.title')}</FormLabel>
                     <FormControl>
-                      <Select value={field.value} onValueChange={field.onChange}>
+                      <Select
+                        value={field.value ? field.value : DEFAULT_FLOW_SELECT_NONE}
+                        onValueChange={v => field.onChange(v === DEFAULT_FLOW_SELECT_NONE ? '' : v)}
+                      >
                         <SelectTrigger className="text-xs sm:text-sm">
                           <SelectValue />
                         </SelectTrigger>
-                        {field.value && (
-                          <Button size="icon" variant="ghost" className="absolute right-8 top-6" onClick={clearField('default_flow')}>
-                            <XIcon />
-                          </Button>
-                        )}
                         <SelectContent>
+                          <SelectItem value={DEFAULT_FLOW_SELECT_NONE} className="text-xs sm:text-sm">
+                            {t('settings.general.defaultFlow.none')}
+                          </SelectItem>
                           {Object.values(XTLSFlows)
-                            .filter(Boolean)
-                            .map(flow => {
-                              return (
-                                <SelectItem value={flow} key={flow} className="text-xs sm:text-sm">
-                                  {flow}
-                                </SelectItem>
-                              )
-                            })}
+                            .filter((flow): flow is Exclude<typeof flow, ''> => flow !== '')
+                            .map(flow => (
+                              <SelectItem value={flow} key={flow} className="text-xs sm:text-sm">
+                                {flow}
+                              </SelectItem>
+                            ))}
                         </SelectContent>
                       </Select>
                     </FormControl>
diff --git a/dashboard/src/pages/_dashboard.settings.tsx b/dashboard/src/pages/_dashboard.settings.tsx
@@ -21,7 +21,7 @@ interface SettingsContextType {
   settings: any
   isLoading: boolean
   error: any
-  updateSettings: (data: any) => void
+  updateSettings: (data: any) => Promise<void>
   isSaving: boolean
 }
 
@@ -74,12 +74,13 @@ export default function Settings() {
       enabled: is_sudo, // Only fetch for sudo admins
     },
   })
-  const { mutate: updateSettings, isPending: isSaving } = useModifySettings({
+  const { mutateAsync: modifySettingsAsync, isPending: isSaving } = useModifySettings({
     mutation: {
       onSuccess: () => {
         toast.success(t(`settings.${activeTab}.saveSuccess`))
         // Invalidate settings query to refresh with new data from API response
         queryClient.invalidateQueries({ queryKey: ['/api/settings'] })
+        queryClient.invalidateQueries({ queryKey: ['/api/settings/general'] })
       },
       onError: (error: any) => {
         // Extract validation errors from FetchError
@@ -135,7 +136,7 @@ export default function Settings() {
 
   // Wrapper function to filter data based on active tab (only for sudo admins)
   const handleUpdateSettings = useCallback(
-    (data: any) => {
+    async (data: any) => {
       if (!is_sudo) return // No-op for non-sudo admins
 
       let filteredData: any = {}
@@ -192,9 +193,9 @@ export default function Settings() {
           filteredData = { data: data }
       }
 
-      updateSettings(filteredData)
+      await modifySettingsAsync(filteredData)
     },
-    [is_sudo, activeTab, updateSettings],
+    [is_sudo, activeTab, modifySettingsAsync],
   )
 
   // Memoize context value to ensure stability during HMR
@@ -203,7 +204,7 @@ export default function Settings() {
       settings: is_sudo ? settings || {} : {}, // Non-sudo admins don't need settings data
       isLoading: is_sudo ? isLoading : false,
       error: is_sudo ? error : null,
-      updateSettings: is_sudo ? handleUpdateSettings : () => { }, // No-op for non-sudo admins
+      updateSettings: is_sudo ? handleUpdateSettings : async () => {}, // No-op for non-sudo admins
       isSaving: is_sudo ? isSaving : false,
     }),
     [is_sudo, settings, isLoading, error, isSaving, handleUpdateSettings],
