Add delete button for filters

[MAILPOET-3469]

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')}