Skip to content

Commit 38cd16b

Browse files
iamfaraniamfaran
committed
refactor deploy modal
1 parent 97b0aab commit 38cd16b

File tree

2 files changed

+125
-126
lines changed

2 files changed

+125
-126
lines changed

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

Lines changed: 14 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ 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, WarningOutlined } from '@ant-design/icons';
9+
import { ExclamationCircleOutlined } from '@ant-design/icons';
10+
import { showFirstCredentialOverwriteConfirm, showSecondCredentialOverwriteConfirm } from './credentialConfirmations';
1011

1112
interface DeployItemModalProps {
1213
visible: boolean;
@@ -53,58 +54,20 @@ function DeployItemModal({
5354

5455
// First confirmation
5556
if (credentialConfirmationStep === 0) {
56-
Modal.confirm({
57-
title: (
58-
<div style={{ display: 'flex', alignItems: 'center', color: '#ff7a00' }}>
59-
<WarningOutlined style={{ marginRight: 8, fontSize: '18px' }} />
60-
<span style={{ fontSize: '16px', fontWeight: '600' }}>Overwrite Credentials Warning</span>
61-
</div>
62-
),
63-
icon: null,
64-
content: (
65-
<div style={{ padding: '16px 0' }}>
66-
<Alert
67-
message="This action will overwrite existing credentials in the target environment."
68-
description={
69-
<div style={{ marginTop: '8px' }}>
70-
<p style={{ margin: 0, fontWeight: '500' }}>
71-
This is a serious operation that may affect other applications and users.
72-
</p>
73-
<p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
74-
Are you sure you want to proceed?
75-
</p>
76-
</div>
77-
}
78-
type="warning"
79-
showIcon
80-
style={{
81-
marginBottom: 0,
82-
border: '1px solid #fff2e8',
83-
borderRadius: '8px'
84-
}}
85-
/>
86-
</div>
87-
),
88-
okText: 'Continue',
89-
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,
57+
showFirstCredentialOverwriteConfirm({
10458
onOk: () => {
10559
setCredentialConfirmationStep(1);
10660
// Show second confirmation immediately
107-
showSecondConfirmation(fieldName);
61+
showSecondCredentialOverwriteConfirm({
62+
onOk: () => {
63+
setCredentialConfirmationStep(2);
64+
form.setFieldsValue({ [fieldName]: true });
65+
},
66+
onCancel: () => {
67+
setCredentialConfirmationStep(0);
68+
form.setFieldsValue({ [fieldName]: false });
69+
}
70+
});
10871
},
10972
onCancel: () => {
11073
setCredentialConfirmationStep(0);
@@ -114,81 +77,6 @@ function DeployItemModal({
11477
}
11578
};
11679

117-
const showSecondConfirmation = (fieldName: string) => {
118-
Modal.confirm({
119-
title: (
120-
<div style={{ display: 'flex', alignItems: 'center', color: '#ff4d4f' }}>
121-
<ExclamationCircleOutlined style={{ marginRight: 8, fontSize: '18px' }} />
122-
<span style={{ fontSize: '16px', fontWeight: '600' }}>Final Confirmation Required</span>
123-
</div>
124-
),
125-
icon: null,
126-
content: (
127-
<div style={{ padding: '16px 0' }}>
128-
<Alert
129-
message="Final Warning: Credential Overwrite"
130-
description={
131-
<div style={{ marginTop: '8px' }}>
132-
<p style={{ 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-
<p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
137-
Please confirm one more time.
138-
</p>
139-
</div>
140-
}
141-
type="error"
142-
showIcon
143-
style={{
144-
marginBottom: 16,
145-
border: '1px solid #ffebee',
146-
borderRadius: '8px'
147-
}}
148-
/>
149-
<div style={{
150-
padding: '12px 16px',
151-
backgroundColor: '#fff2f0',
152-
borderRadius: '8px',
153-
border: '1px solid #ffccc7'
154-
}}>
155-
<p style={{
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>
164-
</div>
165-
),
166-
okText: 'Yes, Overwrite Credentials',
167-
okType: 'danger',
168-
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,
181-
onOk: () => {
182-
setCredentialConfirmationStep(2);
183-
form.setFieldsValue({ [fieldName]: true });
184-
},
185-
onCancel: () => {
186-
setCredentialConfirmationStep(0);
187-
form.setFieldsValue({ [fieldName]: false });
188-
}
189-
});
190-
};
191-
19280
const handleDeploy = async () => {
19381
if (!config.deploy || !item) return;
19482

@@ -346,7 +234,7 @@ function DeployItemModal({
346234
return null;
347235
}
348236
})}
349-
237+
350238
<Form.Item>
351239
<Button type="default" onClick={onClose} style={{ marginRight: 8 }}>
352240
Cancel

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
2+
import { Modal, Alert } from 'antd';
3+
import { ExclamationCircleOutlined, WarningOutlined } from '@ant-design/icons';
4+
5+
interface ConfirmHandlers {
6+
onOk: () => void;
7+
onCancel: () => void;
8+
}
9+
10+
/**
11+
* First-step confirmation modal (orange / warning).
12+
*/
13+
export function showFirstCredentialOverwriteConfirm({ onOk, onCancel }: ConfirmHandlers) {
14+
Modal.confirm({
15+
title: (
16+
<div style={{ display: 'flex', alignItems: 'center', color: '#ff7a00' }}>
17+
<WarningOutlined style={{ marginRight: 8, fontSize: 18 }} />
18+
<span style={{ fontSize: 16, fontWeight: 600 }}>Overwrite Credentials Warning</span>
19+
</div>
20+
),
21+
icon: null,
22+
content: (
23+
<div style={{ padding: '16px 0' }}>
24+
<Alert
25+
message="This action will overwrite existing credentials in the target environment."
26+
description={
27+
<div style={{ marginTop: 8 }}>
28+
<p style={{ margin: 0, fontWeight: 500 }}>
29+
This is a serious operation that may affect other applications and users.
30+
</p>
31+
<p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
32+
Are you sure you want to proceed?
33+
</p>
34+
</div>
35+
}
36+
type="warning"
37+
showIcon
38+
style={{ marginBottom: 0, border: '1px solid #fff2e8', borderRadius: 8 }}
39+
/>
40+
</div>
41+
),
42+
okText: 'Continue',
43+
cancelText: 'Cancel',
44+
okButtonProps: {
45+
style: { backgroundColor: '#ff7a00', borderColor: '#ff7a00', fontWeight: 500 }
46+
},
47+
cancelButtonProps: {
48+
style: { fontWeight: 500 }
49+
},
50+
width: 520,
51+
centered: false,
52+
onOk,
53+
onCancel
54+
});
55+
}
56+
57+
/**
58+
* Second-step (final) confirmation modal (red / danger).
59+
*/
60+
export function showSecondCredentialOverwriteConfirm({ onOk, onCancel }: ConfirmHandlers) {
61+
Modal.confirm({
62+
title: (
63+
<div style={{ display: 'flex', alignItems: 'center', color: '#ff4d4f' }}>
64+
<ExclamationCircleOutlined style={{ marginRight: 8, fontSize: 18 }} />
65+
<span style={{ fontSize: 16, fontWeight: 600 }}>Final Confirmation Required</span>
66+
</div>
67+
),
68+
icon: null,
69+
content: (
70+
<div style={{ padding: '16px 0' }}>
71+
<Alert
72+
message="Final Warning: Credential Overwrite"
73+
description={
74+
<div style={{ marginTop: 8 }}>
75+
<p style={{ margin: 0, fontWeight: 500 }}>
76+
You are about to overwrite credentials in the target environment. This action cannot be undone and may break existing integrations.
77+
</p>
78+
<p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
79+
Please confirm one more time.
80+
</p>
81+
</div>
82+
}
83+
type="error"
84+
showIcon
85+
style={{ marginBottom: 16, border: '1px solid #ffebee', borderRadius: 8 }}
86+
/>
87+
<div
88+
style={{
89+
padding: '12px 16px',
90+
backgroundColor: '#fff2f0',
91+
borderRadius: 8,
92+
border: '1px solid #ffccc7'
93+
}}
94+
>
95+
<p style={{ margin: 0, fontWeight: 600, color: '#cf1322', fontSize: 14 }}>
96+
Are you absolutely certain you want to overwrite the credentials?
97+
</p>
98+
</div>
99+
</div>
100+
),
101+
okText: 'Yes, Overwrite Credentials',
102+
okType: 'danger',
103+
cancelText: 'Cancel',
104+
okButtonProps: { style: { fontWeight: 500 } },
105+
cancelButtonProps: { style: { fontWeight: 500 } },
106+
width: 520,
107+
centered: false,
108+
onOk,
109+
onCancel
110+
});
111+
}

0 commit comments

Comments
 (0)