Skip to content

Commit c1d68dc

Browse files
iamfaraniamfaran
committed
Merge branch 'ui/environments' into feat/environments
2 parents 266def6 + 23f526d commit c1d68dc

20 files changed

+2281
-962
lines changed

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

Lines changed: 74 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ import {
33
Spin,
44
Typography,
55
Card,
6-
Tag,
76
Tabs,
87
Alert,
98
Descriptions,
109
Menu,
1110
Button,
12-
Breadcrumb,
11+
Tag,
1312
} from "antd";
1413
import {
1514
LinkOutlined,
16-
TeamOutlined,
15+
HomeOutlined,
16+
AppstoreOutlined,
17+
UsergroupAddOutlined,
1718
EditOutlined,
18-
HomeOutlined
1919
} from "@ant-design/icons";
2020

2121
import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext";
@@ -24,6 +24,9 @@ import { Environment } from "./types/environment.types";
2424
import history from "@lowcoder-ee/util/history";
2525
import WorkspacesTab from "./components/WorkspacesTab";
2626
import UserGroupsTab from "./components/UserGroupsTab";
27+
import EnvironmentHeader from "./components/EnvironmentHeader";
28+
import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
29+
import { getEnvironmentTagColor } from "./utils/environmentUtils";
2730
const { Title, Text } = Typography;
2831
const { TabPane } = Tabs;
2932

