Skip to content

[CHAIN] fix(ui): improve attack paths graph layout highlights#11017

Merged
Alan-TheGentleman merged 1 commit intoPROWLER-1273/react-flow-migrationfrom
PROWLER-1273/attack-path-layout-highlights
May 8, 2026
Merged

[CHAIN] fix(ui): improve attack paths graph layout highlights#11017
Alan-TheGentleman merged 1 commit intoPROWLER-1273/react-flow-migrationfrom
PROWLER-1273/attack-path-layout-highlights

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
Sub-task PROWLER-1273
Chain Position 10 of 11
Depends on #11016 (PR9 — Node icon coverage) 🟡 Open

Chain Overview

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

Context

Part of the Attack Paths React Flow migration chain tracked by #10686. This slice builds on the node icon coverage work and focuses on graph layout direction, edge handles, and highlighted-path behavior.


Description

Changes:

  • Switches Dagre layout to horizontal left-to-right flow for better path readability.
  • Aligns React Flow edge metadata and hidden handles with the horizontal layout.
  • Uses Prowler green for selected and highlighted path edges.
  • Adds selected-node path highlighting in addition to hover highlighting.
  • Updates legend copy and tests for highlighted paths.
  • Adds MSW support for finding detail requests used by graph interactions.

Steps to review

  1. Review this PR after [CHAIN] feat(ui): expand attack paths node legend coverage #11016.
  2. Open Attack Paths and execute a graph query.
  3. Verify the graph lays out left-to-right and edges connect from right to left.
  4. Hover/select graph nodes and verify connected paths highlight in Prowler green.
  5. Verify finding detail requests still work from graph interactions.
  6. Run the focused Attack Paths browser suite if validating locally.

Validated locally during implementation:

pnpm test:browser -- --run attack-paths-page

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) - Tablet (640px > X < 1024px)
  • Screenshots/Video of the functionality flow (if applicable) - Desktop (X > 1024px)
  • Ensure new entries are added to ui/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.

@Alan-TheGentleman Alan-TheGentleman requested a review from a team as a code owner May 5, 2026 21:10
@Alan-TheGentleman Alan-TheGentleman changed the title fix(ui): improve attack paths graph layout highlights [CHAIN] fix(ui): improve attack paths graph layout highlights May 6, 2026
),

http.get<{ findingId: string }>(`${API}/findings/:findingId`, ({ params }) =>
HttpResponse.json(toFindingApiResponse(fx, params.findingId)),
Copy link
Copy Markdown
Contributor

@pfe-nazaries pfe-nazaries May 8, 2026

Choose a reason for hiding this comment

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

Type the response to have assistance from the compiler in case it changes and we dont update it here

@pfe-nazaries pfe-nazaries self-requested a review May 8, 2026 07:46

import { ResourceNode } from "./resource-node";

const hiddenHandlesMock = vi.hoisted(() => vi.fn(() => null));
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.

This mock should be cleared or remocked between each test

await graph.executeQuery();
await graph.waitForLayoutStable(3);

await graph.clickFirstResourceNodeWithoutFindings();
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.

Add waitForTransistion call similar to the other test

@Alan-TheGentleman Alan-TheGentleman force-pushed the PROWLER-1273/attack-path-node-icon-coverage branch from c309218 to bc212d5 Compare May 8, 2026 12:07
@Alan-TheGentleman Alan-TheGentleman force-pushed the PROWLER-1273/attack-path-layout-highlights branch from d8bd77c to 544b9e4 Compare May 8, 2026 12:21
@Alan-TheGentleman Alan-TheGentleman force-pushed the PROWLER-1273/attack-path-node-icon-coverage branch from bc212d5 to bd8880b Compare May 8, 2026 12:51
Base automatically changed from PROWLER-1273/attack-path-node-icon-coverage to PROWLER-1273/react-flow-migration May 8, 2026 12:52
@Alan-TheGentleman Alan-TheGentleman force-pushed the PROWLER-1273/attack-path-layout-highlights branch from 544b9e4 to a505e10 Compare May 8, 2026 12:56
@Alan-TheGentleman Alan-TheGentleman merged commit 347e933 into PROWLER-1273/react-flow-migration May 8, 2026
3 checks passed
@Alan-TheGentleman Alan-TheGentleman deleted the PROWLER-1273/attack-path-layout-highlights branch May 8, 2026 12:57
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