Skip to content

Commit 2141651

Browse files
samuelhsinsamuelhsin
authored
add i18n support (3)
1 parent e247642 commit 2141651

5 files changed

Lines changed: 86 additions & 81 deletions

File tree

‎client/src/pages/ApiHome/ApiDetails/index.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import ReactJson from 'react-json-view';
3+
import intl from 'react-intl-universal';
34
import { getSessionId } from '../../../utils/utils';
45
import { Api, Group, ApiDetails } from '../../../typings';
56

@@ -39,75 +40,75 @@ const Details: React.FC<IProps> = (props) => {
3940
return (
4041
<div className="api-details">
4142
<div className="kv">
42-
<div className="label">ID</div>
43+
<div className="label">{intl.get('id').d('ID')}</div>
4344
<div className="value">{apiDetails?.apiId}</div>
4445
</div>
4546
<div className="kv">
46-
<div className="label">Name</div>
47+
<div className="label">{intl.get('name').d('Name')}</div>
4748
<div className="value">{apiDetails?.apiName}</div>
4849
</div>
4950
<div className="kv">
50-
<div className="label">Description</div>
51+
<div className="label">{intl.get('description').d('Description')}</div>
5152
<div className="value">{apiDetails?.description}</div>
5253
</div>
5354
<div className="kv">
54-
<div className="label">Created Time</div>
55+
<div className="label">{intl.get('created_time').d('Created Time')}</div>
5556
<div className="value">{apiDetails?.createdTime}</div>
5657
</div>
5758
<div className="kv">
58-
<div className="label">Modified Time</div>
59+
<div className="label">{intl.get('modified_time').d('Modified Time')}</div>
5960
<div className="value">{apiDetails?.modifiedTime}</div>
6061
</div>
6162
<div className="kv">
62-
<div className="label">Auth Type</div>
63+
<div className="label">{intl.get('auth_type').d('Auth Type')}</div>
6364
<div className="value">{apiDetails?.authType}</div>
6465
</div>
6566
<div className="kv">
66-
<div className="label">App Code Auth Type</div>
67+
<div className="label">{intl.get('app_code_auth_type').d('App Code Auth Type')}</div>
6768
<div className="value">{apiDetails?.appCodeAuthType}</div>
6869
</div>
6970
<div className="kv">
70-
<div className="label">Result Type</div>
71+
<div className="label">{intl.get('result_type').d('Result Type')}</div>
7172
<div className="value">{apiDetails?.resultType}</div>
7273
</div>
7374
<div className="kv">
74-
<div className="label">Visibility</div>
75+
<div className="label">{intl.get('visibility').d('Visibility')}</div>
7576
<div className="value">{apiDetails?.visibility}</div>
7677
</div>
7778
<div className="kv">
78-
<div className="label">Allow Signature Method</div>
79+
<div className="label">{intl.get('allow_signature_method').d('Allow Signature Method')}</div>
7980
<div className="value">{apiDetails?.allowSignatureMethod}</div>
8081
</div>
8182
<div className="kv">
82-
<div className="label">Request Body Format</div>
83+
<div className="label">{intl.get('request_body_format').d('Request Body Format')}</div>
8384
<div className="value">{apiDetails?.requestConfig.bodyFormat}</div>
8485
</div>
8586
<div className="kv">
86-
<div className="label">Request Post Body Desc</div>
87+
<div className="label">{intl.get('request_post_body_desc').d('Request Post Body Desc')}</div>
8788
<div className="value">{apiDetails?.requestConfig.postBodyDescription}</div>
8889
</div>
8990
<div className="kv">
90-
<div className="label">Request HTTP Method</div>
91+
<div className="label">{intl.get('request_http_method').d('Request HTTP Method')}</div>
9192
<div className="value">{apiDetails?.requestConfig.requestHttpMethod}</div>
9293
</div>
9394
<div className="kv">
94-
<div className="label">Request Mode</div>
95+
<div className="label">{intl.get('request_mode').d('Request Mode')}</div>
9596
<div className="value">{apiDetails?.requestConfig.requestMode}</div>
9697
</div>
9798
<div className="kv">
98-
<div className="label">Request Path</div>
99+
<div className="label">{intl.get('request_path').d('Request Path')}</div>
99100
<div className="value">{apiDetails?.requestConfig.requestPath}</div>
100101
</div>
101102
<div className="kv">
102-
<div className="label">Full Path</div>
103+
<div className="label">{intl.get('full_path').d('Full Path')}</div>
103104
<div className="value no-new-line">{getFullPath(api, group)}</div>
104105
</div>
105106
<div className="kv">
106-
<div className="label">Request Protocol</div>
107+
<div className="label">{intl.get('request_protocol').d('Request Protocol')}</div>
107108
<div className="value">{apiDetails?.requestConfig.requestProtocol}</div>
108109
</div>
109110
<div className="kv">
110-
<div className="label">Request Parameters</div>
111+
<div className="label">{intl.get('request_parameters').d('Request Parameters')}</div>
111112
<div className="value">
112113
<ReactJson collapsed src={apiDetails?.requestParameters} />
113114
</div>

‎client/src/pages/ApiHome/ApiList/index.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import ApiDetails from '../ApiDetails';
3+
import intl from 'react-intl-universal';
34
import { Table, Input, Select, TablePaginationConfig, Button, Drawer, Popconfirm, message } from 'antd';
45
import { SyncOutlined } from '@ant-design/icons';
56
import { getSessionId } from '../../../utils/utils';
@@ -76,7 +77,7 @@ const ApiList: React.FC<IProps> = () => {
7677

7778
const result = await res.json();
7879
if (result?.success) {
79-
message.success('Applied successfully');
80+
message.success(intl.get('applied_success').d('Applied successfully'));
8081
} else {
8182
message.error(result?.data);
8283
}
@@ -93,28 +94,28 @@ const ApiList: React.FC<IProps> = () => {
9394

9495
const columns = [
9596
{
96-
title: 'API ID',
97+
title: intl.get('api_id').d('API ID'),
9798
dataIndex: 'apiId',
9899
key: 'apiId',
99100
},
100101
{
101-
title: 'Name',
102+
title: intl.get('name').d('Name'),
102103
dataIndex: 'apiName',
103104
key: 'apiName',
104105
},
105106
{
106-
title: 'Description',
107+
title: intl.get('description').d('Description'),
107108
dataIndex: 'description',
108109
key: 'description',
109110
},
110111
{
111-
title: 'Method',
112+
title: intl.get('method').d('Method'),
112113
dataIndex: 'apiMethod',
113114
key: 'apiMethod',
114115
width: 100,
115116
},
116117
{
117-
title: 'Full Path',
118+
title: intl.get('full_path').d('Full Path'),
118119
dataIndex: 'apiPath',
119120
key: 'fullPath',
120121
render: (apiPath: string, row: Api) => {
@@ -128,25 +129,25 @@ const ApiList: React.FC<IProps> = () => {
128129
}
129130
},
130131
{
131-
title: 'Operator',
132+
title: intl.get('operation').d('Operation'),
132133
dataIndex: 'apiId',
133-
key: 'operator',
134+
key: 'operation',
134135
render: (_apiId: string, row: Api) => {
135136
return (
136137
<div className="operator-btn">
137138
<Popconfirm
138-
title="Apply Authorities"
139-
description="Are you sure to apply authorities?"
139+
title={intl.get('apply_authorities').d('Apply Authorities')}
140+
description={intl.get('apply_authorities_des').d('Are you sure to apply authorities?')}
140141
onConfirm={() => onApplyApiAuthorities(row)}
141-
okText="Yes"
142-
cancelText="No"
142+
okText={intl.get('yes').d('Yes')}
143+
cancelText={intl.get('no').d('No')}
143144
>
144-
<Button>Apply</Button>
145+
<Button>{intl.get('apply').d('Apply')}</Button>
145146
</Popconfirm>
146147
<Button onClick={() => {
147148
const group = groupList?.find(group => group.groupId === row?.groupId);
148149
setSelectedApi({ api: row, group });
149-
}}>Details</Button>
150+
}}>{intl.get('details').d('Details')}</Button>
150151
</div>
151152
);
152153
}
@@ -167,23 +168,23 @@ const ApiList: React.FC<IProps> = () => {
167168
<div className="toolbar">
168169
<div className="table-filter">
169170
<div className="region-selector">
170-
<div className="label-name">Region</div>
171+
<div className="label-name">{intl.get('region').d('Region')}</div>
171172
<Select
172173
defaultValue="cn-shanghai"
173174
style={{ width: 120 }}
174175
onChange={onRegionChange}
175176
options={[
176-
{ value: 'cn-shanghai', label: 'Shanghai' },
177-
{ value: 'cn-beijing', label: 'Beijing' },
178-
{ value: 'cn-hangzhou', label: 'Hangzhou' },
179-
{ value: 'cn-shenzhen', label: 'Shenzhen' },
180-
{ value: 'cn-hongkong', label: 'Hong Kong' },
181-
{ value: 'ap-southeast-1', label: 'Singapore' },
177+
{ value: 'cn-shanghai', label: intl.get('shanghai').d('Shanghai') },
178+
{ value: 'cn-beijing', label: intl.get('beijing').d('Beijing') },
179+
{ value: 'cn-hangzhou', label: intl.get('hangzhou').d('Hangzhou') },
180+
{ value: 'cn-shenzhen', label: intl.get('shenzhen').d('Shenzhen') },
181+
{ value: 'cn-hongkong', label: intl.get('hongkong').d('Hong Kong') },
182+
{ value: 'ap-southeast-1', label: intl.get('singapore').d('Singapore') },
182183
]}
183184
/>
184185
</div>
185186
<div className="search-api-name-input">
186-
<div className="label-name">Api Name</div>
187+
<div className="label-name">{intl.get('api_name').d('API Name')}</div>
187188
<Input onChange={(e: { target: { value: string } }) => setSearchApiName(e?.target?.value)} value={searchApiName} />
188189
</div>
189190
</div>

‎client/src/pages/ApiHome/AuthorizedApiList/index.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import ApiDetails from '../ApiDetails';
33
import delay from 'lodash/delay';
4+
import intl from 'react-intl-universal';
45
import { getSessionId } from '../../../utils/utils';
56
import { Table, TablePaginationConfig, Button, Drawer, Popconfirm, message, Input } from 'antd';
67
import { Api, Group, SiteUser } from '../../../typings';
@@ -100,7 +101,7 @@ const AuthorizedApiList: React.FC<IProps> = (props) => {
100101
if (result?.success) {
101102
delay(() => {
102103
queryApiList();
103-
message.success('Removed successfully');
104+
message.success(intl.get('remove_success').d('Removed successfully'));
104105
}, 1000);
105106
} else {
106107
message.error(result?.data);
@@ -110,33 +111,33 @@ const AuthorizedApiList: React.FC<IProps> = (props) => {
110111

111112
const columns = [
112113
{
113-
title: 'Region',
114+
title: intl.get('region').d('Region'),
114115
dataIndex: 'regionId',
115116
key: 'regionId',
116117
},
117118
{
118-
title: 'API ID',
119+
title: intl.get('api_id').d('API ID'),
119120
dataIndex: 'apiId',
120121
key: 'apiId',
121122
},
122123
{
123-
title: 'Name',
124+
title: intl.get('name').d('Name'),
124125
dataIndex: 'apiName',
125126
key: 'apiName',
126127
},
127128
{
128-
title: 'Description',
129+
title: intl.get('description').d('Description'),
129130
dataIndex: 'description',
130131
key: 'description',
131132
},
132133
{
133-
title: 'Method',
134+
title: intl.get('method').d('Method'),
134135
dataIndex: 'method',
135136
key: 'method',
136137
width: 100,
137138
},
138139
{
139-
title: 'Full Path',
140+
title: intl.get('full_path').d('Full Path'),
140141
dataIndex: 'path',
141142
key: 'fullPath',
142143
render: (apiPath: string, row: Api) => {
@@ -150,27 +151,27 @@ const AuthorizedApiList: React.FC<IProps> = (props) => {
150151
}
151152
},
152153
{
153-
title: 'Operator',
154+
title: intl.get('operation').d('Operation'),
154155
dataIndex: 'apiId',
155-
key: 'operator',
156+
key: 'operation',
156157
render: (_apiId: string, row: Api) => {
157158
return (
158159
<div className="operator-btn">
159160

160161
<Popconfirm
161-
title="Remove Authorities"
162-
description="Are you sure to remove authorities?"
162+
title={intl.get('remove_authorities').d('Remove Authorities')}
163+
description={intl.get('remove_authorities_des').d('Are you sure to remove authorities?')}
163164
onConfirm={() => onRemoveApiAuthorities(row)}
164-
okText="Yes"
165-
cancelText="No"
165+
okText={intl.get('yes').d('Yes')}
166+
cancelText={intl.get('no').d('No')}
166167
>
167-
<Button>Remove</Button>
168+
<Button>{intl.get('remove').d('Remove')}</Button>
168169
</Popconfirm>
169170

170171
<Button onClick={() => {
171172
const group = groupList?.find(group => group.groupId === row?.groupId);
172173
setSelectedApi({ api: row, group });
173-
}}>Details</Button>
174+
}}>{intl.get('details').d('Details')}</Button>
174175
</div>
175176
);
176177
}
@@ -187,7 +188,7 @@ const AuthorizedApiList: React.FC<IProps> = (props) => {
187188
<div className="toolbar">
188189
<div className="table-filter">
189190
<div className="search-api-name-input">
190-
<div className="label-name">Api Name</div>
191+
<div className="label-name">{intl.get('api_name').d('API Name')}</div>
191192
<Input onChange={(e: { target: { value: string } }) => setSearchApiName(e?.target?.value)} value={searchApiName} />
192193
</div>
193194
</div>

‎client/src/pages/ApiHome/AuthorizedInfo/index.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import delay from 'lodash/delay';
3+
import intl from 'react-intl-universal';
34
import { Button, message } from 'antd';
45
import { getSessionId } from '../../../utils/utils';
56
import { AppSecurity, SiteUser } from '../../../typings';
@@ -53,8 +54,8 @@ const AuthorizedInfo: React.FC<IProps> = (props) => {
5354

5455
const result = await res.json();
5556

56-
if (result?.success) message.success('Reset Success');
57-
else message.error('Reset Failed');
57+
if (result?.success) message.success(intl.get('reset_success').d('Reset Success'));
58+
else message.error(intl.get('reset_failed').d('Reset Failed'));
5859

5960
setResettingAppCode(false);
6061

@@ -80,8 +81,8 @@ const AuthorizedInfo: React.FC<IProps> = (props) => {
8081

8182
const result = await res.json();
8283

83-
if (result?.success) message.success('Reset Success');
84-
else message.error('Reset Failed');
84+
if (result?.success) message.success(intl.get('reset_success').d('Reset Success'));
85+
else message.error(intl.get('reset_failed').d('Reset Failed'));
8586

8687
setResettingAppSecret(false);
8788

@@ -92,41 +93,41 @@ const AuthorizedInfo: React.FC<IProps> = (props) => {
9293
return (
9394
<div className="authorized-info-page">
9495
<div className="kv">
95-
<div className="label">APP Code</div>
96+
<div className="label">{intl.get('app_code').d('APP Code')}</div>
9697
<div className="value">
9798
<span className="text-wrapper">{security?.appCode}</span>
98-
<Button className="reset-btn" size="small" loading={resettingAppCode} onClick={() => onResetAppCode()}>Reset</Button>
99+
<Button className="reset-btn" size="small" loading={resettingAppCode} onClick={() => onResetAppCode()}>{intl.get('reset').d('Reset')}</Button>
99100
</div>
100101
</div>
101102
<div className="kv">
102-
<div className="label">APP Key</div>
103+
<div className="label">{intl.get('app_key').d('APP Key')}</div>
103104
<div className="value">{security?.appKey}</div>
104105
</div>
105106
<div className="kv">
106-
<div className="label">APP Secret</div>
107+
<div className="label">{intl.get('app_secret').d('APP Secret')}</div>
107108
<div className="value">
108109
{showAppSecret ?
109110
<span className="text-wrapper">
110111
<span>{security?.appSecret}</span>
111-
<Button className="hide-secret-btn" size="small" onClick={() => setShowAppSecret(false)}>Hide</Button>
112+
<Button className="hide-secret-btn" size="small" onClick={() => setShowAppSecret(false)}>{intl.get('hide').d('Hide')}</Button>
112113
</span> :
113114
<span className="text-wrapper">
114-
<span className="show-secret-span" onClick={() => setShowAppSecret(true)}>Click to Show</span>
115+
<span className="show-secret-span" onClick={() => setShowAppSecret(true)}>{intl.get('click_to_show').d('Click to Show')}</span>
115116
</span>
116117
}
117-
<Button className="reset-btn" size="small" loading={resettingAppSecret} onClick={() => onResetAppSecret()}>Reset</Button>
118+
<Button className="reset-btn" size="small" loading={resettingAppSecret} onClick={() => onResetAppSecret()}>{intl.get('reset').d('Reset')}</Button>
118119
</div>
119120
</div>
120121
<div className="kv">
121-
<div className="label">Created Time</div>
122+
<div className="label">{intl.get('created_time').d('Created Time')}</div>
122123
<div className="value">{security?.createdTime}</div>
123124
</div>
124125
<div className="kv">
125-
<div className="label">Modified Time</div>
126+
<div className="label">{intl.get('modified_time').d('Modified Time')}</div>
126127
<div className="value">{security?.modifiedTime}</div>
127128
</div>
128129
<div className="toolbar">
129-
<Button shape="round" onClick={() => querySecurity()}>Refresh</Button>
130+
<Button shape="round" onClick={() => querySecurity()}>{intl.get('refresh').d('Refresh')}</Button>
130131
</div>
131132
</div>
132133
);

0 commit comments

Comments
 (0)