From aaf7ea6d99b5e9f1f57cea92a306506f792ff052 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Mon, 7 Jun 2021 14:02:25 +0200
Subject: [PATCH] Add delete button for filters

[MAILPOET-3469]
---
 .../css/src/components-plugin/_segments.scss  | 33 +++++++++++++++++++
 assets/js/src/common/button/icon/minus.tsx    |  9 +++++
 assets/js/src/segments/dynamic/form.tsx       | 17 ++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 assets/js/src/common/button/icon/minus.tsx

diff --git a/assets/css/src/components-plugin/_segments.scss b/assets/css/src/components-plugin/_segments.scss
index 3c75025ded..1687242cf8 100644
--- a/assets/css/src/components-plugin/_segments.scss
+++ b/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;
+}
diff --git a/assets/js/src/common/button/icon/minus.tsx b/assets/js/src/common/button/icon/minus.tsx
new file mode 100644
index 0000000000..2cbb7b4292
--- /dev/null
+++ b/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 };
diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index 5f962a0549..3f0c354edf 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/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')}