fix: use Combobox for notification group selection in settings page

Settings page used a plain number input for ip_change_notification_group_id,
requiring users to manually enter a group ID. Replace it with a searchable
Combobox component (consistent with alert-rule/service/cron pages) and wrap
the settings route with NotificationProvider to load notification group data.

Closes nezhahq/nezha#1174

Co-authored-by: naiba/CloudCode <hi+cloudcode@nai.ba>
This commit is contained in:
naiba
2026-03-01 01:11:37 +00:00
parent 4f6e6d1a21
commit 341a6fa666
2 changed files with 19 additions and 6 deletions
+14 -5
View File
@@ -21,6 +21,8 @@ import {
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Combobox } from "@/components/ui/combobox"
import { useNotification } from "@/hooks/useNotfication"
import { useAuth } from "@/hooks/useAuth"
import useSetting from "@/hooks/useSetting"
import { asOptionalField } from "@/lib/utils"
@@ -58,6 +60,12 @@ export default function SettingsPage() {
const { profile } = useAuth()
const navigate = useNavigate()
const { notifierGroup } = useNotification()
const ngroupList = notifierGroup?.map((ng) => ({
value: `${ng.group.id}`,
label: ng.group.name,
})) || [{ value: "", label: "" }]
const isAdmin = profile?.role === 0
if (!isAdmin) {
@@ -448,12 +456,13 @@ export default function SettingsPage() {
name="ip_change_notification_group_id"
render={({ field }) => (
<FormItem>
<FormLabel>{t("NotifierGroupID")}</FormLabel>
<FormLabel>{t("NotifierGroup")}</FormLabel>
<FormControl>
<Input
placeholder="0"
type="number"
{...field}
<Combobox
placeholder={t("Search")}
options={ngroupList}
onValueChange={field.onChange}
defaultValue={field.value?.toString()}
/>
</FormControl>
<FormMessage />