Skip to content

Commit c7b978c

Browse files
qiaofengxiqiaofengxi
authored
Merge pull request #257 from easyops-cn/williamcai/bricks/nav/launchpad-config/add_i18n_support
feat(launchpad-button-v2): Add i18n support
2 parents 4bfaa87 + 705ef6e commit c7b978c

File tree

15 files changed

+184
-98
lines changed

15 files changed

+184
-98
lines changed

‎bricks/nav/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"@next-api-sdk/cmdb-sdk": "^1.1.1",
4040
"@next-api-sdk/micro-app-standalone-sdk": "^1.1.1",
4141
"@next-api-sdk/sys-setting-sdk": "^1.1.1",
42-
"@next-api-sdk/user-service-sdk": "^1.3.0",
42+
"@next-api-sdk/user-service-sdk": "^1.4.0",
4343
"@next-core/easyops-runtime": "^0.15.1",
4444
"@next-core/element": "^1.2.18",
4545
"@next-core/i18n": "^1.0.81",

‎bricks/nav/src/launchpad-button-v2/Launchpad.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,13 @@ import {
2121
} from "./PlatformCategory";
2222
import { getRuntime } from "@next-core/runtime";
2323
import { CSSTransition, TransitionGroup } from "react-transition-group";
24+
import { initializeReactI18n, useTranslation } from "@next-core/i18n/react";
25+
import { K, NS, locales } from "./i18n";
26+
27+
initializeReactI18n(NS, locales);
2428

