Skip to content

Commit fadf3ac

Browse files
LasserichLasserich
committed
fix: linting
1 parent fee5f26 commit fadf3ac

13 files changed

+336
-447
lines changed

‎src/components/Hints/CrossplaneHoverContent.tsx‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,19 @@ interface CrossplaneHoverContentProps {
1010
enabled: boolean;
1111
}
1212

13-
export const CrossplaneHoverContent: React.FC<CrossplaneHoverContentProps> = ({
14-
allItems,
15-
enabled,
16-
}) => {
13+
export const CrossplaneHoverContent: React.FC<CrossplaneHoverContentProps> = ({ allItems, enabled }) => {
1714
const { t } = useTranslation();
1815

1916
// Calculate all statistics using the dedicated calculation function
20-
const { resourceTypeStats, overallStats } = useMemo(() =>
21-
calculateCrossplaneHoverData(allItems),
22-
[allItems]
23-
);
17+
const { resourceTypeStats, overallStats } = useMemo(() => calculateCrossplaneHoverData(allItems), [allItems]);
2418

2519
// Prepare radar chart dataset
2620
const radarDataset = useMemo(() => {
27-
return resourceTypeStats.map(stats => ({
21+
return resourceTypeStats.map((stats) => ({
2822
type: stats.type,
2923
healthy: stats.healthyPercentage,
3024
creating: stats.creatingPercentage,
31-
unhealthy: stats.unhealthyPercentage
25+
unhealthy: stats.unhealthyPercentage,
3226
}));
3327
}, [resourceTypeStats]);
3428

@@ -41,39 +35,43 @@ export const CrossplaneHoverContent: React.FC<CrossplaneHoverContentProps> = ({
4135
{
4236
label: t('Hints.CrossplaneHint.hoverContent.healthy'),
4337
count: overallStats.healthy,
44-
color: HINT_COLORS.healthy
38+
color: HINT_COLORS.healthy,
4539
},
4640
{
4741
label: t('Hints.CrossplaneHint.hoverContent.creating'),
4842
count: overallStats.creating,
49-
color: HINT_COLORS.creating
43+
color: HINT_COLORS.creating,
5044
},
5145
{
5246
label: t('Hints.CrossplaneHint.hoverContent.failing'),
5347
count: overallStats.unhealthy,
54-
color: HINT_COLORS.unhealthy
55-
}
48+
color: HINT_COLORS.unhealthy,
49+
},
5650
];
5751
return (
58-
<div style={{
59-
width: '100%',
60-
display: 'flex',
61-
flexDirection: 'column',
62-
alignItems: 'center',
63-
margin: '1rem 0',
64-
overflow: 'visible'
65-
}}>
66-
<LegendSection
52+
<div
53+
style={{
54+
width: '100%',
55+
display: 'flex',
56+
flexDirection: 'column',
57+
alignItems: 'center',
58+
margin: '1rem 0',
59+
overflow: 'visible',
60+
}}
61+
>
62+
<LegendSection
6763
title={`${overallStats.total} ${t('Hints.CrossplaneHint.hoverContent.totalResources')}`}
6864
items={legendItems}
6965
/>
70-
<div style={{
71-
width: '100%',
72-
height: 300,
73-
display: 'flex',
74-
justifyContent: 'center',
75-
alignItems: 'center'
76-
}}>
66+
<div
67+
style={{
68+
width: '100%',
69+
height: 300,
70+
display: 'flex',
71+
justifyContent: 'center',
72+
alignItems: 'center',
73+
}}
74+
>
7775
<RadarChart
7876
dataset={radarDataset}
7977
dimensions={[{ accessor: 'type' }]}
@@ -82,8 +80,8 @@ export const CrossplaneHoverContent: React.FC<CrossplaneHoverContentProps> = ({
8280
accessor: 'healthy',
8381
color: HINT_COLORS.healthy,
8482
hideDataLabel: true,
85-
label: t('Hints.CrossplaneHint.hoverContent.healthy') + ' (%)'
86-
}
83+
label: t('Hints.CrossplaneHint.hoverContent.healthy') + ' (%)',
84+
},
8785
]}
8886
style={{ width: '100%', height: '100%', minWidth: 280, minHeight: 280 }}
8987
noLegend={true}

‎src/components/Hints/GenericHint.tsx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,18 @@ export const GenericHint: React.FC<GenericHintProps> = ({
1919
const [hovered, setHovered] = useState(false);
2020

2121
// Calculate segments and state using the provided calculator
22-
const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled);
22+
const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t);
2323

2424
// Handle click navigation if scroll target is provided
25-
const handleClick = enabled && config.scrollTarget ? () => {
26-
const el = document.querySelector(config.scrollTarget!);
27-
if (el) {
28-
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
29-
}
30-
} : undefined;
25+
const handleClick =
26+
enabled && config.scrollTarget
27+
? () => {
28+
const el = document.querySelector(config.scrollTarget!);
29+
if (el) {
30+
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
31+
}
32+
}
33+
: undefined;
3134

3235
return (
3336
<div style={{ position: 'relative', width: '100%' }}>
@@ -63,16 +66,18 @@ export const GenericHint: React.FC<GenericHintProps> = ({
6366
>
6467
{/* Disabled overlay */}
6568
{!enabled && <div className={styles.disabledOverlay} />}
66-
69+
6770
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
68-
<div style={{
69-
display: 'flex',
70-
gap: '8px',
71-
width: '100%',
72-
maxWidth: 500,
73-
padding: '0 1rem'
74-
}}>
75-
<MultiPercentageBar
71+
<div
72+
style={{
73+
display: 'flex',
74+
gap: '8px',
75+
width: '100%',
76+
maxWidth: 500,
77+
padding: '0 1rem',
78+
}}
79+
>
80+
<MultiPercentageBar
7681
segments={hintState.segments}
7782
style={{ width: '100%' }}
7883
label={hintState.label}
@@ -82,12 +87,15 @@ export const GenericHint: React.FC<GenericHintProps> = ({
8287
/>
8388
</div>
8489
</div>
85-
90+
8691
{/* Hover content (e.g., RadarChart for Crossplane) */}
87-
{enabled && hovered && !isLoading && !error && config.renderHoverContent && (
88-
config.renderHoverContent(allItems, enabled)
89-
)}
90-
92+
{enabled &&
93+
hovered &&
94+
!isLoading &&
95+
!error &&
96+
config.renderHoverContent &&
97+
config.renderHoverContent(allItems, enabled)}
98+
9199
{/* Activate button for disabled state */}
92100
{!enabled && onActivate && (
93101
<div

‎src/components/Hints/Hints.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import { FlexBox, FlexBoxDirection } from '@ui5/webcomponents-react';
22
import { GenericHint } from './GenericHint';
3-
import {
4-
useCrossplaneHintConfig,
5-
useGitOpsHintConfig,
6-
useVaultHintConfig
7-
} from './hintConfigs';
3+
import { useCrossplaneHintConfig, useGitOpsHintConfig, useVaultHintConfig } from './hintConfigs';
84

95
import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
10-
import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
6+
import { ManagedResourcesRequest, ManagedResourcesResponse } from '../../lib/api/types/crossplane/listManagedResources';
117
import { resourcesInterval } from '../../lib/shared/constants';
128
import { useApiResource } from '../../lib/api/useApiResource';
139
import { ManagedResourceItem } from '../../lib/shared/types';
@@ -21,7 +17,7 @@ interface HintsProps {
2117
export { default as styles } from './Hints.module.css';
2218

2319
// Utility function to flatten managed resources
24-
export const flattenManagedResources = (managedResources: any): ManagedResourceItem[] => {
20+
export const flattenManagedResources = (managedResources: ManagedResourcesResponse): ManagedResourceItem[] => {
2521
if (!managedResources || !Array.isArray(managedResources)) return [];
2622

2723
return managedResources
@@ -39,7 +35,10 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
3935
});
4036

4137
// Flatten all managed resources once and pass to components
42-
const allItems = useMemo(() => flattenManagedResources(managedResources), [managedResources]);
38+
const allItems = useMemo(
39+
() => flattenManagedResources(managedResources ?? ([] as unknown as ManagedResourcesResponse)),
40+
[managedResources],
41+
);
4342

4443
// Get hint configurations
4544
const crossplaneConfig = useCrossplaneHintConfig();

‎src/components/Hints/LegendSection.tsx‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -13,46 +13,55 @@ interface LegendSectionProps {
1313
style?: React.CSSProperties;
1414
}
1515

16-
export const LegendSection: React.FC<LegendSectionProps> = ({
17-
title,
18-
items,
19-
style
20-
}) => {
16+
export const LegendSection: React.FC<LegendSectionProps> = ({ title, items, style }) => {
2117
return (
22-
<div className={styles.legendSection} style={{
23-
marginBottom: '1rem',
24-
padding: '0.75rem',
25-
borderRadius: '6px',
26-
width: 'fit-content',
27-
margin: '0 auto 1rem auto',
28-
...style
29-
}}>
30-
<div className={styles.legendTitle} style={{
31-
fontSize: '0.95rem',
32-
fontWeight: '600',
33-
marginBottom: '0.5rem',
34-
textAlign: 'center'
35-
}}>
18+
<div
19+
className={styles.legendSection}
20+
style={{
21+
marginBottom: '1rem',
22+
padding: '0.75rem',
23+
borderRadius: '6px',
24+
width: 'fit-content',
25+
margin: '0 auto 1rem auto',
26+
...style,
27+
}}
28+
>
29+
<div
30+
className={styles.legendTitle}
31+
style={{
32+
fontSize: '0.95rem',
33+
fontWeight: '600',
34+
marginBottom: '0.5rem',
35+
textAlign: 'center',
36+
}}
37+
>
3638
{title}
3739
</div>
38-
<div style={{
39-
display: 'flex',
40-
gap: '0.75rem',
41-
alignItems: 'center',
42-
justifyContent: 'center'
43-
}}>
40+
<div
41+
style={{
42+
display: 'flex',
43+
gap: '0.75rem',
44+
alignItems: 'center',
45+
justifyContent: 'center',
46+
}}
47+
>
4448
{items.map((item, index) => (
45-
<div key={index} style={{
46-
display: 'flex',
47-
alignItems: 'center',
48-
gap: '0.25rem'
49-
}}>
50-
<div style={{
51-
width: '10px',
52-
height: '10px',
53-
backgroundColor: item.color,
54-
borderRadius: '50%'
55-
}} />
49+
<div
50+
key={index}
51+
style={{
52+
display: 'flex',
53+
alignItems: 'center',
54+
gap: '0.25rem',
55+
}}
56+
>
57+
<div
58+
style={{
59+
width: '10px',
60+
height: '10px',
61+
backgroundColor: item.color,
62+
borderRadius: '50%',
63+
}}
64+
/>
5665
<span className={styles.legendItem} style={{ fontSize: '0.85rem' }}>
5766
{item.count} {item.label}
5867
</span>

0 commit comments

Comments
 (0)