Merge branch '235610-ondemand-scans-use-existing-scanner-profiles' into 'master'

DAST On-Demand Scans - Use existing scanner profiles for scans implementation - Frontend

See merge request gitlab-org/gitlab!40414

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

@@ -25,14 +25,6 @@ export default {
       type: String,
       required: true,
     },
-    profilesLibraryPath: {
-      type: String,
-      required: true,
-    },
-    newSiteProfilePath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -49,8 +41,6 @@ export default {
         :help-page-path="helpPagePath"
         :project-path="projectPath"
         :default-branch="defaultBranch"
-        :profiles-library-path="profilesLibraryPath"
-        :new-site-profile-path="newSiteProfilePath"
         @cancel="showForm = false"
       />
     </template>

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

@@ -14,17 +14,22 @@ import {
   GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import dastScannerProfilesQuery from 'ee/dast_profiles/graphql/dast_scanner_profiles.query.graphql';
 import dastSiteProfilesQuery from 'ee/dast_profiles/graphql/dast_site_profiles.query.graphql';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__ } from '~/locale';
 import { redirectTo } from '~/lib/utils/url_utility';
 import dastOnDemandScanCreateMutation from '../graphql/dast_on_demand_scan_create.mutation.graphql';
-import { SCAN_TYPES } from '../constants';
 
 const ERROR_RUN_SCAN = 'ERROR_RUN_SCAN';
+const ERROR_FETCH_SCANNER_PROFILES = 'ERROR_FETCH_SCANNER_PROFILES';
 const ERROR_FETCH_SITE_PROFILES = 'ERROR_FETCH_SITE_PROFILES';
 
 const ERROR_MESSAGES = {
   [ERROR_RUN_SCAN]: s__('OnDemandScans|Could not run the scan. Please try again.'),
+  [ERROR_FETCH_SCANNER_PROFILES]: s__(
+    'OnDemandScans|Could not fetch scanner profiles. Please refresh the page, or try again later.',
+  ),
   [ERROR_FETCH_SITE_PROFILES]: s__(
     'OnDemandScans|Could not fetch site profiles. Please refresh the page, or try again later.',
   ),
@@ -53,7 +58,27 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   apollo: {
+    scannerProfiles: {
+      query: dastScannerProfilesQuery,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+        };
+      },
+      update(data) {
+        const scannerProfilesEdges = data?.project?.scannerProfiles?.edges ?? [];
+        return scannerProfilesEdges.map(({ node }) => node);
+      },
+      error(e) {
+        Sentry.captureException(e);
+        this.showErrors(ERROR_FETCH_SCANNER_PROFILES);
+      },
+      skip() {
+        return !this.glFeatures.securityOnDemandScansScannerProfiles;
+      },
+    },
     siteProfiles: {
       query: dastSiteProfilesQuery,
       variables() {
@@ -84,21 +109,29 @@ export default {
       type: String,
       required: true,
     },
-    profilesLibraryPath: {
-      type: String,
-      required: true,
+  },
+  inject: {
+    scannerProfilesLibraryPath: {
+      default: '',
+    },
+    siteProfilesLibraryPath: {
+      default: '',
+    },
+    newScannerProfilePath: {
+      default: '',
     },
     newSiteProfilePath: {
-      type: String,
-      required: true,
+      default: '',
     },
   },
   data() {
     return {
+      scannerProfiles: [],
       siteProfiles: [],
       form: {
-        scanType: initField(SCAN_TYPES.PASSIVE),
-        branch: initField(this.defaultBranch),
+        ...(this.glFeatures.securityOnDemandScansScannerProfiles
+          ? { dastScannerProfileId: initField(null) }
+          : {}),
         dastSiteProfileId: initField(null),
       },
       loading: false,
@@ -112,10 +145,12 @@ export default {
       return ERROR_MESSAGES[this.errorType] || null;
     },
     isLoadingProfiles() {
-      return this.$apollo.queries.siteProfiles.loading;
+      return ['scanner', 'site'].some(
+        profileType => this.$apollo.queries[`${profileType}Profiles`].loading,
+      );
     },
     failedToLoadProfiles() {
-      return [ERROR_FETCH_SITE_PROFILES].includes(this.errorType);
+      return [ERROR_FETCH_SCANNER_PROFILES, ERROR_FETCH_SITE_PROFILES].includes(this.errorType);
     },
     formData() {
       return {
@@ -132,12 +167,24 @@ export default {
     isSubmitDisabled() {
       return this.formHasErrors || this.someFieldEmpty;
     },
+    selectedScannerProfile() {
+      const selectedScannerProfile = this.form.dastScannerProfileId.value;
+      return selectedScannerProfile === null
+        ? null
+        : this.scannerProfiles.find(({ id }) => id === selectedScannerProfile);
+    },
     selectedSiteProfile() {
       const selectedSiteProfileId = this.form.dastSiteProfileId.value;
       return selectedSiteProfileId === null
         ? null
         : this.siteProfiles.find(({ id }) => id === selectedSiteProfileId);
     },
+    scannerProfileText() {
+      const { selectedScannerProfile } = this;
+      return selectedScannerProfile
+        ? selectedScannerProfile.profileName
+        : s__('OnDemandScans|Select one of the existing profiles');
+    },
     siteProfileText() {
       const { selectedSiteProfile } = this;
       return selectedSiteProfile
@@ -146,6 +193,9 @@ export default {
     },
   },
   methods: {
+    setScannerProfile({ id }) {
+      this.form.dastScannerProfileId.value = id;
+    },
     setSiteProfile({ id }) {
       this.form.dastSiteProfileId.value = id;
     },
@@ -239,9 +289,105 @@ export default {
     <template v-else-if="!failedToLoadProfiles">
       <gl-card>
         <template #header>
-          <h3 class="gl-font-lg gl-display-inline">{{ s__('OnDemandScans|Scanner settings') }}</h3>
+          <div class="row">
+            <div class="col-7">
+              <h3 class="gl-font-lg gl-display-inline">
+                {{ s__('OnDemandScans|Scanner settings') }}
+              </h3>
+            </div>
+            <div v-if="glFeatures.securityOnDemandScansScannerProfiles" class="col-5 gl-text-right">
+              <gl-button
+                :href="scannerProfiles.length ? scannerProfilesLibraryPath : null"
+                :disabled="!scannerProfiles.length"
+                variant="success"
+                category="secondary"
+                size="small"
+                data-testid="manage-scanner-profiles-button"
+              >
+                {{ s__('OnDemandScans|Manage profiles') }}
+              </gl-button>
+            </div>
+          </div>
         </template>
 
+        <template v-if="glFeatures.securityOnDemandScansScannerProfiles">
+          <gl-form-group v-if="scannerProfiles.length">
+            <template #label>
+              {{ s__('OnDemandScans|Use existing scanner profile') }}
+            </template>
+            <gl-dropdown
+              v-model="form.dastScannerProfileId.value"
+              :text="scannerProfileText"
+              class="mw-460"
+              data-testid="scanner-profiles-dropdown"
+            >
+              <gl-dropdown-item
+                v-for="scannerProfile in scannerProfiles"
+                :key="scannerProfile.id"
+                :is-checked="form.dastScannerProfileId.value === scannerProfile.id"
+                is-check-item
+                @click="setScannerProfile(scannerProfile)"
+              >
+                {{ scannerProfile.profileName }}
+              </gl-dropdown-item>
+            </gl-dropdown>
+            <template v-if="selectedScannerProfile">
+              <hr />
+              <div data-testid="scanner-profile-summary">
+                <div class="row">
+                  <div class="col-md-6">
+                    <div class="row">
+                      <div class="col-md-3">{{ s__('DastProfiles|Scan mode') }}:</div>
+                      <div class="col-md-9">
+                        <strong>{{ s__('DastProfiles|Passive') }}</strong>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-md-6">
+                    <div class="row">
+                      <div class="col-md-3">{{ s__('DastProfiles|Spider timeout') }}:</div>
+                      <div class="col-md-9">
+                        <strong>
+                          {{ n__('%d minute', '%d minutes', selectedScannerProfile.spiderTimeout) }}
+                        </strong>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-6">
+                    <div class="row">
+                      <div class="col-md-3">{{ s__('DastProfiles|Target timeout') }}:</div>
+                      <div class="col-md-9">
+                        <strong>
+                          {{ n__('%d second', '%d seconds', selectedScannerProfile.targetTimeout) }}
+                        </strong>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </gl-form-group>
+          <template v-else>
+            <p class="gl-text-gray-700">
+              {{
+                s__(
+                  'OnDemandScans|No profile yet. In order to create a new scan, you need to have at least one completed scanner profile.',
+                )
+              }}
+            </p>
+            <gl-button
+              :href="newScannerProfilePath"
+              variant="success"
+              category="secondary"
+              data-testid="create-scanner-profile-link"
+            >
+              {{ s__('OnDemandScans|Create a new scanner profile') }}
+            </gl-button>
+          </template>
+        </template>
+        <template v-else>
           <gl-form-group class="gl-mt-4">
             <template #label>
               {{ s__('OnDemandScans|Scan mode') }}
@@ -267,6 +413,7 @@ export default {
             </template>
             {{ defaultBranch }}
           </gl-form-group>
+        </template>
       </gl-card>
 
       <gl-card>
@@ -277,7 +424,7 @@ export default {
             </div>
             <div class="col-5 gl-text-right">
               <gl-button
-                :href="siteProfiles.length ? profilesLibraryPath : null"
+                :href="siteProfiles.length ? siteProfilesLibraryPath : null"
                 :disabled="!siteProfiles.length"
                 variant="success"
                 category="secondary"

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

-export const SCAN_TYPES = {
-  PASSIVE: 'PASSIVE',
-};

ee/app/assets/javascripts/on_demand_scans/graphql/dast_on_demand_scan_create.mutation.graphql

-mutation dastOnDemandScanCreate($fullPath: ID!, $dastSiteProfileId: DastSiteProfileID!) {
-  dastOnDemandScanCreate(input: { fullPath: $fullPath, dastSiteProfileId: $dastSiteProfileId }) {
+mutation dastOnDemandScanCreate(
+  $fullPath: ID!
+  $dastScannerProfileId: DastScannerProfileID
+  $dastSiteProfileId: DastSiteProfileID!
+) {
+  dastOnDemandScanCreate(
+    input: {
+      fullPath: $fullPath
+      dastScannerProfileId: $dastScannerProfileId
+      dastSiteProfileId: $dastSiteProfileId
+    }
+  ) {
     pipelineUrl
     errors
   }

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

@@ -13,13 +13,21 @@ export default () => {
     emptyStateSvgPath,
     projectPath,
     defaultBranch,
-    profilesLibraryPath,
+    scannerProfilesLibraryPath,
+    siteProfilesLibraryPath,
     newSiteProfilePath,
+    newScannerProfilePath,
   } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider,
+    provide: {
+      scannerProfilesLibraryPath,
+      siteProfilesLibraryPath,
+      newScannerProfilePath,
+      newSiteProfilePath,
+    },
     render(h) {
       return h(OnDemandScansApp, {
         props: {
@@ -27,8 +35,6 @@ export default () => {
           emptyStateSvgPath,
           projectPath,
           defaultBranch,
-          profilesLibraryPath,
-          newSiteProfilePath,
         },
       });
     },

ee/app/controllers/projects/on_demand_scans_controller.rb

@@ -4,6 +4,7 @@ module Projects
   class OnDemandScansController < Projects::ApplicationController
     before_action do
       authorize_read_on_demand_scans!
+      push_frontend_feature_flag(:security_on_demand_scans_scanner_profiles)
     end
 
     def index

ee/app/helpers/projects/on_demand_scans_helper.rb

@@ -7,7 +7,9 @@ module Projects::OnDemandScansHelper
       'empty-state-svg-path' => image_path('illustrations/empty-state/ondemand-scan-empty.svg'),
       'default-branch' => project.default_branch,
       'project-path' => project.path_with_namespace,
-      'profiles-library-path' => project_profiles_path(project),
+      'scanner-profiles-library-path' => project_profiles_path(project, anchor: 'scanner-profiles'),
+      'site-profiles-library-path' => project_profiles_path(project, anchor: 'site-profiles'),
+      'new-scanner-profile-path' => new_project_dast_scanner_profile_path(project),
       'new-site-profile-path' => new_project_dast_site_profile_path(project)
     }
   end

ee/spec/frontend/on_demand_scans/components/on_demand_scans_app_spec.js

@@ -9,7 +9,6 @@ const helpPagePath = `${TEST_HOST}/application_security/dast/index#on-demand-sca
 const projectPath = 'group/project';
 const defaultBranch = 'master';
 const emptyStateSvgPath = `${TEST_HOST}/assets/illustrations/alert-management-empty-state.svg`;
-const profilesLibraryPath = `${TEST_HOST}/${projectPath}/-/on_demand_scans/profiles`;
 const newSiteProfilePath = `${TEST_HOST}/${projectPath}/-/on_demand_scans/profiles`;
 
 describe('OnDemandScansApp', () => {
@@ -39,7 +38,6 @@ describe('OnDemandScansApp', () => {
             projectPath,
             defaultBranch,
             emptyStateSvgPath,
-            profilesLibraryPath,
             newSiteProfilePath,
           },
         },
@@ -85,8 +83,6 @@ describe('OnDemandScansApp', () => {
         helpPagePath,
         projectPath,
         defaultBranch,
-        profilesLibraryPath,
-        newSiteProfilePath,
       });
     });
 

ee/spec/frontend/on_demand_scans/components/on_demand_scans_form_spec.js

@@ -9,17 +9,21 @@ import { redirectTo } from '~/lib/utils/url_utility';
 const helpPagePath = `${TEST_HOST}/application_security/dast/index#on-demand-scans`;
 const projectPath = 'group/project';
 const defaultBranch = 'master';
-const profilesLibraryPath = `${TEST_HOST}/${projectPath}/-/on_demand_scans/profiles`;
+const scannerProfilesLibraryPath = '/on_demand_scans/profiles#scanner-profiles';
+const siteProfilesLibraryPath = '/on_demand_scans/profiles#site-profiles';
+const newScannerProfilePath = '/on_demand_scans/profiles/dast_scanner_profile/new';
 const newSiteProfilePath = `${TEST_HOST}/${projectPath}/-/on_demand_scans/profiles`;
 
 const defaultProps = {
   helpPagePath,
   projectPath,
   defaultBranch,
-  profilesLibraryPath,
-  newSiteProfilePath,
 };
 
+const scannerProfiles = [
+  { id: 1, profileName: 'My first scanner profile', spiderTimeout: 5, targetTimeout: 10 },
+  { id: 2, profileName: 'My second scanner profile', spiderTimeout: 20, targetTimeout: 150 },
+];
 const siteProfiles = [
   { id: 1, profileName: 'My first site profile', targetUrl: 'https://example.com' },
   { id: 2, profileName: 'My second site profile', targetUrl: 'https://foo.bar' },
@@ -35,13 +39,15 @@ describe('OnDemandScansApp', () => {
   let wrapper;
 
   const findForm = () => wrapper.find(GlForm);
-  const findSiteProfilesDropdown = () => wrapper.find('[data-testid="site-profiles-dropdown"]');
-  const findManageSiteProfilesButton = () =>
-    wrapper.find('[data-testid="manage-site-profiles-button"]');
-  const findCreateNewSiteProfileLink = () =>
-    wrapper.find('[data-testid="create-site-profile-link"]');
-  const findAlert = () => wrapper.find('[data-testid="on-demand-scan-error"]');
-  const findCancelButton = () => wrapper.find('[data-testid="on-demand-scan-cancel-button"]');
+  const findByTestId = testId => wrapper.find(`[data-testid="${testId}"]`);
+  const findScannerProfilesDropdown = () => findByTestId('scanner-profiles-dropdown');
+  const findSiteProfilesDropdown = () => findByTestId('site-profiles-dropdown');
+  const findManageScannerProfilesButton = () => findByTestId('manage-scanner-profiles-button');
+  const findCreateNewScannerProfileLink = () => findByTestId('create-scanner-profile-link');
+  const findManageSiteProfilesButton = () => findByTestId('manage-site-profiles-button');
+  const findCreateNewSiteProfileLink = () => findByTestId('create-site-profile-link');
+  const findAlert = () => findByTestId('on-demand-scan-error');
+  const findCancelButton = () => findByTestId('on-demand-scan-cancel-button');
   const submitForm = () => findForm().vm.$emit('submit', { preventDefault: () => {} });
 
   const wrapperFactory = (mountFn = shallowMount) => (options = {}) => {
@@ -55,10 +61,18 @@ describe('OnDemandScansApp', () => {
             $apollo: {
               mutate: jest.fn(),
               queries: {
+                scannerProfiles: {},
                 siteProfiles: {},
               },
             },
           },
+          provide: {
+            glFeatures: { securityOnDemandScansScannerProfiles: true },
+            scannerProfilesLibraryPath,
+            siteProfilesLibraryPath,
+            newScannerProfilePath,
+            newSiteProfilePath,
+          },
         },
         options,
         {
@@ -189,10 +203,60 @@ describe('OnDemandScansApp', () => {
     });
   });
 
-  describe('site profiles', () => {
-    describe('while site profiles are being fetched', () => {
+  describe('scanner profiles with feature flag disabled', () => {
     beforeEach(() => {
-        createComponent({ mocks: { $apollo: { queries: { siteProfiles: { loading: true } } } } });
+      createComponent({
+        provide: {
+          glFeatures: { securityOnDemandScansScannerProfiles: false },
+        },
+      });
+    });
+
+    it('shows static scanner settings and no scanner profiles component', () => {
+      expect(findScannerProfilesDropdown().exists()).toBe(false);
+      expect(findManageScannerProfilesButton().exists()).toBe(false);
+      expect(findCreateNewScannerProfileLink().exists()).toBe(false);
+      expect(wrapper.text()).toContain('Passive');
+      expect(wrapper.text()).toContain('master');
+    });
+
+    it('when submitting the form, GraphQL query does not include scanner data', async () => {
+      wrapper.vm.siteProfiles = siteProfiles;
+      await wrapper.vm.$nextTick();
+      jest
+        .spyOn(wrapper.vm.$apollo, 'mutate')
+        .mockResolvedValue({ data: { dastOnDemandScanCreate: { pipelineUrl, errors: [] } } });
+      findSiteProfilesDropdown().vm.$emit('input', siteProfiles[0]);
+      submitForm();
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: dastOnDemandScanCreate,
+        variables: {
+          dastSiteProfileId: siteProfiles[0],
+          fullPath: projectPath,
+        },
+      });
+    });
+  });
+
+  describe.each`
+    profileType  | manageProfilesButtonFinder         | manageProfilesPath            | createNewProfileButtonFinder       | newProfilePath           | dropdownFinder
+    ${'scanner'} | ${findManageScannerProfilesButton} | ${scannerProfilesLibraryPath} | ${findCreateNewScannerProfileLink} | ${newScannerProfilePath} | ${findScannerProfilesDropdown}
+    ${'site'}    | ${findManageSiteProfilesButton}    | ${siteProfilesLibraryPath}    | ${findCreateNewSiteProfileLink}    | ${newSiteProfilePath}    | ${findSiteProfilesDropdown}
+  `(
+    '$profileType profiles',
+    ({
+      profileType,
+      manageProfilesButtonFinder,
+      manageProfilesPath,
+      createNewProfileButtonFinder,
+      newProfilePath,
+      dropdownFinder,
+    }) => {
+      describe('while profiles are being fetched', () => {
+        beforeEach(() => {
+          createComponent({
+            mocks: { $apollo: { queries: { [`${profileType}Profiles`]: { loading: true } } } },
+          });
         });
 
         it('shows a skeleton loader', () => {
@@ -200,10 +264,10 @@ describe('OnDemandScansApp', () => {
         });
       });
 
-    describe('when site profiles could not be fetched', () => {
+      describe('when profiles could not be fetched', () => {
         beforeEach(() => {
           createComponent();
-        return wrapper.vm.showErrors('ERROR_FETCH_SITE_PROFILES');
+          wrapper.vm.showErrors(`ERROR_FETCH_${profileType.toUpperCase()}_PROFILES`);
         });
 
         it('shows a non-dismissible alert and no field', () => {
@@ -211,57 +275,66 @@ describe('OnDemandScansApp', () => {
           expect(alert.exists()).toBe(true);
           expect(alert.props('dismissible')).toBe(false);
           expect(alert.text()).toContain(
-          'Could not fetch site profiles. Please refresh the page, or try again later.',
+            `Could not fetch ${profileType} profiles. Please refresh the page, or try again later.`,
           );
         });
       });
 
-    describe('when there are no site profiles yet', () => {
+      describe('when there are no profiles yet', () => {
         beforeEach(() => {
           createFullComponent();
         });
 
-      it('disables the link to manage site profiles', () => {
-        expect(findManageSiteProfilesButton().props('disabled')).toBe(true);
+        it('disables the link to profiles library', () => {
+          expect(manageProfilesButtonFinder().props('disabled')).toBe(true);
         });
 
-      it('shows a link to create a new site profile', () => {
-        const link = findCreateNewSiteProfileLink();
+        it('shows a link to create a new profile', () => {
+          const link = createNewProfileButtonFinder();
           expect(link.exists()).toBe(true);
-        expect(link.attributes('href')).toBe(newSiteProfilePath);
+          expect(link.attributes('href')).toBe(newProfilePath);
         });
       });
 
-    describe('when there are site profiles', () => {
+      describe('when there are profiles', () => {
         beforeEach(() => {
-        createComponent({
+          createFullComponent({
             data: {
+              scannerProfiles,
               siteProfiles,
+              form: {
+                dastScannerProfileId: { value: scannerProfiles[0].id },
+                dastSiteProfileId: { value: siteProfiles[0].id },
+              },
             },
           });
         });
 
-      it('shows a dropdown containing the site profiles', () => {
-        const dropdown = findSiteProfilesDropdown();
+        it('enables link to profiles management', () => {
+          expect(manageProfilesButtonFinder().props('disabled')).toBe(false);
+          expect(manageProfilesButtonFinder().attributes('href')).toBe(manageProfilesPath);
+        });
+
+        it('shows a dropdown containing the profiles', () => {
+          const dropdown = dropdownFinder();
           expect(dropdown.exists()).toBe(true);
           expect(dropdown.element.children).toHaveLength(siteProfiles.length);
         });
 
-      it('when a site profile is selected, its summary is displayed below the dropdown', async () => {
-        wrapper.vm.form.dastSiteProfileId.value = siteProfiles[0].id;
-        await wrapper.vm.$nextTick();
-        const summary = wrapper.find('[data-testid="site-profile-summary"]');
+        it('when a profile is selected, its summary is displayed below the dropdow', () => {
+          const summary = wrapper.find(`[data-testid="${profileType}-profile-summary"]`);
 
           expect(summary.exists()).toBe(true);
-        expect(summary.text()).toContain(siteProfiles[0].targetUrl);
-      });
         });
       });
+    },
+  );
 
   describe('submission', () => {
     beforeEach(() => {
       createComponent({
         data: {
+          scannerProfiles,
           siteProfiles,
         },
       });
@@ -272,6 +345,7 @@ describe('OnDemandScansApp', () => {
         jest
           .spyOn(wrapper.vm.$apollo, 'mutate')
           .mockResolvedValue({ data: { dastOnDemandScanCreate: { pipelineUrl, errors: [] } } });
+        findScannerProfilesDropdown().vm.$emit('input', scannerProfiles[0].id);
         findSiteProfilesDropdown().vm.$emit('input', siteProfiles[0]);
         submitForm();
       });
@@ -284,8 +358,7 @@ describe('OnDemandScansApp', () => {
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: dastOnDemandScanCreate,
           variables: {
-            scanType: 'PASSIVE',
-            branch: 'master',
+            dastScannerProfileId: scannerProfiles[0].id,
             dastSiteProfileId: siteProfiles[0],
             fullPath: projectPath,
           },
@@ -304,6 +377,7 @@ describe('OnDemandScansApp', () => {
     describe('on top-level error', () => {
       beforeEach(() => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue();
+        findScannerProfilesDropdown().vm.$emit('input', scannerProfiles[0].id);
         findSiteProfilesDropdown().vm.$emit('input', siteProfiles[0]);
         submitForm();
       });
@@ -326,6 +400,7 @@ describe('OnDemandScansApp', () => {
         jest
           .spyOn(wrapper.vm.$apollo, 'mutate')
           .mockResolvedValue({ data: { dastOnDemandScanCreate: { pipelineUrl: null, errors } } });
+        findScannerProfilesDropdown().vm.$emit('input', scannerProfiles[0].id);
         findSiteProfilesDropdown().vm.$emit('input', siteProfiles[0]);
         submitForm();
       });

ee/spec/helpers/projects/on_demand_scans_helper_spec.rb

@@ -12,7 +12,9 @@ RSpec.describe Projects::OnDemandScansHelper do
         '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,
-        'profiles-library-path' => project_profiles_path(project),
+        'scanner-profiles-library-path' => project_profiles_path(project, anchor: 'scanner-profiles'),
+        'site-profiles-library-path' => project_profiles_path(project, anchor: 'site-profiles'),
+        'new-scanner-profile-path' => new_project_dast_scanner_profile_path(project),
         'new-site-profile-path' => new_project_dast_site_profile_path(project)
       )
     end

locale/gitlab.pot

@@ -7870,6 +7870,9 @@ msgstr ""
 msgid "DastProfiles|No profiles created yet"
 msgstr ""
 
+msgid "DastProfiles|Passive"
+msgstr ""
+
 msgid "DastProfiles|Please enter a valid URL format, ex: http://www.example.com/home"
 msgstr ""
 
@@ -7885,6 +7888,9 @@ msgstr ""
 msgid "DastProfiles|Save profile"
 msgstr ""
 
+msgid "DastProfiles|Scan mode"
+msgstr ""
+
 msgid "DastProfiles|Scanner Profile"
 msgstr ""
 
@@ -17281,12 +17287,18 @@ msgstr ""
 msgid "OnDemandScans|Attached branch is where the scan job runs."
 msgstr ""
 
+msgid "OnDemandScans|Could not fetch scanner profiles. Please refresh the page, or try again later."
+msgstr ""
+
 msgid "OnDemandScans|Could not fetch site profiles. Please refresh the page, or try again later."
 msgstr ""
 
 msgid "OnDemandScans|Could not run the scan. Please try again."
 msgstr ""
 
+msgid "OnDemandScans|Create a new scanner profile"
+msgstr ""
+
 msgid "OnDemandScans|Create a new site profile"
 msgstr ""
 
@@ -17299,6 +17311,9 @@ msgstr ""
 msgid "OnDemandScans|New on-demand DAST scan"
 msgstr ""
 
+msgid "OnDemandScans|No profile yet. In order to create a new scan, you need to have at least one completed scanner profile."
+msgstr ""
+
 msgid "OnDemandScans|No profile yet. In order to create a new scan, you need to have at least one completed site profile."
 msgstr ""
 
@@ -17332,6 +17347,9 @@ msgstr ""
 msgid "OnDemandScans|Site profiles"
 msgstr ""
 
+msgid "OnDemandScans|Use existing scanner profile"
+msgstr ""
+
 msgid "OnDemandScans|Use existing site profile"
 msgstr ""