Skip to content

Commit f30fbd4

Browse files
author
dragonpoo
authored
Merge pull request #1687 from iamfaran/feat/environments
Revamp the Environments UI and Refactor
2 parents 402b2cd + c1d68dc commit f30fbd4

36 files changed

+3364
-2028
lines changed

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

Lines changed: 101 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,30 @@ 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";
22-
import { workspaceConfig } from "./config/workspace.config";
23-
import { userGroupsConfig } from "./config/usergroups.config";
24-
import DeployableItemsTab from "./components/DeployableItemsTab";
2522
import EditEnvironmentModal from "./components/EditEnvironmentModal";
2623
import { Environment } from "./types/environment.types";
2724
import history from "@lowcoder-ee/util/history";
28-
25+
import WorkspacesTab from "./components/WorkspacesTab";
26+
import UserGroupsTab from "./components/UserGroupsTab";
27+
import EnvironmentHeader from "./components/EnvironmentHeader";
28+
import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
29+
import { getEnvironmentTagColor } from "./utils/environmentUtils";
2930
const { Title, Text } = Typography;
3031
const { TabPane } = Tabs;
3132

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

4546
const [isEditModalVisible, setIsEditModalVisible] = useState(false);
4647
const [isUpdating, setIsUpdating] = useState(false);
48+
const [activeTab, setActiveTab] = useState('workspaces');
4749

4850
// Handle edit menu item click
4951
const handleEditClick = () => {
@@ -73,15 +75,7 @@ const EnvironmentDetail: React.FC = () => {
7375
}
7476
};
7577

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

8680
if (isLoading) {
8781
return (
@@ -92,67 +86,81 @@ const EnvironmentDetail: React.FC = () => {
9286
}
9387

9488
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+
95105
return (
96-
<Alert
97-
message="Error loading environment"
98-
description={error || "Environment not found"}
99-
type="error"
100-
showIcon
101-
/>
106+
<div style={{ padding: "24px", flex: 1 }}>
107+
<ModernBreadcrumbs items={errorItems} />
108+
109+
<Card style={{ borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
110+
<div style={{ textAlign: "center", padding: "40px 0" }}>
111+
<Title level={3} style={{ color: "#ff4d4f" }}>
112+
Environment Not Found
113+
</Title>
114+
<Text type="secondary" style={{ display: "block", margin: "16px 0" }}>
115+
{error || "The environment you're looking for doesn't exist or you don't have permission to view it."}
116+
</Text>
117+
<Button
118+
type="primary"
119+
onClick={() => history.push("/setting/environments")}
120+
style={{ marginTop: "16px" }}
121+
>
122+
Return to Environments List
123+
</Button>
124+
</div>
125+
</Card>
126+
</div>
102127
);
103128
}
104-
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+
105146
return (
106147
<div
107148
className="environment-detail-container"
108149
style={{ padding: "24px", flex: 1 }}
109150
>
110-
<Breadcrumb style={{ marginBottom: "16px" }}>
111-
<Breadcrumb.Item>
112-
<span
113-
style={{ cursor: "pointer" }}
114-
onClick={() => history.push("/setting/environments")}
115-
>
116-
<HomeOutlined /> Environments
117-
</span>
118-
</Breadcrumb.Item>
119-
<Breadcrumb.Item>{environment.environmentName}</Breadcrumb.Item>
120-
</Breadcrumb>
151+
{/* Environment Header Component */}
152+
<EnvironmentHeader
153+
environment={environment}
154+
onEditClick={handleEditClick}
155+
/>
121156

122-
{/* Header with environment name and controls */}
123-
<div
124-
className="environment-header"
125-
style={{
126-
marginBottom: "24px",
127-
display: "flex",
128-
justifyContent: "space-between",
129-
alignItems: "flex-start",
130-
flexWrap: "wrap",
131-
gap: "16px",
132-
}}
133-
>
134-
<div style={{ flex: "1 1 auto", minWidth: "200px" }}>
135-
<Title level={3} style={{ margin: 0, wordBreak: "break-word" }}>
136-
{environment.environmentName || "Unnamed Environment"}
137-
</Title>
138-
<Text type="secondary">ID: {environment.environmentId}</Text>
139-
</div>
140-
<div style={{ flexShrink: 0 }}>
141-
<Button
142-
icon={<EditOutlined />}
143-
onClick={handleEditClick}
144-
type="primary"
145-
>
146-
Edit Environment
147-
</Button>
148-
</div>
149-
</div>
157+
150158

151159
{/* Basic Environment Information Card - improved responsiveness */}
152160
<Card
153161
title="Environment Overview"
154-
style={{ marginBottom: "24px" }}
155-
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"
156164
>
157165
<Descriptions
158166
bordered
@@ -175,22 +183,17 @@ const EnvironmentDetail: React.FC = () => {
175183
</Descriptions.Item>
176184
<Descriptions.Item label="Environment Type">
177185
<Tag
178-
color={
179-
environment.environmentType === "production"
180-
? "red"
181-
: environment.environmentType === "testing"
182-
? "orange"
183-
: "blue"
184-
}
186+
color={getEnvironmentTagColor(environment.environmentType)}
187+
style={{ borderRadius: '12px' }}
185188
>
186189
{environment.environmentType}
187190
</Tag>
188191
</Descriptions.Item>
189192
<Descriptions.Item label="API Key Status">
190193
{environment.environmentApikey ? (
191-
<Tag color="green">Configured</Tag>
194+
<Tag color="green" style={{ borderRadius: '12px' }}>Configured</Tag>
192195
) : (
193-
<Tag color="red">Not Configured</Tag>
196+
<Tag color="red" style={{ borderRadius: '12px' }}>Not Configured</Tag>
194197
)}
195198
</Descriptions.Item>
196199
<Descriptions.Item label="Master Environment">
@@ -199,33 +202,41 @@ const EnvironmentDetail: React.FC = () => {
199202
</Descriptions>
200203
</Card>
201204

205+
{/* Modern Breadcrumbs navigation */}
206+
<ModernBreadcrumbs items={breadcrumbItems} />
202207
{/* Tabs for Workspaces and User Groups */}
203-
<Tabs defaultActiveKey="workspaces">
204-
<TabPane tab="Workspaces" key="workspaces">
205-
{/* Using our new generic component with the workspace config */}
206-
<DeployableItemsTab
207-
environment={environment}
208-
config={workspaceConfig}
209-
title="Workspaces in this Environment"
210-
/>
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+
>
223+
{/* Using our new standalone WorkspacesTab component */}
224+
<WorkspacesTab environment={environment} />
211225
</TabPane>
226+
212227
<TabPane
213228
tab={
214229
<span>
215-
<TeamOutlined /> User Groups
230+
<UsergroupAddOutlined /> User Groups
216231
</span>
217232
}
218233
key="userGroups"
219234
>
220-
{/* Using our new generic component with the user group config */}
221-
<DeployableItemsTab
222-
environment={environment}
223-
config={userGroupsConfig}
224-
title="User Groups in this Environment"
225-
/>
235+
{/* Now using our standalone UserGroupsTab component */}
236+
<UserGroupsTab environment={environment} />
226237
</TabPane>
227238
</Tabs>
228-
239+
229240
{/* Edit Environment Modal */}
230241
{environment && (
231242
<EditEnvironmentModal

0 commit comments

Comments
 (0)