1
0
Fork 0
mirror of synced 2024-06-14 00:14:39 +12:00

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

This commit is contained in:
Andrew Kingston 2021-12-13 10:55:45 +00:00
parent 8eda765246
commit 54645df16f
23 changed files with 128 additions and 115 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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