三方系统密码加密
This commit is contained in:
dengqichen
parent
3f061e996e
commit
62523bc382
@ -0,0 +1,390 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
DialogBody,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import {
|
||||
getTeamEnvironmentConfig,
|
||||
updateTeamEnvironmentConfig,
|
||||
getNotificationChannels,
|
||||
} from '../service';
|
||||
|
||||
// 表单验证 Schema
|
||||
const formSchema = z
|
||||
.object({
|
||||
notificationConfig: z
|
||||
.object({
|
||||
id: z.number().optional(),
|
||||
notificationChannelId: z.number().nullish(),
|
||||
deployNotificationEnabled: z.boolean().default(false),
|
||||
buildNotificationEnabled: z.boolean().default(false),
|
||||
buildFailureFileEnabled: z.boolean().default(false),
|
||||
})
|
||||
.optional(),
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
// 如果启用了部署通知或构建通知，则通知渠道必填
|
||||
if (
|
||||
(data.notificationConfig?.deployNotificationEnabled ||data.notificationConfig?.buildNotificationEnabled) && !data.notificationConfig?.notificationChannelId
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{
|
||||
message: '启用通知时必须选择通知渠道',
|
||||
path: ['notificationConfig', 'notificationChannelId'],
|
||||
}
|
||||
);
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
|
||||
interface NotificationChannel {
|
||||
id: number;
|
||||
name: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface NotificationConfigDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
teamId: number;
|
||||
environmentId: number;
|
||||
environmentName: string;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export const NotificationConfigDialog: React.FC<
|
||||
NotificationConfigDialogProps
|
||||
> = ({ open, onOpenChange, teamId, environmentId, environmentName, onSuccess }) => {
|
||||
const { toast } = useToast();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [configId, setConfigId] = useState<number | null>(null);
|
||||
const [currentConfig, setCurrentConfig] = useState<any>(null); // 存储完整的环境配置
|
||||
const [notificationChannels, setNotificationChannels] = useState<
|
||||
NotificationChannel[]
|
||||
>([]);
|
||||
const [loadingChannels, setLoadingChannels] = useState(false);
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
notificationConfig: {
|
||||
notificationChannelId: undefined,
|
||||
deployNotificationEnabled: false,
|
||||
buildNotificationEnabled: false,
|
||||
buildFailureFileEnabled: false
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 加载通知渠道列表
|
||||
const loadNotificationChannels = async () => {
|
||||
setLoadingChannels(true);
|
||||
try {
|
||||
const channels = await getNotificationChannels();
|
||||
setNotificationChannels(channels || []);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '加载失败',
|
||||
description: error.message || '无法加载通知渠道列表',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setLoadingChannels(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载环境配置
|
||||
const loadEnvironmentConfig = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const config = await getTeamEnvironmentConfig(teamId, environmentId);
|
||||
|
||||
if (config) {
|
||||
setConfigId(config.id);
|
||||
setCurrentConfig(config); // 保存完整配置
|
||||
form.reset({
|
||||
notificationConfig: config.notificationConfig || {
|
||||
notificationChannelId: undefined,
|
||||
deployNotificationEnabled: false,
|
||||
buildNotificationEnabled: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response?.status === 404) {
|
||||
// 配置不存在
|
||||
toast({
|
||||
title: '提示',
|
||||
description: '请先配置该环境的基本信息',
|
||||
variant: 'destructive',
|
||||
});
|
||||
onOpenChange(false);
|
||||
} else {
|
||||
toast({
|
||||
title: '加载失败',
|
||||
description: error.message || '无法加载环境配置',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 对话框打开时初始化
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadNotificationChannels();
|
||||
loadEnvironmentConfig();
|
||||
}
|
||||
}, [open, teamId, environmentId]);
|
||||
|
||||
const handleSubmit = async (data: FormData) => {
|
||||
if (!configId || !currentConfig) {
|
||||
toast({
|
||||
title: '错误',
|
||||
description: '请先配置该环境的基本信息',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
// 提交完整的环境配置，只更新通知部分
|
||||
const payload: any = {
|
||||
teamId: currentConfig.teamId,
|
||||
environmentId: currentConfig.environmentId,
|
||||
approvalRequired: currentConfig.approvalRequired,
|
||||
approverUserIds: currentConfig.approverUserIds || [],
|
||||
requireCodeReview: currentConfig.requireCodeReview,
|
||||
remark: currentConfig.remark,
|
||||
// 更新通知配置
|
||||
notificationConfig:
|
||||
data.notificationConfig &&
|
||||
(data.notificationConfig.deployNotificationEnabled ||
|
||||
data.notificationConfig.buildNotificationEnabled ||
|
||||
data.notificationConfig.buildFailureFileEnabled)
|
||||
? {
|
||||
id: data.notificationConfig.id,
|
||||
notificationChannelId:
|
||||
data.notificationConfig.notificationChannelId,
|
||||
deployNotificationEnabled:
|
||||
data.notificationConfig.deployNotificationEnabled,
|
||||
buildNotificationEnabled:
|
||||
data.notificationConfig.buildNotificationEnabled,
|
||||
buildFailureFileEnabled:
|
||||
data.notificationConfig.buildFailureFileEnabled,
|
||||
}
|
||||
: undefined,
|
||||
};
|
||||
|
||||
await updateTeamEnvironmentConfig(configId, payload);
|
||||
|
||||
toast({
|
||||
title: '保存成功',
|
||||
description: '通知配置已更新',
|
||||
});
|
||||
|
||||
onSuccess?.();
|
||||
onOpenChange(false);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: '保存失败',
|
||||
description: error.message || '无法保存通知配置',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>通知配置</DialogTitle>
|
||||
<DialogDescription>
|
||||
配置 {environmentName} 环境的通知设置
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
<DialogBody>
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</DialogBody>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)}>
|
||||
<DialogBody className="space-y-4">
|
||||
{/* 通知渠道选择 - 始终显示 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.notificationChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>通知渠道</FormLabel>
|
||||
<Select
|
||||
value={field.value?.toString() || ''}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value ? Number(value) : undefined)
|
||||
}
|
||||
disabled={loadingChannels}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger
|
||||
clearable
|
||||
hasValue={!!field.value}
|
||||
onClear={() => field.onChange(undefined)}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={
|
||||
loadingChannels
|
||||
? '加载中...'
|
||||
: '请选择通知渠道'
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{notificationChannels.map((channel) => (
|
||||
<SelectItem
|
||||
key={channel.id}
|
||||
value={channel.id.toString()}
|
||||
>
|
||||
{channel.name} ({channel.type})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
<div className="text-sm text-muted-foreground">
|
||||
选择通知渠道后，启用下方的通知类型
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 部署通知 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.deployNotificationEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">部署通知</FormLabel>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
部署状态变更时发送通知
|
||||
</div>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 构建通知 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildNotificationEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">构建通知</FormLabel>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建状态变更时发送通知
|
||||
</div>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 构建通知 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationConfig.buildFailureFileEnabled"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">失败日志</FormLabel>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
构建失败时是否发送日志
|
||||
</div>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</DialogBody>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={submitting}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
)}
|
||||
保存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user