#ParameterPath

Shows where in a request a parameter lives — the method, then each container down to the parameter itself, with the last segment highlighted and carrying a bolt when attack marks it as the one that was hit. Copying a path yields a FilterInput query rather than the text on screen — method = "POST" AND parameter = "JSON.nginx_config" — so a finding can be pasted straight into a search.

Source · Storybook

#Usage

import { ParameterPath } from '@wallarm-org/design-system/ParameterPath';

#Examples

#No encoding

With no encoding the trailing chip simply goes, and the path ends on the parameter.

#Path index bola

A numeric segment: path › 2 is the second element of the URL path, which is how a BOLA finding points at a resource id rather than a named field.

#Header

The container need not be a body — here the parameter is a request header, and the first segment is what says so.

#Cookie

The same shape for a cookie: first segment names where the value came from, last names the value.

#Deep nested truncated

Seven segments in 280px: the middle collapses to an ellipsis and the full path moves into a tooltip. The truncation is measured, not a CSS clip, so it reacts to the real width.

#No method

method is optional — leave it out where the row around the path already says which request this belongs to.

#Expandable truncated

expandable makes a truncated path clickable and focusable: it opens inline to show every segment, and the tooltip stands down while it is open.

#Expandable fits inline

The same path given room to fit. expandable leaves no affordance behind when there is nothing to expand — no ellipsis, no cursor, no focus stop.

#Playground

The props on controls, for trying a segment list or a method the stories above skip.

#Gallery

The shapes together, as they would read down a column of findings — with a narrow cell at the bottom to show what happens when the column is the constraint.

#Props