Watercolor FE redesign: tokens, screens, drawer, bookmark wiring#5
Merged
Conversation
Adds a new dojo.watercolor app providing the five PRD screens (Home, Browse, Queue, Reports, finding Drawer partial) under the additive /watercolor/ URL namespace. All visual tokens (palette, severity washes, six category gradients, radii, shadows, motion) are scoped under body.theme-watercolor so the redesign cannot leak into existing DefectDojo surfaces. Views re-use the queryset helpers (_user_findings, _open_findings) backing the existing dashboard ViewSets and the shared categorize_queryset helper so no aggregation logic is duplicated. Per-view scoping uses get_authorized_findings(Permissions.Finding_View). Bookmarks round-trip through the existing /api/v2/bookmarks/ endpoints; the drawer is fetched as an HTML partial from /watercolor/finding/<id>/drawer/. Includes 25 pre-baked SVG covers (5 per severity, picked by finding.id % 5) and 6 category icons. Fonts fall back to Georgia + system-ui per the PRD's font-licensing risk decision. Reports cards are a discoverability shell linking to the existing report builder. Tests cover anon redirects, authenticated 200s, the verbatim Queue empty copy, the bookmarked-OR-assigned Queue union, permission isolation across two analysts, drawer 200/404 contract, and Browse querystring filters. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the FE Watercolor Redesign PRD against this fork — adds a new
dojo.watercolorDjango app exposing the five PRD screens (Home, Browse, Queue, Reports, Drawer partial) under an additive/watercolor/URL namespace. No upstream templates or static assets were modified; the existing/dashboardroute is untouched.PRD: https://github.com/tactivos/security_pipeline/blob/main/docs/agent-work/prd-fe-watercolor-redesign.md
New routes
/watercolor/views.homewatercolor_home/watercolor/browse/views.browsewatercolor_browse/watercolor/queue/views.queuewatercolor_queue/watercolor/reports/views.reportswatercolor_reports/watercolor/finding/<int:finding_id>/drawer/views.drawerwatercolor_drawerLocked decisions honored
/watercolor/; no upstream URL is replaced or shadowed.body.theme-watercolorinwatercolor.css. The class is applied via a tiny JS shim in_base.htmlonly on the five new screens, so the redesign cannot bleed into existing DefectDojo surfaces.Georgia, serifand the UI font issystem-ui— no bundledSTKBureau/ABCSocial.dojo/static/dojo/img/watercolor/covers/(5 per severity), selected deterministically viafinding.id % 5in thecover_svgtemplate tag. 6 category icons underdojo/static/dojo/img/watercolor/category/.report_buildernamed URL.Re-use of backend helpers
Views import
_user_findingsand_open_findingsfromdojo.api_v2.dashboard.viewsand callcategorize_queryset()directly — no aggregation logic is duplicated. The Queue union (bookmarked OR assigned) mirrors the existingMeQueueViewSet.listlogic.Deviations / notes for reviewer
base.htmlbakesclass="{% dojo_body_class %}"onto<body>with no overrideable block, so_base.htmlapplies thetheme-watercolorclass via a tiny inline script onDOMContentLoadedrather than at render time. The class is not removed when leaving a watercolor screen because navigation triggers a full page reload./api/v2/bookmarks/ViewSet using the CSRF cookie + same-origin credentials. No new endpoints are introduced.Test plan
Backend unit tests in
unittests/test_watercolor_views.py:test_anonymous_redirects_to_login— each of the four screen routes returns 302/301/403 for anonymous users.test_authenticated_user_gets_200— Home / Browse / Queue / Reports all return 200 for a superuser.test_queue_empty_state_copy— wipes findings; asserts the verbatim PRD empty-state string is in the response.test_queue_union— bookmarked finding + assigned finding both appear exactly once on/watercolor/queue/.test_browse_querystring_filters—?severity=High&category=webexcludes a Low-severity finding.test_drawer_accessible_finding_returns_partial— drawer for an accessible finding returns 200 with the drawer head markup.test_drawer_inaccessible_finding_returns_404— drawer for a finding in another product returns 404 (not 403) so existence does not leak.test_permission_isolation— two analysts in disjoint products see disjoint Queue card lists.Manual browser walk-through (reviewer with running stack):
/watercolor/shows hero counters animating from 0, six category tiles, three card rails./watercolor/browse/?category=<id>with the chip pre-filtered./api/v2/bookmarks/, updates the nav badge, fires a toast./watercolor/queue/shows saved + assigned findings; with all findings removed shows the verbatim PRD empty copy./watercolor/reports/shows four wash-tinted cards; Generate CTA deep-links to the existing report builder./dashboardroute still renders unchanged.🤖 Generated with Claude Code