Merge branch 'cheeks-lab-day-eject-blocks' of github.com:Budibase/budibase into form-block

.github/workflows/deploy-release.yml

@@ -69,12 +69,27 @@ jobs:
         env:
           KUBECONFIG_FILE: '${{ secrets.RELEASE_KUBECONFIG }}'
 
-      - name: Re roll the services
+      - name: Re roll app-service
         uses: actions-hub/kubectl@master
         env:
           KUBE_CONFIG: ${{ secrets.RELEASE_KUBECONFIG_BASE64 }}
         with:
-          args: rollout restart deployment proxy-service -n budibase && kubectl rollout restart deployment app-service -n budibase && kubectl rollout restart deployment worker-service -n budibase
+          args: rollout restart deployment app-service -n budibase
+
+      - name: Re roll proxy-service
+        uses: actions-hub/kubectl@master
+        env:
+          KUBE_CONFIG: ${{ secrets.RELEASE_KUBECONFIG_BASE64 }}
+        with:
+          args: rollout restart deployment proxy-service -n budibase
+
+      - name: Re roll worker-service
+        uses: actions-hub/kubectl@master
+        env:
+          KUBE_CONFIG: ${{ secrets.RELEASE_KUBECONFIG_BASE64 }}
+        with:
+          args: rollout restart deployment worker-service -n budibase
+
 
       - name: Discord Webhook Action
         uses: tsickert/discord-webhook@v4.0.0

.github/workflows/release-develop.yml

@@ -121,12 +121,26 @@ jobs:
         env:
           KUBECONFIG_FILE: '${{ secrets.RELEASE_KUBECONFIG }}'
       
-      - name: Re roll the services
+      - name: Re roll app-service
         uses: actions-hub/kubectl@master
         env:
           KUBE_CONFIG: ${{ secrets.RELEASE_KUBECONFIG_BASE64 }}
         with:
-          args: rollout restart deployment proxy-service -n budibase && kubectl rollout restart deployment app-service -n budibase && kubectl rollout restart deployment worker-service -n budibase
+          args: rollout restart deployment app-service -n budibase
+
+      - name: Re roll proxy-service
+        uses: actions-hub/kubectl@master
+        env:
+          KUBE_CONFIG: ${{ secrets.RELEASE_KUBECONFIG_BASE64 }}
+        with:
+          args: rollout restart deployment proxy-service -n budibase
+
+      - name: Re roll worker-service
+        uses: actions-hub/kubectl@master
+        env:
+          KUBE_CONFIG: ${{ secrets.RELEASE_KUBECONFIG_BASE64 }}
+        with:
+          args: rollout restart deployment worker-service -n budibase
 
       - name: Discord Webhook Action
         uses: tsickert/discord-webhook@v4.0.0

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/backend-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -20,7 +20,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@budibase/types": "1.2.44-alpha.4",
+    "@budibase/types": "1.2.44-alpha.5",
     "@techpass/passport-openidconnect": "0.3.2",
     "aws-sdk": "2.1030.0",
     "bcrypt": "5.0.1",

packages/bbui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "1.2.44-alpha.4",
+    "@budibase/string-templates": "1.2.44-alpha.5",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -69,10 +69,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "1.2.44-alpha.4",
+    "@budibase/bbui": "1.2.44-alpha.5",
-    "@budibase/client": "1.2.44-alpha.4",
+    "@budibase/client": "1.2.44-alpha.5",
-    "@budibase/frontend-core": "1.2.44-alpha.4",
+    "@budibase/frontend-core": "1.2.44-alpha.5",
-    "@budibase/string-templates": "1.2.44-alpha.4",
+    "@budibase/string-templates": "1.2.44-alpha.5",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",

packages/builder/src/builderStore/store/frontend.js

@@ -354,6 +354,16 @@ export const getFrontendStore = () => {
           return state
         })
       },
+      sendEvent: (name, payload) => {
+        const { previewEventHandler } = get(store)
+        previewEventHandler?.(name, payload)
+      },
+      registerEventHandler: handler => {
+        store.update(state => {
+          state.previewEventHandler = handler
+          return state
+        })
+      },
     },
     layouts: {
       select: layoutId => {
@@ -895,6 +905,50 @@ export const getFrontendStore = () => {
           component[name] = value
         })
       },
