Skip to content

Commit 4bc2eca

Browse files
iamfaraniamfaran
committed
refactor environments listing page
1 parent dab7dff commit 4bc2eca

File tree

6 files changed

+610
-425
lines changed

6 files changed

+610
-425
lines changed

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

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Form, Modal, Input } from "antd";
4+
import { trans, transToNode } from "i18n";
5+
6+
const Content = styled.div`
7+
&,
8+
.ant-form-item-label,
9+
.ant-form-item-label label {
10+
font-size: 13px;
11+
line-height: 19px;
12+
}
13+
14+
.ant-input {
15+
font-size: 13px;
16+
line-height: 20px;
17+
padding: 5px 11px;
18+
19+
&::-webkit-input-placeholder {
20+
color: #b8b9bf;
21+
}
22+
}
23+
24+
.ant-form-item-label {
25+
margin-top: 13px;
26+
padding-bottom: 5px;
27+
28+
label {
29+
display: inline;
30+
31+
::before {
32+
vertical-align: bottom;
33+
}
34+
}
35+
}
36+
37+
.ant-form-item {
38+
margin-bottom: 12px;
39+
}
40+
41+
.ant-form-item-explain-error {
42+
font-size: 13px;
43+
line-height: 12px;
44+
margin-top: 4px;
45+
position: absolute;
46+
}
47+
`;
48+
49+
// Define props for the modal component
50+
interface ApiKeyModalProps {
51+
visible: boolean;
52+
environment: any | null;
53+
loading: boolean;
54+
onClose: () => void;
55+
onSubmit: (environmentId: string, apiKey: string) => void;
56+
}
57+
58+
export const ApiKeyModal: React.FC<ApiKeyModalProps> = ({
59+
visible,
60+
environment,
61+
loading,
62+
onClose,
63+
onSubmit,
64+
}) => {
65+
const [form] = Form.useForm();
66+
67+
const handleSubmit = () => {
68+
form.validateFields().then((values) => {
69+
if (environment) {
70+
onSubmit(environment.id, values.apiKey);
71+
form.resetFields();
72+
}
73+
});
74+
};
75+
76+
const handleCancel = () => {
77+
form.resetFields();
78+
onClose();
79+
};
80+
81+
return (
82+
<Modal
83+
title={
84+
environment?.hasApiKey
85+
? trans("environmentSettings.updateApiKeyTitle")
86+
: trans("environmentSettings.addApiKeyTitle")
87+
}
88+
open={visible}
89+
onCancel={handleCancel}
90+
onOk={handleSubmit}
91+
okText={
92+
environment?.hasApiKey
93+
? trans("environmentSettings.updateApiKeyButton")
94+
: trans("environmentSettings.addApiKeyButton")
95+
}
96+
confirmLoading={loading}
97+
>
98+
<Content>
99+
<p>
100+
{transToNode("environmentSettings.apiKeyModalDescription", {
101+
domain: environment?.domain ? (
102+
<span style={{ fontWeight: 500 }}>{environment.domain}</span>
103+
) : "",
104+
})}
105+
</p>
106+
<Form layout="vertical" form={form}>
107+
<Form.Item
108+
name="apiKey"
109+
label={trans("environmentSettings.apiKeyLabel")}
110+
rules={[
111+
{
112+
required: true,
113+
message: trans("environmentSettings.apiKeyRequired"),
114+
},
115+
{
116+
min: 6,
117+
message: trans("environmentSettings.apiKeyTooShort"),
118+
},
119+
]}
120+
>
121+
<Input.Password
122+
placeholder={trans("environmentSettings.apiKeyPlaceholder")}
123+
/>
124+
</Form.Item>
125+
</Form>
126+
</Content>
127+
</Modal>
128+
);
129+
};

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

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Form, Input, Modal } from "antd";
4+
import { DangerIcon } from "lowcoder-design";
5+
import { trans, transToNode } from "i18n";
6+
7+
const Content = styled.div`
8+
&,
9+
.ant-form-item-label,
10+
.ant-form-item-label label {
11+
font-size: 13px;
12+
line-height: 19px;
13+
}
14+
15+
.ant-input {
16+
font-size: 13px;
17+
line-height: 20px;
18+
padding: 5px 11px;
19+
20+
&::-webkit-input-placeholder {
21+
color: #b8b9bf;
22+
}
23+
}
24+
25+
.ant-form-item-label {
26+
margin-top: 13px;
27+
padding-bottom: 5px;
28+
29+
label {
30+
display: inline;
31+
32+
::before {
33+
vertical-align: bottom;
34+
}
35+
}
36+
}
37+
38+
.ant-form-item {
39+
margin-bottom: 12px;
40+
}
41+
42+
.ant-form-item-explain-error {
43+
font-size: 13px;
44+
line-height: 12px;
45+
margin-top: 4px;
46+
position: absolute;
47+
}
48+
`;
49+
50+
const Tip = styled.div`
51+
background: #fff3f1;
52+
border-radius: 4px;
53+
color: #333333;
54+
padding: 8px 13px 8px 16px;
55+
display: flex;
56+
line-height: 20px;
57+
margin-top: 8px;
58+
59+
span {
60+
margin-left: 8px;
61+
}
62+
63+
svg {
64+
min-width: 16px;
65+
width: 16px;
66+
height: 16px;
67+
margin-top: 2px;
68+
}
69+
`;
70+
71+
interface DeleteConfirmModalProps {
72+
visible: boolean;
73+
environment: any | null;
74+
onClose: () => void;
75+
onDelete: (environmentId: string) => void;
76+
}
77+
78+
export const DeleteConfirmModal: React.FC<DeleteConfirmModalProps> = ({
79+
visible,
80+
environment,
81+
onClose,
82+
onDelete,
83+
}) => {
84+
const [form] = Form.useForm();
85+
86+
const handleOk = () => {
87+
form.validateFields().then(() => {
88+
if (environment) {
89+
onDelete(environment.id);
90+
form.resetFields();
91+
onClose();
92+
}
93+
});
94+
};
95+
96+
const handleCancel = () => {
97+
form.resetFields();
98+
onClose();
99+
};
100+
101+
return (
102+
<Modal
103+
title={trans("environmentSettings.deleteModalTitle")}
104+
open={visible}
105+
onOk={handleOk}
106+
onCancel={handleCancel}
107+
okText={trans("environmentSettings.deleteModalBtn")}
108+
okButtonProps={{ danger: true }}
109+
>
110+
<Content>
111+
<Tip>
112+
<DangerIcon />
113+
<span>
114+
{transToNode("environmentSettings.deleteModalContent", {
115+
permanentlyDelete: (
116+
<b>{trans("environmentSettings.permanentlyDelete")}</b>
117+
),
118+
notRestored: <b>{trans("environmentSettings.notRestored")}</b>,
119+
})}
120+
</span>
121+
</Tip>
122+
<Form layout="vertical" form={form}>
123+
<Form.Item
124+
name="name"
125+
label={transToNode("environmentSettings.deleteModalLabel", {
126+
name: environment ? (
127+
<span style={{ color: "#4965F2", margin: "0 5px" }}>
128+
{environment.name}
129+
</span>
130+
) : "",
131+
})}
132+
rules={[
133+
{
134+
required: true,
135+
message: trans("environmentSettings.deleteModalTip"),
136+
},
137+
{
138+
validator: (_, value) =>
139+
environment && value === environment.name
140+
? Promise.resolve()
141+
: Promise.reject(new Error(trans("environmentSettings.deleteModalErr"))),
142+
},
143+
]}
144+
>
145+
<Input placeholder={trans("environmentSettings.name")} />
146+
</Form.Item>
147+
</Form>
148+
</Content>
149+
</Modal>
150+
);
151+
};

0 commit comments

Comments
 (0)