Make DAST site profile form composable

- Refactor form to make it reusable
- Add feature specs for DAST site profile form

ee/app/assets/javascripts/security_configuration/dast_profiles/redirect.js

@@ -10,7 +10,7 @@ export const returnToPreviousPageFactory = ({
   onDemandScansPath,
   profilesLibraryPath,
   urlParamKey,
-}) => (gid) => {
+}) => ({ id } = {}) => {
   // when previous page is not On-demand scans page
   // redirect user to profiles library page
   if (!document.referrer?.includes(onDemandScansPath)) {
@@ -20,9 +20,9 @@ export const returnToPreviousPageFactory = ({
   // Otherwise, redirect them back to On-demand scans page
   // with corresponding profile id, if available
   // for example, /on_demand_scans?site_profile_id=35
-  const previousPagePath = gid
+  const previousPagePath = id
     ? setUrlParams(
-        { [urlParamKey]: getIdFromGraphQLId(gid) },
+        { [urlParamKey]: getIdFromGraphQLId(id) },
         relativePathToAbsolute(onDemandScansPath, getBaseURL()),
       )
     : onDemandScansPath;

ee/app/assets/javascripts/security_configuration/dast_site_profiles_form/components/dast_site_profile_form.vue

@@ -11,7 +11,6 @@ import {
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { isEqual } from 'lodash';
-import { returnToPreviousPageFactory } from 'ee/security_configuration/dast_profiles/redirect';
 import { initFormField } from 'ee/security_configuration/utils';
 import { serializeFormObject } from '~/lib/utils/forms';
 import { __, s__, n__, sprintf } from '~/locale';
@@ -50,19 +49,16 @@ export default {
       type: String,
       required: true,
     },
-    profilesLibraryPath: {
-      type: String,
-      required: true,
-    },
-    onDemandScansPath: {
-      type: String,
-      required: true,
-    },
     siteProfile: {
       type: Object,
       required: false,
       default: null,
     },
+    showHeader: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     const { name = '', targetUrl = '', excludedUrls = [], auth = {} } = this.siteProfile || {};
@@ -96,11 +92,6 @@ export default {
       token: null,
       errorMessage: '',
       errors: [],
-      returnToPreviousPage: returnToPreviousPageFactory({
-        onDemandScansPath: this.onDemandScansPath,
-        profilesLibraryPath: this.profilesLibraryPath,
-        urlParamKey: 'site_profile_id',
-      }),
     };
   },
   computed: {
@@ -216,7 +207,9 @@ export default {
               this.showErrors({ message: errorMessage, errors });
               this.isLoading = false;
             } else {
-              this.returnToPreviousPage(id);
+              this.$emit('success', {
+                id,
+              });
             }
           },
         )
@@ -234,7 +227,7 @@ export default {
       }
     },
     discard() {
-      this.returnToPreviousPage();
+      this.$emit('cancel');
     },
     captureException(exception) {
       Sentry.captureException(exception);
@@ -265,7 +258,7 @@ export default {
 
 <template>
   <gl-form novalidate @submit.prevent="onSubmit">
-    <h2 class="gl-mb-6">
+    <h2 v-if="showHeader" class="gl-mb-6">
       {{ i18n.title }}
     </h2>
 

ee/app/assets/javascripts/security_configuration/dast_site_profiles_form/index.js

 import Vue from 'vue';
+import { returnToPreviousPageFactory } from 'ee/security_configuration/dast_profiles/redirect';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import DastSiteProfileForm from './components/dast_site_profile_form.vue';
 import apolloProvider from './graphql/provider';
@@ -13,14 +14,18 @@ export default () => {
 
   const props = {
     fullPath,
-    profilesLibraryPath,
-    onDemandScansPath,
   };
 
   if (el.dataset.siteProfile) {
     props.siteProfile = convertObjectPropsToCamelCase(JSON.parse(el.dataset.siteProfile));
   }
 
+  const factoryParams = {
+    onDemandScansPath,
+    profilesLibraryPath,
+    urlParamKey: 'site_profile_id',
+  };
+
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -28,6 +33,10 @@ export default () => {
     render(h) {
       return h(DastSiteProfileForm, {
         props,
+        on: {
+          success: returnToPreviousPageFactory(factoryParams),
+          cancel: returnToPreviousPageFactory(factoryParams),
+        },
       });
     },
   });

ee/spec/features/projects/security/dast_site_profiles_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'User sees Scanner profile' do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project, :repository) }
+
+  let(:profile_form_path) {new_project_security_configuration_dast_scans_dast_site_profile_path(project)}
+  let(:profile_library_path) { project_security_configuration_dast_scans_path(project) }
+
+  before_all do
+    project.add_developer(user)
+  end
+
+  before do
+    sign_in(user)
+  end
+
+  context 'when feature is available' do
+    before do
+      stub_licensed_features(security_on_demand_scans: true)
+      visit(profile_form_path)
+    end
+
+    it 'shows the form' do
+      expect(page).to have_gitlab_http_status(:ok)
+      expect(page).to have_content("New site profile")
+    end
+
+    it 'on submit', :js do
+      fill_in_profile_form
+      expect(current_path).to eq(profile_library_path)
+    end
+
+    it 'on cancel', :js do
+      click_button 'Cancel'
+      expect(current_path).to eq(profile_library_path)
+    end
+  end
+
+  context 'when feature is not available' do
+    before do
+      visit(profile_form_path)
+    end
+
+    it 'renders a 404' do
+      expect(page).to have_gitlab_http_status(:not_found)
+    end
+  end
+
+  def fill_in_profile_form
+    fill_in 'profileName', with: "hello"
+    fill_in 'targetUrl', with: "https://example.com"
+    click_button 'Save profile'
+    wait_for_requests
+  end
+end

ee/spec/frontend/security_configuration/dast_profiles/redirect_spec.js

@@ -53,7 +53,7 @@ describe('DAST Profiles redirector', () => {
       });
 
       it('redirects to previous page with id', () => {
-        factory(2);
+        factory({ id: 2 });
         expect(urlUtility.redirectTo).toHaveBeenCalledWith(
           `${onDemandScansPath}?site_profile_id=2`,
         );

ee/spec/frontend/security_configuration/dast_site_profiles_form/components/dast_site_profile_form_spec.js

@@ -13,7 +13,6 @@ import * as responses from 'ee_jest/security_configuration/dast_site_profiles_fo
 import { TEST_HOST } from 'helpers/test_constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import * as urlUtility from '~/lib/utils/url_utility';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -134,7 +133,18 @@ describe('DastSiteProfileForm', () => {
 
   it('renders properly', () => {
     createComponent();
-    expect(wrapper.html()).not.toBe('');
+    expect(findForm().exists()).toBe(true);
+    expect(findForm().text()).toContain('New site profile');
+  });
+
+  it('when showHeader prop is disabled', () => {
+    createComponent({
+      propsData: {
+        ...defaultProps,
+        showHeader: false,
+      },
+    });
+    expect(findForm().text()).not.toContain('New site profile');
   });
 
   describe('target URL input', () => {
@@ -215,8 +225,6 @@ describe('DastSiteProfileForm', () => {
           siteProfile,
         },
       });
-
-      jest.spyOn(urlUtility, 'redirectTo').mockImplementation();
     });
 
     it('sets the correct title', () => {
@@ -260,8 +268,10 @@ describe('DastSiteProfileForm', () => {
           });
         });
 
-        it('redirects to the profiles library', () => {
-          expect(urlUtility.redirectTo).toHaveBeenCalledWith(profilesLibraryPath);
+        it('emits success event with correct params', () => {
+          expect(wrapper.emitted('success')).toBeTruthy();
+          expect(wrapper.emitted('success')).toHaveLength(1);
+          expect(wrapper.emitted('success')[0]).toStrictEqual([{ id: '3083' }]);
         });
 
         it('does not show an alert', () => {
@@ -319,9 +329,9 @@ describe('DastSiteProfileForm', () => {
 
     describe('cancellation', () => {
       describe('form unchanged', () => {
-        it('redirects to the profiles library', () => {
+        it('emits cancel event', () => {
           findCancelButton().vm.$emit('click');
-          expect(urlUtility.redirectTo).toHaveBeenCalledWith(profilesLibraryPath);
+          expect(wrapper.emitted('cancel')).toBeTruthy();
         });
       });
 
@@ -337,9 +347,9 @@ describe('DastSiteProfileForm', () => {
           expect(findCancelModal().vm.show).toHaveBeenCalled();
         });
 
-        it('redirects to the profiles library if confirmed', () => {
+        it('emits cancel event', () => {
           findCancelModal().vm.$emit('ok');
-          expect(urlUtility.redirectTo).toHaveBeenCalledWith(profilesLibraryPath);
+          expect(wrapper.emitted('cancel')).toBeTruthy();
         });
       });
     });