Files
headlamp-argocd-plugin/CLAUDE.md
T
Test User a0031fc59a 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>
2026-04-21 20:16:07 +00:00

2.6 KiB

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

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:

vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
  ApiProxy: { request: vi.fn().mockResolvedValue({}) },
  K8s: { ResourceClasses: {} },
}));