Move profile conflict notice to its own component

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue

@@ -37,6 +37,7 @@ import {
   SCANNER_PROFILES_QUERY,
   SITE_PROFILES_QUERY,
 } from '../settings';
+import ProfileConflictAlert from './profile_selector/profile_conflict_alert.vue';
 import ScannerProfileSelector from './profile_selector/scanner_profile_selector.vue';
 import SiteProfileSelector from './profile_selector/site_profile_selector.vue';
 import ScanSchedule from './scan_schedule.vue';
@@ -69,6 +70,7 @@ export default {
   saveScanBtnId: 'scan-save-button',
   components: {
     RefSelector,
+    ProfileConflictAlert,
     ScannerProfileSelector,
     SiteProfileSelector,
     ScanSchedule,
@@ -102,7 +104,7 @@ export default {
       SITE_PROFILES_QUERY,
     ),
   },
-  inject: ['projectPath', 'helpPagePath', 'dastSiteValidationDocsPath', 'profilesLibraryPath'],
+  inject: ['projectPath', 'helpPagePath', 'profilesLibraryPath'],
   props: {
     defaultBranch: {
       type: String,
@@ -454,25 +456,10 @@ export default {
 
       <scan-schedule v-if="glFeatures.dastOnDemandScansScheduler" v-model="profileSchedule" />
 
-      <gl-alert
+      <profile-conflict-alert
         v-if="hasProfilesConflict"
-        :title="s__('OnDemandScans|You cannot run an active scan against an unvalidated site.')"
-        :dismissible="false"
-        variant="danger"
         data-testid="on-demand-scans-profiles-conflict-alert"
-      >
-        <gl-sprintf
-          :message="
-            s__(
-              'OnDemandScans|You can either choose a passive scan or validate the target site in your chosen site profile. %{docsLinkStart}Learn more about site validation.%{docsLinkEnd}',
-            )
-          "
-        >
-          <template #docsLink="{ content }">
-            <gl-link :href="dastSiteValidationDocsPath">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </gl-alert>
+      />
 
       <div class="gl-mt-6 gl-pt-6">
         <gl-button

ee/app/assets/javascripts/on_demand_scans/components/profile_selector/dast_profiles_selector.vue

 <script>
-import { GlCard, GlSkeletonLoader, GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlCard, GlSkeletonLoader } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { SCAN_TYPE } from 'ee/security_configuration/dast_profiles/dast_scanner_profiles/constants';
 import { DAST_SITE_VALIDATION_STATUS } from 'ee/security_configuration/dast_site_validation/constants';
 import { TYPE_SCANNER_PROFILE, TYPE_SITE_PROFILE } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import { queryToObject } from '~/lib/utils/url_utility';
 import { ERROR_MESSAGES, SCANNER_PROFILES_QUERY, SITE_PROFILES_QUERY } from '../../settings';
+import ProfileConflictAlert from './profile_conflict_alert.vue';
 import ScannerProfileSelector from './scanner_profile_selector.vue';
 import SiteProfileSelector from './site_profile_selector.vue';
 
@@ -36,11 +36,9 @@ export default {
   components: {
     GlCard,
     GlSkeletonLoader,
-    GlAlert,
-    GlSprintf,
+    ProfileConflictAlert,
     ScannerProfileSelector,
     SiteProfileSelector,
-    GlLink,
   },
   inject: ['fullPath'],
   apollo: {
@@ -63,9 +61,6 @@ export default {
       selectedSiteProfileId: null,
       errorType: null,
       errors: [],
-      dastSiteValidationDocsPath: helpPagePath('user/application_security/dast/index', {
-        anchor: 'site-profile-validation',
-      }),
     };
   },
   computed: {
@@ -158,26 +153,11 @@ export default {
         :has-conflict="hasProfilesConflict"
       />
 
-      <gl-alert
+      <profile-conflict-alert
         v-if="hasProfilesConflict"
-        :title="s__('DastProfiles|You cannot run an active scan against an unvalidated site.')"
         class="gl-mb-5"
-        :dismissible="false"
-        variant="danger"
         data-testid="dast-profiles-conflict-alert"
-      >
-        <gl-sprintf
-          :message="
-            s__(
-              'DastProfiles|You can either choose a passive scan or validate the target site in your chosen site profile. %{docsLinkStart}Learn more about site validation.%{docsLinkEnd}',
-            )
-          "
-        >
-          <template #docsLink="{ content }">
-            <gl-link :href="dastSiteValidationDocsPath">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </gl-alert>
+      />
     </template>
   </div>
 </template>

ee/app/assets/javascripts/on_demand_scans/components/profile_selector/profile_conflict_alert.vue

+<script>
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+  },
+  dastSiteValidationDocsPath: helpPagePath('user/application_security/dast/index', {
+    anchor: 'site-profile-validation',
+  }),
+};
+</script>
+
+<template>
+  <gl-alert
+    :title="s__('DastProfiles|You cannot run an active scan against an unvalidated site.')"
+    :dismissible="false"
+    variant="danger"
+  >
+    <gl-sprintf
+      :message="
+        s__(
+          'DastProfiles|You can either choose a passive scan or validate the target site in your chosen site profile. %{docsLinkStart}Learn more about site validation.%{docsLinkEnd}',
+        )
+      "
+    >
+      <template #docsLink="{ content }">
+        <gl-link :href="dastSiteValidationDocsPath">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>

ee/app/assets/javascripts/on_demand_scans/index.js

@@ -9,7 +9,6 @@ export default () => {
   }
 
   const {
-    dastSiteValidationDocsPath,
     projectPath,
     defaultBranch,
     profilesLibraryPath,
@@ -33,7 +32,6 @@ export default () => {
       siteProfilesLibraryPath,
       newScannerProfilePath,
       newSiteProfilePath,
-      dastSiteValidationDocsPath,
       timezones,
     },
     render(h) {

ee/app/helpers/projects/on_demand_scans_helper.rb

@@ -4,7 +4,6 @@ module Projects::OnDemandScansHelper
   def on_demand_scans_data(project)
     {
       'help-page-path' => help_page_path('user/application_security/dast/index', anchor: 'on-demand-scans'),
-      'dast-site-validation-docs-path' => help_page_path('user/application_security/dast/index', anchor: 'dast-site-validation'),
       'empty-state-svg-path' => image_path('illustrations/empty-state/ondemand-scan-empty.svg'),
       'default-branch' => project.default_branch,
       'project-path' => project.path_with_namespace,

ee/spec/helpers/projects/on_demand_scans_helper_spec.rb

@@ -9,7 +9,6 @@ RSpec.describe Projects::OnDemandScansHelper do
     it 'returns proper data' do
       expect(helper.on_demand_scans_data(project)).to match(
         'help-page-path' => help_page_path('user/application_security/dast/index', anchor: 'on-demand-scans'),
-        'dast-site-validation-docs-path' => help_page_path('user/application_security/dast/index', anchor: 'dast-site-validation'),
         'empty-state-svg-path' => match_asset_path('/assets/illustrations/empty-state/ondemand-scan-empty.svg'),
         'default-branch' => project.default_branch,
         'project-path' => project.path_with_namespace,