Skip to content

Commit f30fbd4

Browse files
dragonpoodragonpoo
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)
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