DAST Scanner Profiles implementation - Form MVC - Basic form - Frontend

• Main issue: #222767 (closed)
• Parent issue: #235405 (closed)
• backend counterpart: #235406 (closed)

Summary

As part of this issue, we'll create the basic form for creating DAST Scanner Profiles.

Implementation plan

Production code

• Update DastScannerProfileForm to render the actual New Scanner Profile form with the following fields:
  • Profile name: required (uniqueness will be validated in the backend).
  • Spider Timeout: number, max 2880.
  • Target Timeout: number, max 3600.
  • Save profile
    • Disabled as long as the form is invalid (profile name empty).
• Clicking on Save profile triggers a GraphQL mutation.
  • If the request fails, show the errors in a GlAlert.
  • On success, redirect back to the DAST profiles library page.
• When clicking on the Cancel button:
  • If the form has been touched (current values differ from initial ones), ask the user to confirm that they want to discard their changes
  • Redirect back to DAST profiles library page.

Specs

• ee/spec/frontend/dast_scanner_profiles_form/components/dast_scanner_profiles_form_spec.js
  • Form renders properly.
  • Submit button is disabled as long as the form is invalid.
  • Spider Timeout doesn't accept a number great than 2880.
  • Target Timeout doesn't accept a number great than 3600.
  • Handles submission success properly
    • Loading state.
    • GraphQL mutation.
    • Redirection.
  • Handles submission errors properly
    • Loading state.
    • Generic error.
    • Erros-as-data.
  • Cancellation
    • Form untouched.
      • Redirection.
    • Form touched.
      • Confirmation
      • Redirection.

• ee/spec/views/projects/dast_scanner_profiles/new.html.haml_spec.rb
  • View renders the Vue app's mount point.
  • View passes props down to the Vue app.

Related resources

• Prior work: !36355 (merged)