@@ -3,19 +3,19 @@ import {
33Spin ,
44Typography ,
55Card ,
6- Tag ,
76Tabs ,
87Alert ,
98Descriptions ,
109Menu ,
1110Button ,
12- Breadcrumb ,
11+ Tag ,
1312} from "antd" ;
1413import {
1514LinkOutlined ,
16- TeamOutlined ,
15+ HomeOutlined ,
16+ AppstoreOutlined ,
17+ UsergroupAddOutlined ,
1718EditOutlined ,
18- HomeOutlined
1919} from "@ant-design/icons" ;
2020
2121import { useSingleEnvironmentContext } from "./context/SingleEnvironmentContext" ;
@@ -24,6 +24,9 @@ import { Environment } from "./types/environment.types";
2424import history from "@lowcoder-ee/util/history" ;
2525import WorkspacesTab from "./components/WorkspacesTab" ;
2626import UserGroupsTab from "./components/UserGroupsTab" ;
27+ import EnvironmentHeader from "./components/EnvironmentHeader" ;
28+ import ModernBreadcrumbs from "./components/ModernBreadcrumbs" ;
29+ import { getEnvironmentTagColor } from "./utils/environmentUtils" ;
2730const { Title, Text} = Typography ;
2831const { TabPane} = Tabs ;
2932
@@ -42,6 +45,7 @@ const EnvironmentDetail: React.FC = () => {
4245
4346const [ isEditModalVisible , setIsEditModalVisible ] = useState ( false ) ;
4447const [ isUpdating , setIsUpdating ] = useState ( false ) ;
48+ const [ activeTab , setActiveTab ] = useState ( 'workspaces' ) ;
4549
4650// Handle edit menu item click
4751const 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
8480if ( isLoading ) {
8581return (
@@ -90,21 +86,27 @@ const EnvironmentDetail: React.FC = () => {
9086}
9187
9288if ( 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+
93105return (
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+
128146return (
129147< div
130148className = "environment-detail-container"
131149style = { { 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
176161title = "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
181166bordered
@@ -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
233228tab = {
234229< span >
235- < TeamOutlined /> User Groups
230+ < UsergroupAddOutlined /> User Groups
236231</ span >
237232}
238233key = "userGroups"