Update policy drawer to match designs

- ensure heading is h4
- update test ids to be consistent

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

@@ -72,7 +72,7 @@ export default {
     v-on="$listeners"
   >
     <template v-if="policy" #title>
-      <h3 class="gl-my-0 gl-mr-3">{{ policy.name }}</h3>
+      <h4 class="gl-my-0 gl-mr-3">{{ policy.name }}</h4>
     </template>
     <template v-if="policy" #header>
       <gl-button
@@ -92,7 +92,10 @@ export default {
           <p>
             {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
           </p>
-          <policy-yaml-editor :value="policyYaml" data-testid="default-policy-yaml-editor" />
+          <policy-yaml-editor
+            :value="policyYaml"
+            data-testid="policy-yaml-editor-default-component"
+          />
         </div>
       </gl-tab>
       <gl-tab v-if="policyComponent" title="Yaml">

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

@@ -31,7 +31,8 @@ describe('PolicyDrawer component', () => {
   const findAllTabs = () => wrapper.findAllComponents(GlTab);
   const findCiliumNetworkPolicy = () => wrapper.findComponent(CiliumNetworkPolicy);
   const findScanExecutionPolicy = () => wrapper.findComponent(ScanExecutionPolicy);
-  const findDefaultPolicyEditor = () => wrapper.findByTestId('default-policy-yaml-editor');
+  const findDefaultComponentPolicyEditor = () =>
+    wrapper.findByTestId('policy-yaml-editor-default-component');
   const findTabPolicyEditor = () => wrapper.findByTestId('policy-yaml-editor-tab-content');
 
   // Shared assertions
@@ -69,7 +70,7 @@ describe('PolicyDrawer component', () => {
     });
 
     it('renders network policy editor with manifest', () => {
-      expect(findDefaultPolicyEditor().attributes('value')).toBe(mockGenericPolicy.yaml);
+      expect(findDefaultComponentPolicyEditor().attributes('value')).toBe(mockGenericPolicy.yaml);
     });
 
     itRendersEditButton();