Basic compliance Framework Report

Initial work to build out the new compliance Framework Report.

This first iteration will introduce tabs for accessing the new report, and show a basic paginated list of projects for the current group. Each project will show which compliance framework is applied (if any).

Designs -> #385303 (closed)

Implementation plan

  • add a feature flag for this new report. When enabled, it will show the new tabs:

  • add new tabs to compliance report page. Similar implementation to the Vulnerability Report tabs

    • new top level component to house both reports
    • create compliance report tabs component
    • use <gl-tabs> component internally
    • persist tab selection as a URL hash
    • render existing component if first tab selected, otherwise render new framework_report component (use async import)

  • create new framework_report vue component. Component will have a similar implementation to the current Vulnerability report

  • fetch first page of results via Groups -> Projects GraphQL query.

    Example from current CS tool api request which could be converted to query: /api/v4/groups/1234/projects?id=4567&include_ancestor_groups=false&include_subgroups=true&order_by=created_at&owned=false&page=2&per_page=20&simple=false&sort=desc&starred=false&with_custom_attributes=false&with_issues_enabled=false&with_merge_requests_enabled=false&with_security_reports=false&with_shared=false

  • use <gl-table> to display results, and <gl-label> to display framework for each row

  • determine if there is more than 1 page of results, and if necessary show pagination via <gl-pagination>. Allow selecting page size (default 20, max 100)

  • project name will link through to project

  • add empty state, loading state, error state for various network responses

  • tests

  • documentation https://docs.gitlab.com/ee/user/compliance/compliance_report/

Edited by Elwyn Benson