Remove unnecessary html from policy drawer

- unnest policy drawer elements unnecessarily
- udpate tests

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/policy_drawer_layout.vue

@@ -47,33 +47,30 @@ export default {
 
 <template>
   <div>
-    <p data-testid="policy-summary">
+    <div data-testid="policy-summary">
       <slot name="summary"></slot>
-    </p>
+    </div>
 
-    <h5 class="gl-mt-3">{{ $options.i18n.policyTypeTitle }}</h5>
-    <p data-testid="policy-type">{{ type }}</p>
+    <policy-info-row data-testid="policy-type" :label="$options.i18n.policyTypeTitle">
+      {{ type }}
+    </policy-info-row>
 
-    <p data-testid="policy-description">
-      <policy-info-row :label="$options.i18n.descriptionTitle">
-        <div v-if="description" data-testid="custom-description-text">
-          {{ description }}
-        </div>
-        <div v-else class="gl-text-gray-500" data-testid="default-description-text">
-          {{ $options.i18n.defaultDescription }}
-        </div>
-      </policy-info-row>
-    </p>
+    <policy-info-row :label="$options.i18n.descriptionTitle">
+      <div v-if="description" data-testid="custom-description-text">
+        {{ description }}
+      </div>
+      <div v-else class="gl-text-gray-500" data-testid="default-description-text">
+        {{ $options.i18n.defaultDescription }}
+      </div>
+    </policy-info-row>
 
-    <p data-testid="policy-status">
-      <policy-info-row :label="$options.i18n.statusTitle">
-        <div v-if="policy.enabled" class="gl-text-green-500" data-testid="enabled-status-text">
-          <gl-icon name="check-circle-filled" class="gl-mr-3" />{{ statusLabel }}
-        </div>
-        <div v-else class="gl-text-gray-500" data-testid="not-enabled-status-text">
-          {{ statusLabel }}
-        </div>
-      </policy-info-row>
-    </p>
+    <policy-info-row :label="$options.i18n.statusTitle">
+      <div v-if="policy.enabled" class="gl-text-green-500" data-testid="enabled-status-text">
+        <gl-icon name="check-circle-filled" class="gl-mr-3" />{{ statusLabel }}
+      </div>
+      <div v-else class="gl-text-gray-500" data-testid="not-enabled-status-text">
+        {{ statusLabel }}
+      </div>
+    </policy-info-row>
   </div>
 </template>

ee/spec/frontend/threat_monitoring/components/policy_drawer/policy_drawer_layout_spec.js

@@ -12,7 +12,7 @@ describe('PolicyDrawerLayout component', () => {
 
   const DESCRIPTION = 'This policy enforces pipeline configuration to have a job with DAST scan';
   const SUMMARY = 'Summary';
-  const TYPE = 'Policy Type';
+  const TYPE = 'Scan Execution';
 
   const findCustomDescription = () => wrapper.findByTestId('custom-description-text');
   const findDefaultDescription = () => wrapper.findByTestId('default-description-text');

ee/spec/frontend/threat_monitoring/components/policy_drawer/scan_result_policy_spec.js

@@ -6,7 +6,6 @@ import { mockScanResultPolicy } from '../../mocks/mock_data';
 describe('ScanResultPolicy component', () => {
   let wrapper;
 
-  const findDescription = () => wrapper.findByTestId('policy-description');
   const findRules = () => wrapper.findByTestId('policy-rules');
 
   const factory = ({ propsData } = {}) => {
@@ -27,16 +26,8 @@ describe('ScanResultPolicy component', () => {
       factory({ propsData: { policy: mockScanResultPolicy } });
     });
 
-    it.each`
-      component        | finder             | text
-      ${'rules'}       | ${findRules}       | ${''}
-      ${'description'} | ${findDescription} | ${'This policy enforces critical vulnerability CS approvals'}
-    `('does render the policy $component', ({ finder, text }) => {
-      const component = finder();
-      expect(component.exists()).toBe(true);
-      if (text) {
-        expect(component.text()).toBe(text);
-      }
+    it('does render the policy rules', () => {
+      expect(findRules().exists()).toBe(true);
     });
   });
 });