diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 74457b3f9c..0f3cffc4fb 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -19,16 +19,13 @@ import {
convertJSONSchemaToTableSchema,
getJSONArrayDatasourceSchema,
} from "./jsonUtils"
-import { getAvailableActions } from "components/design/PropertiesPanel/PropertyControls/EventsEditor/actions"
+import ActionDefinitions from "components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json"
// Regex to match all instances of template strings
const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
const CAPTURE_VAR_INSIDE_JS = /\$\("([^")]+)"\)/g
const CAPTURE_HBS_TEMPLATE = /{{[\S\s]*?}}/g
-// List of all available button actions
-const AllButtonActions = getAvailableActions(true)
-
/**
* Gets all bindable data context fields and instance fields.
*/
@@ -375,7 +372,7 @@ export const getButtonContextBindings = (actions, actionId) => {
// Generate bindings for any steps which provide context
let bindings = []
prevActions.forEach((action, idx) => {
- const def = AllButtonActions.find(
+ const def = ActionDefinitions.actions.find(
x => x.name === action["##eventHandlerType"]
)
if (def.context) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
similarity index 98%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
index 2361d8eb71..1f729af0c9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -9,7 +9,7 @@
ActionMenu,
MenuItem,
} from "@budibase/bbui"
- import { getAvailableActions } from "./actions"
+ import { getAvailableActions } from "./index"
import { generate } from "shortid"
import { getButtonContextBindings } from "builderStore/dataBinding"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
similarity index 96%
rename from packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
index 582a7126e7..840efca8eb 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
@@ -2,7 +2,7 @@
import { ActionButton, Button, Drawer } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { notifications } from "@budibase/bbui"
- import EventEditor from "./EventEditor.svelte"
+ import ButtonActionDrawer from "./ButtonActionDrawer.svelte"
import { automationStore } from "builderStore"
import { cloneDeep } from "lodash/fp"
@@ -67,7 +67,7 @@
Define what actions to run.
- {
+ return ActionDefinitions.actions
+ .filter(action => {
+ // Filter down actions to those supported by the current client lib version
+ if (getAllActions || !action.dependsOnFeature) {
+ return true
+ }
+ return get(store).clientFeatures?.[action.dependsOnFeature] === true
+ })
+ .map(action => {
+ // Then enrich the actions with real components
+ return {
+ ...action,
+ component: ActionComponents[action.component],
+ }
+ })
+ .filter(action => {
+ // Then strip any old actions for which we don't have constructors
+ return action.component != null
+ })
+}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
new file mode 100644
index 0000000000..28b4967d83
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@@ -0,0 +1,75 @@
+{
+ "actions": [
+ {
+ "name": "Save Row",
+ "component": "SaveRow",
+ "context": [
+ {
+ "label": "Saved row",
+ "value": "row"
+ }
+ ]
+ },
+ {
+ "name": "Duplicate Row",
+ "component": "DuplicateRow",
+ "context": [
+ {
+ "label": "Duplicated row",
+ "value": "row"
+ }
+ ]
+ },
+ {
+ "name": "Delete Row",
+ "component": "DeleteRow"
+ },
+ {
+ "name": "Navigate To",
+ "component": "NavigateTo"
+ },
+ {
+ "name": "Execute Query",
+ "component": "ExecuteQuery",
+ "context": [
+ {
+ "label": "Query result",
+ "value": "result"
+ }
+ ]
+ },
+ {
+ "name": "Trigger Automation",
+ "component": "TriggerAutomation"
+ },
+ {
+ "name": "Validate Form",
+ "component": "ValidateForm"
+ },
+ {
+ "name": "Log Out",
+ "component": "LogOut"
+ },
+ {
+ "name": "Clear Form",
+ "component": "ClearForm"
+ },
+ {
+ "name": "Close Screen Modal",
+ "component": "CloseScreenModal"
+ },
+ {
+ "name": "Change Form Step",
+ "component": "ChangeFormStep"
+ },
+ {
+ "name": "Refresh Data Provider",
+ "component": "RefreshDataProvider"
+ },
+ {
+ "name": "Update State",
+ "component": "UpdateState",
+ "dependsOnFeature": "state"
+ }
+ ]
+}
\ No newline at end of file
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
deleted file mode 100644
index 828751fb30..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { store } from "builderStore"
-import { get } from "svelte/store"
-
-import NavigateTo from "./NavigateTo.svelte"
-import SaveRow from "./SaveRow.svelte"
-import DeleteRow from "./DeleteRow.svelte"
-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"
-import CloseScreenModal from "./CloseScreenModal.svelte"
-import ChangeFormStep from "./ChangeFormStep.svelte"
-import UpdateStateStep from "./UpdateState.svelte"
-import RefreshDataProvider from "./RefreshDataProvider.svelte"
-import DuplicateRow from "./DuplicateRow.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
-// change them.
-// The client library removes any spaces when processing actions, so they can
-// be considered as camel case too.
-// There is technical debt here to sanitize all these and standardise them
-// across the packages but it's a breaking change to existing apps.
-export const getAvailableActions = (getAllActions = false) => {
- let actions = [
- {
- name: "Save Row",
- component: SaveRow,
- context: [
- {
- label: "Saved row",
- value: "row",
- },
- ],
- },
- {
- name: "Duplicate Row",
- component: DuplicateRow,
- context: [
- {
- label: "Duplicated row",
- value: "row",
- },
- ],
- },
- {
- name: "Delete Row",
- component: DeleteRow,
- },
- {
- name: "Navigate To",
- component: NavigateTo,
- },
- {
- name: "Execute Query",
- component: ExecuteQuery,
- context: [
- {
- label: "Query result",
- value: "result",
- },
- ],
- },
- {
- name: "Trigger Automation",
- component: TriggerAutomation,
- },
- {
- name: "Validate Form",
- component: ValidateForm,
- },
- {
- name: "Log Out",
- component: LogOut,
- },
- {
- name: "Clear Form",
- component: ClearForm,
- },
- {
- name: "Close Screen Modal",
- component: CloseScreenModal,
- },
- {
- name: "Change Form Step",
- component: ChangeFormStep,
- },
- {
- name: "Refresh Data Provider",
- component: RefreshDataProvider,
- },
- ]
-
- if (getAllActions || get(store).clientFeatures?.state) {
- actions.push({
- name: "Update State",
- component: UpdateStateStep,
- })
- }
-
- return actions
-}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js
deleted file mode 100644
index 8966c4ab26..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import EventsEditor from "./EventPropertyControl.svelte"
-export default EventsEditor
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index f1ace93337..e752240302 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -1,7 +1,7 @@
import { Checkbox, Select, Stepper } from "@budibase/bbui"
import DataSourceSelect from "./DataSourceSelect.svelte"
import DataProviderSelect from "./DataProviderSelect.svelte"
-import EventsEditor from "./EventsEditor"
+import ButtonActionEditor from "./ButtonActionEditor/ButtonActionEditor.svelte"
import TableSelect from "./TableSelect.svelte"
import ColorPicker from "./ColorPicker.svelte"
import { IconSelect } from "./IconSelect"
@@ -24,7 +24,7 @@ const componentMap = {
dataProvider: DataProviderSelect,
boolean: Checkbox,
number: Stepper,
- event: EventsEditor,
+ event: ButtonActionEditor,
table: TableSelect,
color: ColorPicker,
icon: IconSelect,