Add frontend integration checklist and docs-drift guard
PLUGIN-QUICKSTART Step 7 is now a concrete 7-item checklist (view conventions, route auto-discovery + ADR-009 gating meta, api client shape, nav/report hooks, settings auto-nesting, verification). New tests/test_docs_contract.py introspects BasePlugin and fails CI when a public hook is missing from PLUGIN-HOOKS.md or the documented contract version drifts - it immediately caught two undocumented hooks (get_provisioning_note, get_config_schema), now documented. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -126,15 +126,40 @@ Override hooks on the plugin class as needed. See [PLUGIN-HOOKS.md](PLUGIN-HOOKS
|
||||
|
||||
Each hook has a default that does nothing. Override only what your plugin needs.
|
||||
|
||||
## Step 7: Frontend (manual for now)
|
||||
## Step 7: Frontend (manual checklist)
|
||||
|
||||
Backend scaffolding is automated. Frontend is manual until the frontend scaffolding skill ships. Convention:
|
||||
Backend scaffolding is automated. The frontend is a manual checklist until a frontend scaffold ships. Copy from the closest bundled plugin (`network` is the cleanest) and work through these in order:
|
||||
|
||||
- `frontend/src/views/cameras/CamerasList.vue`
|
||||
- `frontend/src/views/cameras/CameraDetail.vue`
|
||||
- `frontend/src/views/cameras/CameraForm.vue`
|
||||
1. **View files** - create `frontend/src/views/cameras/CamerasList.vue`, `CameraDetail.vue`, `CameraForm.vue`. Copy from `frontend/src/views/network/` and rename. Use the global `.filters` / `.form-control` / `.card` styles; do not invent per-page input styling.
|
||||
|
||||
Copy from an existing plugin's view files (e.g., `frontend/src/views/network/`) as a starting point. Update the API client in `frontend/src/api/index.js` to add cameras endpoints.
|
||||
2. **Route file** - create `frontend/src/router/routes/cameras.js` exporting a route array. The router auto-discovers every file in `routes/` via `import.meta.glob`, so no registration edit is needed. Tag EVERY route with `meta: { plugin: 'cameras' }` - the ADR-009 guard redirects to the dashboard when the backend plugin is disabled. Add `requiresAuth: true` on form routes:
|
||||
|
||||
```js
|
||||
export default [
|
||||
{
|
||||
path: 'cameras',
|
||||
name: 'cameras',
|
||||
component: () => import('../../views/cameras/CamerasList.vue'),
|
||||
meta: { plugin: 'cameras' }
|
||||
},
|
||||
{
|
||||
path: 'cameras/:id/edit',
|
||||
name: 'camera-edit',
|
||||
component: () => import('../../views/cameras/CameraForm.vue'),
|
||||
meta: { requiresAuth: true, plugin: 'cameras' }
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
3. **API client** - add a `camerasApi` block to `frontend/src/api/index.js` wrapping your endpoints. Match an existing block's shape (`list(params)`, `get(id)`, `create(data)`, `update(id, data)`).
|
||||
|
||||
4. **Sidebar entry** - implement `get_navigation_items` on the plugin class. No frontend edit: the sidebar builds itself from `/api/dashboard/navigation`.
|
||||
|
||||
5. **Report cards** (if any) - implement `get_reports` on the plugin class. No frontend edit: the Reports hub builds itself from `/api/reports`. Use `route` for a dedicated page (add it to your route file), or `endpoint` for inline rendering.
|
||||
|
||||
6. **Settings page** (if the plugin has subtypes) - add a route whose path starts with `settings/` (e.g. `settings/cameratypes`) to your route file; the router automatically nests it under the settings shell. Copy a types-list view from `frontend/src/views/settings/`.
|
||||
|
||||
7. **Verify** - `npm run build` must pass, then screenshot your pages against the dev servers: `venv/bin/python tools/shot.py /cameras`.
|
||||
|
||||
## Common errors
|
||||
|
||||
|
||||
Reference in New Issue
Block a user