diff --git a/packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte b/packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte new file mode 100644 index 0000000000..66a93975ca --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte @@ -0,0 +1,23 @@ + + +
+ + Eject block + +
+ + store.actions.components.requestEjectBlock(componentInstance?._id)} + okText="Eject block" +/> diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index 3927e0b3a5..8be770e3a0 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -20,6 +20,7 @@ export let componentBindings = [] export let nested = false export let highlighted = false + export let info = null $: nullishValue = value == null || value === "" $: allBindings = getAllBindings(bindings, componentBindings, nested) @@ -99,6 +100,9 @@ {...props} /> + {#if info} +
{@html info}
+ {/if} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte index b4c8e7abad..903ff3acdf 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte @@ -4,6 +4,7 @@ import { store } from "builderStore" import PropertyControl from "components/design/settings/controls/PropertyControl.svelte" import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte" + import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte" import { getComponentForSetting } from "components/design/settings/componentSettings" export let componentDefinition @@ -21,7 +22,6 @@ return [ { name: "General", - info: componentDefinition?.info, settings: generalSettings, }, ...(customSections || []), @@ -103,6 +103,7 @@ nested={setting.nested} onChange={val => updateSetting(setting.key, val)} highlighted={$store.highlightedSettingKey === setting.key} + info={setting.info} props={{ // Generic settings placeholder: setting.placeholder || null, @@ -124,17 +125,8 @@ {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")} {/if} - {#if section?.info} -
- {@html section.info} -
+ {#if idx === 0 && componentDefinition?.block} + {/if} {/each} - - diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 667950bf91..eb8bca7c01 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3437,7 +3437,6 @@ }, "s3upload": { "name": "S3 File Upload", - "info": "This component can't be used with S3 datasources that use custom endpoints.", "icon": "UploadToCloud", "styles": [ "size" @@ -3458,7 +3457,8 @@ { "type": "dataSource/s3", "label": "S3 Datasource", - "key": "datasourceId" + "key": "datasourceId", + "info": "This component can't be used with S3 datasources that use custom endpoints" }, { "type": "text", @@ -3496,7 +3496,6 @@ }, "dataprovider": { "name": "Data Provider", - "info": "Pagination is only available for data stored in tables.", "icon": "Data", "illegalChildren": [ "section" @@ -3542,7 +3541,8 @@ "type": "boolean", "label": "Paginate", "key": "paginate", - "defaultValue": true + "defaultValue": true, + "info": "Pagination is only available for data stored in tables" } ], "context": { @@ -3579,7 +3579,6 @@ ], "hasChildren": true, "showEmptyState": false, - "info": "Row selection is only compatible with internal or SQL tables", "settings": [ { "type": "dataProvider", @@ -3636,7 +3635,8 @@ "type": "boolean", "label": "Allow row selection", "key": "allowSelectRows", - "defaultValue": false + "defaultValue": false, + "info": "Row selection is only compatible with internal or SQL tables" }, { "type": "boolean", @@ -3677,13 +3677,13 @@ "size" ], "hasChildren": false, - "info": "Your data provider will be automatically filtered to the given date range.", "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider", - "required": true + "required": true, + "info": "Your data provider will be automatically filtered to the given date range." }, { "type": "field", @@ -3818,7 +3818,6 @@ "styles": [ "size" ], - "info": "Only the first 3 search columns will be used.", "settings": [ { "type": "text", @@ -3835,7 +3834,8 @@ "type": "searchfield", "label": "Search Columns", "key": "searchColumns", - "placeholder": "Choose search columns" + "placeholder": "Choose search columns", + "info": "Only the first 3 search columns will be used" }, { "type": "filter", @@ -3882,7 +3882,6 @@ { "section": true, "name": "Table", - "info": "Row selection is only compatible with internal or SQL tables", "settings": [ { "type": "number", @@ -3916,7 +3915,8 @@ { "type": "boolean", "label": "Allow row selection", - "key": "allowSelectRows" + "key": "allowSelectRows", + "info": "Row selection is only compatible with internal or SQL tables" }, { "type": "boolean", @@ -3983,7 +3983,6 @@ "styles": [ "size" ], - "info": "Only the first 3 search columns will be used.", "settings": [ { "type": "text", @@ -4000,7 +3999,8 @@ "type": "searchfield", "label": "Search Columns", "key": "searchColumns", - "placeholder": "Choose search columns" + "placeholder": "Choose search columns", + "info": "Only the first 3 search columns will be used" }, { "type": "filter",