DAST On-Demand Scan - View Scans [parent issue]

Problem to solve

This is the View Scans Scan part of #216876 (closed).

Proposal

After the user initiates a scan as part of #218465 (closed), the user should be directed to the following screens. These screens will show the user their specific pipelines/scans.

Further details

	Pipeline list page	Pipeline list page	Pipeline detail page-scan finished
MVC
Newest design

• Figma: https://www.figma.com/proto/7CaJqOTOpPEOzkYkoU5bs5/DAST-Ondemand-Profile?node-id=188%3A7612&scaling=min-zoom

Implementation plan

backend

• Provide a GraphQL query for retrieving the list of on-demand scans for a given project.
  • If there are no pipelines yet, the response should make it obvious.
  • If there are pipelines, each item in the response should include:
    • The pipelines status (pause, pending, running, succeeded, failed)
    • The pipeline ID
    • The target site
    • A link to the pipeline's details page
  • The results should be paginated

question: should there be a way to notify the app that there aren't any pipelines before it loads, by passing it a prop from the HAML? This would let us show the initial view faster, and we could abort the initial GraphQL request.

frontend

Issue Breakdown

• Add scans listing to OnDemandScansApp
  • When it loads, the OnDemandScansApp requests the pipelines list.
    • If there aren't any pipelines, show the empty state.
    • If there are pipelines, show the list and start polling to live-update the status.
      • Reuse an existing component to display pipelines' statuses (either ci_icon or ci_badge_link). Make sure to update the code comments in the reused component to indicate where it is used.
      • The Status badge and the Pipeline # link to the pipeline's overview.
  • ... TODO: Add implementation details / possible sub-issues
• Pipelines View
  • TODO: Add implementation details / possible sub-issues

Questions

• Pagination for scans listing: same as for the profile-library's MVC (load more button) ?

Issue	Description	Type
#338645 (closed)	DAST On-Demand Scan - View Scans	backend
TBC	DAST On-Demand Scan - View Scans	frontend
TBC	Add a new feature flag	feature flag
TBC	Update documentation	documentation