Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf30fbd4

Browse files
author
dragonpoo
authored
Merge pull request#1687 from iamfaran/feat/environments
Revamp the Environments UI and Refactor
2 parents402b2cd +c1d68dc commitf30fbd4

File tree

36 files changed

+3364
-2028
lines changed

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-
importDeployableItemsTabfrom"./components/DeployableItemsTab";
2522
importEditEnvironmentModalfrom"./components/EditEnvironmentModal";
2623
import{Environment}from"./types/environment.types";
2724
importhistoryfrom"@lowcoder-ee/util/history";
28-
25+
importWorkspacesTabfrom"./components/WorkspacesTab";
26+
importUserGroupsTabfrom"./components/UserGroupsTab";
27+
importEnvironmentHeaderfrom"./components/EnvironmentHeader";
28+
importModernBreadcrumbsfrom"./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
consthandleEditClick=()=>{
@@ -73,15 +75,7 @@ const EnvironmentDetail: React.FC = () => {
7375
}
7476
};
7577

76-
// Dropdown menu for environment actions
77-
constactionsMenu=(
78-
<Menu>
79-
<Menu.Itemkey="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+
consterrorItems=[
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+
<divstyle={{padding:"24px",flex:1}}>
107+
<ModernBreadcrumbsitems={errorItems}/>
108+
109+
<Cardstyle={{borderRadius:'8px',boxShadow:'0 2px 8px rgba(0,0,0,0.05)'}}>
110+
<divstyle={{textAlign:"center",padding:"40px 0"}}>
111+
<Titlelevel={3}style={{color:"#ff4d4f"}}>
112+
Environment Not Found
113+
</Title>
114+
<Texttype="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+
constbreadcrumbItems=[
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-
<Breadcrumbstyle={{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-
<divstyle={{flex:"1 1 auto",minWidth:"200px"}}>
135-
<Titlelevel={3}style={{margin:0,wordBreak:"break-word"}}>
136-
{environment.environmentName||"Unnamed Environment"}
137-
</Title>
138-
<Texttype="secondary">ID:{environment.environmentId}</Text>
139-
</div>
140-
<divstyle={{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&&<Tagcolor="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.Itemlabel="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.Itemlabel="API Key Status">
190193
{environment.environmentApikey ?(
191-
<Tagcolor="green">Configured</Tag>
194+
<Tagcolor="green"style={{borderRadius:'12px'}}>Configured</Tag>
192195
) :(
193-
<Tagcolor="red">Not Configured</Tag>
196+
<Tagcolor="red"style={{borderRadius:'12px'}}>Not Configured</Tag>
194197
)}
195198
</Descriptions.Item>
196199
<Descriptions.Itemlabel="Master Environment">
@@ -199,33 +202,41 @@ const EnvironmentDetail: React.FC = () => {
199202
</Descriptions>
200203
</Card>
201204

205+
{/* Modern Breadcrumbs navigation */}
206+
<ModernBreadcrumbsitems={breadcrumbItems}/>
202207
{/* Tabs for Workspaces and User Groups */}
203-
<TabsdefaultActiveKey="workspaces">
204-
<TabPanetab="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+
<WorkspacesTabenvironment={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+
<UserGroupsTabenvironment={environment}/>
226237
</TabPane>
227238
</Tabs>
228-
239+
229240
{/* Edit Environment Modal */}
230241
{environment&&(
231242
<EditEnvironmentModal

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp