Refactor button definitions, rename button action components and add button manifest

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) {

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"
 

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.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={saveEventData}>Save</Button>
-  <EventEditor
+  <ButtonActionDrawer
     slot="body"
     bind:actions={tmpValue}
     eventType={name}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js

@@ -0,0 +1,13 @@
+export { default as NavigateTo } from "./NavigateTo.svelte"
+export { default as SaveRow } from "./SaveRow.svelte"
+export { default as DeleteRow } from "./DeleteRow.svelte"
+export { default as ExecuteQuery } from "./ExecuteQuery.svelte"
+export { default as TriggerAutomation } from "./TriggerAutomation.svelte"
+export { default as ValidateForm } from "./ValidateForm.svelte"
+export { default as LogOut } from "./LogOut.svelte"
+export { default as ClearForm } from "./ClearForm.svelte"
+export { default as CloseScreenModal } from "./CloseScreenModal.svelte"
+export { default as ChangeFormStep } from "./ChangeFormStep.svelte"
+export { default as UpdateState } from "./UpdateState.svelte"
+export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte"
+export { default as DuplicateRow } from "./DuplicateRow.svelte"

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/index.js

@@ -0,0 +1,33 @@
+import * as ActionComponents from "./actions"
+import { get } from "svelte/store"
+import { store } from "builderStore"
+import ActionDefinitions from "./manifest.json"
+
+// 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) => {
+  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
+    })
+}

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"
+    }
+  ]
+}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js

@@ -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
-}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js

@@ -1,2 +0,0 @@
-import EventsEditor from "./EventPropertyControl.svelte"
-export default EventsEditor

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,