Create DastSiteValidationModal component (!47443) · Merge requests · GitLab.org / GitLab

Paul Gascou-Vaillancourt requested to merge 280561-create-dast-site-validation-modal into master Nov 11, 2020

What does this MR do?

This converts the DastSiteValidation component into a modal-based component, DastSiteValidationModal.

Compare to the previous component, this new component is now responsible for creating a validation token, while it had to be provided via props previously. The new component also doesn't deal with validation states: while it can start a site's validation process, it doesn't need to know about said site's validation state. Some async logic has therefore been moved around to reflect those new responsibilities.

The reason for moving to a modal is that DAST site validation is being separated from the DAST site profile form. Going forward, validating a DAST site will be done from the DAST profiles page, and eventually from the on-demand DAST scans form as well.

How to test this?

Make sure to enable to the :security_on_demand_scans_site_validation feature flag:

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

Since the modal isn't actually used anywhere at the moment, you'll need to force it to show up with some fake data. Do this by applying the following patch:

diff --git a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue
index 386f25aa342..c6655be3481 100644
--- a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue
+++ b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlTab, GlTabs } from '@gitlab/ui';
+import DastSiteValidationModal from 'ee/security_configuration/dast_site_validation/components/dast_site_validation_modal.vue';
 import { camelCase, kebabCase } from 'lodash';
 import * as Sentry from '~/sentry/wrapper';
 import { s__ } from '~/locale';
@@ -7,9 +8,11 @@ import { getLocationHash } from '~/lib/utils/url_utility';
 import ProfilesList from './dast_profiles_list.vue';
 import * as cacheUtils from '../graphql/cache_utils';
 import { getProfileSettings } from '../settings/profiles';
+import { DAST_SITE_VALIDATION_MODAL_ID } from '../../dast_site_validation/constants';
 
 export default {
   components: {
+    DastSiteValidationModal,
     GlDropdown,
     GlDropdownItem,
     GlTab,
@@ -61,6 +64,9 @@ export default {
   created() {
     this.addSmartQueriesForEnabledProfileTypes();
   },
+  mounted() {
+    this.$root.$emit('bv::show::modal', DAST_SITE_VALIDATION_MODAL_ID);
+  },
   methods: {
     addSmartQueriesForEnabledProfileTypes() {
       Object.values(this.profileSettings).forEach(({ profileType, graphQL: { query } }) => {
@@ -266,5 +272,7 @@ export default {
         />
       </gl-tab>
     </gl-tabs>
+
+    <dast-site-validation-modal :full-path="projectFullPath" target-url="http://gitlab.com" />
   </section>
 </template>