docs: implement Phase 1 - documentation reorganization
Reorganize and consolidate documentation into structured `/docs` directory for better navigation and maintainability. New documentation structure: - docs/README.md - Documentation hub with complete index - docs/getting-started/ - Installation and quick start guides - docs/development/ - Workflow and testing guides - docs/archive/ - Archived PHASE_*.md completion summaries Key changes: - Created docs/ directory with 9 subdirectories - Moved HEADLAMP_INSTALLATION.md → docs/getting-started/installation.md (streamlined) - Created docs/getting-started/quick-start.md (5-minute tutorial) - Moved DEVELOPMENT.md → docs/development/workflow.md - Moved TESTING_GUIDE.md → docs/development/testing.md - Archived 12 PHASE_*.md files to docs/archive/ - Updated CHANGELOG.md with v0.2.0 details - Created main README.md with badges and links to docs Benefits: - Clear documentation hierarchy by user journey - Easier navigation with centralized docs/README.md index - Reduced clutter in repository root - Improved cross-referencing between documents - Better onboarding for new users and contributors Phase 1 deliverables (1-2 days estimated, completed): ✅ Organized docs/ directory structure ✅ Consolidated installation guides ✅ Streamlined development documentation ✅ Updated CHANGELOG to v0.2.0 ✅ Archived phase completion files ✅ Created documentation hub ✅ Updated main README with navigation ✅ Fixed cross-references Next: Phase 2 - API documentation with TypeDoc 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:
@@ -0,0 +1,429 @@
|
||||
# Testing Guide - Phase 1.1 Result Types
|
||||
|
||||
This guide helps you test the Result types implementation to verify error handling works correctly.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Starting the Development Server
|
||||
|
||||
```bash
|
||||
cd headlamp-sealed-secrets
|
||||
npm start
|
||||
```
|
||||
|
||||
This will:
|
||||
- Build the plugin in development mode
|
||||
- Start Headlamp with the plugin loaded
|
||||
- Open http://localhost:4466 in your browser
|
||||
- Enable hot-reload for code changes
|
||||
|
||||
**Expected Output:**
|
||||
```
|
||||
> headlamp-sealed-secrets@0.1.0 start
|
||||
> headlamp-plugin start
|
||||
|
||||
Starting development server...
|
||||
Plugin loaded: headlamp-sealed-secrets
|
||||
Server running at http://localhost:4466
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Test Scenarios
|
||||
|
||||
### Test 1: Normal Operation (Happy Path)
|
||||
|
||||
**Prerequisites:**
|
||||
- Sealed Secrets controller running in cluster
|
||||
- Valid kubeconfig configured
|
||||
|
||||
**Steps:**
|
||||
1. Navigate to "Sealed Secrets" in sidebar
|
||||
2. Click "Create Sealed Secret"
|
||||
3. Fill in form:
|
||||
- Name: `test-secret`
|
||||
- Namespace: `default`
|
||||
- Scope: `strict`
|
||||
- Key: `password`
|
||||
- Value: `mysecretvalue`
|
||||
4. Click "Create"
|
||||
|
||||
**Expected Result:**
|
||||
- ✅ Success message: "SealedSecret created successfully"
|
||||
- ✅ Secret appears in list
|
||||
- ✅ No console errors
|
||||
|
||||
**What This Tests:**
|
||||
- Certificate fetch works
|
||||
- Certificate parsing works
|
||||
- Encryption works
|
||||
- Kubernetes API call works
|
||||
|
||||
---
|
||||
|
||||
### Test 2: Controller Unreachable
|
||||
|
||||
**Setup:**
|
||||
- Ensure controller is NOT running, or
|
||||
- Modify Settings to point to invalid controller
|
||||
|
||||
**Steps:**
|
||||
1. Go to Settings (if available)
|
||||
2. Set controller namespace to `nonexistent`
|
||||
3. Try to create a sealed secret
|
||||
|
||||
**Expected Result:**
|
||||
- ❌ Error message: "Failed to fetch certificate: [HTTP error details]"
|
||||
- ✅ User-friendly error, not stack trace
|
||||
- ✅ No uncaught exception in console
|
||||
|
||||
**What This Tests:**
|
||||
- `fetchPublicCertificate` error handling
|
||||
- AsyncResult error path
|
||||
- User-facing error messages
|
||||
|
||||
---
|
||||
|
||||
### Test 3: Invalid Certificate
|
||||
|
||||
**Setup:**
|
||||
- Requires modifying controller to return invalid cert (advanced)
|
||||
- OR test with mock by temporarily modifying `fetchPublicCertificate`
|
||||
|
||||
**Mock Test (temporary code change):**
|
||||
```typescript
|
||||
// In src/lib/controller.ts (TEMPORARY)
|
||||
export async function fetchPublicCertificate(
|
||||
config: PluginConfig
|
||||
): AsyncResult<string, string> {
|
||||
// Return invalid cert for testing
|
||||
return Ok('INVALID CERTIFICATE DATA');
|
||||
}
|
||||
```
|
||||
|
||||
**Steps:**
|
||||
1. Make the temporary code change above
|
||||
2. Build: `npm run build`
|
||||
3. Try to create a sealed secret
|
||||
|
||||
**Expected Result:**
|
||||
- ❌ Error message: "Invalid certificate: [parse error details]"
|
||||
- ✅ Specific error about certificate parsing
|
||||
- ✅ No uncaught exception
|
||||
|
||||
**Cleanup:**
|
||||
- Revert the temporary change
|
||||
- Run `npm run build` again
|
||||
|
||||
**What This Tests:**
|
||||
- `parsePublicKeyFromCert` error handling
|
||||
- Result type error propagation
|
||||
- Error message clarity
|
||||
|
||||
---
|
||||
|
||||
### Test 4: Encryption Failure
|
||||
|
||||
**Setup:**
|
||||
- This is harder to trigger naturally
|
||||
- Would require corrupting the crypto operation
|
||||
|
||||
**Skip for Now:**
|
||||
- Covered by unit tests in future phases
|
||||
- Error path is already type-safe
|
||||
|
||||
---
|
||||
|
||||
### Test 5: Certificate Download
|
||||
|
||||
**Steps:**
|
||||
1. Navigate to "Sealing Keys" view
|
||||
2. Click "Download Certificate" button
|
||||
|
||||
**Expected Results - Success:**
|
||||
- ✅ File downloads: `sealed-secrets-cert.pem`
|
||||
- ✅ Success message: "Certificate downloaded"
|
||||
- ✅ File contains valid PEM certificate
|
||||
|
||||
**Expected Results - Failure (if controller down):**
|
||||
- ❌ Error message: "Failed to download certificate: [error details]"
|
||||
- ✅ No file downloaded
|
||||
- ✅ Clear error message
|
||||
|
||||
**What This Tests:**
|
||||
- Certificate fetch in different context
|
||||
- File download error handling
|
||||
- Result type in SealingKeysView
|
||||
|
||||
---
|
||||
|
||||
### Test 6: Browser Console Check
|
||||
|
||||
**Steps:**
|
||||
1. Open Browser DevTools (F12)
|
||||
2. Go to Console tab
|
||||
3. Perform operations (create secret, download cert)
|
||||
|
||||
**Expected Results:**
|
||||
- ✅ No uncaught exceptions
|
||||
- ✅ No "Unhandled promise rejection" errors
|
||||
- ℹ️ May see debug logs (acceptable)
|
||||
- ⚠️ Any warnings should be from Headlamp framework, not our code
|
||||
|
||||
**What This Tests:**
|
||||
- No exceptions escape Result type handling
|
||||
- All async errors properly caught
|
||||
- Promise rejection handling
|
||||
|
||||
---
|
||||
|
||||
## 📝 Manual Testing Checklist
|
||||
|
||||
### Before Testing
|
||||
- [ ] Controller running in cluster (optional for error testing)
|
||||
- [ ] kubectl configured
|
||||
- [ ] Development server can start
|
||||
- [ ] Browser DevTools open
|
||||
|
||||
### Happy Path
|
||||
- [ ] Plugin loads without errors
|
||||
- [ ] Sealed Secrets list view displays
|
||||
- [ ] Create dialog opens
|
||||
- [ ] Can create sealed secret successfully
|
||||
- [ ] Success message appears
|
||||
- [ ] Secret appears in list
|
||||
- [ ] Certificate download works
|
||||
|
||||
### Error Paths
|
||||
- [ ] Controller unreachable shows proper error
|
||||
- [ ] Invalid certificate shows proper error
|
||||
- [ ] Network errors handled gracefully
|
||||
- [ ] No uncaught exceptions in console
|
||||
- [ ] Error messages are user-friendly
|
||||
|
||||
### Code Quality
|
||||
- [ ] No TypeScript errors in build
|
||||
- [ ] No linting errors
|
||||
- [ ] Bundle size acceptable
|
||||
- [ ] Hot reload works during development
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Known Issues to Look For
|
||||
|
||||
### Issue: Type Narrowing
|
||||
**Symptom:** TypeScript errors about accessing `.error` or `.value`
|
||||
|
||||
**Cause:** Using `!result.ok` instead of `result.ok === false`
|
||||
|
||||
**Fix:** Use explicit comparison `result.ok === false`
|
||||
|
||||
### Issue: Promise Rejection
|
||||
**Symptom:** "Unhandled promise rejection" in console
|
||||
|
||||
**Cause:** Async function not returning Result type
|
||||
|
||||
**Fix:** Ensure all async functions use `AsyncResult<T, E>`
|
||||
|
||||
### Issue: Generic Error Messages
|
||||
**Symptom:** User sees "Error: [object Object]"
|
||||
|
||||
**Cause:** Not extracting error message from Result
|
||||
|
||||
**Fix:** Use `result.error` (if string) or `result.error.message` (if Error)
|
||||
|
||||
---
|
||||
|
||||
## 📊 What to Record
|
||||
|
||||
### For Each Test:
|
||||
|
||||
```markdown
|
||||
**Test:** [Test name]
|
||||
**Date:** [Date/time]
|
||||
**Environment:** [Browser, OS]
|
||||
**Status:** ✅ Pass / ❌ Fail
|
||||
|
||||
**Steps:**
|
||||
1. [Step 1]
|
||||
2. [Step 2]
|
||||
|
||||
**Actual Result:**
|
||||
[What happened]
|
||||
|
||||
**Expected Result:**
|
||||
[What should happen]
|
||||
|
||||
**Screenshots:**
|
||||
[If applicable]
|
||||
|
||||
**Console Output:**
|
||||
[Any relevant console messages]
|
||||
```
|
||||
|
||||
### Example:
|
||||
|
||||
```markdown
|
||||
**Test:** Create Sealed Secret - Happy Path
|
||||
**Date:** 2026-02-11 21:00
|
||||
**Environment:** Chrome 120, macOS
|
||||
**Status:** ✅ Pass
|
||||
|
||||
**Steps:**
|
||||
1. Opened Sealed Secrets page
|
||||
2. Clicked "Create Sealed Secret"
|
||||
3. Filled form with test data
|
||||
4. Clicked "Create"
|
||||
|
||||
**Actual Result:**
|
||||
- Green success message appeared: "SealedSecret created successfully"
|
||||
- Secret "test-secret" appeared in list
|
||||
- No console errors
|
||||
|
||||
**Expected Result:**
|
||||
- Success message ✅
|
||||
- Secret in list ✅
|
||||
- No errors ✅
|
||||
|
||||
**Console Output:**
|
||||
(No errors)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Debugging Tips
|
||||
|
||||
### Enable Verbose Logging
|
||||
|
||||
Add temporary console.logs to track Result flow:
|
||||
|
||||
```typescript
|
||||
const certResult = await fetchPublicCertificate(config);
|
||||
console.log('Certificate fetch result:', certResult);
|
||||
|
||||
if (certResult.ok === false) {
|
||||
console.error('Certificate fetch failed:', certResult.error);
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Check Network Tab
|
||||
|
||||
1. Open DevTools → Network tab
|
||||
2. Try creating a secret
|
||||
3. Look for request to `/v1/cert.pem`
|
||||
4. Check status code and response
|
||||
|
||||
### Inspect State
|
||||
|
||||
Use React DevTools to inspect component state:
|
||||
1. Install React DevTools extension
|
||||
2. Select `<EncryptDialog>` component
|
||||
3. Check `encrypting` state
|
||||
4. Verify no infinite loops
|
||||
|
||||
---
|
||||
|
||||
## ✅ Success Criteria
|
||||
|
||||
### Must Pass
|
||||
- [ ] Plugin loads without errors
|
||||
- [ ] Can create sealed secret with valid controller
|
||||
- [ ] Error messages are clear and specific
|
||||
- [ ] No uncaught exceptions in console
|
||||
- [ ] No unhandled promise rejections
|
||||
|
||||
### Should Pass
|
||||
- [ ] Certificate download works
|
||||
- [ ] Sealing keys view displays
|
||||
- [ ] Settings page loads (if exists)
|
||||
- [ ] Hot reload works during development
|
||||
|
||||
### Nice to Have
|
||||
- [ ] Error messages suggest solutions
|
||||
- [ ] Loading states show during operations
|
||||
- [ ] Success feedback is immediate
|
||||
- [ ] UI remains responsive during errors
|
||||
|
||||
---
|
||||
|
||||
## 📋 Test Report Template
|
||||
|
||||
```markdown
|
||||
# Phase 1.1 Test Report
|
||||
|
||||
**Date:** [Date]
|
||||
**Tester:** [Name]
|
||||
**Environment:** [Browser, OS, kubectl version]
|
||||
|
||||
## Test Results Summary
|
||||
|
||||
- Total Tests: 6
|
||||
- Passed: X
|
||||
- Failed: Y
|
||||
- Skipped: Z
|
||||
|
||||
## Detailed Results
|
||||
|
||||
### Test 1: Normal Operation
|
||||
Status: ✅ / ❌
|
||||
Notes: [Details]
|
||||
|
||||
### Test 2: Controller Unreachable
|
||||
Status: ✅ / ❌
|
||||
Notes: [Details]
|
||||
|
||||
[Continue for all tests...]
|
||||
|
||||
## Issues Found
|
||||
|
||||
1. [Issue description]
|
||||
- Severity: Critical / High / Medium / Low
|
||||
- Steps to reproduce: [Steps]
|
||||
- Expected: [Expected behavior]
|
||||
- Actual: [Actual behavior]
|
||||
|
||||
## Recommendations
|
||||
|
||||
- [Recommendation 1]
|
||||
- [Recommendation 2]
|
||||
|
||||
## Sign-off
|
||||
|
||||
- [ ] All critical tests pass
|
||||
- [ ] No regressions found
|
||||
- [ ] Ready for next phase
|
||||
|
||||
**Tester Signature:** [Name]
|
||||
**Date:** [Date]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Next Steps After Testing
|
||||
|
||||
### If All Tests Pass
|
||||
1. Document test results
|
||||
2. Commit Phase 1.1 changes
|
||||
3. Move to Phase 1.2 (Branded Types)
|
||||
|
||||
### If Tests Fail
|
||||
1. Document failing scenarios
|
||||
2. Debug and fix issues
|
||||
3. Re-run failed tests
|
||||
4. Verify fixes don't break passing tests
|
||||
|
||||
### If Blockers Found
|
||||
1. Assess severity
|
||||
2. Create GitHub issues if needed
|
||||
3. Decide whether to continue or fix first
|
||||
|
||||
---
|
||||
|
||||
**Happy Testing!** 🧪
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,506 @@
|
||||
# Development Workflow Guide
|
||||
|
||||
Quick reference for developing and testing the Headlamp Sealed Secrets plugin.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Initial Setup
|
||||
|
||||
```bash
|
||||
cd headlamp-sealed-secrets
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development Commands
|
||||
|
||||
| Command | Description | When to Use |
|
||||
|---------|-------------|-------------|
|
||||
| `npm start` | Start development server with hot reload | Active development |
|
||||
| `npm run build` | Build for production | Before testing/releasing |
|
||||
| `npm run tsc` | Type check without building | Verify TypeScript |
|
||||
| `npm run lint` | Check code quality | Before commit |
|
||||
| `npm run lint-fix` | Auto-fix linting issues | Fix style issues |
|
||||
| `npm run format` | Format code with Prettier | Before commit |
|
||||
| `npm run package` | Create distributable tarball | Before release |
|
||||
| `npm test` | Run tests | Verify changes |
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Development Workflow
|
||||
|
||||
### 1. **Making Changes**
|
||||
|
||||
```bash
|
||||
# Start development server
|
||||
npm start
|
||||
|
||||
# In another terminal, make code changes
|
||||
# The dev server will hot-reload automatically
|
||||
```
|
||||
|
||||
### 2. **Before Committing**
|
||||
|
||||
```bash
|
||||
# Fix any linting issues
|
||||
npm run lint-fix
|
||||
|
||||
# Verify TypeScript types
|
||||
npm run tsc
|
||||
|
||||
# Ensure linting passes
|
||||
npm run lint
|
||||
|
||||
# Build to verify production bundle
|
||||
npm run build
|
||||
```
|
||||
|
||||
### 3. **Testing Changes**
|
||||
|
||||
#### Option A: Development Server
|
||||
```bash
|
||||
npm start
|
||||
# Opens Headlamp with plugin loaded at http://localhost:4466
|
||||
# Changes hot-reload automatically
|
||||
```
|
||||
|
||||
#### Option B: Install Plugin Locally
|
||||
```bash
|
||||
# Build and package
|
||||
npm run build
|
||||
npm run package
|
||||
|
||||
# Install to Headlamp
|
||||
headlamp plugin install ./headlamp-sealed-secrets-0.1.0.tar.gz
|
||||
|
||||
# Or manually extract to plugins directory
|
||||
mkdir -p ~/.headlamp/plugins/headlamp-sealed-secrets
|
||||
tar -xzf headlamp-sealed-secrets-0.1.0.tar.gz -C ~/.headlamp/plugins/
|
||||
```
|
||||
|
||||
#### Option C: Test Against Real Cluster
|
||||
```bash
|
||||
# Ensure kubectl is configured
|
||||
kubectl cluster-info
|
||||
|
||||
# Start Headlamp with plugin
|
||||
npm start
|
||||
|
||||
# Or use Headlamp desktop app with installed plugin
|
||||
headlamp
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Pre-Commit Checklist
|
||||
|
||||
- [ ] `npm run lint-fix` - Fix auto-fixable issues
|
||||
- [ ] `npm run tsc` - No type errors
|
||||
- [ ] `npm run lint` - Passes all checks
|
||||
- [ ] `npm run build` - Builds successfully
|
||||
- [ ] Test manually in Headlamp
|
||||
- [ ] Update CHANGELOG.md if needed
|
||||
|
||||
---
|
||||
|
||||
## 📦 Build & Release Process
|
||||
|
||||
### Current Build Status
|
||||
|
||||
✅ **Build:** Working (339.42 kB → 93.21 kB gzipped)
|
||||
✅ **TypeScript:** No errors
|
||||
✅ **Linting:** All checks passing
|
||||
✅ **Package:** Creates `headlamp-sealed-secrets-0.1.0.tar.gz` (92K)
|
||||
|
||||
### Verified Commands
|
||||
|
||||
```bash
|
||||
# ✅ Build production bundle
|
||||
npm run build
|
||||
# Output: dist/main.js (339.42 kB)
|
||||
|
||||
# ✅ Type check
|
||||
npm run tsc
|
||||
# Output: No errors
|
||||
|
||||
# ✅ Lint check
|
||||
npm run lint
|
||||
# Output: All checks passing
|
||||
|
||||
# ✅ Create package
|
||||
npm run package
|
||||
# Output: headlamp-sealed-secrets-0.1.0.tar.gz (92K)
|
||||
```
|
||||
|
||||
### Release Checklist
|
||||
|
||||
1. **Update Version**
|
||||
```bash
|
||||
# Edit package.json version field
|
||||
# Update CHANGELOG.md
|
||||
```
|
||||
|
||||
2. **Clean Build**
|
||||
```bash
|
||||
rm -rf dist/ node_modules/
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
3. **Quality Checks**
|
||||
```bash
|
||||
npm run tsc
|
||||
npm run lint
|
||||
npm test # When tests are added
|
||||
```
|
||||
|
||||
4. **Package**
|
||||
```bash
|
||||
npm run package
|
||||
```
|
||||
|
||||
5. **Test Installation**
|
||||
```bash
|
||||
headlamp plugin install ./headlamp-sealed-secrets-*.tar.gz
|
||||
```
|
||||
|
||||
6. **Git Tag & Push**
|
||||
```bash
|
||||
git tag v0.1.0
|
||||
git push origin v0.1.0
|
||||
```
|
||||
|
||||
7. **Publish**
|
||||
- Create GitHub Release
|
||||
- Attach `.tar.gz` file
|
||||
- Update Artifact Hub (if applicable)
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Strategy
|
||||
|
||||
### Manual Testing Workflow
|
||||
|
||||
1. **Start Development Environment**
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
2. **Access Headlamp**
|
||||
- Open http://localhost:4466
|
||||
- Navigate to "Sealed Secrets" in sidebar
|
||||
|
||||
3. **Test Core Features**
|
||||
- [ ] List view loads sealed secrets
|
||||
- [ ] Create dialog opens
|
||||
- [ ] Encrypt secret works
|
||||
- [ ] Detail view shows secret info
|
||||
- [ ] Settings page loads config
|
||||
- [ ] Sealing keys view shows certificates
|
||||
|
||||
4. **Test Error Cases**
|
||||
- [ ] Invalid secret name
|
||||
- [ ] Empty key-value pairs
|
||||
- [ ] Controller unreachable
|
||||
- [ ] Invalid certificate
|
||||
- [ ] Permission denied
|
||||
|
||||
### Testing with Real Cluster
|
||||
|
||||
**Prerequisites:**
|
||||
```bash
|
||||
# Install sealed-secrets controller
|
||||
kubectl apply -f https://github.com/bitnami-labs/sealed-secrets/releases/download/v0.24.0/controller.yaml
|
||||
|
||||
# Verify installation
|
||||
kubectl get deployment -n kube-system sealed-secrets-controller
|
||||
kubectl get svc -n kube-system sealed-secrets-controller
|
||||
```
|
||||
|
||||
**Test Scenarios:**
|
||||
|
||||
1. **Create Sealed Secret**
|
||||
- Click "Create Sealed Secret"
|
||||
- Fill in name, namespace, scope
|
||||
- Add key-value pairs
|
||||
- Submit → Verify secret created in cluster
|
||||
|
||||
2. **Verify Encryption**
|
||||
```bash
|
||||
kubectl get sealedsecret <name> -n <namespace> -o yaml
|
||||
# Should see encrypted data
|
||||
```
|
||||
|
||||
3. **Verify Secret Creation**
|
||||
```bash
|
||||
kubectl get secret <name> -n <namespace>
|
||||
# Controller should create corresponding Secret
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Troubleshooting
|
||||
|
||||
### Build Issues
|
||||
|
||||
**Problem:** Build fails with TypeScript errors
|
||||
```bash
|
||||
# Solution: Check types
|
||||
npm run tsc
|
||||
# Fix type errors shown
|
||||
```
|
||||
|
||||
**Problem:** Linting fails
|
||||
```bash
|
||||
# Solution: Auto-fix
|
||||
npm run lint-fix
|
||||
|
||||
# Then manually fix remaining issues
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Development Server Issues
|
||||
|
||||
**Problem:** Hot reload not working
|
||||
```bash
|
||||
# Solution: Restart dev server
|
||||
# Ctrl+C to stop
|
||||
npm start
|
||||
```
|
||||
|
||||
**Problem:** Plugin not loading in Headlamp
|
||||
```bash
|
||||
# Solution: Check console for errors
|
||||
# Verify plugin name matches in package.json
|
||||
# Ensure build completed successfully
|
||||
```
|
||||
|
||||
### Plugin Installation Issues
|
||||
|
||||
**Problem:** `headlamp plugin install` fails
|
||||
```bash
|
||||
# Solution: Check tarball exists
|
||||
ls -lh headlamp-sealed-secrets-*.tar.gz
|
||||
|
||||
# Verify tarball contents
|
||||
tar -tzf headlamp-sealed-secrets-*.tar.gz
|
||||
|
||||
# Should contain:
|
||||
# headlamp-sealed-secrets/main.js
|
||||
# headlamp-sealed-secrets/package.json
|
||||
```
|
||||
|
||||
**Problem:** Plugin not appearing in Headlamp
|
||||
```bash
|
||||
# Check installation location
|
||||
ls ~/.headlamp/plugins/
|
||||
|
||||
# Restart Headlamp after installation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📂 Project Structure
|
||||
|
||||
```
|
||||
headlamp-sealed-secrets/
|
||||
├── src/
|
||||
│ ├── components/ # React UI components
|
||||
│ │ ├── DecryptDialog.tsx
|
||||
│ │ ├── EncryptDialog.tsx
|
||||
│ │ ├── SealedSecretDetail.tsx
|
||||
│ │ ├── SealedSecretList.tsx
|
||||
│ │ ├── SealingKeysView.tsx
|
||||
│ │ ├── SecretDetailsSection.tsx
|
||||
│ │ └── SettingsPage.tsx
|
||||
│ ├── lib/ # Core logic
|
||||
│ │ ├── controller.ts # Controller API
|
||||
│ │ ├── crypto.ts # Encryption logic
|
||||
│ │ └── SealedSecretCRD.ts
|
||||
│ ├── types.ts # TypeScript types
|
||||
│ └── index.tsx # Plugin entry point
|
||||
├── dist/ # Build output (generated)
|
||||
│ └── main.js
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### TypeScript Configuration
|
||||
|
||||
The plugin extends Headlamp's base TypeScript config:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@kinvolk/headlamp-plugin/config/plugins-tsconfig.json",
|
||||
"include": ["./src/**/*"]
|
||||
}
|
||||
```
|
||||
|
||||
### ESLint Configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"@headlamp-k8s",
|
||||
"prettier",
|
||||
"plugin:jsx-a11y/recommended"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Dependencies
|
||||
|
||||
**Runtime:**
|
||||
- `node-forge` - Cryptography (RSA-OAEP, AES-GCM)
|
||||
|
||||
**Development:**
|
||||
- `@kinvolk/headlamp-plugin` - Headlamp plugin SDK
|
||||
- `@types/node-forge` - TypeScript definitions
|
||||
|
||||
---
|
||||
|
||||
## 📝 Code Style Guidelines
|
||||
|
||||
### Import Order
|
||||
Auto-sorted by `simple-import-sort`:
|
||||
1. React/external libraries
|
||||
2. Headlamp imports
|
||||
3. Material-UI imports
|
||||
4. Local imports (lib, components, types)
|
||||
|
||||
### Component Structure
|
||||
```typescript
|
||||
/**
|
||||
* Component description
|
||||
*/
|
||||
export function ComponentName({ prop1, prop2 }: Props) {
|
||||
// 1. Hooks
|
||||
const [state, setState] = useState();
|
||||
|
||||
// 2. Callbacks
|
||||
const handleAction = () => { };
|
||||
|
||||
// 3. Effects
|
||||
useEffect(() => { }, []);
|
||||
|
||||
// 4. Render
|
||||
return ( );
|
||||
}
|
||||
```
|
||||
|
||||
### File Naming
|
||||
- Components: `PascalCase.tsx`
|
||||
- Libraries: `camelCase.ts`
|
||||
- Types: `types.ts`
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Next Steps for Development
|
||||
|
||||
### Immediate (Pre-Enhancement)
|
||||
1. ✅ Verify build works
|
||||
2. ✅ Fix linting issues
|
||||
3. ✅ Test package creation
|
||||
4. 🔄 Test plugin installation locally
|
||||
5. 📝 Document workflow (this file)
|
||||
|
||||
### Short Term (Phase 1 Preparation)
|
||||
1. Set up testing framework (Vitest)
|
||||
2. Add initial unit tests
|
||||
3. Create test utilities (mock controller, cert generator)
|
||||
4. Set up CI/CD pipeline
|
||||
|
||||
### Enhancement Implementation
|
||||
- Follow [ENHANCEMENT_PLAN.md](./ENHANCEMENT_PLAN.md)
|
||||
- Implement changes iteratively
|
||||
- Test after each enhancement
|
||||
- Update docs as you go
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contributing Workflow
|
||||
|
||||
1. **Create Branch**
|
||||
```bash
|
||||
git checkout -b feature/your-feature-name
|
||||
```
|
||||
|
||||
2. **Make Changes**
|
||||
- Follow code style
|
||||
- Add tests for new features
|
||||
- Update documentation
|
||||
|
||||
3. **Pre-Commit**
|
||||
```bash
|
||||
npm run lint-fix
|
||||
npm run tsc
|
||||
npm run build
|
||||
npm test
|
||||
```
|
||||
|
||||
4. **Commit**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat: add your feature"
|
||||
```
|
||||
|
||||
5. **Push & PR**
|
||||
```bash
|
||||
git push origin feature/your-feature-name
|
||||
# Create Pull Request on GitHub
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Performance Metrics
|
||||
|
||||
**Current Build:**
|
||||
- Bundle size: 339.42 kB (93.21 kB gzipped)
|
||||
- Build time: ~3.87s
|
||||
- Package size: 92 KB
|
||||
|
||||
**Goals:**
|
||||
- Keep bundle < 400 kB
|
||||
- Build time < 5s
|
||||
- Maintain tree-shaking
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Useful Debug Commands
|
||||
|
||||
```bash
|
||||
# Check plugin is loaded in Headlamp
|
||||
# Open browser console → Look for plugin logs
|
||||
|
||||
# Inspect tarball contents
|
||||
tar -tzf headlamp-sealed-secrets-*.tar.gz
|
||||
|
||||
# Check TypeScript compilation output
|
||||
npm run tsc -- --listFiles
|
||||
|
||||
# View linting cache
|
||||
ls node_modules/.cache/eslint/
|
||||
|
||||
# Clear caches
|
||||
rm -rf node_modules/.cache/
|
||||
npm run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2026-02-11
|
||||
**Plugin Version:** 0.1.0
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user