Skip to content

Commit bd550d9

Browse files
LasserichLasserich
committed
feat: incorporate feedback
1 parent 8b89e31 commit bd550d9

18 files changed

+261
-228
lines changed

‎src/components/Hints/LegendSection.tsx‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎src/components/HintsCardsRow/CardHoverContent/CardHoverContent.module.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Card Hover Content Styles */
2+
.hoverContent {
3+
width: 100%;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
margin: 1rem 0;
8+
overflow: visible;
9+
}
10+
11+
.chartContainer {
12+
width: 100%;
13+
height: 300px;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}

src/components/Hints/HoverContent.tsx renamed to src/components/HintsCardsRow/CardHoverContent/CardHoverContent.tsx

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useMemo } from 'react';
22
import { RadarChart } from '@ui5/webcomponents-react-charts';
3-
import { LegendSection } from './LegendSection';
4-
import { styles } from './Hints';
3+
import { LegendSection } from '../LegendSection/LegendSection';
4+
import { styles } from '../HintsCardsRow';
5+
import styles2 from './CardHoverContent.module.css';
56
import cx from 'clsx';
67

78
export interface LegendItem {
@@ -76,27 +77,9 @@ export const HoverContent: React.FC<HoverContentProps> = ({
7677
}
7778

7879
return (
79-
<div
80-
className={cx(styles.hoverContent)}
81-
style={{
82-
width: '100%',
83-
display: 'flex',
84-
flexDirection: 'column',
85-
alignItems: 'center',
86-
margin: '1rem 0',
87-
overflow: 'visible',
88-
}}
89-
>
80+
<div className={cx(styles.hoverContent, styles2.hoverContent)}>
9081
<LegendSection title={`${totalCount} ${totalLabel}`} items={legendItems} />
91-
<div
92-
style={{
93-
width: '100%',
94-
height: 300,
95-
display: 'flex',
96-
justifyContent: 'center',
97-
alignItems: 'center',
98-
}}
99-
>
82+
<div className={styles2.chartContainer}>
10083
{isLoading || radarDataset.length === 0 ? (
10184
<div className={cx(styles.hoverContentLoading)}>
10285
<RadarChart

src/components/Hints/hoverCalculations.ts renamed to src/components/HintsCardsRow/CardHoverContent/hoverCalculations.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ManagedResourceItem, Condition } from '../../lib/shared/types';
1+
import { ManagedResourceItem, Condition } from '../../../lib/shared/types';
22

33
export interface ResourceTypeStats {
44
type: string;

‎src/components/HintsCardsRow/GenericHintCard/GenericHintCard.module.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.container {
2+
position: relative;
3+
width: 100%;
4+
}
5+
6+
.avatar {
7+
width: 50px;
8+
height: 50px;
9+
border-radius: 50%;
10+
background: transparent;
11+
object-fit: cover;
12+
}
13+
14+
.contentContainer {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
padding: 0.5rem 0;
19+
}
20+
21+
.progressBarContainer {
22+
display: flex;
23+
gap: 8px;
24+
width: 100%;
25+
max-width: 500px;
26+
padding: 0 0.5rem;
27+
}
28+
29+
.progressBar {
30+
width: 100%;
31+
}
32+
33+
.activateButton {
34+
position: absolute;
35+
top: 16px;
36+
right: 16px;
37+
z-index: 2;
38+
pointer-events: auto;
39+
}
40+
41+
.activateButtonClickable {
42+
cursor: pointer;
43+
}
44+
45+
.activateButtonDefault {
46+
cursor: default;
47+
}

src/components/Hints/GenericHint.tsx renamed to src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx

Lines changed: 38 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import React, { useState } from 'react';
22
import { Card, CardHeader, MessageViewButton } from '@ui5/webcomponents-react';
33
import { useTranslation } from 'react-i18next';
44
import cx from 'clsx';
5-
import { MultiPercentageBar } from './MultiPercentageBar';
6-
import { GenericHintProps } from './types';
7-
import { styles } from './Hints';
8-
import { HoverContent } from './HoverContent';
5+
import { MultiPercentageBar } from '../MultiPercentageBar/MultiPercentageBar';
6+
import { styles } from '../HintsCardsRow';
7+
import { HoverContent } from '../CardHoverContent/CardHoverContent';
8+
import styles2 from './GenericHintCard.module.css';
9+
import { GenericHintProps } from '../../../types/types';
910

10-
export const GenericHint: React.FC<GenericHintProps> = ({
11+
export const GenericHintCard: React.FC<GenericHintProps> = ({
1112
enabled = false,
1213
version,
1314
onActivate,
@@ -34,7 +35,7 @@ export const GenericHint: React.FC<GenericHintProps> = ({
3435
: undefined;
3536

3637
return (
37-
<div style={{ position: 'relative', width: '100%' }}>
38+
<div className={styles2.container}>
3839
<Card
3940
header={
4041
<CardHeader
@@ -43,12 +44,8 @@ export const GenericHint: React.FC<GenericHintProps> = ({
4344
<img
4445
src={config.iconSrc}
4546
alt={config.iconAlt}
47+
className={styles2.avatar}
4648
style={{
47-
width: 50,
48-
height: 50,
49-
borderRadius: '50%',
50-
background: 'transparent',
51-
objectFit: 'cover',
5249
...config.iconStyle,
5350
}}
5451
/>
@@ -68,19 +65,11 @@ export const GenericHint: React.FC<GenericHintProps> = ({
6865
{/* Disabled overlay */}
6966
{!enabled && <div className={styles.disabledOverlay} />}
7067

71-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '0.5rem 0' }}>
72-
<div
73-
style={{
74-
display: 'flex',
75-
gap: '8px',
76-
width: '100%',
77-
maxWidth: 500,
78-
padding: '0 0.5rem',
79-
}}
80-
>
68+
<div className={styles2.contentContainer}>
69+
<div className={styles2.progressBarContainer}>
8170
<MultiPercentageBar
8271
segments={hintState.segments}
83-
style={{ width: '100%' }}
72+
className={styles2.progressBar}
8473
label={hintState.label}
8574
showPercentage={hintState.showPercentage}
8675
isHealthy={hintState.isHealthy}
@@ -89,40 +78,34 @@ export const GenericHint: React.FC<GenericHintProps> = ({
8978
</div>
9079
</div>
9180

92-
{/* Hover content (e.g., RadarChart for Crossplane) */}
93-
{enabled &&
94-
hovered &&
95-
config.calculateHoverData &&
96-
(() => {
97-
const hoverData = config.calculateHoverData(allItems, enabled, t);
98-
return hoverData ? <HoverContent enabled={enabled} isLoading={isLoading} {...hoverData} /> : null;
99-
})()}
81+
{(() => {
82+
const shouldShowHoverContent = enabled && hovered && config.calculateHoverData;
83+
if (!shouldShowHoverContent) return null;
84+
85+
const hoverData = config.calculateHoverData!(allItems, enabled, t);
86+
const hasValidHoverData = !!hoverData;
87+
88+
return hasValidHoverData ? <HoverContent enabled={enabled} isLoading={isLoading} {...hoverData} /> : null;
89+
})()}
10090

101-
{/* Legacy hover content support */}
102-
{enabled &&
103-
hovered &&
104-
!config.calculateHoverData &&
105-
config.renderHoverContent &&
106-
config.renderHoverContent(allItems, enabled)}
107-
108-
{/* Activate button for disabled state */}
109-
{!enabled && (
110-
<div
111-
style={{
112-
position: 'absolute',
113-
top: '16px',
114-
right: '16px',
115-
zIndex: 2,
116-
pointerEvents: 'auto',
117-
}}
118-
>
119-
<MessageViewButton
120-
type={'Information'}
121-
style={{ cursor: onActivate ? 'pointer' : 'default' }}
122-
onClick={onActivate}
123-
/>
124-
</div>
125-
)}
91+
{(() => {
92+
// Trigger for showing the information button when the card is disabled
93+
const shouldShowActivateButton = !enabled;
94+
if (!shouldShowActivateButton) return null;
95+
96+
return (
97+
<div className={styles2.activateButton}>
98+
<MessageViewButton
99+
type={'Information'}
100+
className={cx({
101+
[styles2.activateButtonClickable]: !!onActivate,
102+
[styles2.activateButtonDefault]: !onActivate,
103+
})}
104+
onClick={onActivate}
105+
/>
106+
</div>
107+
);
108+
})()}
126109
</Card>
127110
</div>
128111
);

src/components/Hints/hintConfigs.ts renamed to src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { useTranslation } from 'react-i18next';
2-
import { HintConfig } from './types';
2+
import { GenericHintConfig } from '../../../types/types';
33
import {
44
calculateCrossplaneSegments,
55
calculateGitOpsSegments,
66
calculateVaultSegments,
77
calculateCrossplaneHoverDataGeneric,
88
calculateGitOpsHoverDataGeneric,
9-
} from './calculations';
9+
} from '../../../utils/hintsCardsRowCalculations';
1010

11-
export const useCrossplaneHintConfig = (): HintConfig => {
11+
export const useCrossplaneHintConfig = (): GenericHintConfig => {
1212
const { t } = useTranslation();
1313

1414
return {
@@ -23,7 +23,7 @@ export const useCrossplaneHintConfig = (): HintConfig => {
2323
};
2424
};
2525

26-
export const useGitOpsHintConfig = (): HintConfig => {
26+
export const useGitOpsHintConfig = (): GenericHintConfig => {
2727
const { t } = useTranslation();
2828

2929
return {
@@ -38,7 +38,7 @@ export const useGitOpsHintConfig = (): HintConfig => {
3838
};
3939
};
4040

41-
export const useVaultHintConfig = (): HintConfig => {
41+
export const useVaultHintConfig = (): GenericHintConfig => {
4242
const { t } = useTranslation();
4343

4444
return {

0 commit comments

Comments
 (0)