Amend NONE state for DAST Site Validation

This change adds a newly added NONE state
to signify a validation has not started yet
and replace PENDING validation state with it

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

@@ -12,7 +12,7 @@ import ProfilesList from './dast_profiles_list.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { fetchPolicies } from '~/lib/graphql';
 
-const { PENDING, INPROGRESS, FAILED } = DAST_SITE_VALIDATION_STATUS;
+const { NONE, PENDING, INPROGRESS, FAILED } = DAST_SITE_VALIDATION_STATUS;
 
 export default {
   components: {
@@ -94,11 +94,11 @@ export default {
     shouldShowValidationBtn(status) {
       return (
         this.glFeatures.securityOnDemandScansSiteValidation &&
-        (status === PENDING || status === FAILED)
+        (status === NONE || status === FAILED)
       );
     },
     shouldShowValidationStatus(status) {
-      return this.glFeatures.securityOnDemandScansSiteValidation && status !== PENDING;
+      return this.glFeatures.securityOnDemandScansSiteValidation && status !== NONE;
     },
     showValidationModal() {
       this.$refs['dast-site-validation-modal'].show();

ee/app/assets/javascripts/security_configuration/dast_site_validation/constants.js

@@ -21,18 +21,22 @@ export const DAST_SITE_VALIDATION_METHODS = {
 };
 
 export const DAST_SITE_VALIDATION_STATUS = {
+  NONE: 'NONE',
   PENDING: 'PENDING_VALIDATION',
   INPROGRESS: 'INPROGRESS_VALIDATION',
   PASSED: 'PASSED_VALIDATION',
   FAILED: 'FAILED_VALIDATION',
 };
 
-export const DAST_SITE_VALIDATION_STATUS_PROPS = {
-  [DAST_SITE_VALIDATION_STATUS.INPROGRESS]: {
+const INPROGRESS_VALIDATION_PROPS = {
   label: s__('DastSiteValidation|Validating...'),
   cssClass: 'gl-text-blue-300',
   tooltipText: s__('DastSiteValidation|The validation is in progress. Please wait...'),
-  },
+};
+
+export const DAST_SITE_VALIDATION_STATUS_PROPS = {
+  [DAST_SITE_VALIDATION_STATUS.PENDING]: INPROGRESS_VALIDATION_PROPS,
+  [DAST_SITE_VALIDATION_STATUS.INPROGRESS]: INPROGRESS_VALIDATION_PROPS,
   [DAST_SITE_VALIDATION_STATUS.PASSED]: {
     label: s__('DastSiteValidation|Validated'),
     cssClass: 'gl-text-green-500',

ee/spec/frontend/security_configuration/dast_profiles/components/dast_site_profiles_list_spec.js

@@ -131,7 +131,8 @@ describe('EE - DastSiteProfileList', () => {
 
     describe.each`
       status           | statusEnum                                | label                  | hasValidateButton
-      ${'pending'}     | ${DAST_SITE_VALIDATION_STATUS.PENDING}    | ${''}                  | ${true}
+      ${'no'}          | ${DAST_SITE_VALIDATION_STATUS.NONE}       | ${''}                  | ${true}
+      ${'pending'}     | ${DAST_SITE_VALIDATION_STATUS.PENDING}    | ${'Validating...'}     | ${false}
       ${'in-progress'} | ${DAST_SITE_VALIDATION_STATUS.INPROGRESS} | ${'Validating...'}     | ${false}
       ${'passed'}      | ${DAST_SITE_VALIDATION_STATUS.PASSED}     | ${'Validated'}         | ${false}
       ${'failed'}      | ${DAST_SITE_VALIDATION_STATUS.FAILED}     | ${'Validation failed'} | ${true}

ee/spec/frontend/security_configuration/dast_profiles/mocks/mock_data.js

 export const siteProfiles = [
   {
-    id: 1,
+    id: 'gid://gitlab/DastSiteProfile/1',
     profileName: 'Profile 1',
     targetUrl: 'http://example-1.com',
     normalizedTargetUrl: 'http://example-1.com',
@@ -8,7 +8,7 @@ export const siteProfiles = [
     validationStatus: 'PENDING_VALIDATION',
   },
   {
-    id: 2,
+    id: 'gid://gitlab/DastSiteProfile/2',
     profileName: 'Profile 2',
     targetUrl: 'http://example-2.com',
     normalizedTargetUrl: 'http://example-2.com',
@@ -16,7 +16,7 @@ export const siteProfiles = [
     validationStatus: 'INPROGRESS_VALIDATION',
   },
   {
-    id: 3,
+    id: 'gid://gitlab/DastSiteProfile/3',
     profileName: 'Profile 3',
     targetUrl: 'http://example-2.com',
     normalizedTargetUrl: 'http://example-2.com',
@@ -24,13 +24,21 @@ export const siteProfiles = [
     validationStatus: 'PASSED_VALIDATION',
   },
   {
-    id: 4,
+    id: 'gid://gitlab/DastSiteProfile/4',
     profileName: 'Profile 4',
     targetUrl: 'http://example-3.com',
     normalizedTargetUrl: 'http://example-3.com',
     editPath: '/3/edit',
     validationStatus: 'FAILED_VALIDATION',
   },
+  {
+    id: 'gid://gitlab/DastSiteProfile/5',
+    profileName: 'Profile 5',
+    targetUrl: 'http://example-5.com',
+    normalizedTargetUrl: 'http://example-5.com',
+    editPath: '/5/edit',
+    validationStatus: 'NONE',
+  },
 ];
 
 export const scannerProfiles = [