Skip to content

Commit 352d715

Browse files
iamfaraniamfaran
committed
Add trans for Environment Detail Page
1 parent 65ae08c commit 352d715

File tree

2 files changed

+43
-41
lines changed

2 files changed

+43
-41
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { getEnvironmentTagColor } from "./utils/environmentUtils";
4646
import { formatAPICalls, getAPICallsStatusColor } from "./services/license.service";
4747
import ErrorComponent from './components/ErrorComponent';
4848
import { Level1SettingPageContent } from "../styled";
49+
import { trans } from "i18n";
4950

5051
/**
5152
* Environment Detail Page Component
@@ -105,9 +106,9 @@ const EnvironmentDetail: React.FC = () => {
105106
if (error || !environment) {
106107
return (
107108
<ErrorComponent
108-
errorMessage={"Environment Not Found"}
109+
errorMessage={trans("enterprise.environments.detail.environmentNotFound")}
109110
returnPath="/setting/environments"
110-
returnLabel="Return to Environments List"
111+
returnLabel={trans("enterprise.environments.detail.returnToEnvironmentsList")}
111112
/>
112113
);
113114
}
@@ -138,26 +139,26 @@ const EnvironmentDetail: React.FC = () => {
138139
// Stats data for the cards
139140
const statsData = [
140141
{
141-
title: "Type",
142-
value: environment.environmentType || "Unknown",
142+
title: trans("enterprise.environments.detail.type"),
143+
value: environment.environmentType || trans("enterprise.environments.detail.unknown"),
143144
icon: <CloudServerOutlined />,
144145
color: getEnvironmentTagColor(environment.environmentType)
145146
},
146147
{
147-
title: "Status",
148-
value: environment.isLicensed ? "Licensed" : "Unlicensed",
148+
title: trans("enterprise.environments.detail.status"),
149+
value: environment.isLicensed ? trans("enterprise.environments.detail.licensed") : trans("enterprise.environments.detail.unlicensed"),
149150
icon: environment.isLicensed ? <CheckCircleOutlined /> : <CloseCircleOutlined />,
150151
color: environment.isLicensed ? "#52c41a" : "#ff4d4f"
151152
},
152153
{
153-
title: "API Key",
154-
value: environment.environmentApikey ? "Configured" : "Not Set",
154+
title: trans("enterprise.environments.detail.apiKey"),
155+
value: environment.environmentApikey ? trans("enterprise.environments.detail.configured") : trans("enterprise.environments.detail.notSet"),
155156
icon: <SafetyOutlined />,
156157
color: environment.environmentApikey ? "#1890ff" : "#faad14"
157158
},
158159
{
159-
title: "Master Env",
160-
value: environment.isMaster ? "Yes" : "No",
160+
title: trans("enterprise.environments.detail.masterEnv"),
161+
value: environment.isMaster ? trans("enterprise.environments.yes") : trans("enterprise.environments.no"),
161162
icon: <UserOutlined />,
162163
color: environment.isMaster ? "#722ed1" : "#8c8c8c"
163164
}
@@ -168,7 +169,7 @@ const EnvironmentDetail: React.FC = () => {
168169
key: 'workspaces',
169170
label: (
170171
<span>
171-
<AppstoreOutlined /> Workspaces
172+
<AppstoreOutlined /> {trans("enterprise.environments.detail.workspaces")}
172173
</span>
173174
),
174175
children: <WorkspacesTab environment={environment} />
@@ -177,7 +178,7 @@ const EnvironmentDetail: React.FC = () => {
177178
key: 'userGroups',
178179
label: (
179180
<span>
180-
<UsergroupAddOutlined /> User Groups
181+
<UsergroupAddOutlined /> {trans("enterprise.environments.detail.userGroups")}
181182
</span>
182183
),
183184
children: <UserGroupsTab environment={environment} />
@@ -192,12 +193,12 @@ const EnvironmentDetail: React.FC = () => {
192193
items={[
193194
{
194195
key: 'environments',
195-
title: 'Environments',
196+
title: trans("enterprise.environments.title"),
196197
onClick: () => history.push('/setting/environments')
197198
},
198199
{
199200
key: 'current',
200-
title: environment.environmentName || "Environment Detail"
201+
title: environment.environmentName || trans("enterprise.environments.detail.environmentDetail")
201202
}
202203
]}
203204
/>
@@ -224,7 +225,7 @@ const EnvironmentDetail: React.FC = () => {
224225

225226
{/* Basic Environment Information Card */}
226227
<Card
227-
title="Environment Overview"
228+
title={trans("enterprise.environments.detail.environmentOverview")}
228229
style={{
229230
marginBottom: "24px",
230231
borderRadius: '4px',
@@ -238,7 +239,7 @@ const EnvironmentDetail: React.FC = () => {
238239
column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
239240
size="small"
240241
>
241-
<Descriptions.Item label="Domain">
242+
<Descriptions.Item label={trans("enterprise.environments.domain")}>
242243
{environment.environmentFrontendUrl ? (
243244
<a
244245
href={environment.environmentFrontendUrl}
@@ -248,32 +249,32 @@ const EnvironmentDetail: React.FC = () => {
248249
{environment.environmentFrontendUrl} <LinkOutlined />
249250
</a>
250251
) : (
251-
"No domain set"
252+
trans("enterprise.environments.detail.noDomainSet")
252253
)}
253254
</Descriptions.Item>
254-
<Descriptions.Item label="Environment ID">
255+
<Descriptions.Item label={trans("enterprise.environments.detail.environmentId")}>
255256
<code style={{ padding: '2px 6px', background: '#f5f5f5', borderRadius: '3px' }}>
256257
{environment.environmentId}
257258
</code>
258259
</Descriptions.Item>
259-
<Descriptions.Item label="License Status">
260+
<Descriptions.Item label={trans("enterprise.environments.detail.licenseStatus")}>
260261
{(() => {
261262
switch (environment.licenseStatus) {
262263
case 'checking':
263-
return <Tag icon={<SyncOutlined spin />} color="blue" style={{ borderRadius: '4px' }}>Checking...</Tag>;
264+
return <Tag icon={<SyncOutlined spin />} color="blue" style={{ borderRadius: '4px' }}>{trans("enterprise.environments.licenseStatus.checking")}</Tag>;
264265
case 'licensed':
265-
return <Tag icon={<CheckCircleOutlined />} color="green" style={{ borderRadius: '4px' }}>Licensed</Tag>;
266+
return <Tag icon={<CheckCircleOutlined />} color="green" style={{ borderRadius: '4px' }}>{trans("enterprise.environments.licenseStatus.licensed")}</Tag>;
266267
case 'unlicensed':
267-
return <Tag icon={<CloseCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>License Needed</Tag>;
268+
return <Tag icon={<CloseCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>{trans("enterprise.environments.detail.licenseNeeded")}</Tag>;
268269
case 'error':
269-
return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>Setup Required</Tag>;
270+
return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>{trans("enterprise.environments.detail.setupRequired")}</Tag>;
270271
default:
271-
return <Tag color="default" style={{ borderRadius: '4px' }}>Unknown</Tag>;
272+
return <Tag color="default" style={{ borderRadius: '4px' }}>{trans("enterprise.environments.detail.unknown")}</Tag>;
272273
}
273274
})()}
274275
</Descriptions.Item>
275-
<Descriptions.Item label="Created">
276-
{environment.createdAt ? new Date(environment.createdAt).toLocaleDateString() : "Unknown"}
276+
<Descriptions.Item label={trans("enterprise.environments.detail.created")}>
277+
{environment.createdAt ? new Date(environment.createdAt).toLocaleDateString() : trans("enterprise.environments.detail.unknown")}
277278
</Descriptions.Item>
278279
</Descriptions>
279280
</Card>
@@ -285,7 +286,7 @@ const EnvironmentDetail: React.FC = () => {
285286
title={
286287
<span>
287288
<CrownOutlined style={{ color: '#52c41a', marginRight: '8px' }} />
288-
License Details
289+
{trans("enterprise.environments.detail.licenseDetails")}
289290
</span>
290291
}
291292
style={{
@@ -304,7 +305,7 @@ const EnvironmentDetail: React.FC = () => {
304305
styles={{ body: { padding: '16px' } }}
305306
>
306307
<Statistic
307-
title="API Calls Remaining"
308+
title={trans("enterprise.environments.detail.apiCallsRemaining")}
308309
value={environment.licenseDetails.remainingAPICalls}
309310
formatter={(value) => (
310311
<span style={{
@@ -333,7 +334,7 @@ const EnvironmentDetail: React.FC = () => {
333334
color: '#8c8c8c',
334335
marginTop: '4px'
335336
}}>
336-
{environment.licenseDetails.apiCallsUsage || 0}% used
337+
{trans("enterprise.environments.percentUsed", { percent: environment.licenseDetails.apiCallsUsage || 0 })}
337338
</div>
338339
</div>
339340
</Card>
@@ -347,7 +348,7 @@ const EnvironmentDetail: React.FC = () => {
347348
styles={{ body: { padding: '16px' } }}
348349
>
349350
<Statistic
350-
title="Total API Calls Limit"
351+
title={trans("enterprise.environments.detail.totalApiCallsLimit")}
351352
value={environment.licenseDetails.totalAPICallsLimit}
352353
formatter={(value) => value?.toLocaleString()}
353354
prefix={<ApiOutlined />}
@@ -356,7 +357,7 @@ const EnvironmentDetail: React.FC = () => {
356357
color="blue"
357358
style={{ marginTop: '12px' }}
358359
>
359-
{environment.licenseDetails.eeLicenses.length} License{environment.licenseDetails.eeLicenses.length !== 1 ? 's' : ''}
360+
{environment.licenseDetails.eeLicenses.length} {environment.licenseDetails.eeLicenses.length !== 1 ? trans("enterprise.environments.detail.licenses") : trans("enterprise.environments.detail.license")}
360361
</Tag>
361362
</Card>
362363
</Col>
@@ -369,8 +370,8 @@ const EnvironmentDetail: React.FC = () => {
369370
styles={{ body: { padding: '16px' } }}
370371
>
371372
<Statistic
372-
title="Enterprise Edition"
373-
value={environment.licenseDetails.eeActive ? "Active" : "Inactive"}
373+
title={trans("enterprise.environments.detail.enterpriseEdition")}
374+
value={environment.licenseDetails.eeActive ? trans("enterprise.environments.detail.active") : trans("enterprise.environments.detail.inactive")}
374375
formatter={(value) => (
375376
<Tag
376377
color={environment.licenseDetails?.eeActive ? "green" : "red"}
@@ -388,7 +389,7 @@ const EnvironmentDetail: React.FC = () => {
388389
<div style={{ marginTop: '24px' }}>
389390
<Typography.Title level={5} style={{ marginBottom: '16px' }}>
390391
<UserOutlined style={{ marginRight: '8px' }} />
391-
License Information
392+
{trans("enterprise.environments.detail.licenseInformation")}
392393
</Typography.Title>
393394

394395
<Row gutter={[16, 16]}>
@@ -408,13 +409,13 @@ const EnvironmentDetail: React.FC = () => {
408409
</strong>
409410
</div>
410411
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>
411-
ID: {license.customerId}
412+
{trans("enterprise.environments.id")}: {license.customerId}
412413
</div>
413414
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>
414415
UUID: <span style={{ fontFamily: 'monospace' }}>{license.uuid.substring(0, 8)}...</span>
415416
</div>
416417
<Tag color="blue">
417-
{license.apiCallsLimit.toLocaleString()} calls
418+
{license.apiCallsLimit.toLocaleString()} {trans("enterprise.environments.detail.calls")}
418419
</Tag>
419420
</Card>
420421
</Col>

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Button, Tag, Typography, Row, Col } from 'antd';
33
import { EditOutlined, CloudServerOutlined } from '@ant-design/icons';
44
import { Environment } from '../types/environment.types';
55
import { getEnvironmentTagColor } from '../utils/environmentUtils';
6+
import { trans } from 'i18n';
67

78
const { Title, Text } = Typography;
89

@@ -49,15 +50,15 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
4950
</div>
5051
<div>
5152
<Title level={3} style={{ margin: '0 0 8px 0', color: '#222222', fontWeight: '500' }}>
52-
{environment.environmentName || "Unnamed Environment"}
53+
{environment.environmentName || trans("enterprise.environments.unnamedEnvironment")}
5354
</Title>
5455
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
5556
<Text style={{
5657
color: '#8b8fa3',
5758
fontSize: '14px',
5859
fontFamily: 'monospace'
5960
}}>
60-
ID: {environment.environmentId}
61+
{trans("enterprise.environments.id")}: {environment.environmentId}
6162
</Text>
6263
<Tag
6364
color={getEnvironmentTagColor(environment.environmentType)}
@@ -71,12 +72,12 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
7172
</Tag>
7273
{environment.isMaster && (
7374
<Tag color="green" style={{ marginLeft: 0, borderRadius: '4px', fontSize: '12px' }}>
74-
Master
75+
{trans("enterprise.environments.master")}
7576
</Tag>
7677
)}
7778
{environment.isLicensed === false && (
7879
<Tag color="orange" style={{ marginLeft: 0, borderRadius: '4px', fontSize: '12px' }}>
79-
Unlicensed
80+
{trans("enterprise.environments.detail.unlicensed")}
8081
</Tag>
8182
)}
8283
</div>
@@ -93,7 +94,7 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
9394
borderRadius: '4px'
9495
}}
9596
>
96-
Edit Environment
97+
{trans("enterprise.environments.unlicensed.editEnvironment")}
9798
</Button>
9899
</Col>
99100
</Row>

0 commit comments

Comments
 (0)