Implement rule removal in policy editor

This commit adds a new button into the rule builder component that
removes rule block from the policy editor.

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

@@ -120,6 +120,9 @@ export default {
       const rule = this.policy.rules[ruleIdx];
       this.policy.rules.splice(ruleIdx, 1, buildRule(ruleType, rule));
     },
+    removeRule(ruleIdx) {
+      this.policy.rules.splice(ruleIdx, 1);
+    },
     loadYaml(manifest) {
       this.yamlEditorValue = manifest;
       this.yamlEditorError = null;
@@ -233,6 +236,7 @@ export default {
           @rule-type-change="updateRuleType(idx, $event)"
           @endpoint-match-mode-change="updateEndpointMatchMode"
           @endpoint-labels-change="updateEndpointLabels"
+          @remove="removeRule(idx)"
         />
 
         <div class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5">

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_builder.vue

 <script>
-import { GlSprintf, GlForm, GlFormSelect, GlFormInput } from '@gitlab/ui';
+import { GlSprintf, GlForm, GlFormSelect, GlFormInput, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import {
   RuleTypeNetwork,
@@ -25,6 +25,7 @@ export default {
     GlForm,
     GlFormSelect,
     GlFormInput,
+    GlButton,
     PolicyRuleEndpoint,
     PolicyRuleEntity,
     'policy-rule-cidr': PolicyRuleCIDR,
@@ -131,7 +132,7 @@ export default {
 
 <template>
   <div
-    class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base px-3 pt-3"
+    class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base px-3 pt-3 gl-relative"
   >
     <gl-form inline @submit.prevent>
       <gl-sprintf :message="sprintfTemplate">
@@ -226,5 +227,13 @@ export default {
         </template>
       </gl-sprintf>
     </gl-form>
+
+    <gl-button
+      icon="remove"
+      size="small"
+      class="gl-absolute gl-top-3 gl-right-3"
+      data-testid="remove-rule"
+      @click="$emit('remove')"
+    />
   </div>
 </template>

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_spec.js

@@ -171,6 +171,16 @@ spec:
     });
   });
 
+  it('removes a new rule', async () => {
+    findAddRuleButton().vm.$emit('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAll(PolicyRuleBuilder).length).toEqual(1);
+
+    wrapper.find(PolicyRuleBuilder).vm.$emit('remove');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAll(PolicyRuleBuilder).length).toEqual(0);
+  });
+
   it('updates yaml editor value on switch to yaml editor', async () => {
     findPolicyName().vm.$emit('input', 'test-policy');
     wrapper.find("[data-testid='editor-mode']").vm.$emit('input', EditorModeYAML);

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_rule_builder_spec.js

@@ -103,6 +103,11 @@ describe('PolicyRuleBuilder component', () => {
     expect(event[0]).toEqual([RuleTypeEntity]);
   });
 
+  it('emits remove upon remove-button click', () => {
+    wrapper.find("[data-testid='remove-rule']").trigger('click');
+    expect(wrapper.emitted().remove.length).toEqual(1);
+  });
+
   it('renders only endpoint rule component', () => {
     expect(findRuleEndpoint().exists()).toBe(true);
     expect(findRuleEntity().exists()).toBe(false);