fix: remove all MUI dependencies causing plugin load failure

Replace all @mui/material and @mui/icons-material imports with standard
HTML elements and inline styles. This fixes the browser error:
"TypeError: undefined is not an object (evaluating 'q.createSvgIcon')"

The Headlamp plugin environment doesn't provide the full MUI library,
so plugins must use only Headlamp CommonComponents or standard HTML.

Changes:
- AppBarScoreBadge: Replace Chip and ShieldIcon with button and emoji
- DashboardView: Replace Button and RefreshIcon with button and emoji
- ExemptionManager: Replace all MUI form components with HTML equivalents
- PolarisSettings: Replace Button with HTML button

All tests passing (50/50), TypeScript compilation clean, build successful.

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:
2026-02-11 22:18:20 -05:00
parent b67f770660
commit 5eaa6603f1
4 changed files with 133 additions and 53 deletions
+19 -5
View File
@@ -8,8 +8,6 @@ import {
SimpleTable,
StatusLabel,
} from '@kinvolk/headlamp-plugin/lib/CommonComponents';
import { Button } from '@mui/material';
import { Refresh as RefreshIcon } from '@mui/icons-material';
import React from 'react';
import { AuditData, computeScore, countResults, ResultCounts } from '../api/polaris';
import { usePolarisDataContext } from '../api/PolarisDataContext';
@@ -114,9 +112,25 @@ export default function DashboardView() {
<span style={{ fontSize: '14px', color: 'var(--mui-palette-text-secondary, #666)' }}>
Last updated: {formatAuditTime(data.AuditTime)}
</span>
<Button variant="outlined" startIcon={<RefreshIcon />} onClick={refresh} size="small">
Refresh
</Button>
<button
onClick={refresh}
style={{
padding: '6px 16px',
backgroundColor: 'transparent',
color: '#1976d2',
border: '1px solid #1976d2',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '13px',
fontWeight: 500,
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
}}
>
<span>🔄</span>
<span>Refresh</span>
</button>
</div>
)}
</div>