DAST Site validation - Hook up Profile Validation - Frontend

• Related issue: #238578 (closed)

What does this MR do?

This hooks up the frontend validation components to actual API calls for validating DAST sites.

How to test this?

1. Enable the feature flag.

echo "Feature.enable(:security_on_demand_scans_site_validation)" | rails c

2. Install and setup graphql-vue-apollo-playground locally. Checkout the mock-dast-site-profiles branch and run the mock server.

3. Use the local mock server in the Apollo provider.

diff --git a/ee/app/assets/javascripts/dast_site_profiles_form/graphql/provider.js b/ee/app/assets/javascripts/dast_site_profiles_form/graphql/provider.js
index ef96b443da8..993a7cefb5c 100644
--- a/ee/app/assets/javascripts/dast_site_profiles_form/graphql/provider.js
+++ b/ee/app/assets/javascripts/dast_site_profiles_form/graphql/provider.js
@@ -5,5 +5,10 @@ import createDefaultClient from '~/lib/graphql';
 Vue.use(VueApollo);
 
 export default new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(
+    {},
+    {
+      baseUrl: 'http://localhost:4000',
+    },
+  ),
 });

4. Navigate to the DAST Site profile form in your GDK: /:namespace/:project/-/on_demand_scans/profiles/dast_site_profiles/new

Screenshots

Error when validation status can not be retrieved

Error when validation token can not be created

Does this MR meet the acceptance criteria?

Conformity

• [-] Changelog entry (not needed as this is behind a feature flag)
• [-] Documentation (if required)
• Code review guidelines
• [-] Merge request performance guidelines
• Style guides
• [-] Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• [-] Tested in all supported browsers
• [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done