Skip to content

Commit 55ff3e5

Browse files
iamfaraniamfaran
committed
[Fix] tabs and breadcrumbs error
1 parent b7109c5 commit 55ff3e5

File tree

3 files changed

+102
-71
lines changed

3 files changed

+102
-71
lines changed

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

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import EnvironmentHeader from "./components/EnvironmentHeader";
3434
import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
3535
import { getEnvironmentTagColor } from "./utils/environmentUtils";
3636
import ErrorComponent from './components/ErrorComponent';
37-
const { TabPane } = Tabs;
3837

3938
/**
4039
* Environment Detail Page Component
@@ -140,6 +139,27 @@ const EnvironmentDetail: React.FC = () => {
140139
}
141140
];
142141

142+
const tabItems = [
143+
{
144+
key: 'workspaces',
145+
label: (
146+
<span>
147+
<AppstoreOutlined /> Workspaces
148+
</span>
149+
),
150+
children: <WorkspacesTab environment={environment} />
151+
},
152+
{
153+
key: 'userGroups',
154+
label: (
155+
<span>
156+
<UsergroupAddOutlined /> User Groups
157+
</span>
158+
),
159+
children: <UserGroupsTab environment={environment} />
160+
}
161+
];
162+
143163
return (
144164
<div
145165
className="environment-detail-container"
@@ -227,29 +247,8 @@ const EnvironmentDetail: React.FC = () => {
227247
onChange={setActiveTab}
228248
className="modern-tabs"
229249
type="line"
230-
>
231-
<TabPane
232-
tab={
233-
<span>
234-
<AppstoreOutlined /> Workspaces
235-
</span>
236-
}
237-
key="workspaces"
238-
>
239-
<WorkspacesTab environment={environment} />
240-
</TabPane>
241-
242-
<TabPane
243-
tab={
244-
<span>
245-
<UsergroupAddOutlined /> User Groups
246-
</span>
247-
}
248-
key="userGroups"
249-
>
250-
<UserGroupsTab environment={environment} />
251-
</TabPane>
252-
</Tabs>
250+
items={tabItems}
251+
/>
253252

254253
{/* Edit Environment Modal */}
255254
{environment && (

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

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,12 @@ import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
2727
import WorkspaceHeader from "./components/WorkspaceHeader";
2828
import ErrorComponent from "./components/ErrorComponent";
2929

30-
const { TabPane } = Tabs;
31-
3230
const WorkspaceDetail: React.FC = () => {
3331
// Use the context hooks
3432
const { environment } = useSingleEnvironmentContext();
3533
const { workspace, isLoading, error, toggleManagedStatus } = useWorkspaceContext();
3634
const { openDeployModal } = useDeployModal();
3735

38-
3936
const [isToggling, setIsToggling] = useState(false);
4037

4138
// Handle toggle managed status
@@ -58,7 +55,17 @@ const WorkspaceDetail: React.FC = () => {
5855
if (isLoading) {
5956
return (
6057
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: '50px' }}>
61-
<Spin size="large" tip="Loading workspace details..." style={{ display: 'block', textAlign: 'center' }} />
58+
<Spin size="large" spinning={true}>
59+
<div style={{
60+
display: 'block',
61+
textAlign: 'center',
62+
padding: '20px',
63+
color: '#8c8c8c',
64+
fontSize: '14px'
65+
}}>
66+
Loading workspace details...
67+
</div>
68+
</Spin>
6269
</div>
6370
);
6471
}
@@ -98,6 +105,51 @@ const WorkspaceDetail: React.FC = () => {
98105
}
99106
];
100107

108+
const tabItems = [
109+
{
110+
key: 'apps',
111+
label: (
112+
<span>
113+
<AppstoreOutlined /> Apps
114+
</span>
115+
),
116+
children: (
117+
<AppsTab
118+
environment={environment}
119+
workspaceId={workspace.id}
120+
/>
121+
)
122+
},
123+
{
124+
key: 'dataSources',
125+
label: (
126+
<span>
127+
<DatabaseOutlined /> Data Sources
128+
</span>
129+
),
130+
children: (
131+
<DataSourcesTab
132+
environment={environment}
133+
workspaceId={workspace.id}
134+
/>
135+
)
136+
},
137+
{
138+
key: 'queries',
139+
label: (
140+
<span>
141+
<CodeOutlined /> Queries
142+
</span>
143+
),
144+
children: (
145+
<QueriesTab
146+
environment={environment}
147+
workspaceId={workspace.id}
148+
/>
149+
)
150+
}
151+
];
152+
101153
return (
102154
<div className="workspace-detail-container" style={{
103155
padding: "24px",
@@ -122,28 +174,8 @@ const WorkspaceDetail: React.FC = () => {
122174
defaultActiveKey="apps"
123175
className="modern-tabs"
124176
type="line"
125-
>
126-
<TabPane tab={<span><AppstoreOutlined /> Apps</span>} key="apps">
127-
<AppsTab
128-
environment={environment}
129-
workspaceId={workspace.id}
130-
/>
131-
</TabPane>
132-
133-
<TabPane tab={<span><DatabaseOutlined /> Data Sources</span>} key="dataSources">
134-
<DataSourcesTab
135-
environment={environment}
136-
workspaceId={workspace.id}
137-
/>
138-
</TabPane>
139-
<TabPane tab={<span><CodeOutlined /> Queries</span>} key="queries">
140-
<QueriesTab
141-
environment={environment}
142-
workspaceId={workspace.id}
143-
/>
144-
</TabPane>
145-
146-
</Tabs>
177+
items={tabItems}
178+
/>
147179
</div>
148180
);
149181
};

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
22
import { Breadcrumb } from 'antd';
33
import { BreadcrumbProps } from 'antd/lib/breadcrumb';
44

5-
interface ModernBreadcrumbsProps extends BreadcrumbProps {
5+
interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
66
/**
77
* Items to display in the breadcrumb
88
*/
@@ -17,6 +17,25 @@ interface ModernBreadcrumbsProps extends BreadcrumbProps {
1717
* Modern styled breadcrumb component with consistent styling
1818
*/
1919
const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
20+
// Convert custom items format to Antd's expected format
21+
const breadcrumbItems = items.map(item => ({
22+
key: item.key,
23+
title: item.onClick ? (
24+
<span
25+
style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
26+
onClick={item.onClick}
27+
onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
28+
onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
29+
>
30+
{item.title}
31+
</span>
32+
) : (
33+
<span style={{ color: '#595959', fontWeight: '500' }}>
34+
{item.title}
35+
</span>
36+
)
37+
}));
38+
2039
return (
2140
<div className="modern-breadcrumb" style={{
2241
background: '#e6f7ff',
@@ -27,26 +46,7 @@ const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...pr
2746
display: 'flex',
2847
alignItems: 'center'
2948
}}>
30-
<Breadcrumb {...props} separator="/">
31-
{items.map(item => (
32-
<Breadcrumb.Item key={item.key}>
33-
{item.onClick ? (
34-
<span
35-
style={{ cursor: "pointer", color: '#1890ff', fontWeight: '500' }}
36-
onClick={item.onClick}
37-
onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'}
38-
onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}
39-
>
40-
{item.title}
41-
</span>
42-
) : (
43-
<span style={{ color: '#595959', fontWeight: '500' }}>
44-
{item.title}
45-
</span>
46-
)}
47-
</Breadcrumb.Item>
48-
))}
49-
</Breadcrumb>
49+
<Breadcrumb {...props} separator="/" items={breadcrumbItems} />
5050
</div>
5151
);
5252
};

0 commit comments

Comments
 (0)