Skip to content

Consistent UI for the Environments #1718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
May 28, 2025
Merged

Consistent UI for the Environments #1718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
77e39d1
Merge branch 'ee-setup' of github.com:lowcoder-org/lowcoder into ui/e…
iamfaran May 27, 2025
0697c93
Update UI for the EnvironmentsListing Page
iamfaran May 27, 2025
0abe597
Update Environments Table Card UI
iamfaran May 27, 2025
d2d7ede
Update Environments UI
iamfaran May 28, 2025
b2f7583
Merge branch 'ee-setup' of github.com:lowcoder-org/lowcoder into ui/e…
iamfaran May 28, 2025
d36c5dc
Fix layout issue for Environments List
iamfaran May 28, 2025
ec7fd1d
remove tabs borders
iamfaran May 28, 2025
d3e2262
Merge branch 'ee-setup' of github.com:lowcoder-org/lowcoder into ui/e…
iamfaran May 28, 2025
6fafbae
Merge branch 'ee-setup' of github.com:lowcoder-org/lowcoder into ui/e…
iamfaran May 28, 2025
817ff1a
Add hubspot modal for the unlicensed environment
iamfaran May 28, 2025
0b505e0
update to try/catch and async/await
iamfaran May 28, 2025
ae24fed
fix orgId
iamfaran May 28, 2025
68e39e5
Only 1 master environment can be created
iamfaran May 28, 2025
4c6a81b
Fix only one master environment
iamfaran May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ const EnvironmentDetail: React.FC = () => {

if (isLoading) {
return (
<div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
<Spin size="large" tip="Loading environment..." style={{ display: 'block', textAlign: 'center' }} />
<div style={{ display: 'flex', justifyContent: 'center', padding: '60px 0' }}>
<Spin size="large" />
</div>
);
}
Expand Down Expand Up @@ -151,19 +151,21 @@ const EnvironmentDetail: React.FC = () => {
onEditClick={handleEditClick}
/>



{/* Basic Environment Information Card - improved responsiveness */}
{/* Basic Environment Information Card */}
<Card
title="Environment Overview"
style={{ marginBottom: "24px", borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
style={{
marginBottom: "24px",
borderRadius: '4px',
border: '1px solid #f0f0f0'
}}
className="environment-overview-card"
>
<Descriptions
bordered
layout="vertical" // Change to vertical layout on smaller screens
layout="vertical"
column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
size="small" // Use smaller size on mobile
size="small"
>
<Descriptions.Item label="Domain">
{environment.environmentFrontendUrl ? (
Expand All @@ -181,7 +183,7 @@ const EnvironmentDetail: React.FC = () => {
<Descriptions.Item label="Environment Type">
<Tag
color={getEnvironmentTagColor(environment.environmentType)}
style={{ borderRadius: '12px' }}
style={{ borderRadius: '4px' }}
>
{environment.environmentType}
</Tag>
Expand All @@ -190,23 +192,23 @@ const EnvironmentDetail: React.FC = () => {
{(() => {
switch (environment.licenseStatus) {
case 'checking':
return <Tag icon={<SyncOutlined spin />} color="blue" style={{ borderRadius: '12px' }}>Checking...</Tag>;
return <Tag icon={<SyncOutlined spin />} color="blue" style={{ borderRadius: '4px' }}>Checking...</Tag>;
case 'licensed':
return <Tag icon={<CheckCircleOutlined />} color="green" style={{ borderRadius: '12px' }}>Licensed</Tag>;
return <Tag icon={<CheckCircleOutlined />} color="green" style={{ borderRadius: '4px' }}>Licensed</Tag>;
case 'unlicensed':
return <Tag icon={<CloseCircleOutlined />} color="red" style={{ borderRadius: '12px' }}>Not Licensed</Tag>;
return <Tag icon={<CloseCircleOutlined />} color="red" style={{ borderRadius: '4px' }}>Not Licensed</Tag>;
case 'error':
return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '12px' }}>License Error</Tag>;
return <Tag icon={<ExclamationCircleOutlined />} color="orange" style={{ borderRadius: '4px' }}>License Error</Tag>;
default:
return <Tag color="default" style={{ borderRadius: '12px' }}>Unknown</Tag>;
return <Tag color="default" style={{ borderRadius: '4px' }}>Unknown</Tag>;
}
})()}
</Descriptions.Item>
<Descriptions.Item label="API Key Status">
{environment.environmentApikey ? (
<Tag color="green" style={{ borderRadius: '12px' }}>Configured</Tag>
<Tag color="green" style={{ borderRadius: '4px' }}>Configured</Tag>
) : (
<Tag color="red" style={{ borderRadius: '12px' }}>Not Configured</Tag>
<Tag color="red" style={{ borderRadius: '4px' }}>Not Configured</Tag>
)}
</Descriptions.Item>
<Descriptions.Item label="Master Environment">
Expand All @@ -217,13 +219,14 @@ const EnvironmentDetail: React.FC = () => {

{/* Modern Breadcrumbs navigation */}
<ModernBreadcrumbs items={breadcrumbItems} />

{/* Tabs for Workspaces and User Groups */}
<Tabs
defaultActiveKey="workspaces"
activeKey={activeTab}
onChange={setActiveTab}
className="modern-tabs"
type="card"
type="line"
>
<TabPane
tab={
Expand All @@ -233,7 +236,6 @@ const EnvironmentDetail: React.FC = () => {
}
key="workspaces"
>
{/* Using our new standalone WorkspacesTab component */}
<WorkspacesTab environment={environment} />
</TabPane>

Expand All @@ -245,7 +247,6 @@ const EnvironmentDetail: React.FC = () => {
}
key="userGroups"
>
{/* Now using our standalone UserGroupsTab component */}
<UserGroupsTab environment={environment} />
</TabPane>
</Tabs>
Expand Down
Loading
Loading