From 54645df16f6f169981d3160be0ae62f17941374d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 13 Dec 2021 10:55:45 +0000 Subject: [PATCH] Refactor button definitions, rename button action components and add button manifest --- .../builder/src/builderStore/dataBinding.js | 7 +- .../ButtonActionDrawer.svelte} | 2 +- .../ButtonActionEditor.svelte} | 4 +- .../actions/ChangeFormStep.svelte | 0 .../actions/ClearForm.svelte | 0 .../actions/CloseScreenModal.svelte | 0 .../actions/DeleteRow.svelte | 0 .../actions/DuplicateRow.svelte | 0 .../actions/ExecuteQuery.svelte | 0 .../actions/LogOut.svelte | 0 .../actions/NavigateTo.svelte | 0 .../actions/RefreshDataProvider.svelte | 0 .../actions/SaveFields.svelte | 0 .../actions/SaveRow.svelte | 0 .../actions/TriggerAutomation.svelte | 0 .../actions/UpdateState.svelte | 0 .../actions/ValidateForm.svelte | 0 .../ButtonActionEditor/actions/index.js | 13 +++ .../ButtonActionEditor/index.js | 33 ++++++ .../ButtonActionEditor/manifest.json | 75 +++++++++++++ .../EventsEditor/actions/index.js | 103 ------------------ .../PropertyControls/EventsEditor/index.js | 2 - .../PropertyControls/componentSettings.js | 4 +- 23 files changed, 128 insertions(+), 115 deletions(-) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor/EventEditor.svelte => ButtonActionEditor/ButtonActionDrawer.svelte} (98%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor/EventPropertyControl.svelte => ButtonActionEditor/ButtonActionEditor.svelte} (96%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/ChangeFormStep.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/ClearForm.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/CloseScreenModal.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/DeleteRow.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/DuplicateRow.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/ExecuteQuery.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/LogOut.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/NavigateTo.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/RefreshDataProvider.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/SaveFields.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/SaveRow.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/TriggerAutomation.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/UpdateState.svelte (100%) rename packages/builder/src/components/design/PropertiesPanel/PropertyControls/{EventsEditor => ButtonActionEditor}/actions/ValidateForm.svelte (100%) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/index.js create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js delete mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js 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,