Update DAST profile summary to hide empty values

This is to improve UX by removing empty values to
be shown in profile summary card

Changelog: changed
EE: true

ee/app/assets/javascripts/on_demand_scans_form/components/profile_selector/scanner_profile_summary.vue

 <script>
 import { SCAN_TYPE_LABEL } from 'ee/security_configuration/dast_profiles/dast_scanner_profiles/constants';
-import ProfileSelectorSummaryCell from './summary_cell.vue';
+import SummaryCell from './summary_cell.vue';
 
 export default {
   name: 'DastScannerProfileSummary',
   components: {
-    ProfileSelectorSummaryCell,
+    SummaryCell,
   },
   props: {
     profile: {
@@ -23,37 +23,31 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="row">
-      <profile-selector-summary-cell
-        :class="{ 'gl-text-red-500': hasConflict }"
-        :label="s__('DastProfiles|Scan mode')"
-        :value="$options.SCAN_TYPE_LABEL[profile.scanType]"
-      />
-    </div>
-    <div class="row">
-      <profile-selector-summary-cell
-        :label="s__('DastProfiles|Spider timeout')"
-        :value="n__('%d minute', '%d minutes', profile.spiderTimeout || 0)"
-      />
-      <profile-selector-summary-cell
-        :label="s__('DastProfiles|Target timeout')"
-        :value="n__('%d second', '%d seconds', profile.targetTimeout || 0)"
-      />
-    </div>
-    <div class="row">
-      <profile-selector-summary-cell
-        :label="s__('DastProfiles|AJAX spider')"
-        :value="profile.useAjaxSpider ? __('On') : __('Off')"
-      />
-      <profile-selector-summary-cell
-        :label="s__('DastProfiles|Debug messages')"
-        :value="
-          profile.showDebugMessages
-            ? s__('DastProfiles|Show debug messages')
-            : s__('DastProfiles|Hide debug messages')
-        "
-      />
-    </div>
+  <div class="row">
+    <summary-cell
+      :class="{ 'gl-text-red-500': hasConflict }"
+      :label="s__('DastProfiles|Scan mode')"
+      :value="$options.SCAN_TYPE_LABEL[profile.scanType]"
+    />
+    <summary-cell
+      :label="s__('DastProfiles|Spider timeout')"
+      :value="n__('%d minute', '%d minutes', profile.spiderTimeout || 0)"
+    />
+    <summary-cell
+      :label="s__('DastProfiles|Target timeout')"
+      :value="n__('%d second', '%d seconds', profile.targetTimeout || 0)"
+    />
+    <summary-cell
+      :label="s__('DastProfiles|AJAX spider')"
+      :value="profile.useAjaxSpider ? __('On') : __('Off')"
+    />
+    <summary-cell
+      :label="s__('DastProfiles|Debug messages')"
+      :value="
+        profile.showDebugMessages
+          ? s__('DastProfiles|Show debug messages')
+          : s__('DastProfiles|Hide debug messages')
+      "
+    />
   </div>
 </template>

ee/app/assets/javascripts/on_demand_scans_form/components/profile_selector/site_profile_summary.vue

@@ -5,12 +5,12 @@ import {
 } from 'ee/security_configuration/dast_profiles/dast_site_profiles/constants';
 import { DAST_SITE_VALIDATION_STATUS } from 'ee/security_configuration/dast_site_validation/constants';
 import { s__ } from '~/locale';
-import ProfileSelectorSummaryCell from './summary_cell.vue';
+import SummaryCell from './summary_cell.vue';
 
 export default {
   name: 'DastSiteProfileSummary',
   components: {
-    ProfileSelectorSummaryCell,
+    SummaryCell,
   },
   props: {
     profile: {
@@ -39,6 +39,7 @@ export default {
           ? s__('DastProfiles|Excluded paths')
           : s__('DastProfiles|Excluded URLs'),
         requestHeaders: s__('DastProfiles|Request headers'),
+        validationStatus: s__('DastProfiles|Validation status'),
       };
     },
     hasExcludedUrls() {
@@ -66,47 +67,25 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="row">
-      <profile-selector-summary-cell
-        :class="{ 'gl-text-red-500': hasConflict }"
-        :label="i18n.targetUrl"
-        :value="profile.targetUrl"
-      />
-      <profile-selector-summary-cell :label="i18n.targetType" :value="targetTypeValue" />
-    </div>
+  <div class="row">
+    <summary-cell
+      :class="{ 'gl-text-red-500': hasConflict }"
+      :label="i18n.targetUrl"
+      :value="profile.targetUrl"
+    />
+    <summary-cell :label="i18n.targetType" :value="targetTypeValue" />
     <template v-if="profile.auth.enabled">
-      <div class="row">
-        <profile-selector-summary-cell :label="i18n.authUrl" :value="profile.auth.url" />
-      </div>
-      <div class="row">
-        <profile-selector-summary-cell :label="i18n.username" :value="profile.auth.username" />
-        <profile-selector-summary-cell :label="i18n.password" value="••••••••" />
-      </div>
-      <div class="row">
-        <profile-selector-summary-cell
-          :label="i18n.usernameField"
-          :value="profile.auth.usernameField"
-        />
-        <profile-selector-summary-cell
-          :label="i18n.passwordField"
-          :value="profile.auth.passwordField"
-        />
-      </div>
+      <summary-cell :label="i18n.authUrl" :value="profile.auth.url" />
+      <summary-cell :label="i18n.username" :value="profile.auth.username" />
+      <summary-cell :label="i18n.password" value="••••••••" />
+      <summary-cell :label="i18n.usernameField" :value="profile.auth.usernameField" />
+      <summary-cell :label="i18n.passwordField" :value="profile.auth.passwordField" />
     </template>
-    <div class="row">
-      <profile-selector-summary-cell :label="i18n.excludedUrls" :value="displayExcludedUrls" />
-      <profile-selector-summary-cell
-        :label="i18n.requestHeaders"
-        :value="profile.requestHeaders ? __('[Redacted]') : undefined"
-      />
-    </div>
-
-    <div class="row">
-      <profile-selector-summary-cell
-        :label="s__('DastProfiles|Validation status')"
-        :value="isProfileValidated"
-      />
-    </div>
+    <summary-cell :label="i18n.excludedUrls" :value="displayExcludedUrls" />
+    <summary-cell
+      :label="i18n.requestHeaders"
+      :value="profile.requestHeaders ? __('[Redacted]') : undefined"
+    />
+    <summary-cell :label="i18n.validationStatus" :value="isProfileValidated" />
   </div>
 </template>

ee/app/assets/javascripts/on_demand_scans_form/components/profile_selector/summary_cell.vue

 <script>
-import { __ } from '~/locale';
-
 export default {
   name: 'OnDemandScansProfileSummaryCell',
   props: {
@@ -11,14 +9,14 @@ export default {
     value: {
       type: String,
       required: false,
-      default: __('None'),
+      default: null,
     },
   },
 };
 </script>
 
 <template>
-  <div class="col-md-6">
+  <div v-if="value" class="col-md-6">
     <div class="row gl-my-2">
       <div class="col-md-4">{{ label }}:</div>
       <div class="col-md-8">

ee/spec/frontend/on_demand_scans_form/components/profile_selector/__snapshots__/scanner_profile_summary_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DastScannerProfileSummary renders properly 1`] = `
-<div>
-  <div
-    class="row"
-  >
-    <profile-selector-summary-cell-stub
-      class=""
-      label="Scan mode"
-      value="Passive"
-    />
-  </div>
+<div
+  class="row"
+>
+  <summary-cell-stub
+    class=""
+    label="Scan mode"
+    value="Passive"
+  />
    
-  <div
-    class="row"
-  >
-    <profile-selector-summary-cell-stub
-      label="Spider timeout"
-      value="5 minutes"
-    />
-     
-    <profile-selector-summary-cell-stub
-      label="Target timeout"
-      value="10 seconds"
-    />
-  </div>
+  <summary-cell-stub
+    label="Spider timeout"
+    value="5 minutes"
+  />
    
-  <div
-    class="row"
-  >
-    <profile-selector-summary-cell-stub
-      label="AJAX spider"
-      value="Off"
-    />
-     
-    <profile-selector-summary-cell-stub
-      label="Debug messages"
-      value="Hide debug messages"
-    />
-  </div>
+  <summary-cell-stub
+    label="Target timeout"
+    value="10 seconds"
+  />
+   
+  <summary-cell-stub
+    label="AJAX spider"
+    value="Off"
+  />
+   
+  <summary-cell-stub
+    label="Debug messages"
+    value="Hide debug messages"
+  />
 </div>
 `;

ee/spec/frontend/on_demand_scans_form/components/profile_selector/summary_cell_spec.js

 import { shallowMount } from '@vue/test-utils';
 import OnDemandScansProfileSummaryCell from 'ee/on_demand_scans_form/components/profile_selector/summary_cell.vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('OnDemandScansProfileSummaryCell', () => {
   let wrapper;
 
   const createFullComponent = (propsData) => {
-    wrapper = extendedWrapper(
-      shallowMount(OnDemandScansProfileSummaryCell, {
-        propsData,
-      }),
-    );
+    wrapper = shallowMount(OnDemandScansProfileSummaryCell, {
+      propsData,
+    });
   };
 
-  const findValue = () => wrapper.findByTestId('summary-value');
-
   afterEach(() => {
     wrapper.destroy();
   });
@@ -28,12 +23,12 @@ describe('OnDemandScansProfileSummaryCell', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders default when value prop is undefined', () => {
+  it('renders nothing when value prop is undefined', () => {
     createFullComponent({
       label: 'Row Label',
       value: undefined,
     });
 
-    expect(findValue().text()).toContain('None');
+    expect(wrapper.html()).toBe('');
   });
 });