DAST Site validation - Hook up Profile Validation - Frontend

• parent issue: #233020 (closed)

Summary

This issue is for adding the validation behavior to the validation component created in #238577 (closed)

Design

• Site Validation design issue
• Creation site profile flow:
  • Figma file

Implementation Plan

• Load the form
  • Trigger the validation query if in edit mode so that we can properly update the validation section
• Type in URL
  • The toggle becomes enabled (in off position)
• Switch the toggle to the on position
  • Disable the Target URL input
  • Trigger the validation query (only returns the validation status)
    • Put the section in a loading state (loading toggle)
    • If the site is valid, then we don’t show the validation section, just confirm that the site is valid already
  • If it’s not, trigger the token mutation to create a token
  • Put the section in a loading state (loading toggle)
  • Population section according the token we fetched
  • Fill in the section, click on validate
    • Triggers the validation mutation once, payload contains the token ID
    • Start polling the validation query until the site is validated.
    • Once the validation is done, collapse the validation section and show the success message.
• To re-enable the Target URL input, users has to disable validation.