Skip to content

Commit 29c2ae2

Browse files
iamfaraniamfaran
committed
Fixed workspace detail page header
1 parent 3ad52c0 commit 29c2ae2

File tree

1 file changed

+90
-49
lines changed

1 file changed

+90
-49
lines changed

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

Lines changed: 90 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -109,81 +109,118 @@ const WorkspaceDetail: React.FC = () => {
109109
}
110110

111111
return (
112-
<div className="workspace-detail-container" style={{ padding: '24px', flex: 1 }}>
112+
<div
113+
className="workspace-detail-container"
114+
style={{ padding: "24px", flex: 1 }}
115+
>
113116
{/* Breadcrumb navigation */}
114-
<Breadcrumb style={{ marginBottom: '16px' }}>
115-
<Breadcrumb.Item onClick={() => history.push('/home/settings/environments')}>
117+
<Breadcrumb style={{ marginBottom: "16px" }}>
118+
<Breadcrumb.Item
119+
onClick={() => history.push("/home/settings/environments")}
120+
>
116121
<HomeOutlined /> Environments
117122
</Breadcrumb.Item>
118-
<Breadcrumb.Item onClick={() => history.push(`/home/settings/environments/${environmentId}`)}>
123+
<Breadcrumb.Item
124+
onClick={() =>
125+
history.push(`/home/settings/environments/${environmentId}`)
126+
}
127+
>
119128
<TeamOutlined /> {environment.environmentName}
120129
</Breadcrumb.Item>
121-
<Breadcrumb.Item>
122-
{workspace.name}
123-
</Breadcrumb.Item>
130+
<Breadcrumb.Item>{workspace.name}</Breadcrumb.Item>
124131
</Breadcrumb>
125-
126-
{/* Header with workspace name and controls */}
127-
<div className="workspace-header" style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
128-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
129132

133+
{/* Workspace header with details and actions */}
134+
<Card
135+
style={{ marginBottom: "24px" }}
136+
bodyStyle={{ padding: "16px 24px" }}
137+
>
138+
<div
139+
style={{
140+
display: "flex",
141+
justifyContent: "space-between",
142+
alignItems: "center",
143+
}}
144+
>
145+
{/* Left section - Workspace info */}
130146
<div>
131-
<Title level={4} style={{ margin: 0 }}>{workspace.name}</Title>
132-
<Tag color={workspace.managed ? 'green' : 'default'} style={{ marginTop: '8px' }}>
133-
{workspace.managed ? 'Managed' : 'Unmanaged'}
134-
</Tag>
147+
<Title level={3} style={{ margin: 0 }}>
148+
{workspace.name}
149+
</Title>
150+
<div
151+
style={{
152+
display: "flex",
153+
alignItems: "center",
154+
marginTop: "8px",
155+
}}
156+
>
157+
<Text type="secondary" style={{ marginRight: "16px" }}>
158+
ID: {workspace.id}
159+
</Text>
160+
<Tag color={workspace.managed ? "green" : "default"}>
161+
{workspace.managed ? "Managed" : "Unmanaged"}
162+
</Tag>
163+
</div>
135164
</div>
136-
137-
<Space>
138-
<Switch
139-
checked={workspace.managed}
140-
onChange={handleToggleManaged}
141-
checkedChildren="Managed"
142-
unCheckedChildren="Unmanaged"
143-
/>
165+
166+
{/* Right section - Actions */}
167+
<Space size="middle">
168+
<div style={{ display: "flex", alignItems: "center" }}>
169+
<Text style={{ marginRight: "8px" }}>Managed:</Text>
170+
<Switch
171+
checked={workspace.managed}
172+
onChange={handleToggleManaged}
173+
checkedChildren="Yes"
174+
unCheckedChildren="No"
175+
/>
176+
</div>
144177
<Button
145178
type="primary"
146179
icon={<CloudUploadOutlined />}
147-
onClick={() => openDeployModal(workspace, workspaceConfig, environment)}
180+
onClick={() =>
181+
openDeployModal(workspace, workspaceConfig, environment)
182+
}
148183
disabled={!workspace.managed}
149184
>
150185
Deploy
151186
</Button>
187+
<Button
188+
icon={<ArrowLeftOutlined />}
189+
onClick={() =>
190+
history.push(`/home/settings/environments/${environmentId}`)
191+
}
192+
>
193+
Back
194+
</Button>
152195
</Space>
153196
</div>
197+
</Card>
154198

155-
156-
<div>
157-
<Button
158-
type="link"
159-
icon={<ArrowLeftOutlined />}
160-
onClick={() => history.push(`/home/settings/environments/${environmentId}`)}
161-
style={{ marginLeft: -12, marginRight: 8 }}
162-
>
163-
Back to Environment
164-
</Button>
165-
<Title level={3}>{workspace.name}</Title>
166-
<Text type="secondary">ID: {workspace.id}</Text>
167-
</div>
168-
</div>
169-
170199
{/* Tabs for Apps, Data Sources, and Queries */}
171200
<Tabs defaultActiveKey="apps">
172-
<TabPane
173-
tab={<span><AppstoreOutlined /> Apps</span>}
201+
<TabPane
202+
tab={
203+
<span>
204+
<AppstoreOutlined /> Apps
205+
</span>
206+
}
174207
key="apps"
175208
>
176209
<DeployableItemsTab
177210
environment={environment}
178211
config={appsConfig}
179212
additionalParams={{ workspaceId }}
180213
title="Apps in this Workspace"
181-
/>
214+
/>
182215
</TabPane>
183-
184-
{/* Update the TabPane in WorkspaceDetail.tsx */}
185-
<TabPane
186-
tab={<span><DatabaseOutlined /> Data Sources</span>}
216+
217+
{/* Update the TabPane in WorkspaceDetail.tsx */}
218+
<TabPane
219+
tab={
220+
<span>
221+
<DatabaseOutlined /> Data Sources
222+
</span>
223+
}
187224
key="dataSources"
188225
>
189226
<DeployableItemsTab
@@ -193,9 +230,13 @@ const WorkspaceDetail: React.FC = () => {
193230
title="Data Sources in this Workspace"
194231
/>
195232
</TabPane>
196-
197-
<TabPane
198-
tab={<span><CodeOutlined /> Queries</span>}
233+
234+
<TabPane
235+
tab={
236+
<span>
237+
<CodeOutlined /> Queries
238+
</span>
239+
}
199240
key="queries"
200241
>
201242
<DeployableItemsTab

0 commit comments

Comments
 (0)