Add setting button for ejecting blocks. Update manifest to show info beside relevant settings

packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { ActionButton } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+
+  export let componentInstance
+
+  let confirmDialog
+</script>
+
+<div>
+  <ActionButton secondary on:click={confirmDialog.show}>
+    Eject block
+  </ActionButton>
+</div>
+<ConfirmDialog
+  bind:this={confirmDialog}
+  title="Eject block"
+  body="Ejecting a block breaks it down into multiple components. Are you sure you want to eject this block?"
+  onOk={() =>
+    store.actions.components.requestEjectBlock(componentInstance?._id)}
+  okText="Eject block"
+/>

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}
     />
   </div>
+  {#if info}
+    <div class="text">{@html info}</div>
+  {/if}
 </div>
 
 <style>
@@ -123,4 +127,9 @@
   .control {
     position: relative;
   }
+  .text {
+    margin-top: var(--spectrum-global-dimension-size-65);
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    color: var(--grey-6);
+  }
 </style>

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")}
       <ResetFieldsButton {componentInstance} />
     {/if}
-    {#if section?.info}
+    {#if idx === 0 && componentDefinition?.block}
-      <div class="text">
+      <EjectBlockButton {componentInstance} />
-        {@html section.info}
-      </div>
     {/if}
   </DetailSummary>
 {/each}
-
-<style>
-  .text {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
-  }
-</style>

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