From 07553b99370eb412f5288f3dfea701325f5194cc Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 13:58:18 +0200
Subject: [PATCH 1/5] clear form action - draft

---
 .../EventsEditor/actions/index.js             |  3 ++
 packages/client/src/constants.js              |  1 +
 packages/client/src/utils/buttonActions.js    |  9 ++++++
 .../src/forms/InnerForm.svelte                | 28 +++++++++++++++++++
 4 files changed, 41 insertions(+)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index b8114461f9..2c9023714f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -42,4 +42,7 @@ export default [
     name: "Log Out",
     component: LogOut,
   },
+  {
+    name: "Clear Form",
+  },
 ]
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index e0595c0ce9..049b16801b 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -6,6 +6,7 @@ export const ActionTypes = {
   ValidateForm: "ValidateForm",
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
+  ClearForm: "ClearForm"
 }
 
 export const ApiVersion = "1"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index af4826a1c4..d7707bfb11 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -77,6 +77,14 @@ const refreshDatasourceHandler = async (action, context) => {
   )
 }
 
+const clearFormHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ClearForm
+  )
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
@@ -85,6 +93,7 @@ const handlerMap = {
   ["Trigger Automation"]: triggerAutomationHandler,
   ["Validate Form"]: validateFormHandler,
   ["Refresh Datasource"]: refreshDatasourceHandler,
+  ["Clear Form"]: clearFormHandler
 }
 
 const confirmTextMap = {
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 3a63b63bdc..55e14217e1 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -64,6 +64,13 @@
       })
       return get(formState).valid
     },
+    clear: () => {
+      const fields = Object.keys(fieldMap)
+      fields.forEach(field => {
+        const { fieldApi } = fieldMap[field]
+        fieldApi.clearValue();
+      })
+    }
   }
 
   // Provide both form API and state to children
@@ -72,6 +79,7 @@
   // Action context to pass to children
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
+    { type: ActionTypes.ClearForm, callback: formApi.clear },
   ]
 
   // Creates an API for a specific field
@@ -108,8 +116,28 @@
 
       return !newError
     }
+
+    const clearValue = () => {
+      const { fieldState } = fieldMap[field]
+      fieldState.update(state => {
+        state.value = defaultValue
+        state.error = null
+        return state
+      })
+
+      formState.update(state => {
+        state.values = { ...state.values, [field]: defaultValue }
+        delete state.errors[field]
+        state.valid = Object.keys(state.errors).length === 0
+        return state
+      })
+
+      return true
+    }
+
     return {
       setValue,
+      clearValue,
       validate: () => {
         const { fieldState } = fieldMap[field]
         setValue(get(fieldState).value, true)

From 3dbafac80647298fb375b574353f867b42d347ae Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 15:05:22 +0200
Subject: [PATCH 2/5] clear form action - adjust manifest and add settings form

---
 .../EventsEditor/actions/ClearForm.svelte     | 35 +++++++++++++++++++
 .../EventsEditor/actions/index.js             |  2 ++
 packages/standard-components/manifest.json    |  3 +-
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
new file mode 100644
index 0000000000..74eae6283c
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ClearForm"
+  )
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 2c9023714f..5ac594328f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -5,6 +5,7 @@ import ExecuteQuery from "./ExecuteQuery.svelte"
 import TriggerAutomation from "./TriggerAutomation.svelte"
 import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
+import ClearForm from "./ClearForm.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -44,5 +45,6 @@ export default [
   },
   {
     name: "Clear Form",
+    component: ClearForm
   },
 ]
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 2410ba56b5..e0603c0f0b 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1647,7 +1647,8 @@
     "hasChildren": true,
     "illegalChildren": ["section"],
     "actions": [
-      "ValidateForm"
+      "ValidateForm",
+      "ClearForm"
     ],
     "styles": ["size"],
     "settings": [

From f2c26a90c358d51cb44a188cbb2394a7c5bb64ee Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 15:22:14 +0200
Subject: [PATCH 3/5] fix lint issues

---
 .../PropertyControls/EventsEditor/actions/index.js            | 2 +-
 packages/client/src/constants.js                              | 2 +-
 packages/client/src/utils/buttonActions.js                    | 2 +-
 packages/standard-components/src/forms/InnerForm.svelte       | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 5ac594328f..bfbf97701b 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -45,6 +45,6 @@ export default [
   },
   {
     name: "Clear Form",
-    component: ClearForm
+    component: ClearForm,
   },
 ]
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 049b16801b..7204b8c951 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -6,7 +6,7 @@ export const ActionTypes = {
   ValidateForm: "ValidateForm",
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
-  ClearForm: "ClearForm"
+  ClearForm: "ClearForm",
 }
 
 export const ApiVersion = "1"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 9dd32561d7..ea29180d36 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -103,7 +103,7 @@ const handlerMap = {
   ["Validate Form"]: validateFormHandler,
   ["Refresh Datasource"]: refreshDatasourceHandler,
   ["Log Out"]: logoutHandler,
-  ["Clear Form"]: clearFormHandler
+  ["Clear Form"]: clearFormHandler,
 }
 
 const confirmTextMap = {
diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 55e14217e1..cd135c1551 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -68,9 +68,9 @@
       const fields = Object.keys(fieldMap)
       fields.forEach(field => {
         const { fieldApi } = fieldMap[field]
-        fieldApi.clearValue();
+        fieldApi.clearValue()
       })
-    }
+    },
   }
 
   // Provide both form API and state to children

From bb69f40a46cde019217d3c06a1c13f978c0203c0 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 17:01:29 +0200
Subject: [PATCH 4/5] implement review comments

---
 packages/standard-components/src/forms/InnerForm.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index cd135c1551..05ef468165 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -119,20 +119,19 @@
 
     const clearValue = () => {
       const { fieldState } = fieldMap[field]
+      const newValue = initialValues[field] ?? defaultValue;
       fieldState.update(state => {
-        state.value = defaultValue
+        state.value = newValue
         state.error = null
         return state
       })
 
       formState.update(state => {
-        state.values = { ...state.values, [field]: defaultValue }
+        state.values = { ...state.values, [field]: newValue }
         delete state.errors[field]
         state.valid = Object.keys(state.errors).length === 0
         return state
       })
-
-      return true
     }
 
     return {

From cd132ca057a4fdc6d0bec5c333af4fb16688ed36 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Mon, 26 Jul 2021 17:47:53 +0200
Subject: [PATCH 5/5] fix lint issue

---
 packages/standard-components/src/forms/InnerForm.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte
index 05ef468165..f6fadfa5cb 100644
--- a/packages/standard-components/src/forms/InnerForm.svelte
+++ b/packages/standard-components/src/forms/InnerForm.svelte
@@ -119,7 +119,7 @@
 
     const clearValue = () => {
       const { fieldState } = fieldMap[field]
-      const newValue = initialValues[field] ?? defaultValue;
+      const newValue = initialValues[field] ?? defaultValue
       fieldState.update(state => {
         state.value = newValue
         state.error = null