2529
export function Launchpad({ active }: { active?: boolean }) {
30+
const { t } = useTranslation(NS);
2631
const searchInputRef = useRef<HTMLInputElement>(null);
2732
const [favorites, setFavorites] = useState<FavMenuItem[]>([]);
2833
const handleClickSearchBox = useCallback(() => {
@@ -119,7 +124,7 @@ export function Launchpad({ active }: { active?: boolean }) {
119124
<div className="sidebar">
120125
<div className="union">
121126
<div className="quick-nav">
122-
<div className="quick-nav-label">快捷访问</div>
127+
<div className="quick-nav-label">{t(K.QUICK_ACCESS)}</div>
123128
{/* <Loading loading={loading || loadingFavorites} /> */}
124129
<TransitionGroup>
125130
<ul className="sidebar-menu quick-nav-menu">
@@ -148,7 +153,7 @@ export function Launchpad({ active }: { active?: boolean }) {
148153

149154
{showPlatformCategory && (
150155
<div className="platform-nav">
151-
<div className="platform-nav-label">平台底座</div>
156+
<div className="platform-nav-label">{t(K.PLATFORM_BASE)}</div>
152157
<ul className="sidebar-menu platform-nav-menu">
153158
{platformCategories.map((item, index) => (
154159
<PlatformCategorySidebarMenuItem
@@ -165,7 +170,7 @@ export function Launchpad({ active }: { active?: boolean }) {
165170
{showScenarioCenter && (
166171
<div className="jump-nav">
167172
<WrappedLink type="plain" url={"/portal/scenario"}>
168-
<div className="jump-nav-label">场景中心</div>
173+
<div className="jump-nav-label">{t(K.SCENARIO_CENTER)}</div>
169174
<WrappedIcon lib="antd" icon="right" theme="outlined" />
170175
</WrappedLink>
171176
</div>
@@ -174,15 +179,15 @@ export function Launchpad({ active }: { active?: boolean }) {
174179
{showSolutionCenter && (
175180
<div className="jump-nav">
176181
<WrappedLink type="plain" url={"/portal/solution"}>
177-
<div className="jump-nav-label">解决方案</div>
182+
<div className="jump-nav-label">{t(K.SOLUTIONS)}</div>
178183
<WrappedIcon lib="antd" icon="right" theme="outlined" />
179184
</WrappedLink>
180185
</div>
181186
)}
182187
{showOpenPlatform && (
183188
<div className="jump-nav">
184189
<WrappedLink type="plain" url={"/developers"}>
185-
<div className="jump-nav-label">开放平台</div>
190+
<div className="jump-nav-label">{t(K.OPEN_PLATFORM)}</div>
186191
<WrappedIcon lib="antd" icon="right" theme="outlined" />
187192
</WrappedLink>
188193
</div>
@@ -201,7 +206,7 @@ export function Launchpad({ active }: { active?: boolean }) {
201206
/>
202207
<input
203208
ref={searchInputRef}
204-
placeholder="通过关键字搜索"
209+
placeholder={t(K.SEARCH_PLACEHOLDER) as string}
205210
value={q}
206211
onChange={handleSearch}
207212
className="search-input"
@@ -216,7 +221,7 @@ export function Launchpad({ active }: { active?: boolean }) {
216221
</div>
217222
{platform === "#all" && (
218223
<div className={classNames({ empty: recentVisits.length === 0 })}>
219-
<div className="recent-visits-label">最近访问</div>
224+
<div className="recent-visits-label">{t(K.RECENT_VISITS)}</div>
220225
<ul className="recent-visits">
221226
{recentVisits.map((item, index) => (
222227
<li key={index}>
@@ -243,7 +248,7 @@ export function Launchpad({ active }: { active?: boolean }) {
243248
{menuGroups.map((group) => (
244249
<MenuGroup
245250
key={group.name}
246-
name={group.name}
251+
name={group.localeName as string}
247252
items={group.items}
248253
/>
249254
))}

‎bricks/nav/src/launchpad-button-v2/MenuGroup.spec.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { describe, test, expect, jest } from "@jest/globals";
3-
import { render, fireEvent } from "@testing-library/react";
3+
import { render, fireEvent, getByTestId } from "@testing-library/react";
44
import { MenuGroup, SidebarMenuItem } from "./MenuGroup.js";
55
import { LaunchpadContextData, LaunchpadsContext } from "./LaunchpadContext.js";
66
import type {
@@ -43,6 +43,7 @@ describe("MenuGroup", () => {
4343
type: "app",
4444
id: "cmdb-instances",
4545
name: "实例管理",
46+
localeName: "实例管理",
4647
menuIcon: {
4748
lib: "antd",
4849
icon: "",
@@ -52,6 +53,7 @@ describe("MenuGroup", () => {
5253
type: "custom",
5354
id: "foo",
5455
name: "Bar",
56+
localeName: "Bar",
5557
menuIcon: {
5658
lib: "antd",
5759
icon: "link",
@@ -61,16 +63,19 @@ describe("MenuGroup", () => {
6163
type: "dir",
6264
id: "extends",
6365
name: "扩展",
66+
localeName: "扩展",
6467
items: [
6568
{
6669
type: "app",
6770
id: "dir-cmdb-app",
6871
name: "Dir APP",
72+
localeName: "Dir APP",
6973
},
7074
{
7175
type: "custom",
7276
instanceId: "dir-cmdb-custom",
7377
name: "Dir Custom",
78+
localeName: "Dir Custom",
7479
},
7580
],
7681
},
@@ -129,6 +134,7 @@ describe("MenuGroup", () => {
129134
type: "custom",
130135
id: "foo",
131136
name: "Bar",
137+
localeName: "Bar",
132138
menuIcon: {
133139
lib: "antd",
134140
icon: "link",
@@ -143,8 +149,9 @@ describe("MenuGroup", () => {
143149

144150
// 取消收藏
145151
fireEvent.click(
146-
getByText("实例管理").parentElement?.parentElement?.querySelector(
147-
'[title="取消收藏"]'
152+
getByTestId(
153+
getByText("实例管理").parentElement?.parentElement as HTMLElement,
154+
"menu-item-star"
148155
) as HTMLElement
149156
);
150157
// 搜索后影响文件夹展开/折叠
@@ -156,8 +163,9 @@ describe("MenuGroup", () => {
156163

157164
// 收藏
158165
fireEvent.click(
159-
getByText("实例管理").parentElement?.parentElement?.querySelector(
160-
'[title="收藏"]'
166+
getByTestId(
167+
getByText("实例管理").parentElement?.parentElement as HTMLElement,
168+
"menu-item-star"
161169
) as HTMLElement
162170
);
163171
rerender(getComponent(true));

‎bricks/nav/src/launchpad-button-v2/MenuGroup.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import type {
99
SidebarMenuItemData,
1010
} from "./interfaces";
1111
import { Target } from "@next-bricks/basic/link";
12+
import { initializeReactI18n, useTranslation } from "@next-core/i18n/react";
13+
import { K, NS, locales } from "./i18n";
14+
15+
initializeReactI18n(NS, locales);
1216

1317
export interface MenuGroupProps {
1418
name: string;
@@ -24,7 +28,7 @@ export function MenuGroup({ name, items }: MenuGroupProps) {
2428
item.type === "dir" ? (
2529
<MenuItemFolder
2630
key={`${item.type}-${item.id}`}
27-
name={item.name}
31+
name={item.localeName as string}
2832
items={item.items}
2933
/>
3034
) : (
@@ -41,6 +45,7 @@ export interface MenuItemProps {
4145
}
4246

4347
function MenuItem({ item }: MenuItemProps) {
48+
const { t } = useTranslation(NS);
4449
const { loadingFavorites, readonly, pushRecentVisit, toggleStar, isStarred } =
4550
useLaunchpadContext();
4651

@@ -85,16 +90,17 @@ function MenuItem({ item }: MenuItemProps) {
8590
]) as any)
8691
: null)}
8792
/>
88-
<span className="menu-item-label">{item.name}</span>
93+
<span className="menu-item-label">{item.localeName}</span>
8994
</WrappedLink>
9095
{!readonly && (
9196
<WrappedIcon
9297
lib="fa"
9398
prefix={starred ? "fas" : "far"}
9499
icon="star"
95100
className="menu-item-star"
96-
title={starred ? "取消收藏" : "收藏"}
101+
title={(starred ? t(K.UNFAVORITE) : t(K.FAVORITE)) as string}
97102
onClick={handleStarClick}
103+
data-testid="menu-item-star"
98104
/>
99105
)}
100106
</li>

‎bricks/nav/src/launchpad-button-v2/api.spec.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,11 +139,13 @@ describe("fetchLaunchpadInfo", () => {
139139
"customLinksById": Map {
140140
"foo" => {
141141
"id": "foo",
142+
"localeName": "Bar",
142143
"name": "Bar",
143144
"type": "custom",
144145
},
145146
"dir-cmdb-custom" => {
146147
"id": "dir-cmdb-custom",
148+
"localeName": "Dir Custom",
147149
"name": "Dir Custom",
148150
"type": "custom",
149151
},
@@ -153,13 +155,15 @@ describe("fetchLaunchpadInfo", () => {
153155
"items": [
154156
{
155157
"id": "cmdb-instances",
158+
"localeName": undefined,
156159
"menuIcon": undefined,
157160
"name": "Cmdb Instances",
158161
"type": "app",
159162
"url": undefined,
160163
},
161164
{
162165
"id": "foo",
166+
"localeName": "Bar",
163167
"name": "Bar",
164168
"type": "custom",
165169
},
@@ -174,14 +178,17 @@ describe("fetchLaunchpadInfo", () => {
174178
},
175179
{
176180
"id": "dir-cmdb-custom",
181+
"localeName": "Dir Custom",
177182
"name": "Dir Custom",
178183
"type": "custom",
179184
},
180185
],
186+
"localeName": "extends",
181187
"name": "extends",
182188
"type": "dir",
183189
},
184190
],
191+
"localeName": "IT 资源管理",
185192
"name": "IT 资源管理",
186193
},
187194
],
@@ -462,7 +469,7 @@ describe("platformCategory", () => {
462469
},
463470
"id": "#all",
464471
"items": [],
465-
"name": "全部",
472+
"name": "All",
466473
},
467474
{
468475
"icon": {

0 commit comments

Comments
 (0)