Skip to content

[CHAIN] feat(ui): add attack paths node visual mapper#11013

Merged
Alan-TheGentleman merged 6 commits intoPROWLER-1273/react-flow-migrationfrom
PROWLER-1273/attack-path-node-visuals
May 7, 2026
Merged

[CHAIN] feat(ui): add attack paths node visual mapper#11013
Alan-TheGentleman merged 6 commits intoPROWLER-1273/react-flow-migrationfrom
PROWLER-1273/attack-path-node-visuals

Conversation

@Alan-TheGentleman
Copy link
Copy Markdown
Contributor

@Alan-TheGentleman Alan-TheGentleman commented May 5, 2026

🔗 Part of Chained PRs

Field Value
Feature Branch PROWLER-1273/react-flow-migration
Main PR #10686
Chain Position 6 of 11
Depends on #11010 (auto-fit + minimap polish)

Chain Overview

#10701 → #10705 → #10756 → #10800 → #10970 → #11010 → 📍 #11013 → #11014 → #11015 → #11016 → #11017 → #11020 → #10686

Context

This continues the Attack Paths React Flow chain by introducing a single semantic resolver for graph node visuals. The goal is to stop scattering label/icon/category decisions across components before rendering richer node icons.


Description

Changes:

  • Add resolveNodeVisual() to centralize node category, display name, description, and icon resolution.
  • Map provider roots, common AWS resources, identity/policy nodes, findings, internet, secrets, and fallback nodes.
  • Add focused unit coverage for provider badges, AWS resources, finding severity icons, identity/policy mappings, and fallback behavior.

Steps to review

  1. Review _lib/node-visuals.ts as the visual contract for graph nodes.
  2. Check that unknown node labels still fall back safely.
  3. Run pnpm exec vitest run --project unit "app/(prowler)/attack-paths/(workflow)/query-builder/_lib/node-visuals.test.ts" from ui/.

Checklist

Community Checklist
  • This feature/issue is listed in here or roadmap.prowler.com
  • Is it assigned to me, if not, request it via the issue/feature in here or Prowler Community Slack

UI

  • All issue/task requirements work as expected on the UI
  • Screenshots/Video of the functionality flow (if applicable) - Mobile (X < 640px)
  • Screenshots/Video of the functionality flow (if applicable) - Table (640px > X < 1024px)
  • Screenshots/Video of the functionality flow (if applicable) - Desktop (X > 1024px)
  • Ensure new entries are added to CHANGELOG.md, if applicable.

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pablo F.G and others added 5 commits May 5, 2026 16:05
The Attack Path graph now re-fits its viewport when the user enters
the filtered view (click on a finding) or returns to the full graph
("Back to Full View"), so the focused subgraph and the restored
full graph are always centered instead of leaving the viewport
pointing at the previous coordinates. Resource expansion no longer
re-fits — the initial fit already includes hidden findings, so newly
revealed nodes sit inside the framing the user already has.

The minimap viewport indicator (mask cut-out) is darkened and given
a thicker border to stand out against the dark theme, where it was
previously hard to see.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ings

Recover the expand-time auto-fit lost while smoothing the filter
fix. Hidden findings are not measured by React Flow on initial
render, so `fitViewOptions.includeHiddenNodes` cannot extend the
initial viewport to cover them — clicking a resource that has its
findings laid out beyond the framed area would leave the user with
empty space and no way to discover the newly revealed nodes.

The expand-fit only fires for resources that just transitioned from
collapsed to expanded, and only when at least one of the connected
findings sits entirely past the current viewport (full bounding box
beyond the edge). Partially clipped edge nodes are left alone so
the framing the user already has is preserved when nothing has
actually moved off-screen.

Auto-fits now use asymmetric padding (extra room on the right and
bottom) to keep the minimap clear after a fit. Without it, fitted
nodes could land underneath the bottom-right minimap and become
unclickable.

The expand-without-re-fit test was a lock-in for the previous
behaviour and is replaced with one asserting the new behaviour:
expanding resources whose findings sit off-screen re-fits the
viewport.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Restore supported graph scroll zoom behavior
- Add node action selector for ambiguous resource clicks
- Open finding and node details in existing drawers
- Cover resource actions with browser tests
- Reuse shared measured-fit scheduling for graph viewport updates
- Consolidate node action dialog state
- Tighten browser harness dialog detection
- Add typed resolver for graph node visual metadata
- Reuse existing service icons for known resource labels
- Cover exact, alias, and fallback mappings with tests
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add a test like this to cover all icons

 describe("known node mappings", () => {
    it.each([
      ["AWSAccount",     NODE_CATEGORY.ACCOUNT,  "AWS Account",      AWSAccountIcon],
      ["S3Bucket",       NODE_CATEGORY.STORAGE,  "S3 Bucket",        AmazonS3Icon],
      ["S3",             NODE_CATEGORY.STORAGE,  "S3",               AmazonS3Icon],
      ["VPC",            NODE_CATEGORY.NETWORK,  "VPC",              AmazonVPCIcon],
      ["Subnet",         NODE_CATEGORY.NETWORK,  "Subnet",           Network],
      ["SecurityGroup",  NODE_CATEGORY.NETWORK,  "Security Group",   Network],
      ["InternetGateway",NODE_CATEGORY.NETWORK,  "Internet Gateway", Globe2],
      ["DefaultGateway", NODE_CATEGORY.NETWORK,  "Default Gateway",  Globe2],
      ["EC2Instance",    NODE_CATEGORY.COMPUTE,  "EC2 Instance",     AmazonEC2Icon],
      ["VirtualMachine", NODE_CATEGORY.COMPUTE,  "Virtual Machine",  AmazonEC2Icon],
      ["Compute",        NODE_CATEGORY.COMPUTE,  "Compute",          Server],
      ["NIC",            NODE_CATEGORY.COMPUTE,  "NIC",              Server],
      ["IAMUser",        NODE_CATEGORY.IDENTITY, "IAM User",         AWSIAMIcon],
      ["IAMRole",        NODE_CATEGORY.IDENTITY, "IAM Role",         AWSIAMIcon],
      ["ServiceAccount", NODE_CATEGORY.IDENTITY, "Service Account",  UserRound],
      ["AccessKey",      NODE_CATEGORY.SECRET,   "Access Key",       KeyRound],
      ["Secret",         NODE_CATEGORY.SECRET,   "Secret",           KeyRound],
    ] as const)("maps %s to %s with %s", (label, category, description, Icon) => {
      const visual = resolveNodeVisual(buildNode([label]));
      expect(visual).toMatchObject({ category, description, fallbackUsed: false });
      expect(visual.Icon).toBe(Icon);
    });
  });
`

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in 6c023affa and propagated through the chained branches up to #11020. I adapted the expected icons to the mappings that exist in each chain slice so the test matches the actual implementation at that point in the stack.

Base automatically changed from PROWLER-1273/fix-graph-viewport-and-minimap to PROWLER-1273/react-flow-migration May 7, 2026 15:19
@Alan-TheGentleman Alan-TheGentleman merged commit 49aa3c1 into PROWLER-1273/react-flow-migration May 7, 2026
3 checks passed
@Alan-TheGentleman Alan-TheGentleman deleted the PROWLER-1273/attack-path-node-visuals branch May 7, 2026 15:20
Alan-TheGentleman added a commit that referenced this pull request May 8, 2026
Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants