From 02eafd8ca7c0d2d090bac559f39b488c3e97e3af Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 12 Aug 2021 12:25:54 +0100
Subject: [PATCH] Add duplicate button

---
 .../ValidationEditor/ValidationDrawer.svelte       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
index e6a1e701b3..9f0cc1e40d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ValidationEditor/ValidationDrawer.svelte
@@ -197,6 +197,12 @@
   const removeRule = id => {
     rules = rules.filter(link => link.id !== id)
   }
+
+  const duplicateRule = id => {
+    const existingRule = rules.find(rule => rule.id === id)
+    const newRule = { ...existingRule, id: generate() }
+    rules = [...rules, newRule]
+  }
 </script>
 
 <DrawerContent>
@@ -308,6 +314,12 @@
                   {bindings}
                   on:change={e => (rule.error = e.detail)}
                 />
+                <Icon
+                  name="Duplicate"
+                  hoverable
+                  size="S"
+                  on:click={() => duplicateRule(rule.id)}
+                />
                 <Icon
                   name="Close"
                   hoverable
@@ -344,7 +356,7 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: 1fr 1fr 1fr 1fr 20px;
+    grid-template-columns: 180px 120px 1fr 1fr auto auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }