Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit97b0aab

Browse files
committed
improve UI confirmation for the deployment
1 parent288ce77 commit97b0aab

File tree

1 file changed

+94
-13
lines changed

1 file changed

+94
-13
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx‎

Lines changed: 94 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Environment } from '../types/environment.types';
66
import{DeployableItemConfig}from'../types/deployable-item.types';
77
import{useEnvironmentContext}from'../context/EnvironmentContext';
88
import{getEnvironmentTagColor,formatEnvironmentType}from'../utils/environmentUtils';
9-
import{ExclamationCircleOutlined}from'@ant-design/icons';
9+
import{ExclamationCircleOutlined,WarningOutlined}from'@ant-design/icons';
1010

1111
interfaceDeployItemModalProps{
1212
visible:boolean;
@@ -54,21 +54,53 @@ function DeployItemModal({
5454
// First confirmation
5555
if(credentialConfirmationStep===0){
5656
Modal.confirm({
57-
title:'Overwrite Credentials Warning',
58-
icon:<ExclamationCircleOutlined/>,
57+
title:(
58+
<divstyle={{display:'flex',alignItems:'center',color:'#ff7a00'}}>
59+
<WarningOutlinedstyle={{marginRight:8,fontSize:'18px'}}/>
60+
<spanstyle={{fontSize:'16px',fontWeight:'600'}}>Overwrite Credentials Warning</span>
61+
</div>
62+
),
63+
icon:null,
5964
content:(
60-
<div>
65+
<divstyle={{padding:'16px 0'}}>
6166
<Alert
6267
message="This action will overwrite existing credentials in the target environment."
63-
description="This is a serious operation that may affect other applications and users. Are you sure you want to proceed?"
68+
description={
69+
<divstyle={{marginTop:'8px'}}>
70+
<pstyle={{margin:0,fontWeight:'500'}}>
71+
This is a serious operation that may affect other applications and users.
72+
</p>
73+
<pstyle={{margin:'8px 0 0 0',color:'#8c8c8c'}}>
74+
Are you sure you want to proceed?
75+
</p>
76+
</div>
77+
}
6478
type="warning"
6579
showIcon
66-
style={{marginBottom:16}}
80+
style={{
81+
marginBottom:0,
82+
border:'1px solid #fff2e8',
83+
borderRadius:'8px'
84+
}}
6785
/>
6886
</div>
6987
),
7088
okText:'Continue',
7189
cancelText:'Cancel',
90+
okButtonProps:{
91+
style:{
92+
backgroundColor:'#ff7a00',
93+
borderColor:'#ff7a00',
94+
fontWeight:'500'
95+
}
96+
},
97+
cancelButtonProps:{
98+
style:{
99+
fontWeight:'500'
100+
}
101+
},
102+
width:520,
103+
centered:false,
72104
onOk:()=>{
73105
setCredentialConfirmationStep(1);
74106
// Show second confirmation immediately
@@ -84,23 +116,68 @@ function DeployItemModal({
84116

85117
constshowSecondConfirmation=(fieldName:string)=>{
86118
Modal.confirm({
87-
title:'Final Confirmation Required',
88-
icon:<ExclamationCircleOutlined/>,
119+
title:(
120+
<divstyle={{display:'flex',alignItems:'center',color:'#ff4d4f'}}>
121+
<ExclamationCircleOutlinedstyle={{marginRight:8,fontSize:'18px'}}/>
122+
<spanstyle={{fontSize:'16px',fontWeight:'600'}}>Final Confirmation Required</span>
123+
</div>
124+
),
125+
icon:null,
89126
content:(
90-
<div>
127+
<divstyle={{padding:'16px 0'}}>
91128
<Alert
92129
message="Final Warning: Credential Overwrite"
93-
description="You are about to overwrite credentials in the target environment. This action cannot be undone and may break existing integrations. Please confirm one more time."
130+
description={
131+
<divstyle={{marginTop:'8px'}}>
132+
<pstyle={{margin:0,fontWeight:'500'}}>
133+
You are about to overwrite credentials in the target environment.
134+
This action cannot be undone and may break existing integrations.
135+
</p>
136+
<pstyle={{margin:'8px 0 0 0',color:'#8c8c8c'}}>
137+
Please confirm one more time.
138+
</p>
139+
</div>
140+
}
94141
type="error"
95142
showIcon
96-
style={{marginBottom:16}}
143+
style={{
144+
marginBottom:16,
145+
border:'1px solid #ffebee',
146+
borderRadius:'8px'
147+
}}
97148
/>
98-
<p><strong>Are you absolutely certain you want to overwrite the credentials?</strong></p>
149+
<divstyle={{
150+
padding:'12px 16px',
151+
backgroundColor:'#fff2f0',
152+
borderRadius:'8px',
153+
border:'1px solid #ffccc7'
154+
}}>
155+
<pstyle={{
156+
margin:0,
157+
fontWeight:'600',
158+
color:'#cf1322',
159+
fontSize:'14px'
160+
}}>
161+
Are you absolutely certain you want to overwrite the credentials?
162+
</p>
163+
</div>
99164
</div>
100165
),
101166
okText:'Yes, Overwrite Credentials',
102167
okType:'danger',
103168
cancelText:'Cancel',
169+
okButtonProps:{
170+
style:{
171+
fontWeight:'500'
172+
}
173+
},
174+
cancelButtonProps:{
175+
style:{
176+
fontWeight:'500'
177+
}
178+
},
179+
width:520,
180+
centered:false,
104181
onOk:()=>{
105182
setCredentialConfirmationStep(2);
106183
form.setFieldsValue({[fieldName]:true});
@@ -224,7 +301,11 @@ function DeployItemModal({
224301
>
225302
{field.label}
226303
{isCredentialField&&credentialConfirmationStep===2&&(
227-
<Tagcolor="orange"style={{marginLeft:8}}>
304+
<Tag
305+
color="red"
306+
style={{marginLeft:8}}
307+
icon={<ExclamationCircleOutlined/>}
308+
>
228309
Confirmed
229310
</Tag>
230311
)}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp