fix: replace @mui/icons-material with @iconify/react (v0.2.3)
Material-UI icons were not provided as globals by Headlamp, causing 'undefined is not an object (evaluating Ct.createSvgIcon)' errors. Headlamp provides @iconify/react as a global, so all icon imports have been replaced with Iconify equivalents: - ErrorOutline → mdi:alert-circle-outline - ContentCopy → mdi:content-copy - Visibility → mdi:eye - VisibilityOff → mdi:eye-off - CheckCircle → mdi:check-circle - Error → mdi:alert-circle - Warning → mdi:alert - Add → mdi:plus - Delete → mdi:delete Changes: - Replaced all @mui/icons-material imports with @iconify/react Icon component - Updated 4 component files (ErrorBoundary, DecryptDialog, EncryptDialog, ControllerStatus) - Bumped version to 0.2.3 - Bundle size reduced: 358.18 kB (98.04 kB gzipped) - Checksum: SHA256:03787323abc9430a63433838253b2dd8296d237000acdfe4ce2507678b63125f This should fix the plugin loading issue and make the sidebar entry appear. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
* including reachability, response time, and version information.
|
||||
*/
|
||||
|
||||
import { CheckCircle, Error as ErrorIcon, Warning } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { Box, Chip, Tooltip, Typography } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useControllerHealth } from '../hooks/useControllerHealth';
|
||||
@@ -37,18 +37,18 @@ export function ControllerStatus({
|
||||
|
||||
// Build status message and icon
|
||||
let statusColor: 'success' | 'error' | 'warning' = 'error';
|
||||
let StatusIcon = ErrorIcon;
|
||||
let statusIcon = 'mdi:alert-circle';
|
||||
let statusLabel = 'Unreachable';
|
||||
let tooltipText = status.error || 'Controller is unreachable';
|
||||
|
||||
if (status.healthy) {
|
||||
statusColor = 'success';
|
||||
StatusIcon = CheckCircle;
|
||||
statusIcon = 'mdi:check-circle';
|
||||
statusLabel = 'Healthy';
|
||||
tooltipText = `Controller is healthy${status.version ? ` (${status.version})` : ''}`;
|
||||
} else if (status.reachable) {
|
||||
statusColor = 'warning';
|
||||
StatusIcon = Warning;
|
||||
statusIcon = 'mdi:alert';
|
||||
statusLabel = 'Unhealthy';
|
||||
tooltipText = status.error || 'Controller responded but is not healthy';
|
||||
}
|
||||
@@ -57,7 +57,7 @@ export function ControllerStatus({
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Tooltip title={tooltipText}>
|
||||
<Chip
|
||||
icon={<StatusIcon />}
|
||||
icon={<Icon icon={statusIcon} />}
|
||||
label={statusLabel}
|
||||
color={statusColor}
|
||||
size="small"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import { K8s } from '@kinvolk/headlamp-plugin/lib';
|
||||
import { ContentCopy as CopyIcon, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -155,7 +155,7 @@ export function DecryptDialog({ sealedSecret, secretKey, onClose }: DecryptDialo
|
||||
aria-label={showValue ? 'Hide secret value' : 'Show secret value'}
|
||||
title={showValue ? 'Hide secret value' : 'Show secret value'}
|
||||
>
|
||||
{showValue ? <VisibilityOff /> : <Visibility />}
|
||||
{showValue ? <Icon icon="mdi:eye-off" /> : <Icon icon="mdi:eye" />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleCopy}
|
||||
@@ -163,7 +163,7 @@ export function DecryptDialog({ sealedSecret, secretKey, onClose }: DecryptDialo
|
||||
aria-label="Copy value to clipboard"
|
||||
title="Copy value to clipboard"
|
||||
>
|
||||
<CopyIcon />
|
||||
<Icon icon="mdi:content-copy" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
),
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import { K8s } from '@kinvolk/headlamp-plugin/lib';
|
||||
import { Add as AddIcon, Delete as DeleteIcon, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -222,7 +222,7 @@ export function EncryptDialog({ open, onClose }: EncryptDialogProps) {
|
||||
aria-label={kv.showValue ? 'Hide password' : 'Show password'}
|
||||
tabIndex={0}
|
||||
>
|
||||
{kv.showValue ? <VisibilityOff /> : <Visibility />}
|
||||
{kv.showValue ? <Icon icon="mdi:eye-off" /> : <Icon icon="mdi:eye" />}
|
||||
</IconButton>
|
||||
),
|
||||
}}
|
||||
@@ -234,13 +234,13 @@ export function EncryptDialog({ open, onClose }: EncryptDialogProps) {
|
||||
aria-label={`Remove key-value pair ${index + 1}`}
|
||||
title={keyValues.length === 1 ? 'At least one key-value pair is required' : `Remove key-value pair ${index + 1}`}
|
||||
>
|
||||
<DeleteIcon />
|
||||
<Icon icon="mdi:delete" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
<Button
|
||||
startIcon={<AddIcon />}
|
||||
startIcon={<Icon icon="mdi:plus" />}
|
||||
onClick={handleAddKeyValue}
|
||||
aria-label="Add another key-value pair"
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* Provides graceful error handling for crypto and API operations
|
||||
*/
|
||||
|
||||
import { ErrorOutline } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { Alert, Box, Button, Typography } from '@mui/material';
|
||||
import React, { Component, ReactNode } from 'react';
|
||||
|
||||
@@ -71,7 +71,7 @@ export class CryptoErrorBoundary extends BaseErrorBoundary {
|
||||
<Box p={3}>
|
||||
<Alert
|
||||
severity="error"
|
||||
icon={<ErrorOutline />}
|
||||
icon={<Icon icon="mdi:alert-circle-outline" />}
|
||||
action={
|
||||
<Button color="inherit" size="small" onClick={this.handleReset}>
|
||||
Retry
|
||||
@@ -116,7 +116,7 @@ export class ApiErrorBoundary extends BaseErrorBoundary {
|
||||
<Box p={3}>
|
||||
<Alert
|
||||
severity="error"
|
||||
icon={<ErrorOutline />}
|
||||
icon={<Icon icon="mdi:alert-circle-outline" />}
|
||||
action={
|
||||
<Button color="inherit" size="small" onClick={this.handleReset}>
|
||||
Retry
|
||||
@@ -163,7 +163,7 @@ export class GenericErrorBoundary extends BaseErrorBoundary {
|
||||
<Box p={3}>
|
||||
<Alert
|
||||
severity="error"
|
||||
icon={<ErrorOutline />}
|
||||
icon={<Icon icon="mdi:alert-circle-outline" />}
|
||||
action={
|
||||
<Button color="inherit" size="small" onClick={this.handleReset}>
|
||||
Reload
|
||||
|
||||
Reference in New Issue
Block a user