Skip to content

Commit d8b761a

Browse files
iamfaraniamfaran
committed
Add styling for the environments
1 parent 04b8fe4 commit d8b761a

File tree

2 files changed

+69
-57
lines changed

2 files changed

+69
-57
lines changed

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,7 @@ const EnvironmentsList: React.FC = () => {
4747

4848
// Handle row click to navigate to environment detail
4949
const handleRowClick = (record: Environment) => {
50-
// Prevent navigation for unlicensed environments
51-
if (record.isLicensed === false) {
52-
return;
53-
}
50+
// Allow navigation to all environments including unlicensed ones
5451
history.push(buildEnvironmentId(record.environmentId));
5552
};
5653

‎client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx

Lines changed: 68 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,8 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
2727
window.open(auditUrl, '_blank');
2828
};
2929

30-
// Handle row click with license check
30+
// Handle row click - allow navigation to all environments including unlicensed
3131
const handleRowClick = (env: Environment) => {
32-
if (env.isLicensed === false) {
33-
// Prevent navigation for unlicensed environments
34-
return;
35-
}
3632
onRowClick(env);
3733
};
3834

@@ -109,48 +105,53 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
109105
return (
110106
<Col xs={24} sm={24} md={12} lg={8} xl={8} key={env.environmentId}>
111107
<Card
112-
hoverable={isAccessible}
108+
hoverable
113109
style={{
114110
borderRadius: '8px',
115111
overflow: 'hidden',
116112
height: '100%',
117-
cursor: isAccessible ? 'pointer' : 'not-allowed',
113+
cursor: 'pointer',
118114
transition: 'all 0.3s ease',
119115
boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
120116
border: '1px solid #f0f0f0',
121-
opacity: isAccessible ? 1 : 0.6,
122117
position: 'relative'
123118
}}
124119
bodyStyle={{ padding: '20px' }}
125120
onClick={() => handleRowClick(env)}
126121
>
127-
{/* License status overlay for non-licensed environments */}
122+
{/* Subtle overlay for unlicensed environments */}
128123
{!isAccessible && (
129124
<div style={{
130125
position: 'absolute',
131126
top: 0,
132127
left: 0,
133128
right: 0,
134129
bottom: 0,
135-
background: 'rgba(255, 255, 255, 0.8)',
136-
display: 'flex',
137-
alignItems: 'center',
138-
justifyContent: 'center',
130+
background: 'rgba(255, 255, 255, 0.15)',
131+
backdropFilter: 'blur(0.5px)',
139132
zIndex: 1,
140-
flexDirection: 'column',
141-
gap: '8px'
133+
display: 'flex',
134+
alignItems: 'flex-start',
135+
justifyContent: 'flex-end',
136+
padding: '12px'
142137
}}>
143-
<div style={{ fontSize: '24px', color: licenseDisplay.color }}>
138+
{/* Not Licensed Badge */}
139+
<div style={{
140+
background: licenseDisplay.color,
141+
color: 'white',
142+
padding: '6px 12px',
143+
borderRadius: '16px',
144+
fontSize: '12px',
145+
fontWeight: 600,
146+
display: 'flex',
147+
alignItems: 'center',
148+
gap: '6px',
149+
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
150+
backdropFilter: 'blur(10px)'
151+
}}>
144152
{licenseDisplay.icon}
145-
</div>
146-
<Text strong style={{ color: licenseDisplay.color }}>
147153
{licenseDisplay.text}
148-
</Text>
149-
{env.licenseError && (
150-
<Text type="secondary" style={{ fontSize: '12px', textAlign: 'center', maxWidth: '200px' }}>
151-
{env.licenseError}
152-
</Text>
153-
)}
154+
</div>
154155
</div>
155156
)}
156157

@@ -195,46 +196,60 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
195196
</Space>
196197
</div>
197198
</div>
198-
<div>
199-
<Tooltip title="View Audit Logs" placement="top">
200-
<Button
201-
type="text"
202-
icon={<AuditOutlined />}
203-
onClick={(e) => openAuditPage(env.environmentId, e)}
204-
size="small"
205-
disabled={!isAccessible}
206-
style={{
207-
borderRadius: '50%',
208-
width: '32px',
209-
height: '32px'
210-
}}
211-
/>
212-
</Tooltip>
213-
</div>
199+
{/* Only show audit button for licensed environments */}
200+
{isAccessible && (
201+
<div>
202+
<Tooltip title="View Audit Logs" placement="top">
203+
<Button
204+
type="text"
205+
icon={<AuditOutlined />}
206+
onClick={(e) => openAuditPage(env.environmentId, e)}
207+
size="small"
208+
style={{
209+
borderRadius: '50%',
210+
width: '32px',
211+
height: '32px'
212+
}}
213+
/>
214+
</Tooltip>
215+
</div>
216+
)}
214217
</div>
215218

216219
<div style={{ padding: '12px 0', borderTop: '1px solid #f5f5f5', marginTop: '4px' }}>
217220
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
218221
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
219222
<Text type="secondary" style={{ fontSize: '13px' }}>ID:</Text>
220-
<Text style={{ fontSize: '13px', fontFamily: 'monospace' }} copyable={{ tooltips: ['Copy ID', 'Copied!'] }}>
221-
{env.environmentId}
222-
</Text>
223+
{isAccessible ? (
224+
<Text style={{ fontSize: '13px', fontFamily: 'monospace' }} copyable={{ tooltips: ['Copy ID', 'Copied!'] }}>
225+
{env.environmentId}
226+
</Text>
227+
) : (
228+
<Text style={{ fontSize: '13px', fontFamily: 'monospace' }}>
229+
{env.environmentId}
230+
</Text>
231+
)}
223232
</div>
224233

225234
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
226235
<Text type="secondary" style={{ fontSize: '13px' }}>Domain:</Text>
227236
{env.environmentFrontendUrl ? (
228-
<a
229-
href={env.environmentFrontendUrl}
230-
target="_blank"
231-
rel="noopener noreferrer"
232-
onClick={(e) => e.stopPropagation()}
233-
style={{ fontSize: '13px' }}
234-
>
235-
{env.environmentFrontendUrl.replace(/^https?:\/\//, '')}
236-
<LinkOutlined style={{ marginLeft: 4, fontSize: '12px' }} />
237-
</a>
237+
isAccessible ? (
238+
<a
239+
href={env.environmentFrontendUrl}
240+
target="_blank"
241+
rel="noopener noreferrer"
242+
onClick={(e) => e.stopPropagation()}
243+
style={{ fontSize: '13px' }}
244+
>
245+
{env.environmentFrontendUrl.replace(/^https?:\/\//, '')}
246+
<LinkOutlined style={{ marginLeft: 4, fontSize: '12px' }} />
247+
</a>
248+
) : (
249+
<Text style={{ fontSize: '13px' }}>
250+
{env.environmentFrontendUrl.replace(/^https?:\/\//, '')}
251+
</Text>
252+
)
238253
) : (
239254
<Text style={{ fontSize: '13px' }}>—</Text>
240255
)}

0 commit comments

Comments
 (0)