+      requestEjectBlock: componentId => {
+        store.actions.preview.sendEvent("eject-block", componentId)
+      },
+      handleEjectBlock: async (componentId, ejectedDefinition) => {
+        let nextSelectedComponentId
+
+        await store.actions.screens.patch(screen => {
+          const block = findComponent(screen.props, componentId)
+          const parent = findComponentParent(screen.props, componentId)
+
+          // Sanity check
+          if (!block || !parent?._children?.length) {
+            return false
+          }
+
+          // Attach block children back into ejected definition, using the
+          // _containsSlot flag to know where to insert them
+          const slotContainer = findAllMatchingComponents(
+            ejectedDefinition,
+            x => x._containsSlot
+          )[0]
+          if (slotContainer) {
+            delete slotContainer._containsSlot
+            slotContainer._children = [
+              ...(slotContainer._children || []),
+              ...(block._children || []),
+            ]
+          }
+
+          // Replace block with ejected definition
+          makeComponentUnique(ejectedDefinition)
+          const index = parent._children.findIndex(x => x._id === componentId)
+          parent._children[index] = ejectedDefinition
+          nextSelectedComponentId = ejectedDefinition._id
+        })
+
+        // Select new root component
+        if (nextSelectedComponentId) {
+          store.update(state => {
+            state.selectedComponentId = nextSelectedComponentId
+            return state
+          })
+        }
+      },
     },
     links: {
       save: async (url, title) => {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -96,11 +96,21 @@
     `./components/${$selectedComponent?._id}/new`
   )
 
+  // Register handler to send custom to the preview
+  $: store.actions.preview.registerEventHandler((name, payload) => {
+    iframe?.contentWindow.postMessage(
+      JSON.stringify({
+        name,
+        payload,
+        isBudibaseEvent: true,
+        runtimeEvent: true,
+      })
+    )
+  })
+
   // Update the iframe with the builder info to render the correct preview
   const refreshContent = message => {
-    if (iframe) {
+    iframe?.contentWindow.postMessage(message)
-      iframe.contentWindow.postMessage(message)
-    }
   }
 
   const receiveMessage = message => {
@@ -196,6 +206,9 @@
             block: "center",
           })
         }
