Disable policy DAST scan/site profile changes

- if a policy is linked to a DAST scan/site profile, do not allow
  a user to modify it on the On-demand scan page
- disable delete button

ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles_list.vue

@@ -12,6 +12,7 @@ import {
 } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { visitUrl } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
 
 export default {
   components: {
@@ -113,6 +114,14 @@ export default {
 
       return [...dataFields, ...staticFields];
     },
+    isPolicyProfile() {
+      return true;
+    },
+    deleteTitle() {
+      return this.isPolicyProfile
+        ? s__('DastProfiles|This profile is currently being used in a policy.')
+        : s__('DastProfiles|Delete profile');
+    },
   },
   methods: {
     handleDelete() {
@@ -193,15 +202,29 @@ export default {
                 v-if="item.editPath"
                 :href="item.editPath"
                 :title="s__('DastProfiles|Edit profile')"
-                >{{ __('Edit') }}</gl-dropdown-item
               >
+                {{ __('Edit') }}
+              </gl-dropdown-item>
 
               <gl-dropdown-item
+                v-gl-tooltip.viewport
+                boundary="viewport"
+                :class="{
+                  'gl-cursor-default': isPolicyProfile,
+                }"
+                :disabled="isPolicyProfile"
+                :aria-disabled="isPolicyProfile"
                 variant="danger"
-                :title="s__('DastProfiles|Delete profile')"
+                :title="deleteTitle"
                 @click="prepareProfileDeletion(item.id)"
+              >
+                <span
+                  :class="{
+                    'gl-text-gray-200!': isPolicyProfile,
+                  }"
                 >
                   {{ __('Delete') }}
+                </span>
               </gl-dropdown-item>
             </gl-dropdown>
             <gl-button
@@ -210,18 +233,21 @@ export default {
               category="tertiary"
               class="gl-ml-3 gl-my-1 gl-md-display-none"
               size="small"
-              >{{ __('Edit') }}</gl-button
             >
+              {{ __('Edit') }}
+            </gl-button>
+            <span v-gl-tooltip.hover.focus :title="deleteTitle">
               <gl-button
-              v-gl-tooltip.hover.focus
                 category="tertiary"
                 icon="remove"
                 variant="danger"
                 size="small"
                 class="gl-mx-3 gl-my-1 gl-md-display-none"
-              :title="s__('DastProfiles|Delete profile')"
+                :disabled="isPolicyProfile"
+                :aria-disabled="isPolicyProfile"
                 @click="prepareProfileDeletion(item.id)"
               />
+            </span>
           </div>
         </template>
 

ee/app/assets/javascripts/security_configuration/dast_scanner_profiles/components/dast_scanner_profile_form.vue

@@ -150,7 +150,10 @@ export default {
       );
     },
     isSubmitDisabled() {
-      return this.formHasErrors || this.requiredFieldEmpty;
+      return this.formHasErrors || this.requiredFieldEmpty || this.isPolicyProfile;
+    },
+    isPolicyProfile() {
+      return true;
     },
   },
 
@@ -242,9 +245,18 @@ export default {
 
 <template>
   <gl-form @submit.prevent="onSubmit">
-    <h2 class="gl-mb-6">
-      {{ i18n.title }}
-    </h2>
+    <h2 class="gl-mb-6">{{ i18n.title }}</h2>
+
+    <gl-alert v-if="isPolicyProfile" variant="info" class="gl-mb-5" :dismissible="false">
+      {{
+        sprintf(
+          s__(
+            'DastProfiles|This scanner profile is currently being used by a policy. To make edits you must remove it from the active policy.',
+          ),
+          { profileName: form.profileName.value },
+        )
+      }}
+    </gl-alert>
 
     <gl-alert v-if="showAlert" variant="danger" class="gl-mb-5" @dismiss="hideErrors">
       {{ s__('DastProfiles|Could not create the scanner profile. Please try again.') }}
@@ -253,7 +265,7 @@ export default {
       </ul>
     </gl-alert>
 
-    <gl-form-group :label="s__('DastProfiles|Profile name')">
+    <gl-form-group :disabled="isPolicyProfile" :label="s__('DastProfiles|Profile name')">
       <gl-form-input
         v-model="form.profileName.value"
         class="mw-460"
@@ -264,7 +276,7 @@ export default {
 
     <hr class="gl-border-gray-100" />
 
-    <gl-form-group>
+    <gl-form-group :disabled="isPolicyProfile">
       <template #label>
         {{ s__('DastProfiles|Scan mode') }}
         <tooltip-icon :title="i18n.tooltips.scanMode" />
@@ -280,6 +292,7 @@ export default {
     <div class="row">
       <gl-form-group
         class="col-md-6 mb-0"
+        :disabled="isPolicyProfile"
         :state="form.spiderTimeout.state"
         :invalid-feedback="form.spiderTimeout.feedback"
       >
@@ -307,6 +320,7 @@ export default {
 
       <gl-form-group
         class="col-md-6 mb-0"
+        :disabled="isPolicyProfile"
         :state="form.targetTimeout.state"
         :invalid-feedback="form.targetTimeout.feedback"
       >
@@ -336,7 +350,7 @@ export default {
     <hr class="gl-border-gray-100" />
 
     <div class="row">
-      <gl-form-group class="col-md-6 mb-0">
+      <gl-form-group class="col-md-6 mb-0" :disabled="isPolicyProfile">
         <template #label>
           {{ s__('DastProfiles|AJAX spider') }}
           <tooltip-icon :title="i18n.tooltips.ajaxSpider" />
@@ -346,7 +360,7 @@ export default {
         }}</gl-form-checkbox>
       </gl-form-group>
 
-      <gl-form-group class="col-md-6 mb-0">
+      <gl-form-group class="col-md-6 mb-0" :disabled="isPolicyProfile">
         <template #label>
           {{ s__('DastProfiles|Debug messages') }}
           <tooltip-icon :title="i18n.tooltips.debugMessage" />

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

@@ -14,6 +14,11 @@ export default {
     validation: validation(),
   },
   props: {
+    isPolicyProfile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     value: {
       type: Object,
       required: false,
@@ -77,7 +82,7 @@ export default {
 
 <template>
   <section>
-    <gl-form-group :label="s__('DastProfiles|Authentication')">
+    <gl-form-group :disabled="isPolicyProfile" :label="s__('DastProfiles|Authentication')">
       <gl-form-checkbox v-model="form.fields.enabled.value" data-testid="auth-enable-checkbox">{{
         s__('DastProfiles|Enable Authentication')
       }}</gl-form-checkbox>
@@ -85,6 +90,7 @@ export default {
     <div v-if="form.fields.enabled.value" data-testid="auth-form">
       <div class="row">
         <gl-form-group
+          :disabled="isPolicyProfile"
           :label="s__('DastProfiles|Authentication URL')"
           :invalid-feedback="form.fields.url.feedback"
           class="col-md-6"
@@ -101,6 +107,7 @@ export default {
       </div>
       <div class="row">
         <gl-form-group
+          :disabled="isPolicyProfile"
           :label="s__('DastProfiles|Username')"
           :invalid-feedback="form.fields.username.feedback"
           class="col-md-6"
@@ -116,6 +123,7 @@ export default {
           />
         </gl-form-group>
         <gl-form-group
+          :disabled="isPolicyProfile"
           :label="s__('DastProfiles|Password')"
           :invalid-feedback="form.fields.password.feedback"
           class="col-md-6"
@@ -134,6 +142,7 @@ export default {
       </div>
       <div class="row">
         <gl-form-group
+          :disabled="isPolicyProfile"
           :label="s__('DastProfiles|Username form field')"
           :invalid-feedback="form.fields.usernameField.feedback"
           class="col-md-6"
@@ -148,6 +157,7 @@ export default {
           />
         </gl-form-group>
         <gl-form-group
+          :disabled="isPolicyProfile"
           :label="s__('DastProfiles|Password form field')"
           :invalid-feedback="form.fields.passwordField.feedback"
           class="col-md-6"

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

@@ -140,6 +140,9 @@ export default {
     formTouched() {
       return !isEqual(serializeFormObject(this.form.fields), this.initialFormValues);
     },
+    isPolicyProfile() {
+      return true;
+    },
   },
   async mounted() {
     if (this.isEdit) {
@@ -244,6 +247,17 @@ export default {
       {{ i18n.title }}
     </h2>
 
+    <gl-alert v-if="isPolicyProfile" variant="info" class="gl-mb-5" :dismissible="false">
+      {{
+        sprintf(
+          s__(
+            'DastProfiles|This site profile is currently being used by a policy. To make edits you must it from the active policy.',
+          ),
+          { profileName: form.fields.profileName.value },
+        )
+      }}
+    </gl-alert>
+
     <gl-alert
       v-if="hasAlert"
       variant="danger"
@@ -258,6 +272,7 @@ export default {
     </gl-alert>
 
     <gl-form-group
+      :disabled="isPolicyProfile"
       :label="s__('DastProfiles|Profile name')"
       :invalid-feedback="form.fields.profileName.feedback"
     >
@@ -276,6 +291,7 @@ export default {
     <hr class="gl-border-gray-100" />
 
     <gl-form-group
+      :disabled="isPolicyProfile"
       data-testid="target-url-input-group"
       :invalid-feedback="form.fields.targetUrl.feedback"
       :label="s__('DastProfiles|Target URL')"
@@ -294,6 +310,7 @@ export default {
 
     <div v-if="glFeatures.securityDastSiteProfilesAdditionalFields" class="row">
       <gl-form-group
+        :disabled="isPolicyProfile"
         :label="s__('DastProfiles|Excluded URLs (Optional)')"
         :invalid-feedback="form.fields.excludedUrls.feedback"
         class="col-md-6"
@@ -318,7 +335,11 @@ export default {
         }}</gl-form-text>
       </gl-form-group>
 
-      <gl-form-group :invalid-feedback="form.fields.requestHeaders.feedback" class="col-md-6">
+      <gl-form-group
+        :disabled="isPolicyProfile"
+        :invalid-feedback="form.fields.requestHeaders.feedback"
+        class="col-md-6"
+      >
         <template #label>
           {{ i18n.requestHeaders.label }}
           <tooltip-icon :title="i18n.requestHeaders.tooltip" />
@@ -343,12 +364,14 @@ export default {
     <dast-site-auth-section
       v-if="glFeatures.securityDastSiteProfilesAdditionalFields"
       v-model="authSection"
+      :is-policy-profile="isPolicyProfile"
       :show-validation="form.showValidation"
     />
 
     <hr class="gl-border-gray-100" />
 
     <gl-button
+      :disabled="isPolicyProfile"
       type="submit"
       variant="success"
       class="js-no-auto-disable"

locale/gitlab.pot

@@ -9637,6 +9637,15 @@ msgstr ""
 msgid "DastProfiles|The maximum number of seconds allowed for the site under test to respond to a request."
 msgstr ""
 
+msgid "DastProfiles|This profile is currently being used in a policy."
+msgstr ""
+
+msgid "DastProfiles|This scanner profile is currently being used by a policy. To make edits you must remove it from the active policy."
+msgstr ""
+
+msgid "DastProfiles|This site profile is currently being used by a policy. To make edits you must it from the active policy."
+msgstr ""
+
 msgid "DastProfiles|Turn on AJAX spider"
 msgstr ""