Add delete button for filters

[MAILPOET-3469]

assets/css/src/components-plugin/_segments.scss

@@ -4,6 +4,39 @@
   grid-column: span 2;
 }
 
+.mailpoet-segments-segments-section .mailpoet-grid-three-columns {
+  padding-right: 40px;
+  position: relative;
+}
+
 .mailpoet-segments-description-section .mailpoet-form-textarea textarea {
   height: 100px;
 }
+
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete {
+  align-items: center;
+  border: 1px solid #f00;
+  border-radius: 12px;
+  color: #f00;
+  cursor: pointer;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  margin-top: -11px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  width: 20px;
+}
+
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete svg {
+  fill: currentColor;
+  height: 12px;
+  width: 12px;
+}
+
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete:hover,
+.mailpoet-segments-segments-section .mailpoet-form-segment-delete:focus {
+  background: #f00;
+  color: #fff;
+}

assets/js/src/common/button/icon/minus.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const MinusIcon = (
+  <svg viewBox="0 0 24 24">
+    <path d="M20 14H4V10H20V14Z" />
+  </svg>
+);
+
+export { MinusIcon };

assets/js/src/segments/dynamic/form.tsx

@@ -13,6 +13,7 @@ import { FilterSeparator } from './filter_separator';
 import { SubscribersCounter } from './subscribers_counter';
 import { FormFilterFields } from './form_filter_fields';
 import { isFormValid } from './validator';
+import { MinusIcon } from '../../common/button/icon/minus';
 import plusIcon from '../../common/button/icon/plus';
 
 import {
@@ -101,6 +102,22 @@ export const Form: React.FunctionComponent<Props> = ({
           {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
             <>
               <Grid.ThreeColumns>
+                {filterRows.length > 1 && (
+                  <a
+                    href={undefined}
+                    className="mailpoet-form-segment-delete"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      const filters = segment.filters;
+                      filters.splice(index, 1);
+                      updateSegment({
+                        filters,
+                      });
+                    }}
+                  >
+                    {MinusIcon}
+                  </a>
+                )}
                 <Select
                   dimension="small"
                   placeholder={MailPoet.I18n.t('selectActionPlaceholder')}