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

Lines changed: 129 additions & 0 deletions
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

Lines changed: 151 additions & 0 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy