Skip to content

Commit 646da2b

Browse files
LasserichLasserich
committed
fix: move button
1 parent 3b5bcf0 commit 646da2b

File tree

3 files changed

+92
-185
lines changed

3 files changed

+92
-185
lines changed

‎src/components/BentoGrid/ComponentCard/ComponentCard.module.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
opacity: 0.6;
1717
}
1818

19+
.clickable {
20+
cursor: pointer;
21+
}
22+
1923
.disabledOverlay {
2024
position: absolute;
2125
top: 0;
@@ -71,3 +75,21 @@
7175
.activateButtonDefault {
7276
cursor: default;
7377
}
78+
79+
.expandButton {
80+
position: absolute;
81+
bottom: 8px;
82+
right: 8px;
83+
min-width: 32px;
84+
height: 32px;
85+
z-index: 10;
86+
}
87+
88+
.expandButtonSmall {
89+
position: absolute;
90+
bottom: 8px;
91+
right: 8px;
92+
min-width: 24px;
93+
height: 24px;
94+
z-index: 10;
95+
}

‎src/components/BentoGrid/ComponentCard/ComponentCard.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
11
import React from 'react';
2-
import { Card, CardHeader } from '@ui5/webcomponents-react';
2+
import { Card, CardHeader, Button } from '@ui5/webcomponents-react';
33
import { useTranslation } from 'react-i18next';
44
import cx from 'clsx';
55
import { MultiPercentageBar } from '../MultiPercentageBar/MultiPercentageBar';
66
import styles from './ComponentCard.module.css';
77
import { GenericHintProps } from '../../../types/types';
88

9-
export const ComponentCard: React.FC<GenericHintProps> = ({
9+
export const ComponentCard: React.FC<GenericHintProps & { onClick?: () => void; size?: 'small' | 'medium' | 'large' | 'extra-large' }> = ({
1010
enabled = false,
1111
version,
1212
allItems = [],
1313
isLoading,
1414
error,
1515
config,
16+
onClick,
17+
size = 'medium',
1618
}) => {
1719
const { t } = useTranslation();
1820

1921
// Calculate segments and state using the provided calculator
2022
const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t);
2123

22-
// Handle click navigation if scroll target is provided
23-
const handleClick =
24-
enabled && config.scrollTarget
25-
? () => {
26-
const el = document.querySelector(config.scrollTarget!);
27-
if (el) {
28-
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
29-
}
30-
}
31-
: undefined;
32-
3324
return (
3425
<div className={styles.container}>
3526
<Card
@@ -53,12 +44,26 @@ export const ComponentCard: React.FC<GenericHintProps> = ({
5344
}
5445
className={cx(styles.card, {
5546
[styles.disabled]: !enabled,
47+
[styles.clickable]: !!onClick,
5648
})}
57-
onClick={handleClick}
49+
onClick={onClick}
5850
>
5951
{/* Disabled overlay */}
6052
{!enabled && <div className={styles.disabledOverlay} />}
6153

54+
{/* Expand button */}
55+
{onClick && (
56+
<Button
57+
icon="sap-icon://expand"
58+
design="Transparent"
59+
className={size === 'small' ? styles.expandButtonSmall : styles.expandButton}
60+
onClick={(e) => {
61+
e.stopPropagation();
62+
onClick();
63+
}}
64+
/>
65+
)}
66+
6267
<div className={styles.contentContainer}>
6368
<div className={styles.progressBarContainer}>
6469
<MultiPercentageBar

‎src/spaces/mcp/pages/McpPage.tsx‎

Lines changed: 51 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title, Button } from '@ui5/webcomponents-react';
1+
import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title } from '@ui5/webcomponents-react';
22
import { useParams } from 'react-router-dom';
33
import CopyKubeconfigButton from '../../../components/ControlPlanes/CopyKubeconfigButton.tsx';
44
import styles from './McpPage.module.css';
@@ -182,192 +182,72 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
182182

183183
{/* Left side: Crossplane component in large (bottom) */}
184184
<BentoCard size="large" gridColumn="1 / 9" gridRow="5 / 7">
185-
<div
186-
onClick={handleCrossplaneClick}
187-
style={{
188-
cursor: 'pointer',
189-
height: '100%',
190-
width: '100%',
191-
position: 'relative'
192-
}}
193-
>
194-
<ComponentCard
195-
enabled={!!mcp?.spec?.components?.crossplane}
196-
version={mcp?.spec?.components?.crossplane?.version}
197-
allItems={allItems}
198-
isLoading={managedResourcesLoading}
199-
error={managedResourcesError}
200-
config={crossplaneConfig}
201-
/>
202-
<Button
203-
icon="sap-icon://expand"
204-
design="Transparent"
205-
style={{
206-
position: 'absolute',
207-
bottom: '8px',
208-
right: '8px',
209-
minWidth: '32px',
210-
height: '32px',
211-
zIndex: 10
212-
}}
213-
onClick={(e) => {
214-
e.stopPropagation();
215-
handleCrossplaneClick();
216-
}}
217-
/>
218-
</div>
185+
<ComponentCard
186+
enabled={!!mcp?.spec?.components?.crossplane}
187+
version={mcp?.spec?.components?.crossplane?.version}
188+
allItems={allItems}
189+
isLoading={managedResourcesLoading}
190+
error={managedResourcesError}
191+
config={crossplaneConfig}
192+
onClick={handleCrossplaneClick}
193+
size="large"
194+
/>
219195
</BentoCard>
220196

221197
{/* Right side: First medium component (GitOps) */}
222198
<BentoCard size="medium" gridColumn="9 / 13" gridRow="1 / 3">
223-
<div
224-
onClick={handleFluxClick}
225-
style={{
226-
cursor: 'pointer',
227-
height: '100%',
228-
width: '100%',
229-
position: 'relative'
230-
}}
231-
>
232-
<ComponentCard
233-
enabled={!!mcp?.spec?.components?.flux}
234-
version={mcp?.spec?.components?.flux?.version}
235-
allItems={allItems}
236-
isLoading={managedResourcesLoading}
237-
error={managedResourcesError}
238-
config={gitOpsConfig}
239-
/>
240-
<Button
241-
icon="sap-icon://expand"
242-
design="Transparent"
243-
style={{
244-
position: 'absolute',
245-
bottom: '8px',
246-
right: '8px',
247-
minWidth: '32px',
248-
height: '32px',
249-
zIndex: 10
250-
}}
251-
onClick={(e) => {
252-
e.stopPropagation();
253-
handleFluxClick();
254-
}}
255-
/>
256-
</div>
199+
<ComponentCard
200+
enabled={!!mcp?.spec?.components?.flux}
201+
version={mcp?.spec?.components?.flux?.version}
202+
allItems={allItems}
203+
isLoading={managedResourcesLoading}
204+
error={managedResourcesError}
205+
config={gitOpsConfig}
206+
onClick={handleFluxClick}
207+
size="medium"
208+
/>
257209
</BentoCard>
258210

259211
{/* Right side: Second medium component (GitOps copy) */}
260212
<BentoCard size="medium" gridColumn="9 / 13" gridRow="3 / 5">
261-
<div
262-
onClick={handleFluxClick}
263-
style={{
264-
cursor: 'pointer',
265-
height: '100%',
266-
width: '100%',
267-
position: 'relative'
268-
}}
269-
>
270-
<ComponentCard
271-
enabled={!!mcp?.spec?.components?.flux}
272-
version={mcp?.spec?.components?.flux?.version}
273-
allItems={allItems}
274-
isLoading={managedResourcesLoading}
275-
error={managedResourcesError}
276-
config={gitOpsConfig}
277-
/>
278-
<Button
279-
icon="sap-icon://expand"
280-
design="Transparent"
281-
style={{
282-
position: 'absolute',
283-
bottom: '8px',
284-
right: '8px',
285-
minWidth: '32px',
286-
height: '32px',
287-
zIndex: 10
288-
}}
289-
onClick={(e) => {
290-
e.stopPropagation();
291-
handleFluxClick();
292-
}}
293-
/>
294-
</div>
213+
<ComponentCard
214+
enabled={!!mcp?.spec?.components?.flux}
215+
version={mcp?.spec?.components?.flux?.version}
216+
allItems={allItems}
217+
isLoading={managedResourcesLoading}
218+
error={managedResourcesError}
219+
config={gitOpsConfig}
220+
onClick={handleFluxClick}
221+
size="medium"
222+
/>
295223
</BentoCard>
296224

297225
{/* Right side: First small component (Velero config) */}
298226
<BentoCard size="small" gridColumn="9 / 11" gridRow="5 / 7">
299-
<div
300-
onClick={handleKyvernoClick}
301-
style={{
302-
cursor: 'pointer',
303-
height: '100%',
304-
width: '100%',
305-
position: 'relative'
306-
}}
307-
>
308-
<ComponentCard
309-
enabled={!!mcp?.spec?.components?.kyverno}
310-
version={mcp?.spec?.components?.kyverno?.version}
311-
allItems={allItems}
312-
isLoading={managedResourcesLoading}
313-
error={managedResourcesError}
314-
config={veleroConfig}
315-
/>
316-
<Button
317-
icon="sap-icon://expand"
318-
design="Transparent"
319-
style={{
320-
position: 'absolute',
321-
bottom: '8px',
322-
right: '8px',
323-
minWidth: '24px',
324-
height: '24px',
325-
zIndex: 10
326-
}}
327-
onClick={(e) => {
328-
e.stopPropagation();
329-
handleKyvernoClick();
330-
}}
331-
/>
332-
</div>
227+
<ComponentCard
228+
enabled={!!mcp?.spec?.components?.kyverno}
229+
version={mcp?.spec?.components?.kyverno?.version}
230+
allItems={allItems}
231+
isLoading={managedResourcesLoading}
232+
error={managedResourcesError}
233+
config={veleroConfig}
234+
onClick={handleKyvernoClick}
235+
size="small"
236+
/>
333237
</BentoCard>
334238

335239
{/* Right side: Second small component (Vault) */}
336240
<BentoCard size="small" gridColumn="11 / 13" gridRow="5 / 7">
337-
<div
338-
onClick={handleVaultClick}
339-
style={{
340-
cursor: 'pointer',
341-
height: '100%',
342-
width: '100%',
343-
position: 'relative'
344-
}}
345-
>
346-
<ComponentCard
347-
enabled={!!mcp?.spec?.components?.externalSecretsOperator}
348-
version={mcp?.spec?.components?.externalSecretsOperator?.version}
349-
allItems={allItems}
350-
isLoading={managedResourcesLoading}
351-
error={managedResourcesError}
352-
config={vaultConfig}
353-
/>
354-
<Button
355-
icon="sap-icon://expand"
356-
design="Transparent"
357-
style={{
358-
position: 'absolute',
359-
bottom: '8px',
360-
right: '8px',
361-
minWidth: '24px',
362-
height: '24px',
363-
zIndex: 10
364-
}}
365-
onClick={(e) => {
366-
e.stopPropagation();
367-
handleVaultClick();
368-
}}
369-
/>
370-
</div>
241+
<ComponentCard
242+
enabled={!!mcp?.spec?.components?.externalSecretsOperator}
243+
version={mcp?.spec?.components?.externalSecretsOperator?.version}
244+
allItems={allItems}
245+
isLoading={managedResourcesLoading}
246+
error={managedResourcesError}
247+
config={vaultConfig}
248+
onClick={handleVaultClick}
249+
size="small"
250+
/>
371251
</BentoCard>
372252
</BentoGrid>
373253
</div>

0 commit comments

Comments
 (0)