Draft: Sync security inventory filters with URL params

What does this MR do and why?

Sync security inventory filters with URL params

Thick arrows are the read path, plain arrows are the write path, dotted is the first-page wait.

flowchart TD
    url(["URL query string<br/>window.location.search"])
    table["Group and project rows"]

    subgraph bar["inventory_dashboard_filtered_search_bar.vue"]
        chips["Filter bar chips<br/>queryParamsToTokens"]
        submit["onFilter<br/>tokensToQueryParams"]
    end

    subgraph card["tool_coverage_card.vue"]
        selected["selection prop"]
        rows["Click a legend row or chart slice<br/>toggleStatus"]
        picker["Pick a scanner from the dropdown<br/>selectScanner, status set to null"]
    end

    subgraph dash["inventory_dashboard.vue"]
        params["queryParams<br/>the in-memory mirror of the URL"]
        selection["cardSelection<br/>cardSelectionFromParams"]
        coverage["selectToolCoverage<br/>paramsFromCardSelection"]
        writer["onUrlParamsChanged<br/>the only path that writes the URL"]
        gqlFilters["filters<br/>GraphQL filter variables"]
        gate["waitForInitializedFilters<br/>10 second timeout"]
    end

    url ==>|"page load, then every popstate"| params
    params ==>|"url-query prop"| chips
    params ==>|"re-read on every change"| selection
    selection ==> selected
    selected ==> rows
    selected ==> picker
    chips ==>|"filters-initialized, once categories load"| gqlFilters
    gqlFilters ==> table

    chips -.->|"resolves the wait"| gate
    gate -.->|"the first page waits, then errors"| table

    chips -->|"edit or submit a chip"| submit
    submit -->|"url-params-changed"| writer
    rows -->|"update:selection"| coverage
    picker -->|"update:selection"| coverage
    coverage -->|"merges in the card params, cleared or set"| writer
    writer -->|"assigns queryParams"| params
    writer -->|"setUrlParams, then updateHistory"| url

References

Screenshots or screen recordings

Before After

How to set up and validate locally

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #580024 (closed)

Edited by Miranda Fluharty

Merge request reports

Loading
Loading