DAST On-demand scans MVC - Initiate Scan - Create form - Frontend

Summary

This issue is for creating the form to be used for triggering asynchronous scans from the Asynchronous Scans page, as described in #218465 (closed).

The form will initially contain a single editable input to specify a target URL for the scan. Other input are locked to default values and disabled.

Designs

• Design issue: #216876 (closed)
• Figma file: https://www.figma.com/file/fCpKyeZo6HiuNyyZbyeOxH/DAST-Ondemand-scan?node-id=141%3A22

Pristine form

At rest	Scan mode tooltip	Attached branch tooltip	Target URL tooltip

Filled form

With invalid URL	With valid URL

Implementation plan

• Update ee/app/helpers/projects/on_demand_scans_helper.rb to pass the following data to the Vue app:
  • Project's full path: @project.path_with_namespace
  • Default branch name: @project.default_branch
• The GlEmptyState's primary button opens up the New Passive DAST scan form
• The form contains an URL field (targetUrl) with the most basic validation possible (non-empty, input start with https?://)
• Other fields are only presentational and should be disabled
  • The default branch dropdown should use the value passed by the backend
  • The scan mode dropdown's value can be hardcoded in the frontend
• When targetUrl is valid, the Run this scan submit button becomes enabled
• Submitting the form triggers a GraphQL mutation to initiate a new scan.
  • If the mutation fails, the form should be re-enabled and an alert should be displayed
  • If if succeeds, the user should be redirected to the URL provided in the response (pipelineUrl)

GraphQL mutation:

mutation {
  runDastScan(input: {projectPath: ID!, targetUrl: String!, branch: String!, scanType: DastScanTypeEnum!}) {
    pipelineUrl
  }
}
# where DastScanTypeEnum has a single value: PASSIVE