+      } else if (type === "eject-block") {
+        const { id, definition } = data
+        await store.actions.components.handleEjectBlock(id, definition)
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte

@@ -2,7 +2,11 @@
   import { store } from "builderStore"
   import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
 
+  export let component
+
+  $: definition = store.actions.components.getDefinition(component?._component)
   $: noPaste = !$store.componentToPaste
+  $: isBlock = definition?.block === true
 
   const keyboardEvent = (key, ctrlKey = false) => {
     document.dispatchEvent(new KeyboardEvent("keydown", { key, ctrlKey }))
@@ -20,6 +24,15 @@
   >
     Delete
   </MenuItem>
+  {#if isBlock}
+    <MenuItem
+      icon="Export"
+      keyBind="Ctrl+E"
+      on:click={() => keyboardEvent("e", true)}
+    >
+      Eject block
+    </MenuItem>
+  {/if}
   <MenuItem
     icon="ChevronUp"
     keyBind="Ctrl+!ArrowUp"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte

@@ -112,6 +112,9 @@
         } else if (e.key === "Enter") {
           e.preventDefault()
           $goto("./new")
+        } else if (e.key === "e") {
+          e.preventDefault()
+          await store.actions.components.requestEjectBlock(component?._id)
         }
       } else if (e.key === "Backspace" || e.key === "Delete") {
         // Don't show confirmation for the screen itself

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {

packages/client/manifest.json

@@ -4147,6 +4147,7 @@
     }
   },
   "repeaterblock": {
+    "block": true,
     "name": "Repeater block",
     "icon": "ViewList",
     "illegalChildren": [

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,9 +19,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "1.2.44-alpha.4",
+    "@budibase/bbui": "1.2.44-alpha.5",
-    "@budibase/frontend-core": "1.2.44-alpha.4",
+    "@budibase/frontend-core": "1.2.44-alpha.5",
-    "@budibase/string-templates": "1.2.44-alpha.4",
+    "@budibase/string-templates": "1.2.44-alpha.5",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",

packages/client/src/api/api.js

@@ -1,5 +1,7 @@
 import { createAPIClient } from "@budibase/frontend-core"
-import { notificationStore, authStore, devToolsStore } from "../stores"
+import { notificationStore } from "../stores/notification.js"
+import { authStore } from "../stores/auth.js"
+import { devToolsStore } from "../stores/devTools.js"
 import { get } from "svelte/store"
 
 export const API = createAPIClient({

packages/client/src/components/Block.svelte

@@ -1,12 +1,92 @@
 <script>
-  import { getContext, setContext } from "svelte"
+  import { getContext, onDestroy, onMount, setContext } from "svelte"
+  import { builderStore } from "stores/builder.js"
+  import { blockStore } from "stores/blocks.js"
 
   const component = getContext("component")
+  const { styleable } = getContext("sdk")
 
+  let structureLookupMap = {}
+
+  const registerBlockComponent = (id, order, parentId, instance) => {
+    // Ensure child array exists
+    if (!structureLookupMap[parentId]) {
+      structureLookupMap[parentId] = {}
+    }
+    // Add this instance in this order, overwriting any existing instance in
+    // this order in case of repeaters
+    structureLookupMap[parentId][order] = instance
+  }
+
+  const eject = () => {
+    // Start the new structure with the root component
+    let definition = structureLookupMap[$component.id][0]
+
+    // Copy styles from block to root component
+    definition._styles = {
+      ...definition._styles,
+      normal: {
+        ...definition._styles?.normal,
+        ...$component.styles?.normal,
+      },
+      custom:
+        definition._styles?.custom || "" + $component.styles?.custom || "",
+    }
+
+    // Create component tree
+    attachChildren(definition, structureLookupMap)
+    builderStore.actions.ejectBlock($component.id, definition)
+  }
+
+  const attachChildren = (rootComponent, map) => {
+    // Transform map into children array
+    let id = rootComponent._id
+    const children = Object.entries(map[id] || {}).map(([order, instance]) => ({
+      order,
+      instance,
+    }))
+    if (!children.length) {
+      return
+    }
+
+    // Sort children by order
+    children.sort((a, b) => (a.order < b.order ? -1 : 1))
+
+    // Attach all children of this component
+    rootComponent._children = children.map(x => x.instance)
+
+    // Recurse for each child
+    rootComponent._children.forEach(child => {
+      attachChildren(child, map)
+    })
+  }
+
+  setContext("block", {
     // We need to set a block context to know we're inside a block, but also
     // to be able to reference the actual component ID of the block from
     // any depth
-  setContext("block", { id: $component.id })
+    id: $component.id,
+
+    // We register block components with their raw props so that we can eject
+    // blocks later on
+    registerComponent: registerBlockComponent,
+  })
+
+  onMount(() => {
+    // We register and unregister blocks to the block store when inside the
+    // builder preview to allow for block ejection
+    if ($builderStore.inBuilder) {
+      blockStore.actions.registerBlock($component.id, { eject })
+    }
+  })
+
+  onDestroy(() => {
+    if ($builderStore.inBuilder) {
+      blockStore.actions.unregisterBlock($component.id)
+    }
+  })
 </script>
 
-<slot />
+<div use:styleable={$component.styles}>
+  <slot />
+</div>

packages/client/src/components/BlockComponent.svelte

@@ -1,17 +1,21 @@
 <script>
   import { getContext } from "svelte"
   import { generate } from "shortid"
+  import { builderStore } from "../stores/builder.js"
   import Component from "components/Component.svelte"
 
   export let type
   export let props
   export let styles
   export let context
+  export let order = 0
+  export let containsSlot = false
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
   export let id
 
+  const component = getContext("component")
   const block = getContext("block")
   const rand = generate()
 
@@ -21,13 +25,22 @@
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
+    _instanceName: type[0].toUpperCase() + type.slice(1),
     _styles: {
-      normal: {
       ...styles,
+      normal: styles?.normal || {},
     },
-    },
+    _containsSlot: containsSlot,
     ...props,
   }
+
+  // Register this block component if we're inside the builder so it can be
+  // ejected later
+  $: {
+    if ($builderStore.inBuilder) {
+      block.registerComponent(id, order ?? 0, $component?.id, instance)
+    }
+  }
 </script>
 
 <Component {instance} isBlock>

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
-  import { Heading } from "@budibase/bbui"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
 
@@ -31,9 +30,7 @@
   export let cardButtonOnClick
   export let linkColumn
 
-  const { fetchDatasourceSchema, styleable } = getContext("sdk")
+  const { fetchDatasourceSchema } = getContext("sdk")
-  const context = getContext("context")
-  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -84,24 +81,48 @@
 
 {#if schemaLoaded}
   <Block>
-    <div class="card-list" use:styleable={$component.styles}>
     <BlockComponent
       type="form"
       bind:id={formId}
       props={{ dataSource, disableValidation: true }}
     >
       {#if title || enrichedSearchColumns?.length || showTitleButton}
-          <div class="header" class:mobile={$context.device.mobile}>
+        <BlockComponent
-            <div class="title">
+          type="container"
-              <Heading>{title || ""}</Heading>
+          props={{
-            </div>
+            direction: "row",
-            <div class="controls">
+            hAlign: "stretch",
-              {#if enrichedSearchColumns?.length}
+            vAlign: "middle",
-                <div
+            gap: "M",
-                  class="search"
+            wrap: true,
-                  style="--cols:{enrichedSearchColumns?.length}"
+          }}
+          styles={{
+            normal: {
+              "margin-bottom": "20px",
+            },
+          }}
+          order={0}
         >
-                  {#each enrichedSearchColumns as column}
+          <BlockComponent
+            type="heading"
+            props={{
+              text: title,
+            }}
+            order={0}
+          />
+          <BlockComponent
+            type="container"
+            props={{
+              direction: "row",
+              hAlign: "left",
+              vAlign: "middle",
+              gap: "M",
+              wrap: true,
+            }}
+            order={1}
+          >
+            {#if enrichedSearchColumns?.length}
+              {#each enrichedSearchColumns as column, idx}
                 <BlockComponent
                   type={column.componentType}
                   props={{
@@ -110,9 +131,14 @@
                     text: column.name,
                     autoWidth: true,
                   }}
+                  order={idx}
+                  styles={{
+                    normal: {
+                      width: "192px",
+                    },
+                  }}
                 />
               {/each}
-                </div>
             {/if}
             {#if showTitleButton}
               <BlockComponent
@@ -122,10 +148,11 @@
                   text: titleButtonText,
                   type: "cta",
                 }}
+                order={enrichedSearchColumns?.length ?? 0}
               />
             {/if}
-            </div>
+          </BlockComponent>
-          </div>
+        </BlockComponent>
       {/if}
       <BlockComponent
         type="dataprovider"
@@ -138,6 +165,7 @@
           paginate,
           limit,
         }}
+        order={1}
       >
         <BlockComponent
           type="repeater"
@@ -152,9 +180,9 @@
             noRowsMessage: "No rows found",
           }}
           styles={{
-              display: "grid",
+            custom: `display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`,
-              "grid-template-columns": `repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr))`,
           }}
+          order={0}
         >
           <BlockComponent
             type="spectrumcard"
@@ -171,76 +199,14 @@
               linkPeek: cardPeek,
             }}
             styles={{
+              normal: {
                 width: "auto",
+              },
             }}
+            order={0}
           />
         </BlockComponent>
       </BlockComponent>
     </BlockComponent>
-    </div>
   </Block>
 {/if}
-
-<style>
-  .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
-    margin-bottom: 20px;
-  }
-
-  .title {
-    overflow: hidden;
-  }
-  .title :global(.spectrum-Heading) {
-    flex: 1 1 auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .controls {
-    flex: 0 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 20px;
-  }
-  .controls :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
-    width: 100%;
-  }
-
-  .search {
-    flex: 0 1 auto;
-    gap: 10px;
-    max-width: 100%;
-    display: grid;
-    grid-template-columns: repeat(var(--cols), minmax(120px, 200px));
-  }
-  .search :global(.spectrum-InputGroup) {
-    min-width: 0;
-  }
-
-  /* Mobile styles */
-  .mobile {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .mobile .controls {
-    flex-direction: column-reverse;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .mobile .search {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    width: 100%;
-  }
-</style>

packages/client/src/components/app/blocks/RepeaterBlock.svelte

@@ -17,14 +17,12 @@
   export let vAlign
   export let gap
 
-  let providerId
-
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+
+  let providerId
 </script>
 
 <Block>
-  <div use:styleable={$component.styles}>
   <BlockComponent
     type="dataprovider"
     context="provider"
@@ -44,6 +42,7 @@
       <BlockComponent
         type="repeater"
         context="repeater"
+        containsSlot
         props={{
           dataProvider: `{{ literal ${safe(providerId)} }}`,
           noRowsMessage,
@@ -57,5 +56,4 @@
       </BlockComponent>
     {/if}
   </BlockComponent>
-  </div>
 </Block>

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
-  import { Heading } from "@budibase/bbui"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
 
@@ -29,9 +28,7 @@
   export let titleButtonURL
   export let titleButtonPeek
 
-  const { fetchDatasourceSchema, styleable } = getContext("sdk")
+  const { fetchDatasourceSchema } = getContext("sdk")
-  const context = getContext("context")
-  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -64,24 +61,53 @@
 
 {#if schemaLoaded}
   <Block>
-    <div class={size} use:styleable={$component.styles}>
     <BlockComponent
       type="form"
       bind:id={formId}
-        props={{ dataSource, disableValidation: true, editAutoColumns: true }}
+      props={{
+        dataSource,
+        disableValidation: true,
+        editAutoColumns: true,
+        size,
+      }}
     >
       {#if title || enrichedSearchColumns?.length || showTitleButton}
-          <div class="header" class:mobile={$context.device.mobile}>
+        <BlockComponent
-            <div class="title">
+          type="container"
-              <Heading>{title || ""}</Heading>
+          props={{
-            </div>
+            direction: "row",
-            <div class="controls">
+            hAlign: "stretch",
-              {#if enrichedSearchColumns?.length}
+            vAlign: "middle",
-                <div
+            gap: "M",
-                  class="search"
+            wrap: true,
-                  style="--cols:{enrichedSearchColumns?.length}"
+          }}
+          styles={{
+            normal: {
+              "margin-bottom": "20px",
+            },
+          }}
+          order={0}
         >
-                  {#each enrichedSearchColumns as column}
+          <BlockComponent
+            type="heading"
+            props={{
+              text: title,
+            }}
+            order={0}
+          />
+          <BlockComponent
+            type="container"
+            props={{
+              direction: "row",
+              hAlign: "left",
+              vAlign: "center",
+              gap: "M",
+              wrap: true,
+            }}
+            order={1}
+          >
+            {#if enrichedSearchColumns?.length}
+              {#each enrichedSearchColumns as column, idx}
                 <BlockComponent
                   type={column.componentType}
                   props={{
@@ -90,9 +116,14 @@
                     text: column.name,
                     autoWidth: true,
                   }}
+                  styles={{
+                    normal: {
+                      width: "192px",
+                    },
+                  }}
+                  order={idx}
                 />
               {/each}
-                </div>
             {/if}
             {#if showTitleButton}
               <BlockComponent
@@ -102,10 +133,11 @@
                   text: titleButtonText,
                   type: "cta",
                 }}
+                order={enrichedSearchColumns?.length ?? 0}
               />
             {/if}
-            </div>
+          </BlockComponent>
-          </div>
+        </BlockComponent>
       {/if}
       <BlockComponent
         type="dataprovider"
@@ -118,6 +150,7 @@
           paginate,
           limit: rowCount,
         }}
+        order={1}
       >
         <BlockComponent
           type="table"
@@ -139,70 +172,5 @@
         />
       </BlockComponent>
     </BlockComponent>
-    </div>
   </Block>
 {/if}
-
-<style>
-  .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
-    margin-bottom: 20px;
-  }
-
-  .title {
-    overflow: hidden;
-  }
-  .title :global(.spectrum-Heading) {
-    flex: 1 1 auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .controls {
-    flex: 0 1 auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 20px;
-  }
-  .controls :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
-    width: 100%;
-  }
-
-  .search {
-    flex: 0 1 auto;
-    gap: 10px;
-    max-width: 100%;
-    display: grid;
-    grid-template-columns: repeat(var(--cols), minmax(120px, 200px));
-  }
-  .search :global(.spectrum-InputGroup) {
-    min-width: 0;
-  }
-
-  /* Mobile styles */
-  .mobile {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .mobile .controls {
-    flex-direction: column-reverse;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .mobile .search {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    width: 100%;
-  }
-</style>

packages/client/src/index.js

@@ -1,5 +1,5 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore, appStore, devToolsStore } from "./stores"
+import { builderStore, appStore, devToolsStore, blockStore } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
 
@@ -32,6 +32,17 @@ const loadBudibase = () => {
   const enableDevTools = !get(builderStore).inBuilder && get(appStore).isDevApp
   devToolsStore.actions.setEnabled(enableDevTools)
 
+  // Register handler for runtime events from the builder
+  window.handleBuilderRuntimeEvent = (name, payload) => {
+    if (!window["##BUDIBASE_IN_BUILDER##"]) {
+      return
+    }
+    if (name === "eject-block") {
+      const block = blockStore.actions.getBlock(payload)
+      block?.eject()
+    }
+  }
+
   // Create app if one hasn't been created yet
   if (!app) {
     app = new ClientApp({

packages/client/src/stores/blocks.js

@@ -0,0 +1,34 @@
+import { get, writable } from "svelte/store"
+
+const createBlockStore = () => {
+  const store = writable({})
+
+  const registerBlock = (id, instance) => {
+    store.update(state => ({
+      ...state,
+      [id]: instance,
+    }))
+  }
+
+  const unregisterBlock = id => {
+    store.update(state => {
+      delete state[id]
+      return state
+    })
+  }
+
+  const getBlock = id => {
+    return get(store)[id]
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: {
+      registerBlock,
+      unregisterBlock,
+      getBlock,
+    },
+  }
+}
+
+export const blockStore = createBlockStore()

packages/client/src/stores/builder.js

@@ -84,6 +84,9 @@ const createBuilderStore = () => {
     highlightSetting: setting => {
       dispatchEvent("highlight-setting", { setting })
     },
+    ejectBlock: (id, definition) => {
+      dispatchEvent("eject-block", { id, definition })
+    },
   }
   return {
     ...store,

packages/client/src/stores/index.js

@@ -17,6 +17,7 @@ export { devToolsStore } from "./devTools"
 export { componentStore } from "./components"
 export { uploadStore } from "./uploads.js"
 export { rowSelectionStore } from "./rowSelection.js"
+export { blockStore } from "./blocks.js"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"

packages/frontend-core/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "1.2.44-alpha.4",
+    "@budibase/bbui": "1.2.44-alpha.5",
     "lodash": "^4.17.21",
     "svelte": "^3.46.2"
   }

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -77,11 +77,11 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "10.0.3",
-    "@budibase/backend-core": "1.2.44-alpha.4",
+    "@budibase/backend-core": "1.2.44-alpha.5",
-    "@budibase/client": "1.2.44-alpha.4",
+    "@budibase/client": "1.2.44-alpha.5",
-    "@budibase/pro": "1.2.44-alpha.4",
+    "@budibase/pro": "1.2.44-alpha.5",
-    "@budibase/string-templates": "1.2.44-alpha.4",
+    "@budibase/string-templates": "1.2.44-alpha.5",
-    "@budibase/types": "1.2.44-alpha.4",
+    "@budibase/types": "1.2.44-alpha.5",
     "@bull-board/api": "3.7.0",
     "@bull-board/koa": "3.9.4",
     "@elastic/elasticsearch": "7.10.0",

packages/server/src/api/controllers/static/templates/preview.hbs

@@ -56,6 +56,16 @@
         return
       }
 
+      // If this is a custom event, try and handle it
+      if (parsed.runtimeEvent) {
+        const { name, payload } = parsed
+        if (window.handleBuilderRuntimeEvent) {
+          window.handleBuilderRuntimeEvent(name, payload)
+        }
+        return
+      }
+
+      // Otherwise this is a full reload message
       // Extract data from message
       const {
         selectedComponentId,

packages/server/yarn.lock

@@ -1094,12 +1094,12 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@1.2.44-alpha.4":
+"@budibase/backend-core@1.2.44-alpha.5":
-  version "1.2.44-alpha.4"
+  version "1.2.44-alpha.5"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.2.44-alpha.4.tgz#aac2e3ed75b932f265de89cd6e96a6a98524ff0a"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.2.44-alpha.5.tgz#f564ad4cc9b5e2cf080d1f5988fc6ffec44d6621"
-  integrity sha512-xPN5ge87rg0hIcCpxmmj3/9FxMf0IBvqvA69e64knrcCpDSFaWJeXfd9O9SH5GNzwjBy4FA1NxaQz40DCXjBCw==
+  integrity sha512-RPO4h+kB6c0ivVRGSoZAOrFQFLwv8qkkS7WNjToX1AZKD1umrMQrnEwi/sldjNW6ZAKFiktZAHDyWO/Mb7AP/g==
   dependencies:
-    "@budibase/types" "1.2.44-alpha.4"
+    "@budibase/types" "1.2.44-alpha.5"
     "@techpass/passport-openidconnect" "0.3.2"
     aws-sdk "2.1030.0"
     bcrypt "5.0.1"
@@ -1178,13 +1178,13 @@
     svelte-flatpickr "^3.2.3"
     svelte-portal "^1.0.0"
 
-"@budibase/pro@1.2.44-alpha.4":
+"@budibase/pro@1.2.44-alpha.5":
-  version "1.2.44-alpha.4"
+  version "1.2.44-alpha.5"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.2.44-alpha.4.tgz#b0aee3d235be2bbccfdd6c70ed63e31e9da32c94"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.2.44-alpha.5.tgz#7ae5e593eccddb749da17df0354929eaaadc4e60"
-  integrity sha512-ITrhf3PDNlcCxCiDcOCAxUpQZr3oiYobyr9Vyk92JVxKdsrT6GBOpRSii+zZdhoz3ZEjRP9ZhfYMDpTuGnCKLg==
+  integrity sha512-lfHDUsD0dRHg/NE71i1zCzVal89ceWilnTHdJ0om3TdZ7qkqtsRUIE8/pz+NoqNAjZ13qG0p75Ue+NEjI24lAQ==
   dependencies:
-    "@budibase/backend-core" "1.2.44-alpha.4"
+    "@budibase/backend-core" "1.2.44-alpha.5"
-    "@budibase/types" "1.2.44-alpha.4"
+    "@budibase/types" "1.2.44-alpha.5"
     "@koa/router" "8.0.8"
     joi "17.6.0"
     node-fetch "^2.6.1"
@@ -1207,10 +1207,10 @@
     svelte-apexcharts "^1.0.2"
     svelte-flatpickr "^3.1.0"
 
-"@budibase/types@1.2.44-alpha.4":
+"@budibase/types@1.2.44-alpha.5":
-  version "1.2.44-alpha.4"
+  version "1.2.44-alpha.5"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.2.44-alpha.4.tgz#299092f6179c02a2eebf2c88fc35a50fba779cf4"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.2.44-alpha.5.tgz#3de49c35291e37102b018cef4dd2f553e7121c23"
-  integrity sha512-yK0NKUX+ggKYQ8hrjcyaFhdQq8x7QgXAbI6suns/xC8BodHox3ISAyc8HtZ4U0BtS8ONHg5t71xNXl0nueJYmA==
+  integrity sha512-ipOGpfUKvVnDtscujSKemTYgUMgFbmF+Sb/D5JUb58+A4vJz/F29hb5GjANv2x3Wm8BJtuG8NjhVm36rWV9kAg==
 
 "@bull-board/api@3.7.0":
   version "3.7.0"

packages/string-templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/types",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Budibase types",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/worker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "1.2.44-alpha.4",
+  "version": "1.2.44-alpha.5",
   "description": "Budibase background service",
   "main": "src/index.ts",
   "repository": {
@@ -35,10 +35,10 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/backend-core": "1.2.44-alpha.4",
+    "@budibase/backend-core": "1.2.44-alpha.5",
-    "@budibase/pro": "1.2.44-alpha.4",
+    "@budibase/pro": "1.2.44-alpha.5",
-    "@budibase/string-templates": "1.2.44-alpha.4",
+    "@budibase/string-templates": "1.2.44-alpha.5",
-    "@budibase/types": "1.2.44-alpha.4",
+    "@budibase/types": "1.2.44-alpha.5",
     "@koa/router": "8.0.8",
     "@sentry/node": "6.17.7",
     "@techpass/passport-openidconnect": "0.3.2",

packages/worker/yarn.lock

@@ -291,12 +291,12 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/backend-core@1.2.44-alpha.4":
+"@budibase/backend-core@1.2.44-alpha.5":
-  version "1.2.44-alpha.4"
+  version "1.2.44-alpha.5"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.2.44-alpha.4.tgz#aac2e3ed75b932f265de89cd6e96a6a98524ff0a"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.2.44-alpha.5.tgz#f564ad4cc9b5e2cf080d1f5988fc6ffec44d6621"
-  integrity sha512-xPN5ge87rg0hIcCpxmmj3/9FxMf0IBvqvA69e64knrcCpDSFaWJeXfd9O9SH5GNzwjBy4FA1NxaQz40DCXjBCw==
+  integrity sha512-RPO4h+kB6c0ivVRGSoZAOrFQFLwv8qkkS7WNjToX1AZKD1umrMQrnEwi/sldjNW6ZAKFiktZAHDyWO/Mb7AP/g==
   dependencies:
-    "@budibase/types" "1.2.44-alpha.4"
+    "@budibase/types" "1.2.44-alpha.5"
     "@techpass/passport-openidconnect" "0.3.2"
     aws-sdk "2.1030.0"
     bcrypt "5.0.1"
@@ -325,21 +325,21 @@
     uuid "8.3.2"
     zlib "1.0.5"
 
-"@budibase/pro@1.2.44-alpha.4":
+"@budibase/pro@1.2.44-alpha.5":
-  version "1.2.44-alpha.4"
+  version "1.2.44-alpha.5"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.2.44-alpha.4.tgz#b0aee3d235be2bbccfdd6c70ed63e31e9da32c94"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.2.44-alpha.5.tgz#7ae5e593eccddb749da17df0354929eaaadc4e60"
-  integrity sha512-ITrhf3PDNlcCxCiDcOCAxUpQZr3oiYobyr9Vyk92JVxKdsrT6GBOpRSii+zZdhoz3ZEjRP9ZhfYMDpTuGnCKLg==
+  integrity sha512-lfHDUsD0dRHg/NE71i1zCzVal89ceWilnTHdJ0om3TdZ7qkqtsRUIE8/pz+NoqNAjZ13qG0p75Ue+NEjI24lAQ==
   dependencies:
-    "@budibase/backend-core" "1.2.44-alpha.4"
+    "@budibase/backend-core" "1.2.44-alpha.5"
-    "@budibase/types" "1.2.44-alpha.4"
+    "@budibase/types" "1.2.44-alpha.5"
     "@koa/router" "8.0.8"
     joi "17.6.0"
     node-fetch "^2.6.1"
 
-"@budibase/types@1.2.44-alpha.4":
+"@budibase/types@1.2.44-alpha.5":
-  version "1.2.44-alpha.4"
+  version "1.2.44-alpha.5"
-  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.2.44-alpha.4.tgz#299092f6179c02a2eebf2c88fc35a50fba779cf4"
+  resolved "https://registry.yarnpkg.com/@budibase/types/-/types-1.2.44-alpha.5.tgz#3de49c35291e37102b018cef4dd2f553e7121c23"
-  integrity sha512-yK0NKUX+ggKYQ8hrjcyaFhdQq8x7QgXAbI6suns/xC8BodHox3ISAyc8HtZ4U0BtS8ONHg5t71xNXl0nueJYmA==
+  integrity sha512-ipOGpfUKvVnDtscujSKemTYgUMgFbmF+Sb/D5JUb58+A4vJz/F29hb5GjANv2x3Wm8BJtuG8NjhVm36rWV9kAg==
 
 "@cspotcode/source-map-consumer@0.8.0":
   version "0.8.0"