feat: scaffold headlamp-argocd-plugin with standard plugin structure

Adds the full plugin scaffold matching the Headlamp plugin pattern
(polaris, kube-vip, etc.):
- package.json with full devDependencies (Vitest, TypeScript, ESLint, Prettier)
- tsconfig.json, vitest.config.mts, vitest.setup.ts
- src/index.tsx with ArgoCDErrorBoundary and stub Applications route
- src/index.test.tsx smoke test to verify module importability
- CLAUDE.md documentation for future development
- .gitignore for node_modules/dist
- pnpm-lock.yaml pinned via packageManager field

ArtifactHub metadata already present (created by Hugh in PRI-186).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Test User
2026-04-21 20:16:07 +00:00
parent d81b728d4d
commit a0031fc59a
9 changed files with 12449 additions and 10 deletions
+64
View File
@@ -0,0 +1,64 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project
Headlamp plugin for ArgoCD visibility. Monitors ArgoCD Applications, Rollouts, and health status via the ArgoCD REST API proxied through Kubernetes. Read-only — no cluster write operations.
- **Plugin name**: `argocd`
- **Target**: Headlamp >= v0.26
- **Data source**: ArgoCD server at `/api/v1/namespaces/argocd/services/argocd-server/proxy/api/v1/applications`
- **RBAC**: `get`/`list` on `services/proxy` for `argocd-server` in `argocd` namespace
## Commands
```bash
pnpm start # dev server with hot reload
pnpm build # production build
pnpm package # package for headlamp
pnpm tsc # TypeScript type check (no emit)
pnpm lint # ESLint
pnpm lint:fix # ESLint with auto-fix
pnpm format # Prettier write
pnpm format:check # Prettier check
pnpm test # vitest run
pnpm test:watch # vitest watch mode
```
All tests and `pnpm tsc` must pass before committing.
## Architecture
```
src/
├── index.tsx # Plugin entry: registerRoute, registerSidebarEntry; ArgoCDErrorBoundary
├── test-utils.tsx # Shared test fixtures
├── api/
│ └── argocd.ts # ArgoCD API types, ApiProxy request helpers
└── components/
└── ArgoCDStubView.tsx # Placeholder Applications List view
```
## Code conventions
- Functional React components only — class components only for error boundaries (ArgoCDErrorBoundary in index.tsx)
- All imports from `@kinvolk/headlamp-plugin/lib` and `@kinvolk/headlamp-plugin/lib/CommonComponents`
- `@mui/material` is available as a shared external via Headlamp — use `useTheme` from `@mui/material/styles` for theming. Do NOT add `@mui/material` to package.json dependencies.
- Use `useTheme()` + `theme.palette.*` for all theme-aware colors — never use `var(--mui-palette-*)` CSS variables
- No other UI libraries (no Ant Design, etc.)
- TypeScript strict mode — no `any`, use `unknown` + type guards at API boundaries
- Context provider wraps each route component in `index.tsx`
- All registered components wrapped in `ArgoCDErrorBoundary` for graceful error handling
- Tests: vitest + @testing-library/react, mock with `vi.mock('@kinvolk/headlamp-plugin/lib', ...)`
- `vitest.setup.ts` provides a spec-compliant `localStorage` shim for Node 22+ compatibility
## Testing
Mock pattern for headlamp APIs:
```typescript
vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
ApiProxy: { request: vi.fn().mockResolvedValue({}) },
K8s: { ResourceClasses: {} },
}));
```