refactor(frontend): split the CanvasPage god component#55
Merged
Conversation
…re canvasGeometry module
…o pure securityRules module
…rkConfigOps module
…to useNetworkConfig hook
…ne InspectorState union
…s and CreateNodeModal
Derssa
approved these changes
Jul 14, 2026
OthmaneZ05
added a commit
that referenced
this pull request
Jul 18, 2026
* refactor(frontend): unify network topology types in shared/types/network.ts * refactor(frontend): extract canvas grid and hit-test geometry into pure canvasGeometry module * refactor(frontend): extract security-rule and firewall-edge logic into pure securityRules module * refactor(frontend): extract network config transforms into pure networkConfigOps module * refactor(frontend): move network config state, save path and audit into useNetworkConfig hook * refactor(frontend): move drag/drop/delete canvas handlers into useCanvasDragDrop hook * refactor(frontend): consolidate the six inspector modal states into one InspectorState union * refactor(frontend): relocate the canvas modal blocks into CanvasModals and CreateNodeModal
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
2 participants
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
CanvasPage.tsxhad grown to ~1,800 lines, mixing drag-and-drop geometry, IP allocation, firewall-rule generation, edge derivation, persistence and the orchestration of 13 modals in one component. This PR splits it into focused modules while keeping behavior identical — CanvasPage is now a ~690-line orchestrator.Extracted pure modules (each with direct unit tests)
utils/canvasGeometry.ts— grid math, subnet sizing, point-in-subnet hit-testing, absolute coordinates, cell snapping/collision search (was duplicated inline ~6×).utils/securityRules.ts— default deny/allow rules, connection→rule creation, edge-id parsing, rule removal, andbuildFirewallEdges(the rules→edges projection).utils/networkConfigOps.ts—autoGrowContainers, IP allocation,assignNodeToSubnet(dedupes the drop and drag-reparent paths), delete cascade, subnet creation (CIDR derived from the VPC CIDR).Extracted hooks
hooks/useNetworkConfig.ts— config state, backend fetch with localStorage fallback, the save path (applies the server's corrected config), and the architecture-audit toasts.hooks/useCanvasDragDrop.ts— all React Flow drag/drop/delete handlers, now thin glue over the pure modules.Extracted components
components/CanvasModals.tsx+components/CreateNodeModal.tsx— the 13 modal blocks relocated verbatim; the nested title/placeholder/prefix ternaries replaced by a per-type copy record.Other changes
shared/types/network.ts;architectureValidator,VpcModal,SecurityGroupsModaland CanvasPage now share them instead of duplicating.inspecting*modal states consolidated into oneInspectorStateunion (they were mutually exclusive).Test coverage
This closes the jsdom coverage gaps documented in
CanvasPage.test.tsx: drag/reparent geometry,onConnectrule creation and edge derivation are now unit-tested directly (57 new tests). Existing tests pass without assertion changes.Test plan
npm test(frontend) — 168 passed (111 before)npm run build+npm run lint(frontend) — cleannpm test+npm run build(backend, untouched) — 55 passed