@@ -42,6 +45,7 @@ const EnvironmentDetail: React.FC = () => {
4245

4346
const [isEditModalVisible, setIsEditModalVisible] = useState(false);
4447
const [isUpdating, setIsUpdating] = useState(false);
48+
const [activeTab, setActiveTab] = useState('workspaces');
4549

4650
// Handle edit menu item click
4751
const handleEditClick = () => {
@@ -71,15 +75,7 @@ const EnvironmentDetail: React.FC = () => {
7175
}
7276
};
7377

74-
// Dropdown menu for environment actions
75-
const actionsMenu = (
76-
<Menu>
77-
<Menu.Item key="edit" icon={<EditOutlined />} onClick={handleEditClick}>
78-
Edit Environment
79-
</Menu.Item>
80-
{/* Add more menu items here if needed */}
81-
</Menu>
82-
);
78+
8379

8480
if (isLoading) {
8581
return (
@@ -90,21 +86,27 @@ const EnvironmentDetail: React.FC = () => {
9086
}
9187

9288
if (error || !environment) {
89+
const errorItems = [
90+
{
91+
key: 'environments',
92+
title: (
93+
<span>
94+
<HomeOutlined /> Environments
95+
</span>
96+
),
97+
onClick: () => history.push("/setting/environments")
98+
},
99+
{
100+
key: 'notFound',
101+
title: 'Not Found'
102+
}
103+
];
104+
93105
return (
94106
<div style={{ padding: "24px", flex: 1 }}>
95-
<Breadcrumb style={{ marginBottom: "16px" }}>
96-
<Breadcrumb.Item>
97-
<span
98-
style={{ cursor: "pointer" }}
99-
onClick={() => history.push("/setting/environments")}
100-
>
101-
<HomeOutlined /> Environments
102-
</span>
103-
</Breadcrumb.Item>
104-
<Breadcrumb.Item>Not Found</Breadcrumb.Item>
105-
</Breadcrumb>
107+
<ModernBreadcrumbs items={errorItems} />
106108

107-
<Card>
109+
<Card style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
108110
<div style={{ textAlign: "center", padding: "40px 0" }}>
109111
<Title level={3} style={{ color: "#ff4d4f" }}>
110112
Environment Not Found
@@ -124,58 +126,41 @@ const EnvironmentDetail: React.FC = () => {
124126
</div>
125127
);
126128
}
127-
129+
130+
const breadcrumbItems = [
131+
{
132+
key: 'environments',
133+
title: (
134+
<span>
135+
<HomeOutlined /> Environments
136+
</span>
137+
),
138+
onClick: () => history.push("/setting/environments")
139+
},
140+
{
141+
key: 'currentEnvironment',
142+
title: environment.environmentName
143+
}
144+
];
145+
128146
return (
129147
<div
130148
className="environment-detail-container"
131149
style={{ padding: "24px", flex: 1 }}
132150
>
133-
<Breadcrumb style={{ marginBottom: "16px" }}>
134-
<Breadcrumb.Item>
135-
<span
136-
style={{ cursor: "pointer" }}
137-
onClick={() => history.push("/setting/environments")}
138-
>
139-
<HomeOutlined /> Environments
140-
</span>
141-
</Breadcrumb.Item>
142-
<Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
143-
</Breadcrumb>
151+
{/* Environment Header Component */}
152+
<EnvironmentHeader
153+
environment={environment}
154+
onEditClick={handleEditClick}
155+
/>
144156

145-
{/* Header with environment name and controls */}
146-
<div
147-
className="environment-header"
148-
style={{
149-
marginBottom: "24px",
150-
display: "flex",
151-
justifyContent: "space-between",
152-
alignItems: "flex-start",
153-
flexWrap: "wrap",
154-
gap: "16px",
155-
}}
156-
>
157-
<div style={{ flex: "1 1 auto", minWidth: "200px" }}>
158-
<Title level={3} style={{ margin: 0, wordBreak: "break-word" }}>
159-
{environment.environmentName || "Unnamed Environment"}
160-
</Title>
161-
<Text type="secondary">ID: {environment.environmentId}</Text>
162-
</div>
163-
<div style={{ flexShrink: 0 }}>
164-
<Button
165-
icon={<EditOutlined />}
166-
onClick={handleEditClick}
167-
type="primary"
168-
>
169-
Edit Environment
170-
</Button>
171-
</div>
172-
</div>
157+
173158

174159
{/* Basic Environment Information Card - improved responsiveness */}
175160
<Card
176161
title="Environment Overview"
177-
style={{ marginBottom: "24px" }}
178-
extra={environment.isMaster && <Tag color="green">Master</Tag>}
162+
style={{ marginBottom: "24px", borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
163+
className="environment-overview-card"
179164
>
180165
<Descriptions
181166
bordered
@@ -198,22 +183,17 @@ const EnvironmentDetail: React.FC = () => {
198183
</Descriptions.Item>
199184
<Descriptions.Item label="Environment Type">
200185
<Tag
201-
color={
202-
environment.environmentType === "production"
203-
? "red"
204-
: environment.environmentType === "testing"
205-
? "orange"
206-
: "blue"
207-
}
186+
color={getEnvironmentTagColor(environment.environmentType)}
187+
style={{ borderRadius: '12px' }}
208188
>
209189
{environment.environmentType}
210190
</Tag>
211191
</Descriptions.Item>
212192
<Descriptions.Item label="API Key Status">
213193
{environment.environmentApikey ? (
214-
<Tag color="green">Configured</Tag>
194+
<Tag color="green" style={{ borderRadius: '12px' }}>Configured</Tag>
215195
) : (
216-
<Tag color="red">Not Configured</Tag>
196+
<Tag color="red" style={{ borderRadius: '12px' }}>Not Configured</Tag>
217197
)}
218198
</Descriptions.Item>
219199
<Descriptions.Item label="Master Environment">
@@ -222,17 +202,32 @@ const EnvironmentDetail: React.FC = () => {
222202
</Descriptions>
223203
</Card>
224204

205+
{/* Modern Breadcrumbs navigation */}
206+
<ModernBreadcrumbs items={breadcrumbItems} />
225207
{/* Tabs for Workspaces and User Groups */}
226-
<Tabs defaultActiveKey="workspaces">
227-
<TabPane tab="Workspaces" key="workspaces">
208+
<Tabs
209+
defaultActiveKey="workspaces"
210+
activeKey={activeTab}
211+
onChange={setActiveTab}
212+
className="modern-tabs"
213+
type="card"
214+
>
215+
<TabPane
216+
tab={
217+
<span>
218+
<AppstoreOutlined /> Workspaces
219+
</span>
220+
}
221+
key="workspaces"
222+
>
228223
{/* Using our new standalone WorkspacesTab component */}
229224
<WorkspacesTab environment={environment} />
230225
</TabPane>
231226

232227
<TabPane
233228
tab={
234229
<span>
235-
<TeamOutlined /> User Groups
230+
<UsergroupAddOutlined /> User Groups
236231
</span>
237232
}
238233
key="userGroups"

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